Примеры использования SC v5

[s0rr0w]

В архиве лежат примеры использования SC в разработке интерфейсов.

По мере добавления новых примеров архив будет обновляться.

Примеры

sc_samples.zip

Внимание пользователям Google Chrome!

В данном браузере просмотр примеров с локального диска невозможен из-за проблем разработчиков с безопасностью. Если есть острое желание просмотреть примеры именно в Chrome, то вам необходимо выложить файлы на веб-сервер или же запустить браузер с параметром --allow-file-access-from-files

Edited July 11, 2011 by s0rr0w

[s0rr0w]

Пример №1. Табы.

Дабы не брать примитивные статические примеры, я решил приблизить создание интерфейсных решений к реальности. Для этого я выбрал XML+XSLT. XML легко описывает нужные структуры, а XSLT помогает понять автоматизацию процессов неких абстрактных систем, и, соответственно, показать преимущества технологии «StateController».

Сложность последующих примеров будет расти, чтобы показать трудозатраты на модификацию кода.

Итак, у нас есть некая структура данных, которая описывает модули управления правами системы.

<modules>
	<module>
		<id>идентификатор модуля</id>
		<name>имя модуля</name>
		<desc>описание</desc>
		<content>
			<text>контент</text>
		</content>
		<visual>визуальные данные</visual>
	</module>
</modules>

Структура HTML для функционирования табов будет простой

<div id="tabContainer">
	<div id="tabSwitchBox" class="tabSwitchBox"></div>
	<div id="tabSwitchPlate" class="tabSwitchPlate"></div>
</div>

Каждый переключатель таба у нас будет ссылкой, каждый контейнер для контента - div'ом.

Дабы не проходить два раза по списку модулей, переключатель таба мы расположим рядом с контетом таба.

Дальше активируем табы

SC.launch( 
		{ move: { c: "tabSwitchPlate", data: { cntnr: "tabSwitchBox" } } }, 
		{ click : { v: <xsl:value-of select="//modules/module[1]/id"/>, c: "tabSwitchBox" } } 
);

Запустим два события: "move" и "click".

Событие "move" запускаем в контейнере "tabSwitchPlate", в качестве параметра запуска события передадим контейнер, в который нужно перенести ноды: "tabSwitchBox". SC обойдет все ноды, если нода имеет обработчик, который реагирует на событие "move", то функция будет выполнена. Таким образом нужные нам переключатели таба переедут в другой контейнер.

Событие "click" нужно нам для активации первого таба. Генерируем событие, которому присваиваем значение id первого модуля, и запускаем его среди переключателей табов.

Ниже описана функция, которая срабатывает при нажатии на переключатель таба.

var activateTab = function ( id, visual ) {
	try {
		SC.launch( 
			{ tab: { v: id, c: "tabContainer", p: "childNodes", d: 2 } },  
			{ visual: { v: visual, c: "tabContainer", p: "parent" } }
		);
	} catch ( e ) {}; 
};

Тут у нас тоже два события. Первое производит активацию нужного нам таба, второе - делает визуальные эффекты. В данном случае, это смена цвета бордюра у табов и контейнера с контентом.

Итак, мы устанавливаем значение событию "tab" равное идентификатору модуля, потом запускаем событие в контейнере "tabContainer", событие распространяется на детей на глубину в 2 уровня. Т.е. обходчик нод проверит контейнер "tabContainer", потом два контейнера "tabSwitchBox" и "tabSwitchPlate", и всех их детей.

Для переключателей табов будет активирован тот, у которого значение в параметре обработчика совпадет со значением события "tab". Соответственно, у контейнеров с контентом будет показан активный контейнер.

Событие "visual" распространяется только на контейнер "tabContainer", так как параметр "p" установлен в "parent". Этому контейнеру будет присвоен класс, который указан как значение события "visual".

Теперь рассмотрим недостатки данного кода:

* Мы используем слишком много идентификаторов для работы кода

* В функции activateTab "зашиты" идентификаторы, что не позволяет использовать более гибко данный код.

* Желательно использовать дополнительную структуру XML, которая будет заниматься визуализацией компонента таба, чтобы вынести код в отдельный компонент.

В следующем примере постараемся исправить данные недостатки, чтобы более универсализировать код.

[s0rr0w]

Пример №2. Сортировка таблицы.

В этом примере будет рассмотрено несколько приемов, которые можно использовать в работе со StateController'ом:

• Передача дополнительных параметров с запускаемым событием
  
• Уровни запуска событий
  
• Работа с дополнительными состояниями
  

Как всегда, используется XML и XSL

Что же происходит, когда мы нажимаем на заголовок таблицы? Выполняется функция sortIt, которая не делает ничего другого, кроме запуска события sort. В качестве значения события передается тип данных для сортировки: по названию книги, по имени автора и так далее.

SC.launch( { sort: { v: sortBy, c: "sortingObj", p: "TH,TBODY" } } );

Эту строку можно прочитать следующим образом: необходимо запустить событие сортировки sort, сортировать будем по sortBy внутри контейнера sortingObj, при этом события должны получить теги TH и TBODY

Для TH у нас назначен обработчик switch_sorting_method, который будет выполнен при запуске события sort, и на момент исполнения ему будет переданы дополнительные аргументы: тип данных для сортировки и имена классов, которые будут присвоены, если будет активирована сортировка в данном столбце.

Обработчик switch_sorting_method выполняет ряд нехитрых действий: проверяет, совпадает ли значение события с собственным значением порядка сортировки. Если совпадает, то, в зависимости какой именно порядок присвоен, инвертирует или изначально присваивает имя класса. Если не совпадает, то удаляет класс. Одновременно с этим запоминается значение порядка сортировки sortOrder. Этот параметр будет использоваться последующими обработчиками.

Обработчик sort_data_rows, который присвоен TBODY, делает следующее: сначала собираем данные для сортировки, потом сортируем по порядку сортировки: ascending или descending, а потом переставляем строки таблицы в нужном порядке. Самое интересное, что этому обработчику все равно, по какому параметру будет произведена сортировка. Главное для него - получить массив объектов структуры

{ val: "someValue", node: sortedNodeReference }

где val это значение, по которому будет производиться сортировка, а sortedNodeReference это ссылка на ноду, которая будет переставляться в процессе сортировки (в нашем случае это TR).

Как же наполняется массив для сортировки? Генерируется событие collect. Событие распространяется на дочерние элементы у ноды TBODY, и вместе с событием передаются дополнительные параметры

data: { sortArr: sortArr, type: stVal }

где sortArr - ссылка на массив с данными для сортировки, а type - тип собираемых данных для сортировки (автор, название книги и т.д.).

Каждая строка таблицы TR реагирует на событие collect и выполняет обработчик collect_sort_row. Этот обработчик присваивает параметр node в структуре сортируемых данных, но не хватает еще значения сортируемых данных. У нас есть тип данных для сортировки, и он нам может помочь. Мы запускаем еще раз событие collect, но не простое, а с конкретным уровнем запуска, который будет равен типу собираемых данных.

На последнее событие collect среагируют только те обработчики, у которых совпадет уровень запуска события.

Дабы понять эту многоходовку, приведу другой, более простой пример. Вы должны собрать ФИО всех детей в многоквартирном доме. Вы заходите в каждую квартиру и говорите, ести ты ребенок, то назови свое ФИО. Каждый человек может назвать свое ФИО, но на данный запрос ответят только дети.

В следующем примере я изменю код HTML, чтобы посмотреть, какое количество переделок потребуется при данном подходе.

[s0rr0w]

Добавлены примеры работы с динамическими формами: SCDemo.zip

Материал подается в виде пошаговой реализации.

В первом шаге описана структура кода, которая будет вопрощена в дальнейшем в HTML и CSS, и с которой будет работать JS

Второй шаг содержит HTML-заготовку

Третий описывает процесс оживления табов и сохранения данных на первом и последнем табах

На четвертом шаге будет оживлена генерация таблицы из json-данных

Пятый шаг описывает процесс добавления функций редактирования

На шестом шаге динамические данные собираются в json, для возврата на сервер

Edited September 10, 2012 by s0rr0w