§6. Первый проект
П1. Первый проект
А пока мы попробуем соорудить наш первый проект с использованием технологии WebSnap. Для этого выберем пункт меню File/New/Other в появившемся диалоге мы перейдем на закладку WebSnap. При этом мы увидим три пункта: WebSnap Application, WebSnap Data Module, WebSnap Page Module. Зачем нужен первый пункт, я думаю, вы догадались – он вызывает мастера создания WebSnap приложения. Второй пункт, WebSnap Data Module, позволяет добавить в проект модуль данных. Третий пункт WebSnap Page Module – для генерации заготовки модуля страницы. Итак, выберем пункт WebSnap Application. При этом появится диалог мастера создания приложения WebSnap.
Первая группа параметров Sever type позволяет выбрать формат приложения. Эти форматы были описаны в первой части статьи. Мы выберем формат CGI stand-alone executable. Вторая группа – Application Module Components предназначена для выбора компонентов, которые будут размещены в основном модуле приложения и вид данного модуля. Можно выбрать один из двух видов модулей: Page Module или Data Module. Назначение их было описано выше, отметим только, что слово Application в названии указывает на то, что модуль будет главным в приложении. Далее, нажав кнопку Components, мы увидим диалог выбора компонентов, которые будут размещены в модуле приложения. Пока мы не разобрались с назначением компонентов, мы оставим там все без изменений. Третья группа параметров позволяет настроить параметры основного модуля приложения. Первый параметр Page Name позволяет указать имя страницы модуля (доступен лишь для типа модуля Page Module). Второй параметр Caching позволяет задать режим кэширования нашего приложения. По умолчанию параметр имеет значение Cache Instance, т.е разрешить кэширование. Второе возможное значение Destroy Instance отключает кэширование. Мы так же оставим данный параметр без изменения. Кнопка Page Options вызывает диалог настроек параметров модуля приложения, изображенный ниже.
Рассмотрим этот диалог. Группа параметров Producer позволяет выбрать тип продюсера страницы (строка ввода Type) и скриптовый язык (JScript или VBasic). Вторая группа HTML позволяет указать шаблон для генерации HTML страницы. Третья группа параметров позволяет настроить параметры страницы имя, заголовок, видимость (параметр published) и необходимость аутентификации пользователя для просмотра данной страницы (параметр Login Required). Имя дублирует параметр Page Name предыдущего диалога. Опять же пока мы в данном диалоге оставим все без изменений. Нажав кнопку ОК в обоих диалогах, мы получим заготовку приложения. Заготовка включает всего один модуль – Unit1. В нем содержится описание главного модуля приложения с именем PageProducerPage1.
Теперь осталось сохранить и скомпилировать проект (Ctrl-F9) и полученный исполняемый файл и шаблон страницы Unit1.html разместить на Web сервере в директории для скриптов. Запустим Web броузер и в строке адреса наберем http://localhost/cgi-bin/Project1.exe (в случае использования Apache, для других Web серверов адрес может быть другим). В окне броузера мы увидим надпись PageProducerPage1 Поздравляю, Вы создали первое приложение WebSnap. После того как чепчики будут подброшены вверх, мы продолжим. Взглянем на наш модуль, и попробуем разобраться, для чего служит каждый из размещенных в нем компонентов.
Компонент |
Назначение |
TWebAppComponents |
Содержит ссылки на другие компоненты, обеспечивающие функциональность приложения |
ApplicationAdapter |
Позволяет задать параметры приложения и позволяет обращаться к этим параметрам через глобальный объект Application в из скрипта на HTML странице |
PageDispatcher |
Диспетчер пользовательских запросов. Анализирует запросы пользователя и переадресует эти запросы, модулям, ответственным за их обработку. |
AdapterDispatcher |
AdapterDispatcher автоматически обрабатывает ввод данных из HTML форм, используя поля с информацией адаптера, расположенного в модуле. |
PageProducer |
Генерирует HTML страницу по заданному шаблону |
Для доработки нашей страницы, мы установим свойство Title компонента ApplicationAdapter равным «Заголовок нашего приложения». А теперь сюрприз, сгенерированная HTML страница может быть просмотрена без переноса приложения на Web сервер. Для этого всего лишь необходимо выбрать закладку «Preview» в нижней части окна редактирования.
Для этого понадобится нажать кнопку с изображением стрелки указывающей вправо. Визуализация страниц может значительно ускорить разработку Web приложений. Другая закладка Unit1.html – содержит текст шаблона страницы – вы можете сделать страничку более симпатичной, правда, в среде разработки Вам она может отображаться не совсем так, как должна (например, я подправил цвет фона страницы, однако в IDE фон продолжал оставаться белым). Двигаемся далее, как уже вскользь упоминалось, приложение WebSnap может содержать (и в реальных проектах содержит ) несколько модулей страниц. Добавим новый модуль страницы в наше приложение. Идем в пункт меню File/New/Other и на закладке диалога, перейдя на закладку Web Snap, выбираем элемент WebSnap Page Module. Нашему вниманию будет представлен диалог выбора параметров модуля. Назначение параметров мы уже рассмотрели. Нажав кнопку ОК, мы получим модуль страницы с именем PageProducerPage2. Теперь, если мы скомпилируем наше приложение, и разместим его на Web севере (для этого необходимо скопировать файлы Unit1.html, Unit2.html, Project1.exe в папку для скриптов на сервере) в окне браузера мы увидим, что вверху страницы ниже заголовка появилась панель навигации по страницам нашего приложения. Сразу возникает вопрос, а как она появилась, ведь мы ничего не делали для ее генерации? Ответ кроется в файле Unit1.html. Трудно не заметить, что помимо тегов HTML страница содержит теги <% %>, внутри которых расположены операторы скриптового языка. Данные операторы выполняются на стороне сервера, результат их работы вставляется в страницу, отсылаемую клиенту. Из скриптов можно обращаться к большинству компонентов, расположенных в модулях. Это вносит замечательную гибкость и открывает большие возможности для создания сложных динамических страниц. Текст скрипта необходимо заключать в тег <% %>. В качестве скриптовых языков могут применяться JScript и VBScript. Мы будем использовать JScript. Теперь становится ясно, что функция: <% e = new Enumerator(Pages) s = '' c = 0 for (; !e.atEnd(); e.moveNext()) { if (e.item().Published) { if (c>0) s += ' | ' if (Page.Name != e.item().Name) s += '<a href="' + e.item().HREF + '">' + e.item().Title + '</a>' else s += e.item().Title c++ } } if (c>1) Response.Write(s) %> в файле Unit1.html генерирует панель навигации. Текст функции достаточно понятен, некоторые комментарии необходимы лишь для последнего оператора Response.Write – данный оператор выводит строку с результатом работы скрипта в HTML файл страницы. Есть еще один способ это использование тега <%= %>. Пример можно увидеть в том же Unit1.html: <%= Application.Title %> В результате работы этого скрипта на страницу выводится ее заголовок.