Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

XML- dreven GUI XML som basis for komplekse brukergrensesnitt

Liknende presentasjoner


Presentasjon om: "XML- dreven GUI XML som basis for komplekse brukergrensesnitt"— Utskrift av presentasjonen:

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 A

3 Presentasjon av oss Objectnet Andreas Bade Thor Åge Eldby
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 -A

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 A System for Statens vegvesen Behandler hendelser i på vegnett. Meldinger til trafikanter via avis, radio, tekst tv, internett Saksbehandligssystem for operatører med integrasjon mot flere andre systemer Komplekse skjermbilder Designet for bruk over lengre perioder Mye bruk av hurtigtaster o.l.

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 -T Fortell en historie om kontrolløren Kommer ut til kontrollstasjonen Logger seg på over GPRS og WLAN Går inn å registrere fører og bil Markerer eventuelle mangler

6 Hva er deklarativ GUI T

7 Klassisk GUI-programmering
Programmert GUI JFrame 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(...); -T

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> T

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 A Tydelig skille mellom presentasjon og logikk Presentasjon spesifiseres i egne filer Gir mindre java-GUI kode Mindre repetisjoner Kunn kall til GUI motor for generering XML er hiearkisk -> GUI er hiearkisk tagger = komponenter hierarki i XML = hierarkki i GUI Lettere å lese skjermbile ut fra XML enn java Kan gi god støtte for GUI- verktøy Bedre enn generere binære filer Enklere å tolke og opprette XML filer enn binære filer Lettere å kjøre diff mellom to versjoner XML- filer kan diffes enkelt - enklere enn generert kode Enkelt å lage prototyper Prototypene kan raskt opprettes Vil ligne på sluttresultatet

10 Hva kan deklareres Konstruksjon Aksjoner Populering Validering
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 A Konstruksjon - tagger definerer instanser av komponenter. Komponenter blir instansiert og plassert i skjermbilde Aksjoner - knytte kode mot komponenter - angi hvilken kode som skal kjøre ved ulike aksjoner Populering - enkelte rammeverk kan binde domeneobjekter mot komponenter endring i komponenter (av bruker) -> endring på domeneobjekter endring av domeneobjekter -> endring på domeneobjekter Validering - noen rammeverk kan angi hvilke verdier/ formater som er gyldige for felter Rammeverk for definisjon av validering utførelse av validering presentasjon av valideringsfeil for bruker Kontekstuell informasjon - informasjon om hvilke domeneobjekter som editeres Objekter under editering registreres i kontekst Konteksten kan spørres om hvilke objekter ...

11 Hvordan brukes deklarasjonen
Kodegenerering Kildekode generes ut i fra deklarasjonen Dynamisk GUI-bygging Deklarasjonen lastes opp og GUI-modellen bygges dynamisk A Noen rammeverk genererer kode fra XML filer - den genererte koden kjøres Noen rammeverk : bygger GUI dynamisk GUI bygges opp under kjøretid på basis av XML definisjonen Ingen kodegenerering

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 Bambookit Kommersiell GUI orientert mot web-integrasjon XAMJ BSD-lisensiert java-basert mark-up (vyer om å bli standard) Glade Gnome-basert XML-drevet GUI T

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 T XForms er ikke komplett Kan være starten Mangler komponenter Standard GUI befinner seg i øvre del av applikasjonen Lav binding -> lett å erstatte (gjenbruk unødvendig) Enklere opplæring med et GUI-språk For eksempel: Mange kan html Standardisert språk vil bli bedre støttet Ikke standard Ikke tungtveiende nok (de vi nevnte) Not-invented here Proprietære vil gi enklere bedre støtte til proprietære komponenter Standardisering er tungt og her vil det ikke være verdt det

14 Introduksjon til Thinlet

15 Hva er Thinlet? LGPL lisens XML definisjonsfiler Gode komponenter
Mye aktivitet Mer info og nedlasting: T Utvidelse for Pnuts Theodore - Thinlet RAD - (bruker selv Thinlet) Skinlet

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 T 6500 linjer i siste versjon J2ME (konvertering) - Porsche laget siste versjon av denne Komponenter er minimalistisk, men er gode å styre med stylus Lite rom og lite egnet for utvidelser Bruker kun canvas og hendelser fra AWT

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: A Genererer GUI basert på XML definisjon i kjøretid ingen kodegenerering Bygger skjermbilder basert på Swing Bruker vanlige Swing komponenter Velegnet for desktop applikasjoner God støtte for MDI - hurtigtaster - standard utseende som virker naturlig for brukerens operativsystem Enkelt å integrere med tredjeparts komponenter Lett å utvide med egne komponenter Lite biliotek Kompakt Open Source Jevn, aktiv utvikling

19 Målplattform Thinlet SwiXml
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. A Rammeverkene er ulike på målplatform ulike egenskaper / bruksområder Thinlet GUI som egner seg på håndholdte enheter Flyttbart mellom platformer kan kjøre på desktop håndholdte enheter Er kompakt Lite objektorentert Lite antall klasser SwiXml Velegnet for desktop appliaskjoner -feks klienter med Windows Sterk knytning mot Swing Krever Swing på klienten Kompakt Selv om : Ikke stor vekt å være kompakt

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> T * Vis bruk av paneler, ikon, felter og knapp

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> A Definisjonen Skal vise: ett vindu som vises som frame. - har tittel ”Eksempel” ~ angitt med attributten title - størrelsen er satt til 160,100 ~ attributten size - layout er GridLayout med en kolonne og to rader – GridLayout (2,1) ’~~. ’~~. ’~~. ’~~. ’~~. ’~~. ’~~. ’~~. ’~~. ’~~. ’~~. En label med teksten ”Vennligst trykk knappen” En knapp med teksten ”Trykk i vei!” Når bruker klikker, skal teksten på knappen endre seg. - angitt ved en action ~ action = sillyAction

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"); A SwiXml genererer standard Swing GUI - bruker standard Swing komponenter Kode mot SwiXml = kode mot Swing SwiXml returnerer rotkomponent som JComponent

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, , 288); } } T Ikke noen egen typer for komponenter Komponent er kjedete objekt-arrays Egenskap - verdi - neste array Grusomt å debugge FrameLauncher for stand-alone applikasjoner og AppletLauncher for applets

26 Hvordan kode mot Thinlet
GUI-objekter kan komponeres Object signInPnl = testApp.parse("sign-in-pnl.xml"); testApp.add(tabForSignInPnl, signInPnl); GUI-objekter kan instansieres programmatisk Object row = create(“row”); app.add(table, row); T Legge objekter i tom tab eller addere til panel eller sette inn objekter på en posisjon Alle GUI-objekter kan instansieres og innsettes programmatisk

27 Hvordan kode mot Thinlet
Finne GUI-objekter Object userName = testApp.find(“userName”); Henting og setting av attributter String userName = testApp.getString(userName, “text”); Image logo = testApp.getIcon(“customer.gif”); testApp.setIcon(splashIcon, “icon”, logo); T Alle komponenter som er navngitt kan gjenfinnes Alle egenskaper hentes ut med get<type>(<GUI-objekt>, <navn på egenskap>)

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> T Aksjoner har tilgang til andre GUI-elementer og deres egenskaper

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); } } T Et parameter på parse-metoden kan sette en annen klasse til handler

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); T Her settes: Knapp for action Metode Rotobjektet Handler-objektet

32 Eksempel: Enkel button og action
<?xml version="1.0" encoding="ISO "?> <frame id="frame"   title="Eksempel" size="160,100"   layout="FlowLayout">    <button action="myAction" /> </frame> A Vi setter aksjon for knappen ved hjelp av attributten "action" Navn refererer til public action i vindusklassen - vises på neste slide

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(); } A I metoden start() instansierer en SwingEngine for å tolke definisjonen Filen ”example.xml” leser i metoden ”render” ~ GUI bygges opp. Setter rotkomponent synlig ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ ¨~~’ knappen myButton deklareres som en public variabel - dette gjør at SwiXML kan sette denne referansen ved oppbygning av GUI Aksjonen myAction deklareres som public. - knyttes mot myAction definert på myButton myAction endrer tekst på knappen

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) A Begge rammeverkene har en del GUI- relatere områder som ikke er dekket. Det er viktig at rammeverkene setter en begrensning på hvilke deler av GUI- utviklingen som støttes. - det er likevel flere områder som er veldig relatert til rammeverkene – og som støttes av enkelte andre GUI rammeverk - Validering – kontroll av inntastede verdier i henhold til lovlige verdier og formater – rapportering av valideringsfeil til brukeren. Databinding – overføring av verdier fra / til bakenforliggende dataobjekter i GUI. Context – informasjon om hvilke dataobjekter som editeres av bruker – vite hvilke som er lagret, ikke lagret, hvilke som er åpne m.m. GUI kommandoer – gjenbruk av brukerkommandoer - f.eks samme kommando til knapp og menyvalg. Gjenbruk av ikoner, hurtigtaster o.l. på kryss av skjermbilder / representasjon

36 Utvidelse og gjenbruk Thinlet SwiXml
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 A Thinlet Bygger ikke på eksisterende GUI komponenter / rammeverk Vanskelig å utvide med egne komponenter Ikke tilpasset tredjeparts / egenutviklede komponenter SiwXml Gir god gjenbruk av kompetanse - på Swing Enkelt å utvide Tredjeparts komponenter Egendefinerte 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); A Først defineres en klasse ved navn BlueButton I konstruktør settes fargen til å være blå. ¨~ ~, ¨~ ~, ¨~ ~, ¨~ ~, ¨~ ~, ¨~ ~, ¨~ ~, ¨~ ~, ¨~ ~, ¨~ ~, Klassen Example initierer SwingEngine. taggen <bluebutten> registreres sammen med klasse BlueButton. Dette gir oss muligheten til å bruke taggen <bluebutton> mot den nye klassen

38 Eksempel: Egendefinert komponent
<?xml version="1.0" encoding="ISO "?> <frame id="frame"   title="Eksempel" size=“160,100"   layout="FlowLayout">    <bluebutton text="Trykk ivei!"              id="sillyButton" /> </frame> A istendenfor <button> bruker vi her <bluebutton> <bluebutton> refererer til den tagg som ble registrert på SwiXml motoren. SwiXML vet nå at klassen BlueButton skal instansieres ved tagg <bluebutton>

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 A Hvorfor valgte vi swixml? Relativt modent Svært lett å komme i gang med God nok dokumentasjon Få gode andre alternativer for desktop Lett å utvide Egner seg bedre for desktop aplikasjoner enn Thinlet Positive Lett å prototype Lett å endre skjermbilder God oversikt Lett å integrere mot flere andre rammeverk (Mer) behagelig å jobbe med XML enn java GUI Negative Vanskelig å finne feil Dårlige feilmeldinger Mangelfull validering

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 T Brukes med Crème JVM og Windows Mobile 2003 Ikke noe bra alternativ for desktop Har sett at det har kjørt i evig løkke av og til Vår skyld eller Thinlets skyld? Brukte opprinnelig en klasse som hadde alle metodene Thinlet gjør det fristende å følge deres eksempel Skulle gjerne lagt til egne tagger å brukt dem Mangler for eksempel drag&drop Mangel på eksternalisering av funksjonalitet gjør modifisering vanskelig

42


Laste ned ppt "XML- dreven GUI XML som basis for komplekse brukergrensesnitt"

Liknende presentasjoner


Annonser fra Google