Javascript as a target language - GWT KickOff - Part 2/2

Js as a target language:
GWT KickOff (Part 2/2)
Alberto Mancini - alberto@jooink.com
Francesca Tosi - francesca@jooink.com

Alberto Mancini
alberto@jooink.com
http://github.com/jooink
http://www.jooink.com
http://jooink.blogspot.com

Francesca Tosi
francesca@jooink.com
+FrancescaTosi
@francescatosi
http://github.com/jooink
http://www.jooink.com
http://jooink.blogspot.com

GWT
GWT is a 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.

setup
1. java sdk: 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)

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)

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)

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

GWT cont'd - Why ?
Typed Language
Well Known Programming Framework
Optimize
Browser Independence (quite, almost)
+
'Native' through jsni
Move Objects between client and server

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

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

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

Anatomy
Module html file
Module xml file
translatable directories

Modules
Individual units of 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

Deferred Binding
Deferred Binding 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

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.

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>

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";
]]>

Generators
Generators are classes 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)

Generator Class
Defining a 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 {
...
}
}

emulated JRE
GWT includes a library that emulates a subset
of the Java runtime library.
http://www.gwtproject.
org/doc/latest/RefJreEmulation.html
InputStream
Threads ?

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

JSNI
GWT borrows from 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)

JSNI cont'd
public static 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

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

UiBinder
● The UiBinder 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.

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)

UiBinder - syntax

<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(...)

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);
}
}
}

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='...'/>

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}"/>
...

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)

CssResource
interface MyStyle extends 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

ClientBundle
public interface Resources extends ClientBundle {
@Source("Style.css")
Style style();
@Source("Logo.jpg")
ImageResource logo();
public interface Style extends CssResource {
String mainBlock();
String nameSpan();
Sprite userPictureSprite();
}
}

Thanks
Alberto Mancini
alberto@jooink.com
Francesca Tosi
francesca@jooink.com

Javascript as a target language - GWT KickOff - Part 2/2

More Related Content

What's hot (20)

Similar to Javascript as a target language - GWT KickOff - Part 2/2 (20)

More from JooinK (9)

Recently uploaded (20)

Javascript as a target language - GWT KickOff - Part 2/2