• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Architecting your GWT applications with GWT-Platform - Lesson 02
 

Architecting your GWT applications with GWT-Platform - Lesson 02

on

  • 11,930 views

Write GXT3 application using GWTP

Write GXT3 application using GWTP

Statistics

Views

Total Views
11,930
Views on SlideShare
6,990
Embed Views
4,940

Actions

Likes
3
Downloads
100
Comments
0

42 Embeds 4,940

http://vivagwt.blogspot.com 2001
http://vivagwt.blogspot.com.es 516
http://vivagwt.blogspot.fr 380
http://vivagwt.blogspot.in 260
http://vivagwt.blogspot.mx 210
http://vivagwt.blogspot.com.br 192
http://vivagwt.blogspot.com.ar 187
http://vivagwt.blogspot.de 157
http://vivagwt.blogspot.it 133
http://vivagwt.blogspot.ru 122
http://vivagwt.blogspot.ca 118
http://vivagwt.blogspot.hu 89
http://vivagwt.blogspot.kr 79
http://vivagwt.blogspot.ch 64
http://vivagwt.blogspot.co.uk 61
http://vivagwt.blogspot.ro 46
http://vivagwt.blogspot.be 36
http://vivagwt.blogspot.nl 35
http://vivagwt.blogspot.hk 30
http://vivagwt.blogspot.pt 22
http://vivagwt.blogspot.jp 21
http://vivagwt.blogspot.cz 21
http://vivagwt.blogspot.co.at 20
http://vivagwt.blogspot.co.il 19
http://vivagwt.blogspot.com.au 17
http://vivagwt.blogspot.dk 17
http://translate.googleusercontent.com 14
http://vivagwt.blogspot.tw 10
http://vivagwt.blogspot.fi 8
http://vivagwt.blogspot.se 8
http://vivagwt.blogspot.com.tr 8
http://vivagwt.blogspot.sg 6
http://vivagwt.blogspot.no 6
http://vivagwt.blogspot.ae 5
http://vivagwt.blogspot.gr 5
http://vivagwt.blogspot.sk 5
http://webcache.googleusercontent.com 3
http://vivagwt.blogspot.ie 3
http://vivagwt.blogspot.co.nz 2
https://si0.twimg.com 2
http://72.30.186.176 1
http://www.vivagwt.blogspot.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Architecting your GWT applications with GWT-Platform - Lesson 02 Architecting your GWT applications with GWT-Platform - Lesson 02 Presentation Transcript

    • Architecting your GWT application with GWT- PlatformJuan Manuel Rojas R.http://rhemsolutions.com/ Lima, Perú 26/10/2012
    • Architecting your GWT applicationGoogle found that a Model-view-presenter(MVP) architecture works best whendeveloping GWT appshttps://developers.google.com/web-toolkit/articles/mvp-architectureModel View Presenter FrameworksMvp4ggwt-dispatchgwt-platform
    • GWT-PlatformIts an open source MVP framework, thatsupports many nice features of GWT, includingcode splitting and history management, with asimple annotation-based API.
    • A highly productive app stack UI (MVP) gwt-platform (GWTP) RPC GWT RequestFactory PostgreSQL JPA 2.0 - PostgreSQLhttp://www.youtube.com/watch?feature=player_detailpage&v=imiquTOLl64#t=200s
    • Google Plugin for EclipseUpdate sitesEclipse 4.2 (Juno)http://dl.google.com/eclipse/plugin/4.2
    • GWTP Eclipse PluginTo install the GWTP Eclipse Plugin, fromEclipse go to Help > Install New SoftwareClick on Add...Name: GWTPLocation: http://plugin.gwt-platform.googlecode.com/hg/update
    • Clean example code1. Delete theme lines from Module.gwt.xml2. Delete files from Entry point client package GreetingService package com.example.client; GreetingServiceAsync server package, import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.Window; GreetingServiceImpl shared packaged public class FirstProject implements EntryPoint { FieldVerifier src/test/java public void onModuleLoad() { GwtTestFirstProject Window.alert("empty project"); } src/test/resources } FirstProjectJUnit.gwt.xml3. Clean Css file and html table code src/main/webapp4. Delete servlet definition from web.xml src/main/webapp/WEB-INF
    • Dependency injection (DI)Separate behavior from dependency resolution.Injects the dependent element (object or valueetc) to the destination automatically.Reduction of boilerplate code in the applicationobjects since all work to initialize or set updependencies is handled by a providercomponent.http://en.wikipedia.org/wiki/Dependency_injection
    • Dependency injection for GWTgoogle-ginGIN is built on top of Guice and uses (a subsetof) Guices binding language. <!-- google-gin --> <dependency> <groupId>com.google.gwt.inject</groupId> <artifactId>gin</artifactId> <version>2.0.0</version> <exclusions> <exclusion> <groupId>com.google.gwt</groupId> <artifactId>gwt-servlet</artifactId> </exclusion> </exclusions> </dependency>
    • Dependency injection for Java 5google-guiceThink of Guices @Inject as the new new.Guice embraces Javas type safe nature usinggenerics and annotations. <!-- google guice --> <dependency> <groupId>com.google.inject</groupId> <artifactId>guice</artifactId> <version>3.0</version> </dependency>
    • Dependency injection GIN Constructor injection Field injectionpublic class ClientPlaceManager { public class ColaboradorPresenter { @Inject @Inject Messages messages; public ClientPlaceManager(final EventBus eventBus, final TokenFormatter tokenFormatter) { public ColaboradorPresenter() { //eventBus and tokenFormatter are not null //messages is null } }} protected void onBind() { //messages is not null } }
    • Dependency injection GIN (Continuation) @Provides Methods When you need create and initialize an object. public class ClientModule extends AbstractPresenterModule { @Provides @Singleton public AppRequestFactory createRequestFactory(EventBus eventBus, MyDefaultRequestTransport requestTransport) { AppRequestFactory factory = GWT.create(AppRequestFactory.class); factory.initialize(eventBus, requestTransport); return factory; } } public class ColaboradorPresenter { private final AppRequestFactory factory;How to inject @Inject public ColaboradorPresenter(Provider<AppRequestFactory> provider){ factory = provider.get(); } }
    • Setting GWTP and GXT3 <properties>Add to your Module.gwt.xml ... <gwtp.version>0.7</gwtp.version> ...<inherits name=com.sencha.gxt.ui.GXT/> </properties><inherits name=com.gwtplatform.mvp.Mvp/> <!-- MVP component --> <dependency>Add to your POM.xml <groupId>com.gwtplatform</groupId> <artifactId>gwtp-mvp-client</artifactId> <version>${gwtp.version}</version> <scope>provided</scope> <!-- sencha gxt3 --> </dependency> <dependency> <!-- Annotation component --> <groupId>com.sencha.gxt</groupId> <dependency> <artifactId>gxt</artifactId> <groupId>com.gwtplatform</groupId> <version>3.0.1</version> <artifactId>gwtp-processors</artifactId> </dependency> <version>${gwtp.version}</version> <scope>provided</scope> </dependency>
    • Setting GWTP Create the directories com.example.clientimport static java.lang.annotation.ElementType.FIELD;import static java.lang.annotation.ElementType.PARAMETER; |--presenterimport static java.lang.annotation.ElementType.METHOD;import static java.lang.annotation.RetentionPolicy.RUNTIME; |--view |--place@BindingAnnotation@Target({ FIELD, PARAMETER, METHOD }) public class NameTokens {@Retention(RUNTIME)public @interface DefaultPlace { }} import com.google.web.bindery.event.shared.EventBus; public class ClientPlaceManager extends PlaceManagerImpl { private final PlaceRequest defaultPlaceRequest; @Inject public ClientPlaceManager(final EventBus eventBus, final TokenFormatter tokenFormatter, @DefaultPlace final String defaultPlaceNameToken) { super(eventBus, tokenFormatter); this.defaultPlaceRequest = new PlaceRequest(defaultPlaceNameToken); } public void revealDefaultPlace() { revealPlace(defaultPlaceRequest, false); }
    • Setting GIN for GWTPInheriting the GIN module<inherits name="com.google.gwt.inject.Inject"/>Create a gin package in the client sidepublic class ClientModule extends AbstractPresenterModule { Define objects @Override available for protected void configure() { injection install(new DefaultModule(ClientPlaceManager.class)); }}import com.google.web.bindery.event.shared.EventBus; Getters methods@GinModules(ClientModule.class)public interface ClientGinjector extends Ginjector { for get objects EventBus getEventBus(); PlaceManager getPlaceManager();}If GIN cant find a binding for a class, it falls back to calling GWT.create() on thatclass.
    • Setting GIN for GWTP(Continuation)Configure your EntryPointpublic class FirstProject implements EntryPoint { private final ClientGinjector ginjector = GWT.create(ClientGinjector.class); public void onModuleLoad() { // This is required for Gwt-Platform proxys generator DelayedBindRegistry.bind(ginjector); ginjector.getPlaceManager().revealCurrentPlace(); }} Add the next properties to your Module.gwt.xml <module> ... <define-configuration-property name=gin.ginjector is-multi-valued=false /> <set-configuration-property name=gin.ginjector value=com.example.client.gin.ClientGinjector /> </module>
    • GWT-Platform and GXT3Structure your viewsA place represent a url of a program
    • GWT-Platform and GXT3(Continuation)TokensMost presenters have a token so the user can navigate.When there is not token the default presenter is shown.You can navigate from one presenter to another by:● Typing another url PlaceRequest request = new PlaceRequest("inicio");● Using a Hyperlink Widget placeManager.revealPlace(request);● Using a PlaceRequest
    • GWT-Platform and GXT3(Continuation)Nested PresentersYour header, footer and menu are in onepresenter the "parent presenter".
    • GWT-Platform and GXT3(Continuation)Presenter WidgetIs for reusable graphical and logical code.
    • GWT-Platform and GXT3(Continuation)Popup PresentersIs a presenter widgetthat is shown insidea popup dialog. For create Popup Presenters with GXT Window you need the following classes GXTPopupViewImpl.java GXTPopupViewWithUiHandlers.java
    • GWT-Platform and GXT3(Continuation)All presenters are composed of three files if you will useUIBinderAll presenters have a inner interface that view implements.
    • GWT-Platform and GXT3(Continuation)Presenter lifecycle
    • GWT-Platform and GXT3(Continuation)Presenter lifecycle1. Presenters are Singleton so it is instantiated once.2. prepareFromRequest(): Is where you can get url parameters.3. onBind(): Is called when the presenter is instantiated.4. onReveal(): Is called whenever the Presenter was not visible on screen and becomes visible.5. onHide(): Is called whenever the Presenter was visible on screen and is being hidden.6. onReset(): Is called whenever the user navigates to a page that shows the presenter, whether it was visible or not.
    • Create Presenterusing GWTP Eclipse Plugin
    • First PresenterLayoutPresenterOptions ● Use UiBinder ● RevealRootContentEvent ● Is Not a PlaceOrderingMove to view packageLayoutView.javaLayoutView.ui.xml
    • First Presenter LayoutPresenter(Continuation)Deprecated shared.EventBusGWTP Eclipse Plugin use EventBus from event.sharednext this package was deprecated and change to web.bindery.event.shared.* Is important to do the next in every presenter you createwith GWTP Eclipse PluginDeleteimport com.google.gwt.event.shared.EventBusReplace byimport com.google.web.bindery.event.shared.EventBus;
    • First Presenter LayoutPresenter(Continuation)Add the next field to LayoutPresenter import com.google.gwt.event.shared.GwtEvent.Type; //for nested presenters @ContentSlot public static final Type<RevealContentHandler<?>> SLOT_content = new Type<RevealContentHandler<?>>();Modify LayoutView.ui.xml<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"><ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder xmlns:g=urn:import:com.google.gwt.user.client.ui xmlns:gxt= "urn:import:com.sencha.gxt.widget.core.client" xmlns:container= "urn:import:com.sencha.gxt.widget.core.client.container" > <container:Viewport> <!--for nested presenter --> <gxt:ContentPanel ui:field="contentPanel" borders="false"headerVisible= "false" bodyBorder= "false" /> </container:Viewport></ui:UiBinder>
    • First Presenter LayoutPresenter (Continuation) Setting Vertical Layout (LayoutView.ui.xml)<ui:UiBinder> ...<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"field="minVerticalLayoutData" > <ui:attributes width="1" height="-1" /> </ui:with> <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData"field="maxVerticalLayoutData" > <ui:attributes width="1" height="1" /> </ui:with> <container:Viewport> ... </container:Viewport></ui:UiBinder>
    • First Presenter LayoutPresenter (Continuation) Using Vertical Layout (LayoutView.ui.xml)<ui:UiBinder> ... <container:Viewport> <container:VerticalLayoutContainer> <container:child layoutData="{minVerticalLayoutData}"> <g:HTMLPanel> <div> <div>First Project</div> </div> </g:HTMLPanel> </container:child> <container:child layoutData="{maxVerticalLayoutData}"> <!--for nested presenter --> <gxt:ContentPanel ui:field="contentPanel" borders="false" headerVisible="false"bodyBorder="false" /> </container:child> </container:VerticalLayoutContainer> </container:Viewport></ui:UiBinder>
    • First Presenter LayoutPresenter(Continuation)Add the next field to LayoutView@UiField ContentPanel contentPanel;//for nested presenterAdd the next method to LayoutView @Override public void setInSlot(Object slot, Widget content) { if(slot == LayoutPresenter.SLOT_content){ contentPanel.clear(); if(content != null){ contentPanel.add(content); contentPanel.forceLayout(); } return; } super.setInSlot(slot, content); }
    • Default PresenterWelcomePresenterOptions ● Use UiBinder ● RevealContentEvent ● Content Slot (from parent presenter) ● Is a Place ● CodeSplit (recommended) ● Token: #welcome ● DefaultPlace
    • Default Presenter WelcomePresenter(Continuation)Modify WelcomeView.ui.xml<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"><ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder xmlns:g=urn:import:com.google.gwt.user.client.ui xmlns:gxt= "urn:import:com.sencha.gxt.widget.core.client" xmlns:container= "urn:import:com.sencha.gxt.widget.core.client.container"> <gxt:ContentPanel headingText= "Welcome" > <container:CenterLayoutContainer> <g:HTMLPanel><h2> Welcome User </h2></g:HTMLPanel> </container:CenterLayoutContainer> </gxt:ContentPanel></ui:UiBinder>
    • reset.cssDownload reset.cssput this css in your HTML header<head>...<link type="text/css" rel="stylesheet" href="reset.css">...</head>In your Module.css file*{ font-family: arial, helvetica, tahoma, sans-serif;}
    • mvn gwt:run
    • Styling our applicationGWT provides ClientBundle for styling in anoptimised way. client.resources |- add.png |- delete.png |- cancel.png |- edit.png |- save.png |- exit.png |- bg.gif
    • Styling our application(Continuation)public interface Resources extends ClientBundle { @Source("add.png") ImageResource add(); @Source("delete.png") client.resources ImageResource delete(); |- Resources.java @Source("cancel.png") ImageResource cancel(); @Source("edit.png") ImageResource edit(); @Source("save.png") ImageResource save(); @Source("exit.png") ImageResource exit();}
    • Styling our application(Continuation)public interface CommonsCss extends CssResource { @ClassName("layout-header") String layout_header(); client.resources |- CommonsCss.java @ClassName("layout-title") |- Commons.css String layout_title(); String logout(); @ClassName("underline") String underline(); @ClassName("button") String button(); String exit();}
    • Styling our application(Continuation)Add to your ClientBundlepublic interface Resources extends ClientBundle { ... @Source("bg.gif") ImageResource bg(); @Source("Commons.css") CommonsCss commonsCss();}
    • Styling our application(Continuation)Modify LayoutView.ui.xml<ui:UiBinder> <ui:with type="com.example.client.resources.Resources" field="resources" /> ... <container:child layoutData="{minVerticalLayoutData}"> <g:HTMLPanel styleName="{resources.commonsCss.layout_header}"> <div class="{resources.commonsCss.layout_title}"> First Project </div> <div class="{resources.commonsCss.logout}"> <span class="{resources.commonsCss.underline}"> <a class="{resources.commonsCss.button}" href="/logout" > <span class="{resources.commonsCss.exit}">Logout</span> </a> </span> </div> </g:HTMLPanel> </container:child> ...</ui:UiBinder>
    • Styling our application(Continuation)Modify LayoutView.javapublic class LayoutView extends ViewImpl implements LayoutPresenter .MyView { ... @Inject public LayoutView(final Binder binder , final Resources resources ) { resources.commonsCss ().ensureInjected ();//load css widget = binder.createAndBindUi (this); }}
    • mvn gwt:run Thanks
    • Referenceshttp://www.youtube.com/playlist?list=PL29DDDC847F63AF82http://code.google.com/p/google-gin/wiki/GinTutorialhttp://code.google.com/p/google-guice/http://www.youtube.com/watch?v=1iLg_qWTrXY&feature=relmfuhttp://www.sencha.com/examples/#ExamplePlace:centerlayout(uibinder)http://code.google.com/p/google-web-toolkit/wiki/CssResource#Image_Sprites