Початок роботи з WebSnap в Delphi 6 Enterprise, Інші СУБД, Бази даних, статті


Основи WebSnap



WebSnap являє собою набір компонент, що з’явився в Delphi 6 Enterprise і призначений для розробки Web-серверних додатків в RAD-середовищі. У цій статті дано короткий опис створення WebSnap-сервера, підтримує повний інтерфейс редагування та перегляду для простого набору даних, і включає підтримку графічних полів. Хоча даний WebSnap-сервер є “простим”, тому що не вимагає написання коду, він, тим не менш, підтримує повний набір функціональних можливостей для модифікації таблиць бази даних за допомогою браузера.


Отже, почнемо.


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



Спочатку слід викликати нову панель інструментів WebSnap, за допомогою якої буде значно зручніше створювати WebSnap-додаток. Це можна зробити, клацнувши правою кнопкою миші по панелям інструментів в інтегрованому середовищі розробки (IDE) Delphi 6 Enterprise і вибравши панель інструментів “Internet”. Після цього, на екрані відобразиться наступне:


Рисунок
Панель інструментів WebSnap


Перший значок (зображення руки, що тримає глобус) використовується для створення нового WebSnap-додатки. Якщо клацнути по ньому мишею, то на екрані відобразиться майстер WebSnap. Тепер задамо ім’я для нашої головної сторінки. Крім того, слід створити додаток Web App Debugger (Отладчик Web-додатків), яке дозволить використовувати спеціальний Web-сервер (написаний в Delphi), що поставляється разом з Delphi 6 Pro і Enterprise. Назвемо цей сервер BasicDemo.


Рисунок
Майстер додатків WebSnap


Після натискання кнопки OK на екрані з’явиться стандартна форма Delphi (дозволяє дізнатися, чи запущений Web-сервер), а також WebModule, що включає компоненти, які будуть використовуватися головною сторінкою. Компоненти, що входять в даний Web-модуль, використовуються для обробки запитів головної сторінки і диспетчеризації дій, запитуваних браузером клієнта, коли користувач клацає мишею по певних посиланнях або кнопкам.


Рисунок
Модуль Home Page (Головна сторінка)


Створення модуля даних



Тепер створимо модуль даних WebSnap, який можна використовувати для публікації інформації з набору даних (або декількох наборів даних, як у нашому випадку). WebDataModule можна створити, клацнувши по третій кнопці (набір даних на тлі глобуса) на панелі інструментів WebSnap. Після цього помістимо компонент TClientDataSet з закладки Data Access в палітрі компонентів, і зв’яжемо його з MyBase XML DataSet-версією добре відомої надійної таблиці Paradox Biolife.db, яка містить графічне поле і поле коментаря, а також числові та текстові поля, які можна публікувати і редагувати з використанням WebSnap.


Підтримка stateless-серверів


Після завдання імені файлу ClientDataSet слід перейти до деревоподібному поданням (Object Treeview) об’єктів, розкрити ClientDataset, клацнути мишею по Fields, а потім, клацнувши правою кнопкою миші, додати всі поля в деревоподібну структуру. Так як WebSnap використовується для побудови stateless-серверів, що працюють з базами даних, ми повинні вказати первинний ключ, що дозволяє набору даних активізувати навігацію по запиту клієнта і маніпуляцію даними. WebSnap виконає все це автоматично після того, як ми поставимо первинний ключ. В даному випадку, використовуємо в якості первинного ключа Species No. Спочатку слід вибрати його в Object Treeview:


Рисунок
Object Treeview для WebDataModule


Потім необхідно модифікувати властивість ProviderFlags в Object Inspector (інспектор об’єктів), встановивши pfInKey на True, щоб вказати, що Species No є первинним ключем для даного набору даних.


Якщо у Вас немає цього набору даних, можете виконати ті ж операції з Paradox-таблиці, використовуючи BDE. Єдина відмінність полягає в тому, що Вам доведеться явно розмістити компонент сесії BDE, встановити його властивість AutoSessionName на True, а для вказівки на таблицю DBDEMOS biolife.db використовувати компонент TTable. Всі інші дії повинні бути виконані без зміни.


Рисунок
Значення Object Inspector для Species No


Відображення даних в браузері



Після установки первинного ключа для набору даних, ми можемо вибрати DataSetAdapter з представленої на рисунку палітри компонентів WebSnap:


Рисунок
Палітра компонентів WebSnap


і встановити DataSetAdapter на DataModule. DataModule повинен прийняти вигляд, подібний представленому на малюнку:


Рисунок
WebDataModule з Dataset і DataSetAdapter


Потім, використовуючи Object Inspector, слід приєднати адаптер до набору даних. На наведеному нижче малюнку зображений Object Inspector, що підтримує in-line-розширення посилань на компоненти. Зверніть увагу на те, що властивості набору даних виділені різним кольором і представлені з відступом від лівого краю в Object Inspector.


Рисунок
Посилання на компоненти в Object Inspector


Наступний крок не є обов’язковим; я включив його просто для більшої ясності. Повернемося до Object Treeview, розкриємо властивості адаптера і додамо всі адаптери команд та адаптери полів в набір даних. Зверніть увагу на підтримку всіх стандартних операцій з набором даних (навігація і модифікація набору даних). Адаптери полів забезпечать автоматичну підтримку як відображення, так і редагування даних в будь-якому наборі даних, включаючи BLOB-поля, що містять текст або графіку.


Рисунок
Додавання елементів адаптера в Object Treeview


Відображення даних у вигляді таблиці з використанням DataSetAdapter

 


Другу кнопку на панелі інструментів WebSnap (зображення документа на тлі глобуса) ми використовуємо для створення другої сторінки Web-сервера. Назвемо цю сторінку “Grid” (таблиця). Опції за замовчуванням слід залишити без зміни. Завдяки прапорця, встановленому у вікні Published, На головній сторінці сервера буде відображатися посилання на Grid.


Рисунок
Майстер Page Module в WebSnap


В даному блоці використовуйте Unit3 (WebDataModule); в результаті будуть відображені всі оголошені в ньому DataSetAdapters. В нашому випадку, це буде всього один адаптер. Після цього, перебуваючи в Object Treeview, слід натиснути правою кнопкою миші по WebPageItems в AdapterPageProducer і додати компонент AdapterForm, потім додати AdapterGrid в AdapterForm.


Рисунок
Додавання AdapterGrid


Тепер необхідно встановити властивість Adapter в AdapterGrid на Dataset-адаптер WebDataModule, і клацнути мишею за наявною в редакторі закладці попереднього перегляду, щоб переглянути дані, що знаходяться в наборі даних.


Рисунок
Попередній перегляд Grid в Editor.
(Щоб збільшити зображення, клацніть по ньому мишею.)


Зверніть увагу, що таблиця виглядає не дуже привабливо, в основному, через те, що поле Notes сильно подовжує кожен рядок. Щоб виправити це, пропоную змінити зображення за замовчуванням і Додати в таблицю потрібні нам колонки. Для цього слід натиснути правою кнопкою миші по AdapterGrid вObject Treeview і вибрати “Add Columns”. У вікні виберіть виділені елементи.


Рисунок
Додавання додаткових колонок в таблицю


Після поновлення Object Treeview в ньому з’являться вибрані додаткові колонки.


Рисунок
Оновлене вікно Object TreeView


Тепер у вікні попереднього перегляду редактора відображається таблиця, що включає тільки вибрані нами колонки.


Рисунок
Оновлена ​​таблиця.
(Щоб збільшити зображення, клацніть по ньому мишею).


Редагування даних


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


Рисунок
Майстер WebSnap, для створення EditPage


Як і при розробці Delphi-програми з графічним призначеним для користувача інтерфейсом, в цьому випадку ми можемо використовувати той же модуль даних для побудови інтерфейсу, що забезпечує редагування даних на базі WebSnap. Не забудьте знову використовувати Unit3 (WebDataModule) в даному блоці, який буде називатися Unit5. Перебуваючи в Object Treeview і використовуючи праву кнопку миші, додайте в форму компоненти, показані на наступному малюнку.


Рисунок
Додавання компонентів у форму даних


Приєднайте AdapterFieldGroup і AdapterErrorList до DataSetAdapter. Дайте DisplayGroup для AdapterComamndGroup AdapterFieldGroup. Якщо у Вашому редакторі активізована закладка попереднього перегляду, то на екрані будуть відображатися попереджувальні повідомлення для обов’язкових властивостей, які допоможуть упевнитися, що посилання на компоненти встановлені правильно. AdapterFieldGroup буде відображати дані в режимі перегляду або режимі редагування. AdapterErrorList буде відображати помилки при перевірці достовірності даних, які можуть виникнути при редагуванні даних користувачем. AdapterCommandGroup буде відображати кнопки, що дозволяють виконувати всі дії з відображеними даними, включаючи навігацію і модифікацію даних.


Зв’язування сторінок по імені


Тепер, коли вже готова сторінка для редагування / перегляду певних записів, хотілося б реалізувати підтримку можливості прямого переходу до редагування і перегляду певної записи з таблиці. Для цього слід вибрати Unit4 (Grid) і, перебуваючи в Object Treeview, додати за допомогою правої кнопки миші AdapterCommandColumn в Grid. Зверніть увагу, що в колонці команд відображена ціла серія команд за замовчуванням, розташованих в один рядок. Спочатку встановимо значення параметра відображення колонок для AdapterCommandGroup на 1. В результаті, всі кнопки повинні розташовуватися одна під одною. Нам будуть потрібні тільки чотири з цих кнопок, тому потрібно натиснути правою кнопкою миші по AdapterCommandColumn і додати ті команди, які повинні відображатися в таблиці.


Рисунок
Додавання команд в таблицю


Тепер таблиця виглядає дещо краще.


Рисунок
Попередній перегляд таблиці з командами.
(Щоб збільшити зображення, клацніть по ньому мишею).


Перебуваючи в ObjectTreeView, слід вибрати CmdEditRow, CmdBrowseRow і CmdNewRow і встановити їх властивість PageName на “EditPage” або на будь-яке інше ім’я, яке Ви поставили для своєї сторінки редагування. В результаті цього, буде встановлено зв’язок “Page-by-name” для обраних команд.


Тепер додаток готово до тестування. Клацніть мишею по кнопці “Save All” і збережіть де-небудь все блоки і сам проект, потім клацніть по кнопці Run, Виберіть Run / Run або натисніть F9. В результаті буде скомпільовано та зареєстровано для Delphi 6 Web App Debuggger (відладчик Web-додатків) WebSnap-додаток для Web-сервера.


Усунення несправностей Web-додатків



Web App Debugger включений до складу обох версій Delphi 6, Pro і Enterprise. Завдяки тому, що при використанні Web App Debugger можна встановлювати точки зупину в налагоджують Web-серверному додатку, з його допомогою можна дуже ефективно налагоджувати WebSnap-додатки. Web App Debugger можна запустити, вибравши його з меню Tools і клацнувши мишею по кнопці Start. На екрані відобразиться вікно відладчика, подібне до наведеного на малюнку:


Рисунок
Web App Debugger


Щоб подивитися, які сервери Web App Debugger зареєстровані, клацніть по “гарячій” засланні server info. Як видно з представленого на малюнку списку, я вже зареєстрував все WebSnap-демонстраційні приклади, що поставляються разом з Delphi 6 Enterprise, слідуючи інструкціям, зазначеним у директорії Delphi / Demos / WebSnap. Приблизно в середині списку знаходиться WebSnap-сервер, який ми тільки що створили і зареєстрували.


Рисунок
Зареєстровані сервери WebApp Debugger.


Детальну інформацію про даний сервер можна також отримати, клацнувши мишею по посиланню View Details на сторінці ServerInfo.


Рисунок Детальна інформація про деякі серверах.
(Щоб збільшити зображення, клацніть по ньому мишею).


Тепер слід відобразити головну сторінку нашого сервера, клацнувши мишею по кнопці “Go” на сторінці ServerInfo, відкритої в режимі списку серверів, або за посиланням на додаток на тій же сторінці, відкритій с в режимі View Details. На екрані повинна відобразитися головна сторінка, приблизно в тому вигляді, як вона показана на малюнку:


Рисунок Головна сторінка в браузері.
(Щоб збільшити зображення, клацніть по ньому мишею).


Для відображення таблиці, клацніть мишею по посиланню Grid.


Рисунок Сторінка Grid в браузері


Після цього, потрібно вибрати рядок в таблиці і клацнути мишею по кнопці EditRow. Тепер все готово до редагування запису, вибраної з таблиці. Зверніть увагу на те, що підтримується навіть можливість зміни графіки, яку можна реалізувати, просто клацнувши мишею по кнопці перегляду і вибравши новий файл образу, а потім клацнувши по кнопці Apply.


Рисунок Режим редагування в браузері.
(Щоб збільшити зображення, клацніть по ньому мишею).


Якщо Ви хочете упевнитися, що відображена та ж сторінка, то клацнувши мишею по кнопці BrowseRow можна повернути попереднє зображення. Ви завжди можете відобразити графіком, навіть якщо перебуваєте в режимі редагування. Тепер усі властивості ViewMode поля адаптера встановлені на vmDefault; це означає, що вони отримують установки з поточного ViewMode в AdapterFieldGroup. Якщо потрібно відображати графіку завжди, Незалежно від режиму редагування, то в групу полів можна додати ще одне AdapterDisplayField, задати його як графічне поле і встановити його властивість ViewMode на vmDisplay.


Рисунок Режим перегляду в браузері.
(Щоб збільшити зображення, клацніть по ньому мишею).


Клацнувши мишею по кнопці EditRow, Знову перейдемо в режим редагування і введемо якісь некоректні дані. Тепер, якщо ми спробуємо застосувати зміни, то на екрані з’явиться інформація, подібна наведеній на рисунку:


Рисунок Обробка помилок.
(Щоб збільшити зображення, клацніть по ньому мишею).


Якщо клацнути мишею по кнопці Cancel, То всі внесені до запису зміни будуть скасовані.


У цій статті дано лише поверхневий опис можливостей WebSnap. Насправді, це дуже гнучка і розширювана компонентна основа, призначена для розробки Web-серверів, про можливості якої можна ще дуже багато розповісти. Але для цього потрібно написати ще одну статтю. Якщо вже зараз ви хочете дізнатися більше про WebSnap, раджу звернутися до демонстраційної директорії в WebSnap, що входить в комплект Delphi 6 Enterprise і містить ряд додаткових прикладів. Крім того, ви можете знайти деяку цікаву інформацію в інтерв’ю (Community TV interview), Яке я взяв у Джима Тірні (Jim Tierney), розробника WebSnap.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*