Automatizované vytváranie používateľských formulárov Emil Gatial, Zolt án Balogh

1. 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ách Podporujeme 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.

2. Prehľad prezentacie • Motivácia • Prehľad XForms štandardu • Zobrazenie XForms • Automatizované vytváranie XForms • Záver • Užitočné odkazy WIKT 2010, Bratislava

3. Motivá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 WIKT 2010, Bratislava

4. XForms 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 oberver Controller oberver View Model WIKT 2010, Bratislava

5. Príklad XForms (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> WIKT 2010, Bratislava

6. Príklad XForms (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> WIKT 2010, Bratislava

7. Zobrazenie XForms Strana klienta Prehliadač WIKT 2010, Bratislava

8. Metó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 <ContactDocument> <Person> <PersonPrefixName>String</PersonPrefixName> <PersonGivenName>String</PersonGivenName> <PersonMiddleName>String</PersonMiddleName> <PersonFamilyName>String</PersonFamilyName> <PersonBirthDate>1967-08-13</PersonBirthDate> </Person> </ContactDocument> <xs:schemaxmlns: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

9. Metó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 WIKT 2010, Bratislava

10. Metó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 Prehliadač Server XForms generátor (Model + View) Zobrazenie a získanie informácií XForms (XML) Validácia a odoslanie XML odpoveď Validácia a spracovanie Pozn.: Nutnosť duplikácie validácie dát v prehliadači a aj na serveri. WIKT 2010, Bratislava

11. Zá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) WIKT 2010, Bratislava

12. Už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/ WIKT 2010, Bratislava

13. Ďakujem za pozornosť Emil Gatial emil.gatial@savba.sk Ústav InformatikySlovenská Akadémia Viet, Bratislava