Download to read offline
![properties & property providers
<property-provider name="property_name">
Define a JavaScript fragment that will return the value for the named property at
runtime.
//mobilewebapp sample
<define-property name="formfactor" values="desktop,tablet,mobile"/>
<collapse-property name="formfactor" values="*"/>
<property-provider name="formfactor">
<![CDATA[
.... return (size < 6) ? "mobile" : "tablet"; ...
return "desktop";
]]>](https://image.slidesharecdn.com/javascriptasatargetlanguagegwtkickoff-part2-140908104655-phpapp02/75/Javascript-as-a-target-language-GWT-KickOff-Part-2-2-18-2048.jpg)
![UiBinder - misc
uses the default (with no args) constructor
@UiField(provided=true) [or read the docs]
can associate handlers
@UiHandler("button")
void handleClick(ClickEvent e) { ..... }
can inject any type (inst'd through GWT.create)
<ui:with field='res' type='...'/>](https://image.slidesharecdn.com/javascriptasatargetlanguagegwtkickoff-part2-140908104655-phpapp02/75/Javascript-as-a-target-language-GWT-KickOff-Part-2-2-30-2048.jpg)
Uploaded byJooinK
Javascript as a target language - GWT KickOff - Part 2/2
The document discusses the Google Web Toolkit (GWT), a toolkit used for developing AJAX web applications in Java, which is then compiled into browser-specific HTML and JavaScript. It covers setup requirements, the toolkit's features, development modes, and the deferred binding feature that optimizes the generated JavaScript code. Additionally, it highlights the GWT's history, various frameworks, UIBinder framework for UI separation, and the integration of CSS styling within GWT applications.
More Related Content
![[Webinar] QtSerialBus: Using Modbus and CAN bus with Qt](https://cdn.slidesharecdn.com/ss_thumbnails/qtserialbus-161201204029-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Javascript as a target language - GWT KickOff - Part 2/2
Javascript as a target language - GWT KickOff - Part 2/2
- 1. Js as atarget language: GWT KickOff (Part 2/2) Alberto Mancini - [email protected] Francesca Tosi - [email protected]
- 2. Alberto Mancini [email protected] http://github.com/jooink http://www.jooink.com http://jooink.blogspot.com
- 3. Francesca Tosi [email protected] +FrancescaTosi @francescatosi http://github.com/jooink http://www.jooink.com http://jooink.blogspot.com
- 4. GWT GWT isa toolkit to develop Ajax web application with Java. The programmer writes Java code and this code is translated into HTML and Javascript via the GWT compiler. The compiler creates browser specific HTML and JavaScript to support all the major browsers correctly.
- 5. setup 1. javasdk: http://www.java.com/it/download/ (e.g 1.7) 2. eclipse: http://www.eclipse.org/downloads/ (e.g. EE) 3. GWT Eclipse Plugin: https://developers.google.com/eclipse/docs/getting_started 4. Create simple project 5. run ‘dev mode’ 6. open in browser http://127.0.0.1:8888/?get. condeserv=127.0.0.1:9997 (install browser plugin)
- 6. GWT cont'd -Tools in the Toolkit + GWTc, compiler Java to Javascript + Emulated JRE + Web UI class library (Widgets) + Eclipse Plugin, SpeedTracer, Designer It's open source, completely free, and used by thousands of developers around the world (in Google AdWords,Orkut,Blogger,Groups)
- 7. Toolkit != Framework Frameworks that may help https://github.com/ArcBees/GWTP model-view-presenter framework http://www.jboss.org/errai CDI, and JPA for GWT http://www.tessell.org/ app framework (on gwt-pectin)
- 8. GWT cont'd -Developing & Running GWT provides two (3 actually) modes ● Development Mode: allows to debug the Java code of your application directly via the standard Java debugger. ● Web mode: the application is translated into HTML and Javascript code and can be deployed to a webserver. ● SuperDevMode
- 9. GWT cont'd -Why ? Typed Language Well Known Programming Framework Optimize Browser Independence (quite, almost) + 'Native' through jsni Move Objects between client and server
- 10. GWT cont'd -History ● GWT 1.0 (2006) ● GWT 1.3 (2007) First Open Source Release, OSX support ● GWT 1.4 (2007) JUnit and ImageBundle ● GWT 1.5 (2008) Java 1.5 support, Overlay Types, DOM API, CSS Themes, Linkers ● GWT 1.6 (2009) EventHandlers, EMMA Support, WAR support, Parallelized Builds ● GWT 1.7 (2009) Newer browser support, IE8, GPE and AppEngine ● GWT 2.0 (2009) DevMode, DraftCompile, UIBinder, LayoutPanel, CodeSplitter, ClientBundle, CssResource ● GWT 2.1 (2010) RequestFactory, Editor Framework, Validation, MVP, Cell Widgets ● GWT 2.2 (2011) GWT Designer, HTML5 support ● GWT 2.3 (2011) Better AppEngine integration ● GWT 2.4 (2011) Maven and RequestFactory enhancements ● GWT 2.5 (2012) SuperDevMode, Elemental, UiRenderers, FragmentMerging, ClosureCompiler
- 11. GWT cont'd -History ● GWT 2.5.1 (2013) - bugfixes and optimizations ● GWT 2.6.0 (2014) - java 7 - IE10 - Internet Explorer cleanup: IE6/7 ● GWT 2.6.1 (2014) - working on Super Dev Mode Annual Vaadin “The Future of GWT Report” https://vaadin.com/gwt/report-2013 What’s going on. SuperDevMode Java8 JsInterop GSS
- 12. GWT cont'd -Open Source Project The GWT Steering committee was founded in 2012 to help the GWT project become an even bigger success as an open source project. ● Ray Cromwell, Google ● Artur Signell, Vaadin ● Colin Alworth, Sencha ● Mike Brock, RedHat ● Thomas Broyer ● Stephen Haberman, Bizo ● Daniel Kurka, Google ● Christian Goudreau, Arcbees ● Konstantin Solomatov, Jetbrains
- 13. Anatomy Module htmlfile Module xml file translatable directories
- 14. Modules Individual unitsof GWT configuration are called modules. A module bundles together all the configuration settings that a GWT project needs: ● inherited modules ● an entry point application class name; these are optional, although any module referred to in HTML must have at least one entry-point class specified ● source path entries ● public path entries ● deferred binding rules, including property providers and class generators
- 15. Deferred Binding DeferredBinding is a feature of the GWT compiler that works by generating many versions of code at compile time, only one of which needs to be loaded by a particular client during bootstrapping at runtime. Each version is generated on a per browser basis, along with any other axis that your application defines or uses. RPC Calls Widgets tuned for specific browsers Internationalization
- 16. Deferred Binding cont'd Deferred binding has several benefits: ● Reduces the size of the generated JavaScript code that a client will need to download by only including the code needed to run a particular browser/locale instance (used by the Internationalization module) ● Saves development time by automatically generating code to implement an interface or create a proxy class (used by the GWT RPC module) ● Since the implementations are pre-bound at compile time, there is no run-time penalty to look up an implementation in a data structure as with dynamic binding or using virtual functions.
- 17. conditional compilation -replacement A type is replaced with another depending on a set of configurable rules. IType = GWT.create(TypeImpl.class); <replace-with class="...TypeImplFirefox"> <when-type-is class="...TypeImpl" /> <when-property-is name="user.agent" value="gecko"/> </replace-with>
- 18. properties & propertyproviders <property-provider name="property_name"> Define a JavaScript fragment that will return the value for the named property at runtime. //mobilewebapp sample <define-property name="formfactor" values="desktop,tablet,mobile"/> <collapse-property name="formfactor" values="*"/> <property-provider name="formfactor"> <![CDATA[ .... return (size < 6) ? "mobile" : "tablet"; ... return "desktop"; ]]>
- 19. Generators Generators areclasses that are invoked by the GWT compiler to generate a Java implementation of a class during compilation <generate-with class="...XYGenerator"> <when-type-assignable class="...XYType" /> </generate-with> </module> XYType=GWT.create(...); (e.g. RPC, UiBinder)
- 20. Generator Class Defininga subclass of the Generator class is like defining a plug-in to the GWT compiler. public class XYGenerator extends Generator { public String generate(TreeLogger logger, GeneratorContext ctx, String requestedClass) throws UnableToCompleteException { ... } }
- 21. emulated JRE GWTincludes a library that emulates a subset of the Java runtime library. http://www.gwtproject. org/doc/latest/RefJreEmulation.html InputStream Threads ?
- 22. <super-source> The <super-source>tag instructs the compiler to "re-root" a source path. This is useful for cases where you want to re-use an existing Java API for a GWT project, but the original source is not available or not translatable. A common reason for this is to emulate part of the JRE not implemented by GWT.
- 23. JSNI GWT borrowsfrom the Java Native Interface (JNI) concept to implement JavaScript Native Interface (JSNI). Writing JSNI methods is a powerful technique, but should be used sparingly because writing bulletproof JavaScript code is notoriously tricky. Needed for JSO (Javascript Overlay Types)
- 24. JSNI cont'd publicstatic native void alert(String msg) /*-{ $wnd.alert(msg); }-*/; $wnd: the root browser window GWT widgets are being rendered to $entry(..): method that makes code reentry safe. http://www.lustforge.com/2012/11/11/gwt-jsni-variables-an-exhaustive-list/ http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html
- 25. Widgets UiComponents http://www.gwtproject.org/doc/latest/RefWidgetGallery.html 2.0+ LayoutPanels http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#LayoutPanels from the Jul 2013 - GWT Meetup What are some of pain points or decisions bad in hindsight? ... ● Bad out of box UI ... SmartGWT, GXT
- 26. UiBinder ● TheUiBinder is a framework designed to separate Functionality and View of User Interface. ● The UiBinder framework allows developers to build gwt applications as HTML pages with GWT widgets configured throughout them. ● The UiBinder framework makes easier collaboration with UI designers who are more comfortable with XML, HTML and CSS than Java source code ● The UIBinder provides a declarative way of defining (parts of the) User Interface. ● The UIBinder seperates the programmic logic from UI. ● The UIBinder is similar to what JSP is to Servlets.
- 27. UiBinder cont'd DSL(xml) to lay-out (declaratively) widgets no loops, no conditionals, no if statements UiBinder allows you to lay out your user interface. (offers direct support for internationalization)
- 28. UiBinder - syntax <!-- HelloWidgetWorld.ui.xml --> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'> <g:HTMLPanel> Hello, <g:ListBox ui:field='listBox' visibleItemCount='1'/>. </g:HTMLPanel> </ui:UiBinder> xmlns:g='urn:import:..' binds package to namespace ui:field gives name to the widget Every one of the widget's methods that follow JavaBean-style conventions for setting a property can be used: visibleItemCount transl. as setVisibleItemCount(...)
- 29. UiBinder - syntax public class HelloWidgetWorld extends Composite { interface MyUiBinder extends UiBinder<Widget, HelloWidgetWorld> {} private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class); @UiField ListBox listBox; public HelloWidgetWorld(String... names) { // sets listBox initWidget(uiBinder.createAndBindUi(this)); for (String name : names) { listBox.addItem(name); } } }
- 30. UiBinder - misc uses the default (with no args) constructor @UiField(provided=true) [or read the docs] can associate handlers @UiHandler("button") void handleClick(ClickEvent e) { ..... } can inject any type (inst'd through GWT.create) <ui:with field='res' type='...'/>
- 31. UiBinder - ui:style With the <ui:style> element, you can define the CSS for your UI right where you need it. <ui:style> .example { background-color: red } </ui:style> ... <g:HTML addStyleNames="{style.red}"/> ...
- 32. UiBinder - ui:style <ui:style src="MyUi.css" /> <ui:style field='oStyle' src="MyUiOStyle.css"> <ui:style type='com.my.app.MyFoo.MyStyle'> @UiField MyStyle style; (CssResource oStyle)
- 33. CssResource interface MyStyleextends CssResource { String enabled(); String disabled(); } @UiField MyStyle style; style.enabled() (class name) http://www.gwtproject.org/javadoc/latest/com/google/gwt/resources/client/CssResource.html
- 34. ClientBundle public interfaceResources extends ClientBundle { @Source("Style.css") Style style(); @Source("Logo.jpg") ImageResource logo(); public interface Style extends CssResource { String mainBlock(); String nameSpan(); Sprite userPictureSprite(); } }
- 35.
- 36. Thanks Alberto Mancini [email protected] Francesca Tosi [email protected]