1. Серія контенту:
2. Цей контент є частиною серії: Введення в XForms, Частина 1
3. Чому XForms?
4. Що ще про формах web?
5. вибір браузера
6. Як працюють XForms
7. Лістинг 1. Приклад HTML форми (simple.xhtml)
8. Малюнок 1. Проста HTML-форма зображена в Firefox
9. Лістинг 2. Проста XForms-форма
10. Малюнок 2. Проста XForms, зображена в Firefox
11. Налаштування для XForms
12. Малюнок 3. Сторінка XForms на браузері, що не підтримує XForms
13. Додавання розширення XForms до Firefox
14. Малюнок 4. Стандартне попередження Firefox про інстальоване додатках
15. Малюнок 5. Перезапустіть, щоб активувати Ваші нові розширення
16. Додавання XForms в Internet Explorer 6
17. Одна форма, кілька презентацій
18. Щільна інтеграція з XML
19. Зберігайте форми в автономному режимі і відкривайте їх пізніше
20. Лістинг 3. Додавання даних, збереження і завантаження форми
21. Малюнок 6. Нова поліпшена форма
22. Лістинг 4. Приклад збереженої моделі даних
23. висновок
24. Ресурси для скачування

Введення в XForms, Частина 1

Серія контенту:

Цей контент є частиною # з серії # статей: Введення в XForms, Частина 1

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=Введение+в+xforms,+Часть+1

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Введення в XForms, Частина 1

Слідкуйте за виходом нових статей цієї серії.

XForms нині швидко розвиваються за підтримки, доступної для звичайних браузерів, що використовують розширення або змінні плати, а також за допомогою технології IBM ® Workplace Forms (див. Розділ ресурси , Щоб дізнатися більше). Гнучкість і продуктивність роблять цю Техногологія привабливою для web розробників, а маленьке дисковий простір і простота в обслуговуванні клієнтів приваблює системних адміністраторів. Комітет-W3C зараз розглядає XForms 1.1 як робочий проект документа (1.0 має офіційну інтернет-рекомендацію, яка ставить її на один рівень з такими програмними продуктами як XHTML, PNG і CSS), і IBM очолює групу, націлену на досягнення відповідності існуючих стандартів форм, заснованих на базі XML з характеристиками і можливостями XForms.

Ця стаття показує еволюцію форм від простих текстових до сьогоднішніх сучасних інтерактивних, які є новим кроком в області Мережевих форм, XForms. Вона пояснює відмінності XForms і готує користувача до частини 2 , Встановивши його власну середу.

Прочитайте далі, щоб дізнатися, як замінити форму HTML на просту форму XForms і як використовувати потенційні можливості XForms для збереження (і перезапуску пізніше) даних форми в локальний файл.

Якщо ви хочете дізнатися більше про документи XHTML і XForms, мова про які йде в статті, використовуйте архів з розділу Завантаження . Він містить всі необхідні файли, які ви можете використовувати для будь-яких експериментів з вашої формою XForms.

Ви також зможете інсталювати розширення для XForms, яке дозволить переглядати документи XForms в існуючих версіях Firefox, Internet Explorer, Seamonkey або Mozilla. Якщо у вас до сих пір немає жодного з цих відмінних браузерів, які відповідають усім стандартам, зараз саме час придбати один з них.

Чому XForms?

Перед тим як перейти до XForms, давайте дізнаємося історію розвитку форм

У ранній історії глобальної мережі, стандартні текстові форми введення даних використовувалися для відправлення запитів до програм CGI, підтримувані сервером, вносячи додаткову узгодженість дій для тих першопрохідців, які занурювалися в невідомість. По ходу того, як розвивалася мережа, форми введення інформації, представлені сайтами ставали все більш складними.

Сьогодні ж, ви можете з легкістю знайти дуже складні форми, особливо на сайтах електронної торгівлі і форумах. Такими можуть бути інтерфейси до PHP або Java ™ на сервері, або JavaScript в браузері, які відправляють результати на сервер використовують Ajax-технології.

На жаль, форми HTML створені з елементів, які суперечать уявленню даних і їх змістом. З переходом від нестабільних форм HTML, змішувальних структуру документа з елементами форматування, щоб відокремити XHTML від CSS, вам потрібно діяти шляхом поділу даних форми, з огляду на характер її подання.

Що ще про формах web?

Форми web 2.0 (див. ресурси ), Побудовані на існуючих характеристиках форм HTML, з додаванням багатьох характеристик XForms, але використовують більш простий, який можна порівняти з попередніми формами, підхід. Здійснюється якийсь крок назад, щоб об'єднати XForms і web Forms в окрему частину запланованих технічних вимог XHTML 2.0.

вибір браузера

XForms-стандарт, обговорюваний вже кілька років, підтримується тільки декількома додатками (включаючи Firefox, Mozilla і Seamonkey, якщо ви проінсталліруете XForms-розширення), і спрямований на заміну XML існуючих HTML-форм.

Інші відомі браузери підтримують XForms через програмні модулі (такі як formsPlayer для Internet Explorer 6, доступний в розділі ресурси ). Будь-які стандартні браузери можуть також використовувати FormFaces, прості JavaScript XForms реалізації, які перетворять XForms в стандартні HTML-програми в клієнтській системі. До того ж, такі програмні продукти як IBM Workplace Forms реалізують XForms.

Модель даних форми (як вона поведе себе при поданні даних, початкових значень і так далі) відокремлена від її подання. Теж уявлення може базуватися на стилі відповідному браузеру користувача. Наприклад, браузер, що працює в інтернеті по телефонній мережі, використовує різні технології для відображення команд; меню і списки простіше для користувачів по телефонній мережі, ніж спливаючі вікна.

Як працюють XForms

Давайте поглянемо на просту HTML-форму, яка підпорядковує пошукову ланцюжок уявному механізму запиту, який працює на вашому ПК (див. Лістинг 1). Зауважте, що фактично XHTML краще, ніж HTML 4.01; XForms містять достовірні документи XML (такі як XHTML), і ви коротко перегляньте версію XForms. Також, зауважте, що можливо вам знадобиться пристосувати ваші посилання, щоб вони працювали без помилок у вашій конфігурації.

Лістинг 1. Приклад HTML форми (simple.xhtml)

<? Xml version = "1.0" encoding = "UTF-8"?> <Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Search Form </ title> < / head> <body> <h1> Search Form </ h1> <p> Enter a search string, then click the Search button. </ P> <form action = "http: // localhost / imaginary-search-engine" method = "get"> <p> Find: <input type = "text" name = "query" /> <input type = "submit" value = "Search" /> </ p> </ form> </ body> </ html>

Формуючи зображення типового інтернет браузера, XHTML виглядає досить буденно, трохи примітивно (Малюнок 1).

Малюнок 1. Проста HTML-форма зображена в Firefox

Коли ви вводите якийсь текст в полі, показане на рисунку 1, і натискаєте кнопку, дані декодувати в URL відправляються в уявний пошукової механізм: http: // localhost / imaginary-search-engine? Query = whatever-you-entered

Лістинг 2 показує вам версію XForms з підсвіченими відмінностями.

Лістинг 2. Проста XForms-форма

<? Xml version = "1.0" encoding = "UTF-8"?> <Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: xf = "http://www.w3.org / 2002 / xforms "> <head> <title> Search Form v2 </ title> <xf: model> <xf: submission action =" http: // localhost / imaginary-search-engine "method =" get "id = "submit-search" /> </ xf: model> </ head> <body> <h1> Search Form </ h1> <p> Enter a search string, then click the Search button. </ P> <p> <xf: input ref = "query"> <xf: label> Find: </ xf: label> </ xf: input> <xf: submit submission = "submit-search"> <xf : label> Search </ xf: label> </ xf: submit> </ p> </ body> </ html>

Існують три настроюються тега:

• "Xf:" іменована область додає елементи XForms.
• <Xf: model> був доданий елемент <head>, який показує <xf: submission>. Це змушує операцію (ваш уявний механізм пошуку) відповідати методу і називає його підпорядкування-пошук для подальшого користування.
• Елементи презентації форми (<xf: input> для введення тексту в поле, і <xf: submit> для кнопки) - тільки лише елементи уявлення, що показують, де і як поля форми повинні з'явитися на зображуваної сторінці. Вони звертаються назад до моделі, яка є в елементі <xf: model>.

А тут показано, як виглядає версія XForms (Малюнок 2). Інсталяція розширення XForms для Firefox описується далі.

Малюнок 2. Проста XForms, зображена в Firefox

Форми виглядають абсолютно однаково! Ви абсолютно нічого не втрачаєте, використовуючи XForms замість HTML-форми, і купуєте все переваги моделі даних XML.

Налаштування для XForms

Якби ви завантажили архів (знаходиться в розділі Завантаження ), Ви могли б помітити, що ваш браузер не буде відображати версію XForms в точності (див. Малюнок 3).

Малюнок 3. Сторінка XForms на браузері, що не підтримує XForms

До тих пір поки у вашого браузера не буде вбудованої підтримки для XForms, ви будете змушені використовувати одну з форм реалізації XForms (див. Сайт XForms в розділі ресурси ). Давайте коротко розглянемо одну з найбільш зручних форм реалізації - розширення Mozilla. Після того як воно спрацює з однією з існуючих версій Mozilla, Firefox і Seamonkey, вам ймовірно навіть не потрібно буде інсталювати або налаштовувати браузери! Ви також поглянете на інсталяцію Internet Explorer 6.

Додавання розширення XForms до Firefox

У Firefox виберіть станицю проекту XForms в Mozilla (див. ресурси ) І завантажте останню версію.

Завантажена сторінка проекту XForms попередить вас про те, що програма не готова для кінцевого користувача, і потім вкаже вам посилання до фактично завантаженій сторінці. Натисніть її, а потім зв'язку Install Now.

Малюнок 4. Стандартне попередження Firefox про інстальоване додатках

Firefox показує діалог попередження (див. Малюнок 4). Натисніть кнопку Install Now, щоб завантажити і інсталювати розширення XForms. Перезапустіть Firefox, щоб активувати його (див. Рисунок 5).

Малюнок 5. Перезапустіть, щоб активувати Ваші нові розширення

Після перезавантаження браузера, ви можете завантажити простий приклад XForms, який був раніше розглянутий; відразу ви побачите точне і правильне зображення XForms!

Додавання XForms в Internet Explorer 6

На сторінці formsPlayer (знайдіть в розділі ресурси посилання), натисніть на Безкоштовну завантаження, щоб перейти на сторінку реєстрації. Введіть ваш e-mail і інші дані, потім натисніть Install formsPlayer, щоб завантажити і встановити програму.

Коли Internet Explorer буде завантажувати архів програми, під URL висвітиться попередження про контроль ActiveX. Натисніть на попередження, потім виберіть Install ActiveX Control. ИЕ завантажить і встановить formsPlayer. Коли висвітиться попередження безпеки ИЕ, натисніть Install і продовжите установку.

Як тільки formsPlayer встановиться, ви будете перенаправлені на сторінку з посиланнями прикладів. Подивіться будь-який з них, щоб продовжити інсталяцію.

Одна форма, кілька презентацій

Оскільки модель даних та їх подання розділені в документі XForms, браузер користувача може відображати елементи форми, використовуючи найкращі засоби, які забезпечать максимальну простоту використання.

Наприклад, якщо користувача просять вибрати одну з осередків списку, браузер може уявити список у вигляді стандартної групи перемикачів. У вашому телефонному браузері, точно такий же список може бути зображений, як спливаюче меню, яким буде легше оперувати, використовуючи кнопки набору номера.

Чи не потрібно якихось спеціальних CSS або навіть JavaScript для виявлення браузера користувача (масова помилка багатьох сайтів), вони ідентифікуються автоматично шляхом реалізації XForms браузера. Така адаптивність неможлива при використанні плоских форм HTML, тому що дані і їх уявлення занадто щільно пов'язані.

Оскільки модель XForms - це XML, ви також може використовувати такі технології як XSLT або JavaScript (через DOM), щоб презентувати цю модель, використовуючи будь-який інтерфейс. Від простих HTML або XHTML для користувачів без підтримки XForms, до мають GUI.

Щільна інтеграція з XML

Документи XForms повинні бути достовірними XML (такі як XHTML), а приклади моделей даних (використовуються для присвоювання значень, серед багатьох інших можливостей, і ви побачите опис цього дії далі) є документами XML. Ви навіть зможете завантажити приклади моделей даних із зовнішніх файлів XML, завантажених на ПК або на сервері.

Подібна вузька інтеграція з XML дозволяє об'єднати дані XForms з іншими технологіями, які підтримують введення і виведення XML, такі як бази даних, без будь-якої потреби додаткової зв'язку між базою даних і формою, представленої користувачеві.

Зберігайте форми в автономному режимі і відкривайте їх пізніше

Однією з особливих характеристик, які XForms приносить в ваш браузер, є здатність зберігати вміст форми (будь-які дані в полях, плюс будь-які приховані дані в моделі даних) в файл. Маючи в розпорядженні <xf: submission> додаткові елементи put методу, ви можете зберігати інформацію в формі XML-файла у вашій локальній файловій системі або на сервері. Пізніше ви можете її завантажити, щоб продовжити з того місця, де ви закінчили роботу. І все це без необхідності використання додаткової зв'язку або доступу до бази даних.

Це також вам показує іншу перевагу XForms; ви можете робити будь-яку кількість процедур, пов'язаних з однією формою (див. лістинг 3). В HTML ви можете робити з формою тільки одну дію.

Лістинг 3. Додавання даних, збереження і завантаження форми

<? Xml version = "1.0" encoding = "UTF-8"?> <Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: xf = "http://www.w3.org / 2002 / xforms "> <head> <title> Search Form v3 </ title> <xf: model> <xf: instance> <data xmlns =" ​​"> <query> Enter your search string here. </ query> < / data> </ xf: instance> <xf: bind nodeset = "query" required = "true ()" /> <xf: submission action = "http: // localhost / imaginary-search-engine" method = "get "id =" submit-search "/> <xf: submission action =" file: ///tmp/XFormsQuery.xml "method =" put "id =" save-search "replace =" none "/> <xf: submission action = "file: ///tmp/XFormsQuery.xml" method = "get" id = "load-search" replace = "instance" /> </ xf: model> </ head> <body> <h1> Search Form </ h1> <p> Enter a search string, then click the Search button. You can also save your search string for later. </ P> <p> <xf: input ref = "query"> <xf: label> Find: </ xf: label> </ xf: input> <xf: submit submission = "submit-search"> <xf : label> Search </ xf: label> </ xf: submit> </ p> <p> <xf: submit submission = "save-search"> <xf: label> Save </ xf: label> </ xf : submit> <xf: submit submission = "load-search"> <xf: label> Load </ xf: label> </ xf: submit> </ p> </ body> </ html>

Зміни з вашої попередньої роботи з XForms виділені жирним шрифтом. Давайте поглянемо на зміни уважніше.

По-перше, ви можете розмістити фотографії приклад моделі даних (всередині <xf: instance> елемента). Він містить кореневої каталог даних (в точності названий <data> елемент; зауважте, що порожній xmlns атрибут - це вимога тут), який в порядку черги містить дані, необхідні вам для форми, <query> ви посилаєтеся на елемент форми <xf: input >. Дані в цьому елементі <query> - це встановлювана за замовчуванням рядок запитів, і вона буде зображена в <xf: input> елементі, коли він з'явиться.

Далі, існує <xf: bind> елемент, який в <query> впорядковує дані; якщо воно порожньо <query>, і жодна з кнопок <xf: submit »не зреагує.

Останнє, ви можете розмістити фотографії два нових <xf: submission> дії в <xf: model>, що дозволило вам зберегти дані в файл (по put методу) і завантажити його з файлу без перезавантаження всієї сторінки (використовуючи get метод, replace = "instance" атрибут перезавантажує тільки модель даних).

Внизу сторінки додані <xf: submit> два додаткові елементи, так що ви можете зберігати і завантажувати дані.

Малюнок 6 показує, як це виглядає в Firefox. Зауважте, що поле пошуку заповнюється так само, як і в прикладі моделі даних і є дві нові кнопки Записи та Завантаження.

Малюнок 6. Нова поліпшена форма

Якщо ви натиснете на цьому етапі кнопку Зберегти, ви отримаєте файл XFormsQuery.xml у вашій директорії / tmp, що містить приклад моделі даних (див. Лістинг 4). Щоб перевірити функцію завантаження, змініть дані в поле Пошуку, і натисніть Load; ваше поле пошуку буде замінено полем, завантаженим з файлу XFormsQuery.xml в / tmp.

Лістинг 4. Приклад збереженої моделі даних

chrish @ dhcp1 [531] $ cat XFormsQuery.xml <? xml version = "1.0" encoding = "UTF-8"?> <data xmlns: xf = "http://www.w3.org/2002/xforms"> <query> Enter your search string here. </ query> </ data>

Існують деякі опції для контролю виведення даних, але ви не використали жодну з них тут. У будь-якому випадку, Save і Load функції працюють без будь-яких видів зв'язку.

висновок

XForms-стандарт додає новий поділ між моделлю даних форми та її поданням, забезпечуючи можливість використовувати одну форму для різних її уявлень. XForms-елементи можуть також перевіряти достовірність даних, а щільна інтеграція з XML дозволяє вам безпосередньо працювати з даними з будь-якого іншого XML-додатки. Збереження даних форми легко здійснюється з XForms.

Вивчіть Частина 2, щоб навчитися створювати базову модель і форму XForms.

Ресурси для скачування

Схожі теми

• оригінал статті Introduction to XForms, Part 1: The new web standard for forms .
• відвідайте сторінку XForms на W3C.
• XForms.org: Nexus для мікропроцесорних мережевих прикладних програм містить велику кількість інформації і посилань для XForms.
• отримайте XForms-додаток для Mozilla, Firefox або Seamonkey .
• отримайте XForms плагін для Internet Explorer 6 .
• отримайте продукт IBM Workplace Forms .
• прочитайте Частина 2 в цій серії, уявлення до XForms.
• прочитайте частина 3 в цій серії, уявлення до XForms.
• прочитайте про web формах 2.0 , Простий, але конкурентної специфікації.
• Стаття " Приготуйтеся до використання XForms "(DevleoperWorks, вересень 2002) дає широкий погляд на ці важливі технології.
• SVG і XForms для початківців (DeveloperWorks, листопад 2003) розповідає про ці дві технології і показує потенціал синергії між ними.
• Для коректного початку роботи сXForms досліджуйте, прочитайте 10 відомих XForms знарядь на XML.com.
• Для діалогового двухопераціонного навчання по W3C XForms, відвідайте інститут XForms .
• Пориньте в історичну ретроспективу про походження і призначення XForms в цій короткій історії SGML .
• Прочитайте всі про XML в зоні developerWorks XML .

Підпишіть мене на повідомлення до коментарів