automatizované vytváranie používateľských formulárov emil gatial, zolt án balogh

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


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


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


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


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


Zobrazenie Zobrazenie XFormsXForms

Strana klienta

Prehliadač

11.11.2010


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>



• 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



• 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.


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


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 [email protected]

Ústav InformatikySlovenská Akadémia Viet, Bratislava

automatizované vytváranie používateľských formulárov emil gatial, zolt án balogh

Documents