Можно дискредитировать любую технологию создания форм, если рассматривать её как простое перемещение бумажных форм на монитор компьютера. Тем не менее, приложение IBM Workplace Forms способно принести предприятию гораздо больше пользы. Да, бумажная форма трансформируется в виртуальный её эквивалент, но это только начало.

В Workplace Forms базируется на внутренней логики и внутренних моделях данных. Бизнес-правила инкапсулированы в логику, что не даёт пользователям вводить неверные данные и даже помогает пользователю заполнять форму, включая и отключая фрагменты формы по мере необходимости. В то же время внутренняя модель данных облегчает интеграцию. Модель данных – это XML-фрагмент с единым корнем, который может соответствовать любой схеме или стандарту, пока он представляет собой правильно построенный XML. Это означает, что данные можно перемещать напрямую из базы данных XML или другой XML-системы в форму Workplace Forms и обратно.

Статья не предполагает знакомства с Workplace Forms. Если вы, тем не менее, захотите создать пример формы, как описывается в данной статье, установите IBM Workplace Forms Designer V2.6.1 и IBM Workplace Forms Viewer V2.6.1. Ознакомительные версии Workplace Forms Designer и Viewer доступны на сайте developerWorks.

Разработка новой формы

При создании новой формы необходимо сначала определить, какой применить метод проектирования: формоцентрический (form-centric) или информационно-центрический (data-centric). Например, если вы конвертируете бумажные формы, следует начинать проектирование от формы, т.е. сначала воспроизвести внешний вид формы, а затем создать соответствующую модель данных. С другой стороны, если вы начинаете с набора данных, например, полей, которые должны быть заполнены в базе данных, сначала разработайте модель данных, а затем создавайте макет формы. В Workplace Forms Designer имеются функции, которые поддерживают применение обоих подходов.

В нашей статье используется информационно-центрический метод. Мы начнём со схемы, определяющей необходимый набор данных, создадим модель данных, отражающую схему, а затем сконструируем форму, в которой будет использоваться эта модель данных. Для этого нужно выполнить следующие шаги:

1. Создать новую форму XForms.
2. Создать экземпляр данных XForms.
3. Создать метки.
4. Создать элементы управления для ввода данных.
5. Выровнять элементы.
6. Создать таблицу XForms.
7. Настроить формулы в таблице.
8. Добавить изображение к кнопке.
9. Создать передачу XForms.
10. Установить ограничения данных.
11. Выполнить локализацию форм.

В начало

Создание новой формы

Для создания новой формы Workplace Forms выполните следующие шаги:

1. В Workplace Forms Designer щёлкните значок Workbench, чтобы открыть перспективу Designer.
2. Правой кнопкой мыши щёлкните проект в представлении Navigator (создайте новый, если проект не существует), а затем выберите New – New Workplace Form. Откроется диалоговое окно New Workplace Form (см. рисунок 1). Обратите внимание, что папка FormsProject выбрана по умолчанию.
3. В поле File name введите PurchaseOrder, а затем нажмите Next.
   
   Рисунок 1. Диалоговое окно New Workplace Form
   
   
   
   
4. 4. Откроется диалоговое окно Choose Template (см. рисунок 2), в котором можно выбрать шаблон для формы. Шаблоны служат отправной точкой для создания формы. Имеется множество шаблонов, и после того, как вы выберете необходимый, можно вносить любые изменения, в том числе изменять внешний вид самого шаблона.
5. 5. В нашей статье мы начнём с абсолютно пустой формы и сами создадим весь её дизайн. Выберите шаблон Default Empty Form – XForms и нажмите Finish.
   
   Рисунок 2. Диалоговое окно Choose Template
   
   
   

Теперь у нас есть чистая рабочая область, на которой мы будем создавать форму. В представлении XForms имеется модель (см. рисунок 3), в которой хранятся все данные формы (что-то вроде мини-базы данных). Эта модель создаётся автоматически при выборе шаблона XForms.

СОВЕТ: Можно конвертировать стандартную XFDL-форму без XForms в форму с поддержкой XForms, добавив модель в представление XForms. Чтобы добавить модель XForms в XFDL-форму, перейдите в представление XForms, правой кнопкой мыши щёлкните на No Model Exists и выберите Add XForms Support.

В начало

Создание экземпляра данных XForms

Модель XForms организует данные в экземпляры данных, которые обеспечивают логическую группировку данных внутри формы. Например, если форму требуется интегрировать с двумя серверными системами, можно создать два экземпляра данных, по одному для каждой конкретной системы.

Каждая модель данных должна содержать один или более экземпляров данных. В представлении Instance имеется четыре кнопки, с помощью которых можно создать экземпляр, как показано в таблице 1.

	Создание экземпляра из текущего документа. Генерирует экземпляр на основе элементов, уже добавленных в форму.
	Создание пустого экземпляра. Создаёт пустой экземпляр данных.
	Создание экземпляра из схемы. Создаёт экземпляр данных из включённой схемы. Экземпляр данных основан на схеме и соответствует разметке формы, предписанной схемой.
	Создание экземпляра из WSDL-сообщения. Создаёт экземпляр данных из сообщения Web Services Description Language (WSDL).

В данном случае мы покажем вам, как создавать экземпляр данных из схемы. В результате создаётся не только экземпляр данных, соответствующий схеме, но и экземпляр, в соответствии со схемой проверяющий вводимые пользователем данные во время заполнения формы. Для этого выполните следующие шаги:

1. В представлении Enclosures разверните опцию Schema.
2. Правой кнопкой мыши щёлкните Model:Default, а затем выберите Enclose Schema File.
3. Перейдите в каталог, содержащий файл схемы (ссылка на пример схемы под названием purchaseOrder.xsd имеется в разделе Загрузка этой статьи), а затем нажмите Open. В представлении Enclosures вы увидите, что схема включена (см. рисунок 4).
   
   Рисунок 4. Файл схемы в модели
   
   
   
   
4. В представлении Instance щёлкните значок XSD, чтобы сгенерировать экземпляр из схемы (значок приведён в таблице 1).
5. Выберите корневой узел <instance> в представлении Instance (см. рисунок 5). Имейте в виду, что его свойства отображаются в представлении Properties. В этом представлении измените значение ID на poInstance.

   СОВЕТ: После создания экземпляра данных из схемы изменить этот экземпляр с помощью представления Instance невозможно. Это сделано специально, чтобы нельзя было случайно изменить экземпляр таким образом, чтобы он противоречил схеме. Тем не менее, если всё-таки внести изменения необходимо, сделать это можно в представлении Source. Это может оказаться полезным, если вы хотите, например, добавить к экземпляру образец данных.

   
   
   Рисунок 5. Новый экземпляр, созданный из схемы
   
   
   

В начало

Создание меток

Метки используются для отображения заголовков и инструкций в форме. Они никогда не принимают входных данных и не выделяются пользователем во время заполнения им формы. В Workplace Forms имеется два типа меток:

• Метка - объект. Это отдельный виджет в форме, такой же, как поле или выпадающий список.
• Метка-свойство. Их можно рассматривать как встроенные метки, которые можно добавлять в верхнюю левую часть любого виджета, например, поля или окна с флажком.

В общем и целом, отдельные метки-объекты используются чаще, поскольку они могут появляться в любом месте по отношению к другим элементам форм, а не только в левом верхнем углу элемента.

Существует два типа меток-объектов: XFDL-метки и XForms-метки. Единственная разница между ними состоит в том, что XForms-метки связаны с моделью данных и получают контент из узла в экземпляре данных.

В нашей форме мы начнём с использования XFDL-меток следующим образом:

1. В палитре Standard Library нажмите на кнопку рядом с Label (Output) и выберите Label (Non-XForms).
2. Щелкните по рабочей области, чтобы добавить метку.
3. Дважды щёлкните по метке на рабочей области и измените её значение на Make Purchase Order.
4. В представлении Properties разверните раздел Appearance (см. рисунок 6) и измените следующие настройки:
   • Измените значение параметра fontinfo на 12 pt Arial (bold), нажав кнопку ". . ." и введя информацию в открывшееся диалоговое окно.
   • Измените значение параметра fontcolor на #006699, введя это шестнадцатеричное значение в поле.

   СОВЕТ: В представлении Properties изменённые свойства обозначаются синим кружком (см. рисунок 6). Если на него нажать, текущее значение свойства будет заменено значением по умолчанию, которое обозначается белым кружком.

   
   
   Рисунок 6. Изменение внешнего вида метки
   
   
   

   ПРИМЕЧАНИЕ: Определить цвет можно с помощью его названия, RGB-триплета или шестнадцатеричного значения. Если цвет не определён и совпадает с цветом страницы по умолчанию, считается, что используется прозрачный цвет.

5. Добавим на рабочую область метки Store Information, Supplier Information и Items for Purchase, как показано на рисунке 7. Выделите каждую метку, измените её размеры, перетаскивая границы элемента, и измените параметры внешнего вида в представлении Properties, как указано ниже:
   • Присвойте параметру justify значение center.
   • Присвойте параметру fontinfo значение 10 pt Arial (bold).
   • Присвойте параметру fontcolor значение white.
   • Присвойте параметру bgcolor значение #8080FF.
   
   
   Рисунок 7. Метки в форме
   
   
   

СОВЕТ: С помощью копирования и вставки можно создавать метки в одном стиле (в него входят цвет шрифта и фона, а также размер шрифта). Например, можно настроить метку Store Information и скопировать её, получив метки Supplier Information и Items for Purchase. После этого нужно только изменить их значение и размер.

В начало

Создание элементов управления для ввода данных

Поля являются одними из элементов, которые используются для ввода данных пользователя. Они выделяются при заполнении пользователем формы, и обычно в них вводятся данные.

В Workplace Forms Designer имеется несколько типов полей. Первые три связаны с моделью данных и встречаются только в формах с поддержкой XForms, в то время как последний тип может встречаться как в XForms-формах, так и в XFDL-формах:

• Input. Принимает на вход одну строку.
• TextArea. Принимает на вход две или более строки. Используется только с XForms.
• Secret. Работает как поле для ввода пароля. Все символы, вводимые в поле, замещаются одинаковыми символами, например, звёздочками (*). Используется только с XForms.
• Non-XForms. Это стандартное XFDL-поле. Может действовать как любое из вышеперечисленных типов полей, но его нельзя связать с моделью данных XForms.

Также существует два способа создания полей. Если вы применяете формоцентрический подход, можно добавить поля к форме, нажимая на кнопку Field в палитре. А если используется информационно-центрический подход, можно перетащить элемент данных из представления Instance на палитру. Workplace Forms Designer автоматически создаст поле Input, представляющее этот элемент данных.

Поскольку мы реализуем информационно-центрический подход, нужно выполнить перетаскивание из модели данных, как показано ниже:

1. В представлении Instance откройте узел <store> и перетащите узел <id> рабочую область. Будет создано поле с соответствующей меткой на холсте и выполнена автоматическая привязка этого поля к узлу <id> экземпляра данных.
2. Щёлкните поле Date на рабочей области и взгляните на представление Properties. Когда вы развернёте раздел XForms (input), вы увидите, что в параметре ref используется выражение XPath, указывающее на элемент id в экземпляре данных (см. рисунок 8).
   
   Рисунок 8. Использование выражения XPath для привязки поля ввода к экземпляру данных
   
   
   
   
3. Щёлкните поле Date на рабочей области и взгляните на представление Instance. Если нажать кнопку "Show bound instance elements" на панели инструментов, в скобках рядом с узлом <id> появится цифра 1, означающая, что этот узел связан с одним элементом на рабочей области.

   СОВЕТ: Можно также с помощью команды меню View – Highlight Items with XForms Binds или кнопки "Highlight Items with XForms Binds" на главной панели инструментов Workplace Forms Designer выделять элементы XForms, связанные с элементами экземпляров данных. Эта кнопка представляет собой переключатель с тремя положениями; с её помощью можно выделять элементы, связанные с моделью данных, не связанные с моделью данных, или вообще не выделять никакие элементы.

4. Повторите предыдущие шаги для следующих элементов данных:
   • Оставшихся элементов в <store>
   • Всех элементов в <supplier>
   • Элемента <totalPrice>
5. Нажмите клавишу Ctrl и выберите метки, расположенные перед полями ввода на рабочей области. В представлении Properties измените значение параметра fontinfo на 8 pt Arial (bold).
6. Установите необходимый размер полей. После этого ваша форма будет выглядеть примерно как на рисунке 9.
   
   Рисунок 9. Поля ввода в форме
   
   
   

В начало

Выравнивание элементов

Любые элементы, уже размещённые в форме, можно перемещать, перетаскивая их мышью. Тем не менее, правильно разместить элементы "на глазок" довольно сложно. В Workplace Forms Designer имеется набор инструментов для выравнивания, которые могут помочь вам правильно разместить элементы в форме.

Существует два типа выравнивания:

• Абсолютное выравнивание. Элементы размещаются в установленных местах страницы. Этот тип выравнивания использует систему координат x,y, с помощью которой указывается, где именно следует поместить элемент. Используйте абсолютное выравнивание, если разметка вашей формы не будет меняться в зависимости от пользовательского ввода.
• Относительное выравнивание. Элементы в форме размещаются относительно какого-то другого базового элемента, а не в заранее заданных местах. При перемещении этого базового элемента все привязанные к нему элементы также перемещаются. Используйте относительное выравнивание, если предполагается, что ваша форма будет динамической. Например, для элементов, размещаемых после таблиц, часто требуется относительное выравнивание, так как пользователь может часто добавлять в таблицу строки, удлиняя её.

С абсолютным выравниванием легче работать, и по умолчанию следует выбирать именно его. С относительным выравниванием работать сложнее, так как в этом случае важен порядок сборки формы. Порядок сборки (build order) – это порядок, в котором элементы отображаются в представлении Outline формы (что соответствует порядку элементов в исходном XFDL-коде формы). При относительном выравнивании элементов их привязка возможна только к тем базовым элементам, которые отображаются перед ними в порядке сборки.

Поскольку абсолютное выравнивание не представляет никаких трудностей, здесь мы будем использовать относительное выравнивание, чтобы вы смогли лучше понять, как оно работает:

1. Щёлкните метку Store Information на рабочей области, нажмите клавишу Ctrl а затем щёлкните метку Make Purchase Order.

   Теперь выделены оба элемента, но один из них окружён чёрными квадратиками, а другой – незакрашенными. Элемент, выделенный чёрными квадратиками, – это всегда тот, который вы выделяли последним, и именно он считается базовым элементом.

2. Правой кнопкой мыши щёлкните любой из этих элементов, а затем выберите Relative Align – Relatively Align Below.

   Обратите внимание, что метка Store Information размещается под меткой Make Purchase Order. По умолчанию, при этом типе выравнивания элементы отстоят друг от друга на три пиксела. Кроме того, обратите внимание, что левый край метки Store Information находится на одной линии с левым краем базового элемента.

3. Щёлкните метку Supplier Information, нажмите клавишу Ctrl и щёлкните метку Store Information.
4. Правой кнопкой мыши щёлкните любой из этих элементов, а затем выберите Relative Align – Relatively Align After.

   Метка Supplier Information размещается после метки Store Information, расстояние между ними равно трём пикселам, а верхний край метки Supplier Information находится на одной линии с верхним краем базового элемента.

5. Щёлкните поле ID для раздела store, нажмите клавишу Ctrl и щёлкните метку Store Information.
6. 2. Правой кнопкой мыши щёлкните любой из этих элементов, а затем выберите Relative Align – Relatively Align Below.
7. Правой кнопкой мыши снова щёлкните любой элемент и выберите Relative Align – Relatively Align Right to Right, чтобы выровнять два элемента.

   СОВЕТ: Можно применять любое количество инструкций по относительному позиционированию элемента. Эти инструкции всегда обрабатываются в том порядке, в котором вы их применяете. Просмотреть этот порядок можно с помощью параметра itemlocation в представлении Properties.

8. Выровняйте другие поля на рабочей области с помощью относительного выравнивания, как показано на рисунке 10,. Используйте опцию Relatively Align Below для полей, отмеченных на рисунке вертикальными стрелками, и опцию Relatively Align After для горизонтальных стрелокк.
   
   Рисунок 10. Относительное выравнивание элементов в форме
   
   
   
   
9. Щёлкните на рабочей области метку Items for Purchase, нажмите клавишу Ctrl и щёлкните метку Store Information.
10. Правой кнопкой мыши щёлкните любой элемент, а затем выберите Relative Align – Relatively Align Below.

    Как и ожидалось, расстояние между элементами стало равным трём пикселам. Чтобы расширить этот интервал, выберите метку Items for Purchase и нажмите на клавиатуре клавишу "стрелка вниз", чтобы переместить элемент в нужное место.

    СОВЕТ: Для перемещения элемента на один пиксел за раз выберите элемент и нажмите на клавиатуре клавишу со стрелкой. Это так называемое "пошаговое перемещение" (nudging).

11. Переместите метку Make Purchase Order в другое положение на рабочей области. Вы увидите, что все другие элементы (за исключением метки и поля Total Price) также изменят своё положение соответственно.
12. Выберите View – Show Grid. Будет отображена сетка, которая поможет вам выполнить выравнивание элементов в форме и гарантировать, что расстояние между ними будет единообразным.
13. Выберите View – Show Rulers для отображения линеек и направляющих. Это поможет измерять элементы форм на экране.

В начало

Создание таблицы XForms

Теперь создадим таблицу XForms, чтобы предоставить пользователям интерфейс для ввода множества элементов. Выполните следующие шаги:

1. В палитре Standard Library нажмите на кнопку рядом с Table (Repeat) и выберите Table (Repeat) By Wizard.
2. Щёлкните рабочую область в том месте, где вы хотите добавить таблицу; откроется диалоговое окно Table Wizard.
3. Выберите опцию Advanced Setup (оставьте все данные без изменений), а затем нажмите Next.
4. В столбце Instance выберите poInstance; в столбце Instance Data выберите узел элемента (см. рисунок 11), а затем нажмите Next.
   
   Рисунок 11. Выбор Instance Data для таблицы
   
   
   
   
5. Для настройки столбцов щёлкните каждый элемент в столбце Display Columns (см. рисунок 12) и сделайте следующие изменения:
   • Display As: выберите опцию Text (read/write) для всех элементов за исключением Subtotal. Для Subtotal выберите опцию Text (read). Будет создано поле ввода для редактируемого элемента и метка для Subtotal.
   • Include Header: убедитесь, что выбрана эта опция; она добавляет заголовок к каждому столбцу таблицы.
   • Header: введите имя заголовка столбца. В нашем случае нужно в поле header ввести ID для элемента id. Первая буква имён других элементов, которые будут использоваться в качестве имени заголовка, должна быть заглавной.
   • Width (Pixels): оставьте ширину в 100 пикселов для каждого столбца, за исключением столбца ID. Установите ширину в 50 пикселов для столбца ID.
   • Show Border: включите отображение рамки для всех столбцов за исключением Subtotal. Мы рекомендуем отключить рамку для элементов Text (read).
   
   
   Рисунок 12. Настройка столбцов таблицы
   
   
   
   
6. Нажмите Next.
7. 7. Выберите опции Insert New Row Button и Remove Button on Each Row (разместить кнопки добавления и удаления на каждой строке), снимите выделение со всех других опций, а затем нажмите Finish.
8. Выберите область, на которой расположена таблица, нажмите клавишу Ctrl и щёлкните метку Items for Purchase.
9. 9. Правой кнопкой мыши щёлкните любой из выделенных элементов, а затем выберите Relative Align – Relatively Align Below. Созданная таблица будет выглядеть примерно как на рисунке 13.
   
   Рисунок 13. Выровненная таблица с меткой, созданная с помощью мастера
   
   
   

В начало

Настройка формул в таблице

В таблицу можно добавить формулы, умножающие количество (Quantity) на цену (Price) и получающие в результате промежуточные суммы (Subtotal), а затем складывающие все эти промежуточные суммы и получающие общую стоимость. Помочь в этом могут два табличных мастера (один для операций со строками, а другой – для операций со столбцами).

Начнём с операций со строками:

1. В представлении Outline выберите TABLE1_TABLE, правой кнопкой мыши щёлкните элемент и выберите Wizards – Table Row Operation Wizard.
2. Выберите целевой элемент (ITEM5) формулы, а затем нажмите Next (см. рисунок 14).
   
   Рисунок 14. Выбор целевого элемента в мастере операций со строками
   
   
   
   
3. Задайте формулу произведения (*) ITEM3 и ITEM4, а затем нажмите Finish.
4. В представлении Outline правой кнопкой мыши снова щёлкните TABLE1_TABLE, а затем выберите Wizards – Table Column Summation Wizard.
5. На шаге 1 мастера выберите поле TOTALPRICE1 и нажмите Next.
6. На шаге 2 выберите ITEM5 в качестве столбца, в котором будет суммироваться итог, и нажмите Finish.
7. Обратите внимание, что в представлении XForms к форме с помощью табличных мастеров были добавлены две привязки XForms. Эти привязки выполняют вычисления для полей Subtotal и Totalprice (см. рисунок 15).
   
   Рисунок 15. Привязка XForms, созданная с помощью табличных мастеров вычислений
   
   
   
   
8. Для выравнивания элементов таблицы выберите кнопку (+) на рабочей области, нажмите клавишу Ctrl и щёлкните таблицу.
9. Правой кнопкой мыши щёлкните любой элемент и выберите Relative Align – Relatively Align Below. Кнопка Insert Row переместится под таблицу.
10. В представлении Outline нажмите клавишу Ctrl и выберите оба элемента TOTALPRICE1 и TOTALPRICE_LABEL1.
11. Перетащите их под элемент ADD внутри элемента TABLE1_PANE.
12. Так как при добавлении пользователем строк таблица расширяется, необходимо разместить метку Total Price и поле относительно таблицы таким образом, чтобы при расширении таблицы они передвигались. Выберите поле ввода Total Price на рабочей области, нажмите клавишу Ctrl и щёлкните таблицу.
13. Правой кнопкой мыши щёлкните любой элемент, а затем выберите Relative Align – Relatively Align Below.
14. Выберите поле ввода Total Price, нажмите клавишу Ctrl и щёлкните метку заголовка столбца Subtotal.
15. Правой кнопкой мыши щёлкните любой элемент, а затем выберите Relative Align – Relatively Align Right to Right.

При предварительном просмотре формы для проверки правильности вычислений вы увидите, что в полях ввода Subtotal и Total Price содержатся буквы NaN, что означает Not a Number (не число). Это происходит потому, что эти поля пустые, поэтому мы фактически перемножаем два отсутствующих значения (или два пустых множества). Если заполнить все поля Quantity и Price, вы увидите, что промежуточные суммы (subtotals) и общая стоимость вычисляются правильно (см. рисунок 16).

В начало

Добавление изображения к кнопке

Теперь можно добавить изображения к кнопкам Delete Row и Insert Row, чтобы они выглядели более привлекательными. Добавляя изображения к форме, необходимо сначала включить файл изображения в форму. После добавления изображения к форме можно привязать любую кнопку или кнопку или метку к этому изображению для его отображения.

1. В представлении Enclosures разверните Data, правой кнопкой мыши щёлкните PAGE1, а затем выберите Enclose File.
2. Укажите на изображение кнопки Add, ссылка на которое приводится в разделе Загрузка. Выберите файл и нажмите Open.
3. Повторите предыдущие шаги по включению изображения для кнопки Delete (также находится в разделе Загрузка). Обратите внимание, что в представлении Enclosures теперь находятся файлы добавленных вами изображений.
4. В представлении Enclosures перетащите изображение add1 и поместите его на кнопку Add в рабочей области. Увеличьте размер кнопки и убедитесь, что на кнопке теперь присутствует изображение.
5. Повторите предыдущий шаг для изображения delete1 и кнопки Delete.
6. По умолчанию, если изображение меньше кнопки, размер его будет изменён в соответствии с размером кнопки. Теперь мы должны отцентрировать изображение на кнопке. Для этого выберите кнопку Add. В представлении Properties щёлкните кнопку Menu, а затем выберите Show Advanced Properties (см. рисунок 17).
   
   Рисунок 17. Show Advanced Properties в представлении Properties
   
   
   
   
7. В представлении Properties разверните Appearance. Установите для параметра imagemode значение clip, чтобы отцентрировать изображение в рабочей области. Кроме того, установите для параметра border значение off, а для bgcolor – transparent.
8. Повторите предыдущий шаг для кнопки Delete и выполните предварительный просмотр формы, в которой появятся новые изображения (см. рисунок 18).
   
   Рисунок 18. Предварительный просмотр формы c новыми изображениями
   
   
   

В начало

Создание передачи XForms

Передача (submission) – это набор правил, определяющий, какие данные формы передаются, и как и куда они передаются. Workplace Forms поддерживает два типа передач:

• XFDL-передачи. Они обычно передают всю форму обрабатывающему приложению. Эти передачи могут при необходимости отфильтровывать различные части формы или передавать форму в виде HTML-, а не XFDL-данных. Тем не менее, чаще всего их используют для передачи XFDL-формы целиком.
• XForms-передачи. Они не передают XFDL-элементы формы, а только модель данных или её часть. Это полезно, если вы желаете передать данные напрямую обрабатывающим приложениям или хотите сделать промежуточные (mid-population) вызовы, возвращающие данные в форму, пока пользователь с ней работает (очень похоже на вызов Web-сервиса).

Теперь добавим передачу XForms в нашу форму. Для этого определим набор правил передачи, а затем создадим кнопку, запускающую передачу данных:

1. В представлении XForms правой кнопкой мыши щёлкните Model: Default, а затем выберите Create Submission.

   Имейте в виду, что передачи XForms относятся только к одной модели данных в форме, хотя обычно более одной модели в форме не бывает.

2. В представлении XForms выберите передачу (submission). В представлении Properties теперь показываются её свойства.
3. Создайте передачу, которая записывает модель данных XForms в файл на диске. Обычно создаётся передача для перехода по URL-адресу, обрабатывающему форму, однако если вместо этого выполнить запись на диск, мы получим шанс увидеть передаваемые при обычных условиях данные. В представлении Properties (см. рисунок 19) разверните раздел XForms и сделайте следующие изменения:
   • Method: выберите put. Данные будут сохраняться в локальную файловую систему.
   • Replace: здесь определяется часть модели данных, которая будет заменяться ответными данными. Поскольку никакого ответа не ожидается, ничего выбирать не нужно.
   • Action: введите полный путь к целевому файлу, используя формат: file:\\<папка>\<имя файла>
   
   
   Рисунок 19. Установка свойств для представления XForms
   
   
   

   СОВЕТ: Workplace Forms Viewer позволяет записывать данные только в некоторые места локальной файловой системы. Это мера безопасности аналогична изолированной программной среде Java (sandbox) и не позволяет формам перезаписывать важные файлы. Формы могут выполнять запись только в каталог, в котором они содержатся, или в один из подкаталогов. Например, если XFDL-форма находится в каталоге C:\Workplace Forms\FormsProject\, записывать данные можно в file:\\C:\Workplace Forms\FormsProject\temp.xml. Если форма открывается с Web-сайта, а не из локальной файловой системы, выполнять запись в файл вообще нельзя, так как у формы нет родительского каталога в локальной файловой системе.

4. В представлении XForms перетащите узел submission в рабочую область, чтобы создать новую кнопку, связанную с этим узлом. Нажатие на кнопку запускает только что созданную передачу.
5. Измените внешний вид кнопки в представлении Properties, как показано ниже:
   • Justify: center
   • Fontinfo: 9 pt Arial (bold)
   • Fontcolor: white
   • Bgcolor: #8080FF
6. Выберите кнопку, нажмите клавишу Ctrl и выберите метку Make Purchase Order.
7. Правой кнопкой мыши щёлкните любой элемент, а затем выберите Relative Align – Relatively Align Bottom to Bottom. Кнопка переместится таким образом, что нижний её край будет на одной линии с меткой.
8. Выберите кнопку, нажмите клавишу Ctrl и выберите метку Supplier Information.
9. Правой кнопкой мыши щёлкните любой элемент, а затем выберите Relative Align – Relatively Align Right to Right. Кнопка переместится таким образом, что правый её край будет на одной линии с меткой (см. рисунок 20).
   
   Рисунок 20. Изменение положения кнопки представления XForms
   
   
   
   
10. Во время предварительного просмотра формы введите значения для обязательных полей, а затем щёлкните кнопку Submit. Откройте файл, который был записан на диск, и изучите содержащие его данные (см. рисунок 21). Обратите внимание на его соответствие модели данных вашей формы.
    
    Рисунок 21. Данные, сохранённые с помощью передачи put
    
    
    

В начало

Установка ограничений данных

Когда пользователь открывает форму, все обязательные элементы ввода имеют различный цвет фона. Этот цвет можно устанавливать любым, однако по умолчанию используется жёлтый. Этот цвет означает, что поле является необходимым. Если пользователь попытается обойти обязательный элемент ввода, появится сообщение об ошибке. Сообщение об ошибке по умолчанию предупреждает пользователя: "This entry is invalid. Please try again." (Неправильный ввод. Попробуйте снова).

Если предварительно просмотреть созданную вами форму, можно увидеть, что у полей ввода Quantity и Price жёлтый фон. Все элементы, сгенерированные из схемы, обязательны по умолчанию. Тем не менее, элементы строкового типа не являются в этой форме обязательными, поскольку в соответствии со схемой фиктивное значение является допустимым вводом для строки.

СОВЕТ: Строковое поле можно сделать обязательным, либо включив опцию mandatory в опциях XFDL-формата, либо присвоив параметру required значение true() в привязке XForms. Можно сделать другие типы данных необязательными, добавив атрибут nillable="true" к этому элементу схемы.

Теперь настроим поля store ID и supplier ID таким образом, чтобы они не принимали фиктивного значения. Конечно, для этого можно добавить ограничение схемы в модель XForms. Тем не менее, мы хотим показать, как с помощью параметра constraint задать ограничения данных для полей и как изменить сообщение об ошибке по умолчанию, выводимое при неправильном вводе:

1. Выберите поле ID для раздела store.
2. В представлении Properties разверните пункты Format, format, constraints и включите параметр mandatory.
3. Разверните patterns и щёлкните значение <empty>. Обратите внимание, что появляется ниспадающий список и кнопка Add.
4. Щёлкните кнопку Add, чтобы добавить новый шаблон в узел Pattern. Установите для нового узла шаблонов значение ID([0-9]{6}). Этот шаблон является регулярным выражением, что означает, что допустимое значение store ID должно начинаться с ID, за которым должны следовать шесть цифр.

   СОВЕТ: Все ограничения и шаблоны отображения задаются регулярными выражениями. Если вы используете определённые ограничения постоянно (например, для поля с телефонным номером), разумно сохранять ваш элемент как специальный объект, чтобы его можно было легко воссоздать. Это позволяет не вводить регулярные выражения каждый раз вручную.

5. Наконец, установим сообщение об ошибке, отображаемое при неправильном вводе: Рядом со свойством message введите сообщение: "The acceptable value should begin with 'ID' followed by six digits" (Допустимое значение должно начинаться с 'ID', за которым должны следовать шесть цифр).
6. Повторите предыдущие шаги, чтобы установить ограничения для поля ввода Supplier ID.

Выполните предварительный просмотр формы, чтобы увидеть результат; он должен быть как на рисунке 22.

В начало

Создание локализованных форм

В каждом варианте региональных настроек (локали) для представления общих понятий используются различные символы, например, символы валют, разделительные знаки в десятичных дробях и для отделения разрядов и математические символы. Более того, в большинстве локалей формат представления времени и даты также отличается. Чтобы убедиться, что ваша форма правильно отображает эту информацию, необходимо локализовать формы в соответствии с локалью (страной и языком), в которой они будут использоваться. IBM Workplace Forms разработан таким образом, что учитывает аспекты, связанные с региональными настройками и языками, что означает, что каждая форма разрабатывается для определённого языка и определённой локали.

Для локализации формы в соответствии с определёнными региональными настройками выполните следующие шаги:

1. Выберите поле ввода Quantity внутри таблицы в рабочей области.
2. В представлении Properties разверните Format, format, datatype и измените его значение на integer.
3. Выберите поле ввода Price внутри таблицы.
4. В представлении Properties разверните Format, format, datatype и измените его значение на currency. Аналогично измените тип данных полей Subtotal и Total Price на currency.
5. Создайте в рабочей области метку Non-XForms и выровняйте её относительно (и после) метки Make Purchase Order.
6. Далее, щёлкните только что созданную вами метку и измените её значение, тип данных и шаблон презентации данных в представлении Properties, как указано ниже:
   • Value: 20061001
   • Datatype: date
   • Pattern: EEEE, MMMM d, yyyy

   При предварительном просмотре формы по умолчанию используется локаль en-US, поскольку в форме отсутствуют настройки локали. Метка данных должна иметь следующий формат: Sunday, October 1, 2006.

7. Введите числовые значения в поля ввода Quantity и Price. Вы увидите, что к цене, промежуточной сумме и итоговой цене был добавлен символ доллара.
8. Поддержка локали определяется через атрибут xml:lang. Этот атрибут добавляется к XFDL-тегу в форме и определяет, для какой локали предназначена эта форма. Откройте панель Source редактора форм и добавьте атрибут xml:lang со значением fr-FR к XFDL-тегу (см. рисунок 23). В данном случае, в форме будет использоваться локаль French France.
   
   Рисунок 23. Определение локали для формы
   
   
   

Выполнив предварительный просмотр, вы увидите, что дата теперь представлена во французском формате, а денежные величины выражаются в евро, причём используются другие разграничители разрядов и десятичных дробей, как показано на рисунке 24.

В начало

Заключение

IBM Workplace Forms Designer представляет собой программу проектирования с поддержкой drag-and-drop, позволяющую разработчикам форм создавать функциональные XFDL-формы с высокой детализацией. Workplace Forms Designer V2.6.1 базируется на технологиях Eclipse Workbench с открытым исходным кодом и работает в связке с IBM Workplace Forms Viewer V2.6.1. С помощью Workplace Forms Designer разработчики создают формы, а при помощи Workplace Forms Viewer проверяют их внешний вид, разметку и логику.

Статья познакомила вас с основами Workplace Forms Designer и представила пошаговый процесс разработки формы, основанной на поддержке открытого стандарта XForms.

В начало

Загрузка

Информация о методах загрузки

Ресурсы

Научиться

• Оригинал статьи: Create a form with IBM Workplace Forms Designer (EN).
  
  
• Страница документации по продукту Workplace Forms (EN).
  
  
• Технический обзор developerWorks Workplace: Обзор IBM Workplace Forms (EN).
  
  

Обсудить

• Примите участие в обсуждении материала на форуме.
  
  
• Читайте на developerWorks блог Джона Бойера: Workplace Forms и следующее поколение Web-приложений. (EN).
  
  

Об авторах

Оценить эту статью

Комментарии

В начало

Содержание

• Разработка новой формы
• Создание новой формы
• Создание экземпляра данных XForms
• Создание меток
• Создание элементов управления для ввода данных
• Выравнивание элементов
• Создание таблицы XForms
• Настройка формул в таблице
• Добавление изображения к кнопке
• Создание передачи XForms
• Установка ограничений данных
• Создание локализованных форм
• Заключение
• Загрузка
• Ресурсы
• Об авторах
• Комментарии