Лабораторная работа: Технологія WebSnap

Малюнок 15

Таблиця 1

Свойство	Значение	Описание
DisplayLabel	OK	Текст для отображения в HTML шаблоне
ActionName	GetNameAction1	Имя процедуры для использования в скриптах

void __fastcall TPageProducerPage2::AdapterAction1Execute(TObject *Sender,

TStrings *Params)

{

FValue = AdapterField1->ActionValue->Values[0];

}

Цей код зберігає значення поля AdapterField1 у змінній FValue. Щоб надати користувачу можливість вводити своє ім'я, в текст Unit2.html після рядка Здравствуйте, уважаемый додамо визначення форми введення:

<FORM NAME="INPUT_NAME_FORM" METHOD=POST>   <INPUT TYPE=HIDDEN NAME="__action"

VALUE = "<%=Adapter1.GetNameAction1.AsFieldValue%>">   Введите Ваше имя:   <INPUT TYPE=INPUT VALUE="<%=Adapter1.AdapterField1.EditText%>"

NAME= "<%=Adapter1.AdapterField1.InputName%>">   <INPUT TYPE=SUBMIT VALUE="<%=Adapter1.GetNameAction1.DisplayLabel%>" onclick="'INPUT_NAME_FORM.__action.value=<%=Adapter1.GetNameAction1.AsFieldValue%>'">  </FORM>   

Побудуємо проект, перенесемо файли Unit1.html, Unit2.html, Project1. dll на Web-сервер привітаємо себе (мал. 16).

Малюнок 16

PagedAdapter дозволя розділити великий обсяг інформації, що виводиться, по сторінках. Обсяг нформації, що розташовується на одній сторінці, задається у властивості PageSize.

 

Приклад 4. Парольний доступ до сторінки WebSnap-сервера

Часто потрібно забезпечити обмеження доступу до певних сторінок прикладення. Одним з методів розв’язання даної задачі є парольний захист. Технологія WebSnap дозволяє реалізувати доступ до сторінок за паролем. Для підтримки парольного доступу в головному модулі повинні бути присутніми наступні компоненти:

·          WebUserList, який містить список користувачів, їх паролів і прав доступу;

·          SessionsService, який містить інформацію про користувачів, що використовують прикладення в даний момент;

·          EndUserSessionAdapter, який обробляє події підключення користувача.

Додати ці компоненти можна або на етапі створення модуля сторінки в діалозі Web App Components (див. мал. 3.5), або розташувати їх самостійно у вже створений модуль. Скористаймося другим способом забезпечимо парольний захист сторінки PageProducerPage2, розташувавши вищезгадані компоненти в модулі PageProducerPage1 (мал. 17). Для властивост UserItems компоненту WebUserList1 з нспектора об'єктів викличемо редактора і введемо двох користувачів, яким буде дозволений доступ до сторінки: Ellen з паролем admin і Will без пароля (мал. 18).

 

Малюнок 3.17

 

Малюнок 18

Наступний крок припускає вказівку необхідност парольного захисту деякої сторінки. Для цього створимо нову сторінку PageProducerPage2 і в кінц файлу Unit2.cpp, що містить опис PageProducerPage2, знайдемо рядок:

static TWebPageInit WebInit(__classid(TPageProducerPage2), crOnDemand, caCache, PageAccess << wpPublished /* << wpLoginRequired */, ".html", "", "", "", "");

Розкоментуймо фрагмент << wpLoginRequierd. Крім того, тут можна виправити ще одну річ: зробити відображення національних назв сторінок в панелі навігації. Для цього необхідно в цьому ж конструкторі TWebPageInit вставити національну назву сторінки. Таким чином, остаточно рядок виглядатиме так:

static TWebPageInit WebInit(__classid(TPageProducerPage2), crOnDemand, caCache, PageAccess << wpPublished << wpLoginRequired, ".html", "Страница просмотра/редактирования данных", "", "", "");

Тепер потрібно зробити html-сторінку для введення імені і пароля користувача. Найбільш просто скористатися для цього компонентом AdapterPageProducer. Виконаємо команду File | New | Other | WebSnap | WebSnap Page Module. У діалоз параметрів сторінки змінюємо тип Type продюсера з PageProducer на AdapterPageProducer, а також знімаємо прапорець Published, оскільки за умовчанням сторінка для введення пароля не повинна відображатися в панелі навігації (мал. 19).

В результаті буде одержаний модуль сторінки з єдиним компонентом AdapterPageProducer (мал. 20).

Компонент AdapterPageProducer є спеціалізованим продюсером, що дозволяє генерувати HTML-сторінки для відображення полів адаптерів. Принцип створення сторінки в AdapterPageProducer простий. Весь документ являє собою набір Web-компонентів, які програміст додає в редакторі, а за допомогою інспектора об'єктів при необхідності налагоджує їх властивості і події. Web-компоненти можуть бути вкладені один в другий. Все це дозволяє комфортно і швидко проектувати HTML-документи.

Як адаптер для забезпечення доступу до імен користувача і його пароля використовуємо компонент LoginFormAdapter, який необхідно додати в модуль. Далі подвійним клацанням мишею по компоненту AdapterPageProducer викличемо візуального редактора HTML-сторінки. У ньому натиснемо кнопку New Item і додамо Web-компонент типу AdapterForm (т.е HTML-форму) (мал. 21).

 

Малюнок 19

 

Малюнок 20

 

Малюнок 21

Далі, ще раз натиснувши кнопку New Item (при обраному Web-компоненті AdapterForm1), додамо Web-компонент типу AdapterFieldGroup (набір полів для редагування полів адаптера) (мал. 22).

 

Малюнок 22

Для AdapterFieldGroup1 встановимо властивість Adapter рівним LoginFormAdapter1, таким чином вказавши адаптер, поля якого потрібно відображати. У контекстному меню цього керуючого елементу оберімо команду Add All Fields. Тепер для полів FieldUserName, FieldPassword і FieldNextPage властивістю Caption можна задати національні мітки. Стилі міток можна задати властивістю Style із значенням, наприклад, font-family: arial; font-weight: bold; font-size: 12px.

Далі оберімо Web-компонент AdapterForm1, ще раз натиснемо кнопку New Item і додамо Web-компонент типу AdapterCommandGroup (набір кнопок для виклику процедур адаптера). Для Web-компоненту AdapterCommandGroup1 задамо властивість DisplayComponent рівним AdapterFieldGroup1. Результат наших дій представлений на мал. 23.

 

Малюнок 23

Залишився останній крок: зберегти модуль під ім'ям LoginPage, перейти в модуль PageProducerPage1 (головну сторінку) вказати у властивості LoginPage компоненту EndUserSessionAdapter1 значення LoginPage

Тепер можна побудувати проект і перенести на Web-сервер файли Unit1.html, Unit2. html Unit3.html, Project1. dll. Подивимося, що з'явилося – вверху сторінки з'явилося посилання з текстом Вход (мал. 24).

 

Малюнок 24

Оберімо Вход або Страница просмотра/редактирования данных, введемо в поля Имя польователя і Пароль (мал. 25) ім'я Ellen і пароль admin, як наступну сторінку указуємо Страница просмотра/редактирования данных, натискаємо кнопку Вход.

 

Малюнок 25

Малюнок 26

 

Приклад 5. Робота з базою даних за допомогою WebSnap-сервера

БД надають можливість зберігати і обробляти велик обсяги інформації. Можливість роботи з БД на сьогодні є просто необхідним атрибутом будь-якого засобу розробки Web-прикладень. Технологія WebSnap нада достатньо продумані і зручні засоби публікації вмісту БД, а в поєднанні з СКБД Interbase дозволяє будувати прикладення для роботи з БД, що задовольняють запитам найвередливіших користувачів. Спроектуємо сторінку для відображення вмісту таблиці biolife демонстраційно БД Interbase 7.5 C:\Program Files\Common Files\ Borland Shared\Data\dbdemos.gdb.

Вказівки по налагодженню бази даних

Для роботи з БД необхідно встановити на комп'ютер InterBase Server 7.5 і за допомогою, наприклад, програми IBExpert зареєструвати БД C:\Program Files\ Common Files\ Borland Shared\Data\dbdemos.gdb під псевдонімом IBDBDemos (мал. 27).

Малюнок 27

Створення WebSnap-сервера

Для розташування компонентів зв'язку з БД в проект необхідно вставити модуль даних WebDataModule за допомогою майстра. Виконаємо команду File | New | Other | WebSnap | WebSnap Data Module. У діалозі, що з'явився (мал. 28), вкажемо спосіб створення модуля Always і спосіб його знищення Cache Instance.

 

Малюнок 28

Після цього розташуймо в модулі компоненти: IBDatabase, IBTransaction, IBDataSet і зв'яжемо х з БД IBDBDemos і таблицею biolife, яка містить графічні поля, поля коментарів, числові і текстові поля, які можна публікувати і редагувати з використанням WebSnap (мал. 29).

 

Малюнок 29

 

В одержаний модуль додамо DataSetAdapter і зв'яжемо його з джерелом даних, призначивши властивості DataSet значення IBDataSet1. Дал двічі клацнемо мишею по компоненту DataSetAdapter1 і за допомогою команди Add All Fields контекстного меню встановимо список полів, що відображаються (мал.. 30).

 

 

Малюнок 30

 

Для публікації даних таблиці БД найзручніше використовувати компонент-продюсер AdapterPageProducer. Додамо в модуль сторінки PageProducerPage2 компонент AdapterPageProducer. Після цього подвійним клацанням миші по компоненту AdapterPageProducer, викличемо редактора для побудови HTML-сторінки. Натиснемо в редакторі кнопку New Item і додамо Web-компонент AdapterForm1, далі на AdapterForm1 тією ж кнопкою додамо компонент AdapterGrid1 і встановимо його властивості:

·          Adapter в значення BiolifeWebDataModule->DataSetAdapter1 (для зв'язку сторінки з джерелом даних потрібно не забути додати в початковий код сторінки посилання #include "Unit4.h" на модуль даних WebDataModule);

·          Adapter Mode в значення Edit (режим редагування);

·          Командою AddAllColumns контекстного меню визначимо список полів, що відображаються (тут також можна змінити найменування полів на національні за допомогою їх властивостей Caption).

Оскільки WebSnap використовується для побудови stateless-серверів, що працюють з БД, слід вказати первинний ключ, що дозволяє набору даних активізувати навігацію по таблиці і маніпуляцію даними по запиту клієнта. WebSnap виконає все це автоматично після завдання первинного ключа. Використовуємо як первинний ключ поле Species No. Спочатку слід вибрати поле в Object Treeview для BiolifeWebDataModule (мал. 3.31).

 

Малюнок 31

Потім необхідно модифікувати властивість ProviderFlags в нспекторі об'єктів, встановивши pfInKey в значення true, щоб вказати, що Species No первинним ключем для даного набору даних. Тоді сторінка буде доповнена «мережею», що відображує поля записів таблиці (мал. 32).

Малюнок 32

Наступним Web-компонентом, який ми додамо на AdapterGrid1, буде компонент AdapterCommandColumn1, у якому відображатиметься кнопка CmdEditRow (Детали) керування поточним записом таблиці (мал. 33). Для кнопки CmdEditRow встановимо властивість PageName в значення DetailPage, яка ще не створена і в якій буде надана можливість редагування таблиці БД.

Для редагування даних поточного запису таблиці БД створимо ще одну Web-сторінку. Виконаємо команду File | New | Other | WebSnap | WebSnap Page Module.

У діалозі параметрів сторінки слід змінити тип Type продюсера з PageProducer на AdapterPageProducer, а також встановити прапорець LoginRequired, оскільки за умовчанням сторінка для редагування даних повинна бути доступна не всім користувачами (мал. 34).

Малюнок 33

 

Малюнок 34

Малюнок 35

Посилання на джерело даних для нього встановимо за допомогою оператора #include “Unit4.h”. Натиснемо в редакторі кнопку New Item і додамо Web-компонент AdapterForm1, далі на AdapterForm1 тією ж кнопкою додамо компонент AdapterFieldGroup1 і встановимо його властивості:

AdapterFieldGroup1->Adapter = BiolifeWebDataModule->DataSetAdapter1

AdapterFieldGroup1->Adapter->Mode = Edit

На AdapterForm1 додамо компонент AdapterCommandGroup1, у якому відображатимуться кнопки навігації по таблиці, і який забезпечить редагування даних. Його властивість DisplayComponent слід встановити в значення AdapterFieldGroup1. Командою AddCommands контекстного меню можна задати список кнопок. Тоді сторінка буде доповнена кнопками керування таблицею (мал. 36).

 

Малюнок 3.36

Побудуємо проект, опублікуємо на Web-сервері файли: project1.dll, unit1.html, unit2. html, unit3.html, unit4.html, unit5.html, запустимо браузер вкажемо на адресу http://localhost/ scripts/project1.dll.

Результат роботи WebSnap-прикладення показаний на мал. 37.

Малюнок 37 а)

Малюнок 37 б)