Jump to content
  • 0

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


s0rr0w
 Share

Question

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

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

Примеры

sc_samples.zip

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

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

Edited by s0rr0w
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Пример №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, которая будет заниматься визуализацией компонента таба, чтобы вынести код в отдельный компонент.

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

Link to comment
Share on other sites

  • 0

Пример №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, чтобы посмотреть, какое количество переделок потребуется при данном подходе.

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

Edited by s0rr0w
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy