Automatizované vytváranie používateľských formulárov

Emil Gatial, Zoltán Balogh

Ústav Informatiky, Slovenská Akadémia Vied

Bratislava

11. 11. 2010

Priemyselný výskum v oblasti efektívnej práce s rozsiahlymi dátami v používateľsky orientovaných aplikáciáchPodporujeme výskumné aktivity na Slovensku/Projekt je spolufinancovaný zo zdrojov EÚ.

Na realizáciu projektu sme získali nenávratný finančný príspevok v rámci Operačného programu výskum a vývoj.

WIKT 2010, Bratislava

Prehľad prezentaciePrehľad prezentacie

• Motivácia• Prehľad XForms štandardu• Zobrazenie XForms• Automatizované vytváranie XForms• Záver• Užitočné odkazy

11.11.2010

WIKT 2010, Bratislava

MotiváciaMotivácia

• Zjednodušenie vytvorenia používateľského rozhrania pre XML dáta• Použitie existujúcich nástrojov pre automatické vytváranie

používateľských rozhraní a schéma ich integrácie s aplikačnou vrstvou• Výhody použitia XForms štandardu ako používateľského rozhrania

– mobilné zariadenia, zariadenia bez podpory jazyka JavaScript

11.11.2010

WIKT 2010, Bratislava

XForms architektúraXForms architektúra

• XForms je zalozený MVC (model-view-control) návrhovom vzore– Model: reprezentácia dát

– View: prezentácia dát

– Controller: riadenie a dohľad nad dátovým modelom a jeho zobrazením; komunikácia so serverom

11.11.2010

Controller

View Model

oberver

oberver

WIKT 2010, Bratislava

Príklad Príklad XXFFormsorms (model) (model)

• V DOM štruktúre sú komponenty „model“ aj „view“ reprezentované ako samostatné stromy definované pomocou XML

• XForms model definuje dátový model v rámci elementu model: <model>  <instance>    <crisis>      <type/>      <level/>    </crisis>  </instance>  <submission id="form1" action=“crisis" method="get"/></model>

• Element „instance“ obsahuje dáta modelu• Dáta sú zbierané do definovanej štruktúry (vždy XML)    <crisis>

   <type/>   <level/> </crisis>

• Po zadaní dát „controller“ validuje a zašle XML na spracovanie    <crisis>

   <type>SwineFlu</type>   <level>4</level>

  </crisis>

11.11.2010

WIKT 2010, Bratislava

Príklad Príklad XXFFormsorms (view) (view)

• XForms definuje používateľské rozhranie pomocou XHTML značiek ktoré sú mapované na model dát:<input ref=“type"> <label>Crisis Type</label></input><input ref="level"> <label>Warnning Level</label></input><submit submission="form1"> <label>Submit New Crisis</label></submit>

• Výsledný XForms dokument<xforms><model>  <instance>    <crisis>      <type/>      <level/>    </crisis>  </instance>  <submission id="form1" action=“crisis" method="get"/></model><input ref=“type"><label>Crisis Type</label></input><input ref="level"><label>Warnning Level</label></input><submit submission="form1"><label>Submit New Crisis</label></submit></xforms>

11.11.2010

WIKT 2010, Bratislava

Zobrazenie Zobrazenie XFormsXForms

Strana klienta

Prehliadač

11.11.2010

WIKT 2010, Bratislava

Metóda automatizovaného vytvárania formulárovMetóda automatizovaného vytvárania formulárov

• Vytvorenie XML schém pre výstupné XML dáta.– Existujú automatické nástroje (trang, XMLbeans, oxygenxml a stylus studio)– Nutnosť skontrolovať a prípadne upraviť vygenerovanú XML schému

11.11.2010

<ContactDocument> <Person> <PersonPrefixName>String</PersonPrefixName> <PersonGivenName>String</PersonGivenName> <PersonMiddleName>String</PersonMiddleName> <PersonFamilyName>String</PersonFamilyName> <PersonBirthDate>1967-08-13</PersonBirthDate> </Person></ContactDocument>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified"> <xs:element name="ContactDocument" abstract="false" nillable="false"> <xs:complexType> <xs:sequence> <xs:element name="Person"> <xs:complexType> <xs:sequence> <xs:element name="PersonPrefixName" type="xs:string" minOccurs="0"/> <xs:element name="PersonGivenName" type="xs:string"/> <xs:element name="PersonMiddleName" type="xs:string" minOccurs="0"/> <xs:element name="PersonFamilyName" type="xs:string"/> <xs:element name="PersonBirthDate" type="xs:string" minOccurs=„0"/> </xs:sequence> </xs:complexType> </xs:element> </xs:sequence> </xs:complexType> </xs:element></xs:schema>

WIKT 2010, Bratislava

Metóda automatizovaného vytvárania formulárovMetóda automatizovaného vytvárania formulárov

• Vytvorenie XForms formulára na základe XML Schémy

– Visual XForms Designer• Poloautomatický spôsob

• Vhodný pre statické alebo menej často meniace sa dátové modely

• Vizuálny nástroj (drag&drop)

– XRX (XForms/REST/XQuery)

• Automatický spôsob generovania XForms pre XML databázy

• Náročnejší na konfiguráciu

• Výsledky nie vždy spĺňajú očakávania

11.11.2010

WIKT 2010, Bratislava

Metóda automatizovaného vytvárania formulárovMetóda automatizovaného vytvárania formulárov

• Vytvorenie Xforms– Kombinácia komponentov

„model“ ako XML dáta a „view“ ako vygenerované zobrazenie

• Zobrazenie XForms– Spracovanie XForms na

serverovej strane (XSLTForms, BetterForms)

– Spracovanie XForms v prehliadači (XSLTForms, Uniquity, Firefox Plugin)

• Validácia a zaslanie informácií (XML)

• Validácia a spracovanie XML odpovede

11.11.2010

ServerPrehliadač

XForms (XML)

XML odpoveď

XForms generátor(Model + View)

Validácia a spracovanie

Validácia a odoslanie

Zobrazenie a získanie

informácií

Pozn.: Nutnosť duplikácie validácie dát v prehliadači a aj na serveri.

WIKT 2010, Bratislava

ZáverZáver

• Vytváranie XML schémy z XML dát vyžaduje ďalšie úsilie zo strany vývojára– Vizuálne nástroje (Visual XML tools, XML Spy a iné)

– Vytvoriť medatáta pre určitú množinu XML dát (preferencie na typ, obmedzenie, atď)

• Generovanie XForms formulárov– Poloautomatické vytváranie pomocou vizuálnych nástrojov je preferované najmä kvôli vizuálnej

kontrole

– Automatické vytváranie XRX je vhodné pre jednoduché XML dáta. Nemusí vytvoriť požadovanú štrutúru hlavne pre zložité dátové modely (vnorené dáta)

11.11.2010

WIKT 2010, Bratislava

Užitočné odkazyUžitočné odkazy

Odkazy na XForm dokumentáciu:– XForms špecifikácia: http://www.w3.org/TR/2009/PR-xforms11-20090818/

– XForms tutoriál: http://www.w3schools.com/xforms/default.asp

– XForms na Wikipedii: http://en.wikipedia.org/wiki/XForms

– XForms ukážky: http://www.orbeon.com/forms/demos

– XForms editor pre Eclipse: http://www.ibm.com/developerworks/xml/library/x-xfrmdesigner/

11.11.2010

Ďakujem za pozornosťĎakujem za pozornosť

Emil Gatialemil.gatial@savba.sk

Ústav InformatikySlovenská Akadémia Viet, Bratislava