Методические указания к лабораторным работам Чебоксары 2011 (стр. 5 из 6)

XData Contents [XMLNamespace="http://www.intersystems.com/zen"]{ <page xmlns="http://www.intersystems.com/zen" title=""> <html id="title">Title</html> <vgroup width="100%">  </vgroup> </page>}

7. Сохранить и компилировать класс выбирая Build > Компилировать или Ctrl-F7 или значок

8. Просмотрите страницу Web выбирая Вид > Web Страница или значок

. В этот раз, единственный пункт виден в браузере - текст «Title», отображенный элементом <html>.

Если Вы проверите блок XData Contents (см. Выше), Вы увидите что элемент <html> имеет атрибут id="title". id="title" указывает на стиль определенный #title который появляется в блоке XData Style в аналогичном классе страницы Zen. #title определяет фоновый цвет, формат, и шрифт чтобы было видно когда смотрите страницу. По умолчанию блок XData Style для Титульной Страницы оформлен так:

XData Style{ <style type="text/css"> /* style for title bar */ #title { background: #C5D6D6; color: black; font-family: Verdana; font-size: 1.5em; font-weight: bold; padding: 5px; border-bottom: 1px solid black; text-align: center; } </style>}

9. Измените текстовое содержимое элемента <html> для более осмысленного заглавия:

<html id="title">My Telephone Book</html>

10. Сохранить и компилировать класс, тогда видно Web страницу «My Telephone Book».

Добавление Формы Zen

Теперь когда Вы имеете класс страницы Zen для работы с ним, вы можете редактировать элементы XML в его блоке XData Contents чтобы добавить пункты для отображения. В этом упражнении, Вы будете начинать добавляя форму которая позволит Вам добавлять объекты PhoneBook.Person для Вашей базы данных:

1. В Studio, открыть класс страницы Zen.

2. Поместить элементы <dataController> и <dynaФорм> внутри главного <vgroup> в XData Contents, точно как в примере:

Все что Вам надо сделать – поместить курсор между <vgroup> и </vgroup> и начать печатать.

После того как Вы напечатаете символ <, Studio Assist feature приглашает Вас выбрать из списка всех элементов. Сделайте двойной щелчок на одном из вариантов для его выбора. Затем печатайте символ пробела и Studio Assist предлагает Вам выбрать из списка атрибутов соответствующих этому элементу. Вы можете продолжать таким способом пока на введете целую строку.

Как альтернатива, если вы видите этот документ он-лайн, вы можете копировать и вставить строки <dataController> и <dynaForm> из вышеприведенного примера.

3. Обеспечьте два элемента <button> в XData Contents, так:

XData Contents [XMLNamespace="http://www.intersystems.com/zen"]{ <page xmlns="http://www.intersystems.com/zen" title=""> <html id="title">My Telephone Book</html> <vgroup width="100%"> <dataController id="source" modelClass="PhoneBook.Person" modelId=""/> <dynaForm id="MyForm" controllerId="source" /> <button caption="New" onclick="zenPage.newRecord();" /> <button caption="Save" onclick="zenPage.SaveRecord();" /> </vgroup> </page>}

Вы можете печатать новые элементы, или если вы видите этот документ он-лайн, для удобства вы можете копировать и вставить строки <button> из этого примера.

4. Сохранить и компилировать класс, тогда видна Web страница. Это должно выглядеть, как показано на рис. 10.

5. Если Вы забыли про щелчок на кнопках “New” и “Save” попытайтесь это сделать. Сообщение об ошибке отобразится. Щелчок OK для его пропуска.

Для понимания почему Вы увидели сообщение об ошибке, когда щелкнули на кнопке, смотрите тщательно на значения атрибута onclick для каждого элемента <button> в XData Contents. Каждое значение onclick - это выражение JavaScript которое выполняется автоматически при щелчке на кнопке.

Рис. 10. Web страница

В примерах, выражение onclick invokes метод который запускается на JavaScript на клиете. Специальная переменная zenPage указывает что метод определен в текущем классе страницы Zen. Методы сами называются newRecord и saveRecord.

Для создания работы этих значений onclick, вы должны создать методы JavaScript на стороне клиента в классе страницы Zen. Это вполне просто сделать используя Мастер методов Zen в Studio.

Добавление методов стороны клиента

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

1. В Studio, открыть the класс страницы Zen.

2. Поместить курсор под закрывающейся фигурной скобкой блока XData Contents, но до закрывающейся фигурной скобкой для класса страницы Zen.

3. Выбрать Инструменты > Шаблоны > Шаблоны или нажать Ctrl-T для отображение диалога Studio шаблон. Выбрать Мастер метода Zen. Щелчок OK. Виден диалог (рис. 11).

Редактируйте диалог так:

· Введите the Имя метода newRecord

· Выбрать метод is an instance

· Выбрать runs on the client

· Обеспечить Описание как показано.

· Очистить галочку Try/Catch.

· Щелчок Готово. Ваш новый метод появляется в классе страницы так:

Рис. 11. Диалог мастера метода Zen

/// Create a new instance of the controller object.Method newRecord() [Language = JavaScript]{ // TODO: implement alert('Client Method');}

4. Выбрать код внутри фигурных скобок как метод теперь выглядит так:

/// Create a new instance of the controller object.Method newRecord() [Language = JavaScript]{ var controller = zenPage.getComponentById('source'); controller.createNewObject();}

5. Повторять вышеперечисленные шаги чтобы добавить метод SaveRecord. Затем используя Мастер метода Zen, введите значения в диалог так:

· Введите Имя метода SaveRecord

· Выбрать метод is an instance

· Выбрать runs on the client

· Обеспечить Описание.

· Очистить галочку Try/Catch.

· Щелчок Готово. Ваш новый метод появляется в классе страницы.

Редактируйте новый метод так, чтобы он выглядел так:

/// Save the current instance of the controller object.Method saveRecord() [Language = JavaScript]{ var form = zenPage.getComponentById('MyForm'); form.save();}

6. Сохранить и компилировать класс, затем смотреть Web страницу.

7. Щелчок на кнопке “New” на странице. Поля Имя и PhoneNumber пусты так что вы можете ввести новую информацию для каждого следующего элемента. После печатания каждого поля, щелчок на кнопке “Сохранить”. Новый элемент сохранен в базе данных.

8. Используйте “New” и “Сохранить” повторно чтобы добавить еще элементы.

Просмотр базы данных в таблице

Теперь Вы имеете нечто в Вашей базе данных, вы можете увидеть это. На этом шаге Вы добавите таблицу Zen которая показывает сохраненные объекты из Вашей базы данных. Вы будете затем изменять метод SaveRecord так что он автоматически обновляет таблицу каждый раз при щелчке на кнопке “Сохранить” в пользовательском интерфейсе:

1. В Studio, открыть the класс страницы Zen.

2. Обеспечить один элемент <tablePane> внутри главной <vgroup> в XData Contents, точно как показано ниже (печатать или копировать):

Атрибут <tablePane> sql обеспечивает выражение SQL. SELECT выводит списки двух свойств из вашего класса PhoneBook.Person, и FROM обеспечивает полное имя пакета и класса. Этот запрос SQL обеспечивает данные для <tablePane>.

3. Сохранить, компилировать класс, посмотреть Web страницу.

4. Используйте кнопки “New” и “Сохранить” для добавления еще элементов в базу данных.

5. Щелчок на кнопке обновления браузера чтобы видеть обновленную таблицу. Новые элементы видны.

6. Удалить нужное для пользователя чтобы обновить после каждого нового элемента, обновляя таблицу автоматически после каждого «сохранить». Чтобы accomplish это, добавьте две строки в метод SaveRecord, так:

/// Save the current instance of the controller object.Method saveRecord() [Language = JavaScript]{ var form = zenPage.getComponentById('MyForm'); form.save(); var table = zenPage.getComponentById('people'); table.executeQuery();}

7. Сохранить и компилировать класс, затем смотреть Web страницу (рис. 12).

Рис. 12. Итоговая Web страница

8. Используйте “New” и “Сохранить” чтобы добавить еще элементы в базу данных. Каждый раз когда Вы щелкаете “Сохранить,” метод SaveRecord обновляет таблицу так что новейшие элементы становятся видны.

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