Демонстрация возможностей

[s0rr0w]

ТЗ

Создать модуль табов, который бы удовлетворял следующим условиям:

1. Активатор табов может быть любая HTML-структура с произвольным набором стилей

2. Блок с данными представляет собой любую HTML структуру.

3. Выборочные блоки с данными имеют хэлп-блоки, расположенные в другом месте кода.

4. Все блоки в коде должны идти порционно: активатор + блок с данными + хэлп

5. Хэлп блоки могут содержать ссылки, которые будут показывать связанные хэлп-блоки из уже имеющихся.

6. В хэлп-блоках могут содержаться ссылки, которые переключают на нужный таб контент.

Вот такое простое задание. Реализуйте любым методом с помощью любого фреймворка.

[Павел Билькис]

можешь напомнить, модуль табов - это что?

[s0rr0w]

Закладки.

[s0rr0w]

На создание скриптовой части мне понадобилось примерно 10 минут, на создание рыбы и функционала - около 15 минут, на доводку стилей - 10 минут.

Sample6.zip

При этом я использовал в виде copy/paste уже готовые куски кода, которые были описаны в примере №4.

[s0rr0w]

rash

Ты спрашивал, а в чем собственно я вижу преимущества?

А вот они. За два дня никто не сделал того, что я сделал менее чем за час. И не потому что лень или еще что, потому что сложность изготовления достаточно высока для "обычных" способов.

Следующая демонстрация, я сделаю интерфейс для почтовика по типу гмэйла. В ограниченном конечно же виде, но все же.

[IceBars]

http://ifolder.ru/10635388

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

Дизайн не лучший, но я не дизайнер, а программер и верстальщик(не являюсь, но стремлюсь ).

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

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

Ps: как заливать файлы на форум?

Edited February 19, 2009 by IceBars

[homm]

rash

Ты спрашивал, а в чем собственно я вижу преимущества?

А вот они. За два дня никто не сделал того, что я сделал менее чем за час.

Я сделал менее чем за час то, что никто не смог сделать за дня! Я пукнул в воду!

И не потому что лень или еще что, потому что сложность изготовления достаточно высока для "обычных" способов.

Есть мир реальный, а есть проекция реального мира на больной мозг конкретного индивидуума. Данный вывод — явный результат проекции

IceBars, s0rr0w — Всё не то. Слишком сложно и не очевидно. Код смешан, в js задается css, в html логика. Можно намного чище и интуитивнее сделать.

[s0rr0w]

Я сделал менее чем за час то, что никто не смог сделать за дня! Я пукнул в воду!

Поздравляю!

Есть мир реальный, а есть проекция реального мира на больной мозг конкретного индивидуума. Данный вывод — явный результат проекции

Есть понятие стимулирование к действию. Если человеку интересно проверить свои силы - он сделает.

IceBars, s0rr0w — Всё не то. Слишком сложно и не очевидно. Код смешан, в js задается css, в html логика. Можно намного чище и интуитивнее сделать.

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

В том, что код смешан, не вижу ничего плохого. Наоборот, отделяя код возникает другая крайность - ничего не понятно. Дебаг таких скриптов превращается в длительное и утомительное занятие. Если пройдет время, то ситуация только усугубится, потому что нужно будет разбираться в коде нескольких файлов одновременно.

В js задаются ключевые классы, такие как hiddenBlock. Никаких проблем не составляет вынести название этих классов в обработчики. Обработчики ведь можно делать какие угодно.

А вот насчет логики в HTML - это несоизмеримый плюс.

Снова приведу пример

<div cass="menuBox"><b class="menuItem"><span class="menuTitle">Menu Item 1</span></b></div>

Без открытия постороннего файла вы никогда в жизни не догадаетесь, какое значение имеют данные элементы

Теперь смотрим

<div cass="menuBox" SC="sc_set_onclick:init_menu:activateMenuOptions:1"><b class="menuItem" SC="sc_set_onclick:init_menu:activateMenu:1|sc_activate_menu:activate:1:activationClass"><span class="menuTitle">Menu Item 1</span></b></div>

Я вам могу рассказать всю логику работы данного элемена

1. menuBox является перключателем свойств опций для меню. Его обработчик, activateMenuOptions, будет установлен при возникновении события init_menu

2. menuItem будет активатором меню, его обработчик, activateMenu, будет установлен при том же событии init_menu. Этот же элемент будет реагировать на событие активации меню activate, ему будет установлен класс, который будет указывать на признак активности (activationClass).

Теперь подумайте, вы узнали все про элемент, взглянув на код, или вам придется копаться еще в немаленьком JS файле, только для того, чтобы примерно понять, как это работает.

Если я не хочу, чтобы элемент был активным пунктом меню, достаточно убрать с него один обработчик. Что нужно сделать, чтобы убрать обработчик с элемента в случае ненавязчивого JS? Колдовать с кодом?

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

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

Edited February 19, 2009 by s0rr0w

[s0rr0w]

Писал писал, но не уверен, что предыдущий пост ко мне относился.

[IceBars]

2 Homm: переделал javascript, вот http://websave.mediaring.ru/21569

	 function smdiz(x) {

  for(i=1;i<4;i++) {
stardiz(i);
  }

str="pm"+x;
str2="sl"+x;

document.getElementById(str).className="pnkmenu2";
document.getElementById(str2).className="sl1";
	  };//КОНЕЦ Ф-ИИ


	  function stardiz(x) {
str="pm"+x;
str2="sl"+x;
document.getElementById(str).className="pnkmenu1";
document.getElementById(str2).className="sl2";
	  };//КОНЕЦ Ф-ИИ

	  function pokhlp() {
document.getElementById("hlp32").className="hlp31";
document.getElementById("hlp31").className="hlp32";
	  };//КОНЕЦ Ф-ИИ

вроде чисто

Edited February 19, 2009 by IceBars

[s0rr0w]

IceBars, заказчик захотел видеть табы разного цвета со своими специфическими иконками. Как решать будете?

[IceBars]

IceBars, заказчик захотел видеть табы разного цвета со своими специфическими иконками. Как решать будете?

Иконки img вставлю, для разного цвета разные классы задам. В вашем примере это не решено.

Edited February 19, 2009 by IceBars

[s0rr0w]

Иконки img вставлю, для разного цвета разные классы задам. В вашем примере это не решено.

Сделайте модификации в коде.

Для моего кода все просто

<h3 SC="sc_move_node:move:tabSwitchBox|sc_set_menu_action:move:activateMenu:1|sc_ap

ply_class_by_id:menu:1:active--allowNonDirect">Menu 1</h3>

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

IceBars, вы не выполнили полностью условия задания.

4. Все блоки в коде должны идти порционно: активатор + блок с данными + хэлп

5. Хэлп блоки могут содержать ссылки, которые будут показывать связанные хэлп-блоки из уже имеющихся.

Если показан хэлп блока 1, то при нажатии на ссылку нужно показать хэлп блока 1 + хэлп блока 2.

[Павел Билькис]

s0rr0w, я не понимаю - чего вы так выпендриваетесь и хвастаетесь своим якобы "крутым" кодом? По моему зря вы пропагандируете js в html и html в js. Скажите, чем удобна ваша технология? Она быстрей работает? Она меньше по коду? Я могу привести пример который в полтора раза уменьшит код. К примеру нам надо, чтоб при клике на любую ссылку открывалось окно со страницей, на которую ссылается эта ссылка. Как это делается на jQuery:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(){
   var url = $(this).attr('href');
   window.open(url, 'new_win', 'width=1000,height=600');
   return false;
  });
});
</script>
</head>
<body>
<a href="http://yandex.ru">Yandex</a><br>
<a href="http://google.com">Google</a><br>
<a href="http://yahoo.com">Yahoo</a><br>
</body>
</html>

Как это делается на обычном js:

<html>
<head>
<script type="text/javascript">
function openWin(url)
 {
   window.open(url, 'new_win', 'width=800,height=600');
   return false;
 }
</script>
</head>
<body>
<a href="http://yandex.ru" onclick="openWin('http://yandex.ru')">Yandex</a><br>
<a href="http://google.com" onclick="openWin('http://google.com')">Google</a><br>
<a href="http://yahoo.com" onclick="openWin('http://yahoo.com')">Yahoo</a><br>
</body>
</html>

Видите разницу? А теперь скажите как бы сделали на своем хваленом SC?

Edited February 23, 2009 by -=PSU=-

[s0rr0w]

s0rr0w, я не понимаю - чего вы так выпендриваетесь и хвастаетесь своим якобы "крутым" кодом? По моему зря вы пропагандируете js в html и html в js.

Я пропагандирую здравый смысл.

Здравый смысл мне подсказывает, что идея жесткого разграничения JS и HTML не дает позитивных плодов в долгосрочной перспективе.

Я проверил эту теорию на практике, спасибо, больше не надо.

Скажите, чем удобна ваша технология?

Простотой использования и простотой модификации. Последнее более важно, особенно для коммерческих проектов.

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

Она быстрей работает? Она меньше по коду? Я могу привести пример который в полтора раза уменьшит код. К примеру нам надо, чтоб при клике на любую ссылку открывалось окно со страницей, на которую ссылается эта ссылка. Как это делается на jQuery:

Этот подход требует меньше усилий на то, чтобы понять

а) что тут происходит

б) что нужно подправить, чтобы код удовлетворял новым условиям.

Видите разницу? А теперь скажите как бы сделали на своем хваленом SC?

А почему нужно использовать столь много кода самого фреймворка для такой примитивной задачи? Давайте усложним условие, и, мало того, будем его постоянно менять (ведь это постоянно происходит в любом продукте, который динамично развивается). На статичной задаче я не смогу доказать вам превосходство той или иной технологии. Давайте возьмем динамическую задачу, условия которой постоянно меняются.

Напишите что-то посложнее, чем детский примерчик, например валидацию формы на две проверки - не пусто и одинаковость ввода двух полей.

Мне тяжело это сделать самому, так как у меня выйдет все равно SC.

[Павел Билькис]

———

удалено павлом билькисом

Edited February 23, 2009 by -=PSU=-

[Yarik Voronov]

Ну мне лично идея SC нравиться. Хотя она и не лишена недостатков. Один из них насколько я понял после изучения манула - это невозможность задать одни и те же имена состояний для разных объектов, даже для разных экземпляров одного и того же класса. Хотя слова "объекты и классы" в контексте SC употреблять было бы несколько ошибочно. Так как здесь в большинстве своем идет программирование процедур, без инкасуляции конкретных методов: на команду "голос!" хотелось бы чтобы собака лаяла, а кошка - мяукала)

То есть, проще говоря, надо набраться фантазии и блокнотиков чтобы не забыть и не перепутать имена состояний и их обработчики. На мой взгляд такая проблема решается просто - объект globalStateController можно сделать двумерным: globalStateController.[AbstractObjectName].States={"state_name":"state_val"}.

Я пропагандирую здравый смысл.

Здравый смысл мне подсказывает, что идея жесткого разграничения JS и HTML не дает позитивных плодов в долгосрочной перспективе.

Я проверил эту теорию на практике, спасибо, больше не надо.

Простотой использования и простотой модификации. Последнее более важно, особенно для коммерческих проектов.

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

Напишите что-то посложнее, чем детский примерчик, например валидацию формы на две проверки - не пусто и одинаковость ввода двух полей.

Мне тяжело это сделать самому, так как у меня выйдет все равно SC.

s0rr0w, Вы просили что-то нетревиальное. Предлагаю. Мне просто интересно как это будет реализовано в SC. Свою реализацию прикрепил.

Итак, тазик.

1. Создаем две формы. В первой одно поле типа текст для ввода адреса электронной почты. Во второй, два поля: одно типа текст ("логин"), другое типа пароль ("пароль"). Каждая из форм содержит кнопку типа "сброс" и типа "сабмит". Создаем контейнер вверху страницы для системных уведомлений (например, div)

2. Каждая форма проверяется по нажитию кнопки сабмит своим валидатором (можно одним и тем же) на пусто не пусто в каждом поле. Все поля конкретной формы обязательны к заполнению.

3. Логика по нажатию кнопки "сабмит": если в какой либо форме найдены ошибки - должен быть выведен системный алерт со списком всех ошибок, поля с ошибками должны быть подсвечены, область системных уведомлений должна быть очищена. Данные на сервер не должны быть отправлены.

Соответственно если в данный момент подсвечены поля другой формы они должны быть переведены в обычное сотояние. Данные не должны быть сброшены.

Если ошибок не найдено в области системных уведомлений должно быть выведено уникальное объявление (Например: "Форма 1 Ошибок не найдено"). Данные проверенной формы на сервер не отправляются. Если подсвечены поля другой формы они должны остаться подсвеченными.

4. По нажатию кнопки "сброс" поля конкретной формы очищаются, область системных уведомлений очищается, если поля формы подсвечены, то они переводятся в обычное состояние.

Моя реализация основана на применении технологии Observer - Mediator - Controller. Когда-то читал сабж на сайте Артемия Лебедева "Слабое связывание компонентов в JavaScript. Произвольные события". В кратце суть технологии. В процессе выполнения задачи каждый объект может иметь несколько состояний. Эти состояния именуются. Как только к-л состояние возникает, вызывается метод notify() данного объекта, который оповещает всех подписавшися (observers) на это состояние данного объекта. Mediator - отдельный программный код подписки для каждой конкретной ситуации.

Лан, тут все пишут сколько на это ушло времени... В данном случае 3 минуты. На продумывание "тазика" - 15 минут. Ессно дело все это без учета того, что основные классы были мной оформлены и переработанны более полугода назад.

OI.utf8.rar

[s0rr0w]

Ну мне лично идея SC нравиться. Хотя она и не лишена недостатков. Один из них насколько я понял после изучения манула - это невозможность задать одни и те же имена состояний для разных объектов, даже для разных экземпляров одного и того же класса.

Открою секрет, более одного экземпляра класса нет практической необходимости использовать. Я не могу себе даже представить ситуацию, когда понадобится такое.

Хотя слова "объекты и классы" в контексте SC употреблять было бы несколько ошибочно. Так как здесь в большинстве своем идет программирование процедур, без инкасуляции конкретных методов: на команду "голос!" хотелось бы чтобы собака лаяла, а кошка - мяукала)

Именно это нужно в интерфейсах. Есть кнопка, на ее нажатие должна быть реакция. У одного модуля одна, у другого - другая.

Есть конечно и недостатки. Куда без них. Нежелательно "натравливать" обходчик дерева на слишком большое количество нод. Там можно еще дополнительно слегка прооптимизировать, но этим буду заниматься как станет немного свободнее на работе.

То есть, проще говоря, надо набраться фантазии и блокнотиков чтобы не забыть и не перепутать имена состояний и их обработчики.

А вот и не обязательно. Я не зря писал в самом первом абзаце, что установка состояния не зависит от обходчика.

Представьте себе таббер.

У нас есть состояние активации таба. Например activateTab.

Нажимаем на таб, срабатывает onclick-обработчик, который сначала установит значение activateTab в нужное значение, пусть это будет 1.

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

Каждый таб посмотрит, я первый таб, значения состояния 1, значит мне нужно сменить класс или еще что-то, чтобы активизироваться. Второй таб поймет, что он неактивный, и деактивизируется. И так далее.

Теперь помещаем в один из контейнеров такой же таббер. Нам незачем создавать новое имя состояния, так как можно спокойно взять activateTab. Почему? По причине того, что мы жестко ограничили контейнеры и глубину обхода дерева нод верхнего таббера.

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

Это один инпут из 10-ти очищаемых

<input sc="1*sc_cleanup:cleanup" type="text">

А это из тех уникальных двух

<input sc="1*sc_cleanup:cleanup|10*sc_cleanup:cleanup" type="hidden">

А потом запускаем обход дерева, устанавливать значение переменной состояния не обязательно

Этот обходчик очистит два инпута

GSC_launch( "formContainer", "cleanup", { levels: 1 });

А этот только один

GSC_launch( "formContainer", "cleanup", { levels: 10 });

Вуаля!

1. Создаем две формы. В первой одно поле типа текст для ввода адреса электронной почты. Во второй, два поля: одно типа текст ("логин"), другое типа пароль ("пароль"). Каждая из форм содержит кнопку типа "сброс" и типа "сабмит". Создаем контейнер вверху страницы для системных уведомлений (например, div)

2. Каждая форма проверяется по нажитию кнопки сабмит своим валидатором (можно одним и тем же) на пусто не пусто в каждом поле. Все поля конкретной формы обязательны к заполнению.

3. Логика по нажатию кнопки "сабмит": если в какой либо форме найдены ошибки - должен быть выведен системный алерт со списком всех ошибок, поля с ошибками должны быть подсвечены, область системных уведомлений должна быть очищена. Данные на сервер не должны быть отправлены.

Соответственно если в данный момент подсвечены поля другой формы они должны быть переведены в обычное сотояние. Данные не должны быть сброшены.

Если ошибок не найдено в области системных уведомлений должно быть выведено уникальное объявление (Например: "Форма 1 Ошибок не найдено"). Данные проверенной формы на сервер не отправляются. Если подсвечены поля другой формы они должны остаться подсвеченными.

4. По нажатию кнопки "сброс" поля конкретной формы очищаются, область системных уведомлений очищается, если поля формы подсвечены, то они переводятся в обычное состояние.

Лан, тут все пишут сколько на это ушло времени... В данном случае 3 минуты. На продумывание "тазика" - 15 минут. Ессно дело все это без учета того, что основные классы были мной оформлены и переработанны более полугода назад.

Посмотрите на пример #7 в соседней ветке.

http://forum.htmlbook.ru/index.php?showtopic=12604

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

P.S. Посмотрите дату создания примера

[Yarik Voronov]

Посмотрите на пример #7 в соседней ветке.

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

Посмотрел. но немного не то, что хотелось бы увидеть. Видимо я сам плохо разъяснил, что нужно. Объясняю в чем подвох моего ТЗ. SC однозначно имеет преимущество когда нужно работать динамически со статичным контентом (набором элементов дерева полученных один раз при загрузке страницы). Но мне не понятно как SC поведет себя при работе динамически с динамическим контентом.

Например, расширим ТЗ таким образом:

1. Форма авторизации. после успешной проверки данные должны быть переданы AJAX на сервер. Полученный ответ может быть трех типов: ок + резюме по пользователю + кукер, false (авторизация не удалась), bun + причина отказа. Первый тип ответа должен быть выведен в правой части страницы в виде таблицы (имя, ник, дата регистрации, последний раз был). Второй тип ответа должен быть выведен как системный алерт с активацией формы авторизации (активация предполает все уже описанные действия со второй формой) Третий тип ответа должен быть размещен в области системных сообщений с изменением цвета фона. Форма должна быть очищена (или заменена на кнопку "Logout" - для усложнения) при успешной авторизации.

2. Форма подписки. Если пользователь залогинился - просто подписать на данный контент, отправив методом AJAX уникальный идентификатор контента. Если пользователь не авторизован - предложить авторизоваться, выведя системный алерт с сообщением и активировав форму авторизации. примечание: проверка на авторизованность проверяется наличаем или отсутствием кукера с определенным заранее именем (или динамически определенным - если хочется усложнить)

И наверно хватит "расширений". Все эти расширения реализовывать на SC я не предлагаю. Просто поясняю свой "угол зрения", с которого рассматривал пример 7 и все другие: то что ноды (формы) могут не быть размещены в одном контейнере; то что системный алерт может быть заменен на его эмуляцию html; сколько уникальных обработчиков событий надо внедрить; нужно ли переписывать валидатор форм в каждом конкретном случае (состояние окружающих нодов и произошедших событий); сколько имен состояний надо определить; сколько нодов и их атрибутов sc потребуется переписать вручную.

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

Хочу акцентировать: я не пытаюсь доказать что SC плох. я пытаюсь определить его возможности.

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

А если следует во втором таббере показать по нажатию на к.-л. таб тот контент, который зависит от состояния первого таббера?

>>В SC насколько я понял после изучения манула невозможно (возможно - но... см. абзац выше. прим. автора) задать одни и те же имена состояний для разных объектов. SC в большинстве своем предполагает программирование процедур, без инкасуляции конкретных методов, т.е. на команду "голос!" хотелось бы чтобы собака лаяла, а кошка - мяукала

Именно это нужно в интерфейсах. Есть кнопка, на ее нажатие должна быть реакция. У одного модуля одна, у другого - другая.

Что-то не понятно, что имелось в виду под "Именно это нужно в интерфейсах". Если программирование процедур, без инкасуляции конкретных методов, то привожу свои рассуждения.

А зачем собственно нужны разные названия методов для операций одного типа? У таббера есть метод "открыть" (показать вкладку) у коментария есть метод "открыть" (показать содержимое), у галереи картинок есть метод "открыть" (показать соответствующую картинку крупным планом). Примечание: галерея, таббер, коментарий существуют одновременно на странице. Понятнее реализовать на мой взгляд типизированный интерфейс. В обыденной жизни мы же говорим "открыть холодильник", "открыть дверь", "открыть кран с водой", "открыть пакет сока", предполагая под этим совершенно разные действия, с разными условиями окружающего мира в конкретный момент времени. С точки зрения ООП: [Холодильник].открыть(); [Кран с водой].открыть(); [Пакет сока].открыть(); [Дверь].открыть();

З.Ы.: sorrow, не стоит отвечать сразу. я тоже человек занятой.

[s0rr0w]

Например, расширим ТЗ таким образом:

1. Форма авторизации. после успешной проверки данные должны быть переданы AJAX на сервер. Полученный ответ может быть трех типов: ок + резюме по пользователю + кукер, false (авторизация не удалась), bun + причина отказа. Первый тип ответа должен быть выведен в правой части страницы в виде таблицы (имя, ник, дата регистрации, последний раз был). Второй тип ответа должен быть выведен как системный алерт с активацией формы авторизации (активация предполает все уже описанные действия со второй формой) Третий тип ответа должен быть размещен в области системных сообщений с изменением цвета фона. Форма должна быть очищена (или заменена на кнопку "Logout" - для усложнения) при успешной авторизации

У SC можно транспортировать данные с обходчиком дерева.

Задачу можно решать несколькими методами. У разных вариантов есть разные плюсы и минусы.

Предложу один из них. Я бы таблицу с данными про пользователя уже интегрировал в страницу. При успешном логине прислал бы событие что-то типа такого

GSC_setValAndLaunch( show, false, "formContainer", { propagation: "parent" } );

Убираем форму

GSC_launch( "showData", true, "userInfoTable", { data: { user: "User1", nick: "Nick1" } });

Заполняем данными таблицу userInfoTable

Тут поподробнее расскажу.

<div id="userInfoTable" SC="sc_show_node:showData">
 <div>User name: <span SC="sc_fillin_text:showData:user"></span></div>
 <div>Nick name: <span SC="sc_fillin_text:showData:nick"></span></div>
</div>

var sc_fillin_text = function ( controller, node, scData, execOptions ) {
 try {
   if ( !controller.states[ scData.state ] ) return;// событие не true
   if ( !scData.args[0] ) return; // нет аргумента у обработчика ноды
   if ( execOptions.data && execOptions.data[ scData.args[0] ] ) node.innerHTML = execOptions.data[ scData.args[0] ];
   // вставляем в ноду значение поля с именем, который указан как параметр обработчика, из объекта data.
 } catch ( e ) { }
}

Аналогично можно передать значение кук.

На второе событие делаем что-то вроде такого

GSC_setValAndLaunch( "error", true, "formContainer"); И дальше сделаем обработку данного события.

Я могу написать полнофункциональное демо, если очень хочется увидеть полную реализацию данного ТЗ.

[s0rr0w]

Думаю, что 8й пример заинтересует.

В данном примере для работы с формами не было использовано ни одного тега <form>

Стоит отметить, что кнопка очистки формы заодно подчищает и сообщения об ошибках.

Функция валидации достаточно универсальна для того, чтобы использовать ее одну для всего проекта. Аналогично можно сделать и сабмит.

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

sample8.zip