1. 3
SG at CTU
3sg.czacm.org
Cerny T., Chalupa V., Rychtecky L., Linhart T.
3sg-jf@googlegroups.com
www.jformbuilder.org

2.  Vývoj enterprise aplikací
 Struktura aplikace
 Problémy s údržbou i tvořením GUI
 Závislosti 3 vrstev (coupling)
 Opakování informace a replikace rozhodnutí
 Generátory UI
 Automatizace skrze inspekci
 JFormBuilder (JFB)
 Co, kde, kdy, jak a proč
 Online tutoriál JFB
 Za hranice Javy
 MDD, XLS, XML, Aneb přátelství analytika a vývojáře
 Budoucí vize

3.  Běžná aplikace je rozdělena na vrstvy
 To umožní oddělení zájmů
▪ Prezentace - JSF, Facelets, RichFaces..
▪ EJB, (Spring)
▪ JPA - entity

4.  Entita určuje persistentní data
▪ Ale také určuje co se bude sbírat od uživatele
▪ Jak budou data vypadat, či jaká mají omezení
 Služby pracují s entitami
▪ Pokud se změní název entity musí se to promítnout i zde
 Prezentace dat (entit) v uživatelském rozhraní
▪ Formuláře a Tabulky
▪ Provázání asosiací
▪ Tabulka – formulář
▪ Navigace a menu
▪ Layout
▪ Akce

5.  Vrstva prezentace defnuje zobrazení dat uživateli
▪ Vizualizace dat
[IEEE-CSAE, Cerny et al., 2011],
[ACM-RACS, Cerny et al., 2011]
▪ Motivace
▪ Údržba Software ≈ 65-75% životního cyklu aplikace
▪ Porozumění SW ≈ 40-60% z údržby SW
▪ Vývoj uživatelského rozhraní ≈ 50% celkového vývoje
▪ Formuláře a Tabulky
▪ Jsou nejvíce svázány s persistentní vrstvou
▪ Jsou koncepčně nejsložitější části UI (omezení a validace)
▪ Jak budou tyto vypadat je určeno
 Entitou
 Layoutem
 Rozhodnutím jaké pole tam má být a jaké ne
 Uživatelskými právy
 Volbou widgetu
 Kontextem (editace, čtení, hledání)

6. Entity Class View Form
View Table

7. Entity Class View Form
View Table

8. Perzistentní vrstva
 JPA Entita
▪ Zachycuje omezení každého atributu
▪ Povolený typ
▪ Informace o očekávaných datech
 Hibernate Validation
▪ Detailní informace o validních datech pro každý atribut
Byznys vrstva
Prezentace
 Form
▪ Dekoruje entitu a její atributy
▪ Přídává omezení pro validní data
 Tabulka
▪ Dekoruje entitu a její atributy

9. class Osoba { class Firma {
String jmeno; Katg kategorie;
String prijmeni; String misto;
String email; String ulice;
String pass; String mesto;
Pohlavy pohlavy; String psc;
String narozen; String tel;
} Boolean souhlas;
}
Facebook
UiWidgety
InputText InputDoubleText InputSecret InputSelect InputCheckBox InputDate

10. class Osoba { class Firma {
String jmeno; Katg kategorie;
String prijmeni; String misto;
String email; String ulice;
String pass; String mesto;
Pohlavy pohlavy; String psc;
Date narozen; String tel;
} Boolean souhlas;
}
UiWidgety
InputText InputDoubleText InputSecret InputSelect InputCheckBox InputDate

11. class Osoba { class Firma {
String jmeno; Katg kategorie;
String prijmeni; String misto;
String email; String ulice;
String pass; String mesto;
Pohlavy pohlavy; String psc;
Date narozen; String tel;
} Boolean souhlas;
}
UiWidgety
InputText InputDoubleText InputSecret InputSelect InputCheckBox InputDate

12. class Osoba { class Firma {
String jmeno; Katg kategorie;
String prijmeni; String misto;
String email; String ulice;
String pass; String mesto;
Pohlavy pohlavy; String psc;
Date narozen; String tel;
} Boolean souhlas;
}
UiWidgety
InputText InputDoubleText InputSecret InputSelect InputCheckBox InputDate

13. GMail

14. InputText
InputDoubleText
InputSecret
InputSelect
InputCheckBox
InputDate

15. ACM-ICPC
This form is
made by JFB

16.  Vývojář opakuje svá rozhodnutí, pro použití UI Widgetů.
 Používá totožné komponenty, jen je jinak dekoruje.
 Musí replikovat nastavení již zachycené v entitě.
 Náchylnost k chybám
 Snadno přehlédnutá inkonzistence
 Nudná práce pro „opice“
 Otázka
 Jak jinak lze vytvořit UI něž manuálně?

17. <h:inputText required=„false“
 Grafcké drag & drop formy
@Column(nullable=false)
String getName() { ..
 Složité přizpůsobení
 Stále replikace informací na dvou místech, neřeší údržbu
 Neřeší nekonzistenci informací mezi dat. vrstvou a prezentací
 XML Model formy
 Stále replikace informací na dvou místech (XML a Class), neřeší údržbu
 Neřeší nekonzistenci informací mezi dat. vrstvou a prezentací
 Inspekce zdrojového kódu a následná transformace
 Machine learning
 Vizualization

18. Speciální značky
2. Meta Model
Konfgurace
3. Visualizér 1. Inspektor
Šablony
UI Widgetů
Mapování

19. ▪ Inspekce entity a následné získání MetaModelu
▪ Enitita má speciální značky
▪ JPA, Hibernate Validator, JFormBuilder nebo cokoliv, co si nastavíme v konfguraci
▪ Značky lze vytvořit dle požadavků klienta v JFB frameworku
▪ Zjištěný MetaModel nezavisí na výstupu
▪ Inspektor sestaví meta model a identifkuje vlastnosti atributů
Speciální značky
Meta Model
Inspektor

20. Šablony
Konfgurace
▪ Kompatibilita s GUI widgety UI Widgetů
▪ Konfgurace umožní provázání UI Widgetů se skupinou atributů tříd
▪ String and length > 255 inputTextArea
Mapování
▪ String and email inputEmail
▪ Není nutné mít specifckou skupinu widgetů, ale lze adaptovat cokoliv
▪ HTML, RichFaces, JSF, ICEFaces, PrimeFaces, Tomahawk, Trinidad, ADF, XML.. :)
▪ Šablona UI Widgetu odkazuje na konkrétní použití widgetu bez identifkace
specifcký hodnot
<h:inputText
onblur="validateInputText(this,..);#{onblur}"
styleClass="#{inputClass}"
rendered="#{empty render$id ? 'true' : render$id}"
required=”$notNull"
Input Text id=”$id"
Widget maxlength=”$maxLength"
size=”$size"
title=”#{text[$entity.$name]}"
value=”#{$value}">

21. ▪ Vizualizér Visualizér
▪ Dle konfgurace spojí inspektovaný atribut třídy a UIWidget
▪ Bere v potaz
▪ Vybraný profl
▪ Search, Edit, Read
▪ Vybraná práva uživatele
▪ Layout
Profl Editace Role s nižším právy

22. ▪ Snadné propagování validace do UI
▪ Snazší vyplnění formulářů
▪ User friendly – usability
▪ Lze integrovat kontextovou nápovědu
▪ Není třeba AJAX - snadná integrace s JS

23. ▪ Layout
▪ Jak vysázet vstupní pole do výsledného výstupu (formuláře)
▪ One column, two column, custom
▪ Šablona
▪ Profl
▪ Generujeme fragment zaměřený na hledání, čtení, zápis, nebo něco jiného.
▪ Bezpečnost
▪ Statická a nebo lze i Third party / Role based access control (PicketLink, Spring)
Uplný form Zamezení přístupu Jiny profl a jiný layout

25. ▪ Snadná změna poskytovatele UI Widgetů i cílové platformy
▪ Centralizace použití widgetu
▪ Vše je defnováno jednou a na jednom místě
▪ Možná Vám to připomíná Aspektové orientované programování
▪ Podpora údržby
▪ => Přenostitelnost
▪ Snadná migrace do jiného UI
▪ Téměř okamžitý přechod z RichFaces do ICEFaces
▪ Jen změna šablon pro UI Widgety

26. ▪ On-demand (run-time) generování
▪ Generování UI fragmentů na dotaz v produkci
▪ Možný contextový security framework jenž aplikuje run-time informace
▪ Zamezení běžně používaným kondicionálům v UI fragmentech
▪ Možné zlepšení výkonu načítání fragmentů (měřeno!)
▪ Možné další rozšíření
▪ Specifcké UI pro vybraného uživatele [2011 - IEEE cultural UI]
▪ Uživatel má možnost nastavení svého UI
▪ Možné rozlišovat mobilní zařízení a desktopy a ovlivnit výstup
?
?

27. ▪ Údržba UI fragmentů
▪ Značná redukce
▪ Na místo psaní formů a tabulek jen defnice UI Widgetů a mapování mezi skupinou atributů
▪ String and length > 255 inputTextArea
▪ String and email inputEmail
▪ Studie údržby
Změna Změněných souborů Změna řádků
JFormBuilder/Manuální vývoj
Nový atribut 3 / 12 6 / 126
Nová třída 9 / 7 41 / 121
Změna pořadí prvků 1 / 2 2 / 54
Globální změna - internacionalizace 25 / 29 32 / 213

28. ▪ Quick Tour
▪ Václav Chalupa
▪ JFormBuilder.org/video

29. ▪ Inspektor nemusí jen inspektovat Javu
▪ Lze i XML, UML, XLS nebo cokoliv jiného
▪ Analytik si snadno napíše v Excelu spcifkaci UI a nechá si přes JFB vygenerovat HTML
▪ Ihned vidí co vytvořil a to prodiskutuje se zákazníkem
▪ Pošle vývojáři Excel XSL, ten použije jiné šablony a nechá přes JFB vygenerovat
RichFaces UI nebo dokonce celý datový model v Javě a klidně i SQL databázi
▪ JFB dokáže daný meta model přeložit do jakékoliv textové podoby
▪ Android Speciální
značky
▪ Další Frameworky a jazyky
Meta Model
Java
XLS
Inspektor
XML

30. ▪ Tlustý datový model lze zachytit již na úrovni modelu
▪ Model-driven development
▪ UML Class model + UML Profly
▪ Z modelu lze generovat aplikaci obsahující vazbu na JFB
▪

31. Java XML
View

32.  Vývoj enterprise aplikací
 Struktura aplikace
▪ (JPA, EJB, JSF, Facelets, RichFaces, ICEFaces, ADT, apod.)
 Problémy s údržbou i tvořením GUI
 Závislosti 3 vrstev (coupling)
 Opakování informace a replikace rozhodnutí
 Generátory UI
 Automatizace skrze inspekci
 JFormBuilder (JFB)
▪ Kompatibilita s GUI widgety
▪ On-demand generation
▪ Third party / Role based access control
▪ Profly
▪ Layouty
▪ Možné zrychlení načítání stranek
▪ Udržba = nulová investice
▪ Přenositelnost
 Online tutoriál JFB
 Za hranice Javy
 MDD, XLS, XML, Aneb přátelství analytika a vývojáře

33.  Prototypování aplikací
 Android
 .NET a další platformy
 Reverse engineering
 vysosej metaModel
 převeď jinam

34.  FormBuilder: A Novel Approach to Deal with View Development and Maintenance
2011, ČERNÝ T., DONAHOO M. J.
In SofSem 2011 Proceedings of Student Research Forum. Bratislava: OKAT, 2011, p. 16-34.
ISBN 978-80-88720-17-1.
 A Profle Approach to Using UML Models for Rich Form Generation
2010, ČERNÝ T., SONG E.
In ICISA 2010 International Conference on Information Science and Applications (ICISA), 2010.
New York: IEEE Computer Society Press, 2010, p. 635-342. ISBN 978-1-4244-5941-4.
 UML-Based Enhanced Rich Form Generation,
2011, Tomas Cerny and Eunjee Song
ACM RACS 2011 – recently published at http://oslab.ssu.ac.kr/CFP/RACS2011/
 Aspektově orientované programování [Kiczales 1997]
 Model Driven Architecture – OMG.org
 Naked Objects
 MetaWidget

35. ?
? ?