ݺߣ

ݺߣShare a Scribd company logo

Inspekce zdrojového kódu J2EE aplikací s generováním komplexních fragmentů uživatelského rozhraní

•
•
J
JFormBuilder
1 of 35
Download to read offline
3 SG at CTU 3sg.czacm.org Cerny T., Chalupa V., Rychtecky L., Linhart T. 3sg-jf@googlegroups.com www.jformbuilder.org
 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
 Běžná aplikace je rozdělena na vrstvy  To umožní oddělení zájmů ▪ Prezentace - JSF, Facelets, RichFaces.. ▪ EJB, (Spring) ▪ JPA - entity
 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
 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í)
Entity Class View Form View Table
Entity Class View Form View Table
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
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
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
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
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
GMail
InputText InputDoubleText InputSecret InputSelect InputCheckBox InputDate
ACM-ICPC This form is made by JFB
 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ě?
<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
Speciální značky 2. Meta Model Konfgurace 3. Visualizér 1. Inspektor ŠDzԲ UI Widgetů Mapování
▪ 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
ŠDzԲ 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}">
▪ 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
▪ 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
▪ 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
Inspekce zdrojového kódu J2EE aplikací s generováním komplexních fragmentů uživatelského rozhraní
▪ 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
▪ 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 ? ?
▪ Ú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
▪ Quick Tour ▪ Václav Chalupa ▪ JFormBuilder.org/video
▪ 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
▪ 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 ▪
Java XML View
 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
 Prototypování aplikací  Android  .NET a další platformy  Reverse engineering  vysosej metaModel  převeď jinam
 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
? ? ?

More Related Content

Inspekce zdrojového kódu J2EE aplikací s generováním komplexních fragmentů uživatelského rozhraní

  • 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
  • 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 ŠDzԲ 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. ŠDzԲ 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. ? ? ?