1 / 27

GWT 2.0

Framework zur Erstellung von browserbasierten Applikationen. GWT 2.0. Themen. Einführung Features Entwicklungs-Zyklus UiBinder Vorteile / Nachteile MVP-Architektur (falls Zeit). GWT 1.0 GWT 1.3 GWT 1.7 GWT 2.0 GWT 2.0.4 GWT 2.1. 25. Mai 2006 18. Januar 2007 13. Juni 2009

aldan
Download Presentation

GWT 2.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Framework zur Erstellung von browserbasierten Applikationen GWT 2.0 GWT 2.0, Infopoint, Jörg Wüthrich

  2. GWT 2.0, Infopoint, Jörg Wüthrich Themen • Einführung • Features • Entwicklungs-Zyklus • UiBinder • Vorteile / Nachteile • MVP-Architektur (falls Zeit)

  3. GWT 2.0, Infopoint, Jörg Wüthrich GWT 1.0 GWT 1.3 GWT 1.7 GWT 2.0 GWT 2.0.4 GWT 2.1 25. Mai 2006 18. Januar 2007 13. Juni 2009 8. Dezember 2009 2. Juli 2010 tbd Historie

  4. GWT 2.0, Infopoint, Jörg Wüthrich Was ist GWT? • GWT = Google Web Toolkit • Framework für AJAX Applikationen, welche in Java geschrieben und debugged, aber als hochoptimiertes Javascript in verschiedenen Browsern laufen • kein Javascript Knowhow notwendig • Architektur: Client – Server • Client ist Javascript Applikation im Browser

  5. GWT 2.0, Infopoint, Jörg Wüthrich Features 1/2 • Am Ende ist es einfach Javascript • XmlHttpRequest? Da war doch was… • Sprache der Backend Implementierung frei (Kommunikation über XML / JSON / GWT-RPC) • Einbinden von Javascript (Bibliotheken) möglich • Unterstützung des Back-Buttons im Browser • Entwicklung / Optimierungen mit Standard Java-Tools möglich (z.B. Ecplise, IntelliJ, Netbeans, JProfiler) • Unterstützung von Mehrsprachigkeit

  6. GWT 2.0, Infopoint, Jörg Wüthrich Features 2/2 • In Browser-Development (<-> hosted mode) • Code Splitting – Optimierung des Downloads • UiBinder – Deklarative User-Interfaces • ClientBundle – optimierte Ressourcen-Verwaltung • Unittesting mit JUnit (GWTTestCase)

  7. GWT 2.0, Infopoint, Jörg Wüthrich Entwicklungs-Vorgehen • Applikation schreiben • im Developmentmode debuggen / testen • optimieren • Compilieren und Deployment auf einen Webserver (production mode)

  8. GWT 2.0, Infopoint, Jörg Wüthrich Development Mode • Entwickeln im Development Mode • Java Code wird in Bytecode kompiliert und läuft in einer lokalen JVM • Debugging / Break points in der IDE • Anzeige in einem Browser mit dem GWT developer plugin (IE, Firefox, Google Chrome), welches über TCP/IP mit der JVM kommuniziert • Browser Plugins nutzbar für Analysen im Browser (z.B. Firebug)

  9. GWT 2.0, Infopoint, Jörg Wüthrich Architektur Development Mode

  10. GWT 2.0, Infopoint, Jörg Wüthrich Optimieren • GWT liefert zwei Werkzeuge für Optimierungen mit • Java to Javascript compiler • Method Inlining + devirtualization • Entfernung von ungebrauchtem Code • String-Optimierungen • Speedtracer • Performance-Probleme im Browser finden • Browser Layout-Operationen und CSS

  11. Production Mode • Produktives Deployment im Production Mode • Java Code wird nach Javascript compiliert • pro Browser wird in jeder Sprache eine optimierte Variante erstellt • Hilfs-Skript, welches auswählt, welche Variante angezogen werden soll -> nur die passende Variante wird geladen • Applikationen laufen in allen bekannteren Browsern sowie mobilen Browsern für Android und das iPhone GWT 2.0, Infopoint, Jörg Wüthrich

  12. GWT 2.0, Infopoint, Jörg Wüthrich Architektur production mode • Produktion 1 IDE / SDK Webserver Browser HTTP-Request Host-Page Host-Page URL tippen HTTP-Request Java-Client Code JRE-Emulation Library Browser-Typ / Sprache auslesen generiertes Javascript 2 3 Rendering 4 Server-Code Servlet o.ä. Service-Calls XmlHttpRequest (XML, JSON, GWT-RPC)

  13. GWT 2.0, Infopoint, Jörg Wüthrich Ohne UiBinder: „Swing“-Stil privatefinal TextBox firstName; privatefinal FlexTable detailsTable; … public EditContactView() { VerticalPanel contentDetailsPanel = new VerticalPanel(); contentDetailsPanel.setWidth("100%"); detailsTable = new FlexTable(); detailsTable.setCellSpacing(0); detailsTable.setWidth("100%"); firstName = new TextBox(); … detailsTable.setWidget(0, 0, new Label("Firstname")); detailsTable.setWidget(0, 1, firstName); … contentDetailsPanel.add(detailsTable); }

  14. GWT 2.0, Infopoint, Jörg Wüthrich UiBinder: deklarativ <?xmlversion="1.0"encoding="UTF-8"?> <ui:UiBinderxmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui' ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat' ui:generateKeys="com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator" ui:generateLocales="default"> <g:HTMLPanel> <table> <tr> <td><ui:msgdescription="firstName">Firstname</ui:msg></td> <td><g:TextBoxui:field="firstName"/></td> </tr> ... <tr> <tdcolspan="2"><g:Buttonui:field="saveButton"> <ui:msgdescription="saveButton">Save</ui:msg> </g:Button> ...</td> </tr> </table> </g:HTMLPanel> </ui:UiBinder>

  15. GWT 2.0, Infopoint, Jörg Wüthrich UiBinder: deklarativ publicclass EditContactView extendsCompositeimplements EditContactPresenter.Display { // @UiTemplate("EditContactView.ui.xml") interface MyUiBinder extends UiBinder<Widget, EditContactView>{} privatestatic MyUiBinder uiBinder = GWT.create(MyUiBinder.class); @UiField TextBox firstName; @UiField Button saveButton; ... public EditContactView() { initWidget(uiBinder.createAndBindUi(this)); }

  16. GWT 2.0, Infopoint, Jörg Wüthrich Vorteile • Sehr gut dokumentiert • Browser-Abhängigkeiten weitgehend eliminiert durch generiertes Javascript • Browser „Back“ Button kann unterstützt werden • Es können trotz Webapplikation sehr performante GUIs entwickelt werden • Einfach anzuwenden für Java-Entwickler • Klare Trennung von GUI- und Server-Code • Open Source

  17. GWT 2.0, Infopoint, Jörg Wüthrich Nachteile • reine GWT-Applikationen sind nicht sichtbar für Such-Maschinen (kein Html, nur Javascript) -> Mischform notwendig • Im schlimmsten Fall muss generiertes Javascript debuggt werden, um browserspezifische Probleme eliminieren zu können

  18. GWT 2.0, Infopoint, Jörg Wüthrich Referenzen • http://code.google.com/webtoolkit/ - die GWT-eigene Seite • http://www.vogella.de/articles/GWT/article.html - separates GWT-Tutorial • http://dl.google.com/io/2009/pres/Th_0200_GoogleWebToolkitArchitecture-BestPracticesForArchitectingYourGWTApp.pdf - ausführliche Beschreibung von best practices • http://dl.google.com/io/2009/pres/W_1230_MeasureinMilliseconds-PerformanceTipsforGoogleWebToolkit.pdf - Highspeed GWT Applikationen • http://www.fh-htwchur.ch/uploads/media/Vortrag_02.pdf - Präsentation über GWT

  19. GWT 2.0, Infopoint, Jörg Wüthrich Anhang

  20. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • M odel V iew C ontroller • Grösster Nachteil: immer noch viele Abhängigkeiten zwischen den Komponenten Controller View Model

  21. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • Model View Presenter versucht, die Abhängigkeiten zu minimieren View Presenter Model

  22. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • publicclass EditContactPresenter implements Presenter{ • publicinterface Display { • HasClickHandlers getSaveButton(); View Presenter Model publicclass Contact implements Serializable { public String id; public String firstName; public String lastName; public String emailAddress;

  23. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • Presenter beinhaltet Interface, welches von der View implementiert werden muss publicclass EditContactPresenter implements Presenter{ publicinterface Display { HasClickHandlers getSaveButton(); HasClickHandlers getCancelButton(); HasValue<String> getFirstName(); HasValue<String> getLastName(); HasValue<String> getEmailAddress(); Widget asWidget(); } …

  24. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • View-Klasse implementiert das Interface • Kaum Funktionalität -> einfach zu „mocken“ publicclass EditContactView extends Composite implements EditContactPresenter.Display { @UiField TextBox firstName; @UiField Button saveButton; public HasValue<String> getFirstName() { returnfirstName; } public HasClickHandlers getSaveButton() { returnsaveButton; }

  25. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • Presenter registriert sich für Events der View privatevoid bind() { this.display.getSaveButton().addClickHandler( new ClickHandler() { publicvoid onClick(ClickEvent event) { doSave(); } }); this.display.getCancelButton().addClickHandler( new ClickHandler() { publicvoid onClick(ClickEvent event) { eventBus.fireEvent(new EditContactCancelledEvent()); } }); }

  26. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • Aufruf der EditContactView -> Vorbereiten der zu editierenden Daten publicvoid prepareEdit(Contact editContact) { contact = editContact; display.getFirstName().setValue(contact.getFirstName()); display.getLastName().setValue(contact.getLastName()); display.getEmailAddress().setValue(contact.getEmailAddress()); }

  27. GWT 2.0, Infopoint, Jörg Wüthrich M odel V iew P resenter • Abspeichern der Änderungen (Update Model) privatevoid doSave() { contact.setFirstName(display.getFirstName().getValue()); contact.setLastName(display.getLastName().getValue()); contact.setEmailAddress(display.getEmailAddress().getValue()); rpcService.updateContact(contact, new AsyncCallback<Contact>() { publicvoid onSuccess(Contact result) { eventBus.fireEvent(new ContactUpdatedEvent(result)); } publicvoid onFailure(Throwable caught) { Window.alert("Error updating contact"); } }); }

More Related