XML- dreven GUI

1. XML- dreven GUI XML som basis for komplekse brukergrensesnitt Thor Åge Eldby / Andreas Bade Objectnet AS

2. Agenda • Om oss • Hva er deklarativ GUI • Aspekter ved Thinlet og SwiXML • Erfaringer fra prosjekter

3. Presentasjon av oss • Objectnet • Konsulentselskap basert i Oslo og Arendal • Rundt 30 ansatte • Andreas Bade • Erfaring med systemutvikling fra Objectnet og Accenture • Har jobbet mest med Java, men også endel med .NET • Thor Åge Eldby • Erfaring med systemutvikling fra Objectnet, Telenor Mobil, FairPlay International og LCC Europe • Jobbet med Java de seks siste årene

4. Vegloggen • System for vegtrafikksentralene i Statens Vegvesen • Registrerer hendelser som oppstår i trafikk • Administrerer utsendelse av meldinger • e- post • internett • telefonsvarer (175) • RDS (radio) • Komplekse skjermbilder • Effektiv grensesnitt • Brukes over lange perioder

5. Forvaltsys • Støtteverktøy for kontrollører i Statens Vegvesen • Registrering og oppfølging av kontroller • Kommunikasjon mot server over GPRS og WLAN • Klient på PDA • Bruker Thinlet for klient-GUI

6. Hva er deklarativ GUI

7. Klassisk GUI-programmering • Programmert GUIJFrame jFrame = new JFrame("Hello");jFrame.setSize(640, 480);JPanel jPanel = new JPanel();jFrame.getContentPane().add(jPanel);jPanel.add(new JLabel("Hello World!"));JTextField respTxtFld = new JTextField(20);jPanel.add(respTxtFld);JButton clickMeBtn = new JButton("Click Me");jPanel.add(clickMeBtn);clickMeBtn.addActionListener(...);

8. Deklarativ GUI-programmering • Deklarert GUI<frame size="640,480" title="Hello"> <panel> <label text="Hello World!"/> <textfield id="respTxtFld" columns="20" /> <button text="Click Me" action="submit"/> </panel></frame>

9. Hvorfor deklarativ GUI • Skille presentasjon og logikk • Å holde to aspekter av GUI-utvikling fra hverandre forenkler koden • GUI-designere ta seg av selve layouten • Endring uten rekompilering • GUI er naturlig hierarkisk oppbygd • XML er velegnet og oversiktlig • Mindre kode • Enklere vedlikehold • Mindre repetisjoner • Mindre feil • XML filer er tekstfiler • Sjekker inn XML istedenfor generert kode eller binær grunnlagsfil • ... gjør det også mulig å se hvilke endringer vi har gjort • Prototyping • Enkelt å stable på beina overbevisende prototyper

10. Hva kan deklareres • Konstruksjon • Grunnleggende, gjøres av alle XML-orienterte GUI-rammeverk • Aksjoner • Fra den mest enkleste informasjon om aksjon som skal tas • ... via kall av metode med referanser til lokale objekter • ... til kode innbakt i XML • Populering • Beans kopieres inn og ut av former • Validering • Ferdiglagede eller tilpassede sjekker • For eksempel: Datofelter med riktig formattering • Kontekstuell informasjon • For eksempel ett dokument eller en valgt entitet i en liste... • Kan automatisk invalidere GUI-elementer som krever konteksten

11. Hvordan brukes deklarasjonen • Kodegenerering • Kildekode generes ut i fra deklarasjonen • Dynamisk GUI-bygging • Deklarasjonen lastes opp og GUI-modellen bygges dynamisk

12. Noen XML-drevne GUI-rammeverk • SwiXml • Swing-sentrert XML-drevet GUI • Thinlet • AWT-basert XML-drevet GUI • Mozilla XUL • Sentrert rundt mozilla og ecmascript (Luxor for Java???) • Avalon / XAML • Microsoft XML-drevne GUI-drøm som skal komme med LongHorn/Vista • SVG • Kan skriptes med for eksempel javascript • Beryl XML GUI • Swing-sentrert XML-drevet GUI • Bambookit • Kommersiell GUI orientert mot web-integrasjon • XAMJ • BSD-lisensiert java-basert mark-up (vyer om å bli standard) • Glade • Gnome-basert XML-drevet GUI

13. Standarder for deklarativ GUI • XForms kan være / kunne vært starten • Hva kan en standard gi oss? • Mulighet for å gjenbruke GUI • Ett deklarativt GUI-språk • Bedre støtte i utviklingsmiljøet • Hva taler mot standardisering? • Mangel på behov • Politikk • Enkelhet og fleksibilitet

14. Introduksjon til Thinlet

15. Hva er Thinlet? • LGPL lisens • XML definisjonsfiler • Gode komponenter • Mye aktivitet • Mer info og nedlasting: http://thinlet.sourceforge.net

16. Teknisk Thinlet ABC • En enkelt java-klasse • Kjører på JVM helt ned til Java 1.1 • Velegnet til små og middels store applikasjoner • Tilpasset håndholdte enheter og applets • Proprietære GUI komponenter • Liten og kompakt (39KB komprimert) • Proprietær XML parser • Uavhengig av andre biblioteker

17. Introduksjon til SwiXml

18. SwiXml • Motor for generering av GUI basert på XML definisjoner • Bygger opp skjermbilder i kjøretid • Genererer skjermbilder basert på Swing • Egner seg godt for desktop applikasjoner • Støtter de fleste Swing komponenter • Enkel integrasjon av tredjeparts komponenter • Lite bibliotek (40kb) • Open source • Mer info: http://www.swixml.org/

19. Målplattform • Thinlet • Genererer GUI som er godt egnet for håndholdte enheter • Flyttbart mellom plattformer. • Kompakt. Optimalisert for å gi lite antall klasser. • SwiXml • Egner seg godt til desktop applikasjoner • Sterk knytning mot Swing API • Er kompakt, men er ikke kodet for å oppnå lite antall klasser.

20. Konstruksjon

21. Eksempel: Enkelt påloggingsbilde <panel columns="1" gap="5" top="50"> <label icon="on.gif" alignment="center" weightx="1"/> <panel columns="2" gap="5" top="10" halign="center"> <label text="Brukernavn:"/> <textfield name="userName"/> <label text="Passord:"/> <passwordfield name="password"/> <button text="Logg inn" colspan="2"/> </panel> </panel>

22. Eksempel: Enkel button og action <frame id="frame" title="Eksempel" size="160,100" layout="GridLayout(2,1)” > <label text="Vennligst trykk knappen” /> <button text="Trykk i vei!"/> </frame>

23. Hvordan kode mot XML GUI

24. Hvordan kode mot SwiXml GUI • SwiXml genererer standard Swing GUI. • Kode mot komponenter som for ordinære Swing komponenter • SwiXml returnerer JComponent ved tolkning av XML definisjon • Denne komponenten kan manipuleres som i standard Swing bluebutton.setText("New text");

25. Hvordan kode mot Thinlet • Koden som trengs for å starte påloggingsbildet vårt:public class TestApp extends Thinlet { public static void main(String[] args) throws IOException { TestApp testApp = new TestApp(); Object signInPnl = testApp.parse("sign-in-pnl.xml"); testApp.add(signInPnl); new FrameLauncher("Test App", testApp, 240, 288); }}

26. Hvordan kode mot Thinlet • GUI-objekter kan komponeresObject signInPnl = testApp.parse("sign-in-pnl.xml");testApp.add(tabForSignInPnl, signInPnl); • GUI-objekter kan instansieres programmatiskObject row = create(“row”);app.add(table, row);

27. Hvordan kode mot Thinlet • Finne GUI-objekterObject userName = testApp.find(“userName”); • Henting og setting av attributterString userName = testApp.getString(userName, “text”);Image logo = testApp.getIcon(“customer.gif”);testApp.setIcon(splashIcon, “icon”, logo);

28. Aksjoner / Hendelsesorientering

29. Eksempel: Bruk av metoder <panel columns="1" gap="5" top="50"> <label icon="on.gif" alignment="center" weightx="1"/> <panel columns="2" gap="5" top="10" halign="center"> <label text="Brukernavn:"/> <textfield name="userName"/> <label text="Passord:"/> <passwordfield name="password"/> <button text="Logg inn" colspan="2" action="login(userName.text, password.text)"/> </panel> </panel>

30. Eksempel: Bruk av metoder • Koden som implementerer aksjonen:public class TestApp extends Thinlet { ... public void login(String userName, String password) { System.out.println("Logger inn " + userName + " med passord " + password); }}

31. Eksempel: Bruk av metoder • Metoder kan også settes dynamisk:Object btnLogin = find(signInPnl, “btnLogin”);setMethod(btnLogin, “action”, “login(username.text, password.text)”, signInPnl, testApp);

32. Eksempel: Enkel button og action <?xml version="1.0" encoding="ISO-8859-1"?> <frame id="frame"  title="Eksempel" size="160,100"  layout="FlowLayout">    <button action="myAction" /> </frame>

33. Eksempel: Enkel button og action public class Example { public Action myAction = new AbstractAction() {   public void actionPerformed(ActionEvent arg0) { System.out.println("Button was pressed");    } }; private void start() throws Exception { SwingEngine engine = new SwingEngine(this); engine.render("Example.xml");   engine.getRootComponent().setVisible(true); } public static void main(String[] args) { (new Eksempel1()).start(); } }

34. Egenutviklede tillegg

35. Egenutviklede tillegg • Begge rammeverk har sine begrensninger • Funksjonalitet som ikke dekkes direkte av rammeverkene: • GUI kommandoer (gjenbrukbare kommandoinstanser) • Databinding (overføring av attributtverdier mellom objekter og GUI komponenter) • Validering (validering av inntastede verdier) • Kontekstinformasjon (info om hvilke dataobjekter som editeres)

36. Utvidelse og gjenbruk • Thinlet • Bruker egne, proprietære GUI komponenter. • Tungvindt å utvide med egne komponenter. • Ikke tilrettelagt for tredjeparts komponenter • SwiXml • God gjenbruk av Swing kompetanse. Føles naturlig for Swing utviklere • Enkelt å utvide med egendefinerte komponenter • Lett å dra nytte av tredjepart Swing komponenter

37. Eksempel: Egendefinert komponent public class BlueButton extends JButton { public BlueButton() { super(); setForeground(Color.blue); } } public class Example { ... private void start() { ... SwingEngine engine = new SwingEngine(this); // register ny tagg: "bluebutton" mot klassen BlueButton engine.getTaglib().registerTag( "bluebutton", BlueButton.class); ... } ... }

38. Eksempel: Egendefinert komponent <?xml version="1.0" encoding="ISO-8859-1"?> <frame id="frame"  title="Eksempel" size=“160,100"  layout="FlowLayout">    <bluebutton text="Trykk ivei!"             id="sillyButton" /> </frame>

39. Erfaringer

40. Erfaringer fra VegLoggen prosjektet • Positive • Raskere implementasjon • Redusert kodebase • Enklere vedlikehold av GUI kontra tradisjonell programmering i java • Enkelt å utvide med egne GUI komponenter • Lett å integrere med andre rammeverk • Negative • Dårlig validering av XML filer • Lite beskrivende feilmeldinger

41. Erfaringer fra Forvaltsys-prosjekt • Gode egenskaper for bruk på Personal Java • Stabilt i produksjon • Behov for bevisst strukturering • Intern XML parser er begrenset • Behov for egen arbeidstråd for å unngå GUI-blokkering • Ikke komplett GUI-rammeverk • Mangler validering, scripting og theming