pgt technology scouting GmbH, profile picture
Uploaded bypgt technology scouting GmbH
3,687 views

GWT widget development

The document covers the complexities of GWT (Google Web Toolkit) widget development, emphasizing the importance of understanding DOM manipulation, event propagation, and the necessity for creating custom widgets. It discusses the benefits of code reuse, separation of concerns, and the efficiency of using GWT APIs, while also addressing potential pitfalls like composition abuse and memory management. Additionally, it outlines the lifecycle of GWT widgets, custom event handling, and optimization techniques to enhance web application performance.

Embed presentation

1 / 124
2 / 124
3 / 124
4 / 124
5 / 124
6 / 124
7 / 124
8 / 124
9 / 124
10 / 124
11 / 124
12 / 124
13 / 124
14 / 124
15 / 124
16 / 124
17 / 124
18 / 124
19 / 124
20 / 124
21 / 124
22 / 124
23 / 124
24 / 124
25 / 124
26 / 124
27 / 124
28 / 124
29 / 124
30 / 124
31 / 124
32 / 124
33 / 124
34 / 124
35 / 124
36 / 124
37 / 124
38 / 124
39 / 124
40 / 124
41 / 124
42 / 124
43 / 124
44 / 124
45 / 124
46 / 124
47 / 124
48 / 124
49 / 124
50 / 124
51 / 124
52 / 124
53 / 124
54 / 124
55 / 124
56 / 124
57 / 124
58 / 124
59 / 124
60 / 124
61 / 124
62 / 124
63 / 124
64 / 124
65 / 124
66 / 124
67 / 124
68 / 124
69 / 124
70 / 124
71 / 124
72 / 124
73 / 124
74 / 124
75 / 124
76 / 124
77 / 124
78 / 124
79 / 124
80 / 124
81 / 124
82 / 124
83 / 124
84 / 124
85 / 124
86 / 124
87 / 124
88 / 124
89 / 124
90 / 124
91 / 124
92 / 124
93 / 124
94 / 124
95 / 124
96 / 124
97 / 124
98 / 124
99 / 124
100 / 124
101 / 124
102 / 124
103 / 124
104 / 124
105 / 124
106 / 124
107 / 124
108 / 124
109 / 124
110 / 124
111 / 124
112 / 124
113 / 124
114 / 124
115 / 124
116 / 124
117 / 124
118 / 124
119 / 124
120 / 124
121 / 124
122 / 124
123 / 124
124 / 124
GWT widget development Even though widget libraries for GWT exist, it’s sometimes necessary to create a widget on your own. Widget creation will confront you with challenges like GWT specifics or the way browsers work.! Participants will learn how to compose existing widgets as well as creating new ones based on DOM elements. As it is important to know how browsers behave, topics like DOM API, reflows and event propagation will be explained. But there are also GWT specific aspects, like important interfaces and classes or how to prevent code injection.
http://pgt.de PAPICK http://oio.de STEFFEN
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
Why widget development?
It’s all about having the choice
Choice of using existing
Choice of using existing
building your own
or buying.
or buying. + support + vendor lock-in
Freedom of choice?
We only have 60 Minutes We must assume you are not new to GWT
Mission: give some directions
What are components? com·po·nent kəmˈpōnənt/ ! a part or element of a larger whole, esp. a part of a machine or vehicle.
What are UI components?
What for? code reuse separation of concerns
Code reuse? Just import library into project, and use this progress bar. Don‘t reinvent the wheel, unless it is a better wheel...
Code reuse by composition
... composition ...
separation of concerns? The coders at 
 gwt-bootstrap did the progress bar widget magic.! ! I will never build widgets!!!! ! It is not of my concern. I simply use them!!!
RIGHT? Yes…! ! But still…! ! …third party widgets are generic components.
RIGHT? Yes…! ! But still…! ! …third party widgets are generic components.
Don‘t use generic tools, unless you are Mac Gyver… MAC GYVER All he needed was a ball-point pen and a paper clip
Code duplication
Code duplication
You got the picture,
 right?
You got the picture,
 right? Label VerticalPanel HorizontalPanel VerticalPanel HorizontalPanel Label Label FlexTable FlexTable VerticalPanel HorizontalPanel FlexTable HorizontalPanel Label Label Label
Unfortunately, we are modern Mac Gyvers! <div /> WEB DEVELOPER A div is all you need
GWT 
 Efficiency custom components: code reuse + separation of concerns + composition + type safety
So what is a GWT Widget?
It‘s a JS thing holding a DOM element <div />
Created to workaround IE6 memory leaks
Widgets are quite heavy weight
Each widget includes full event management... ...even if there is nothing to see
Custom components ‣ Increase efficiency in development! ‣ Domain driven! ‣ Avoid composition abuse! ‣ Implement custom design! ‣ Create more effective widgets! ‣ Cheaper in the long run !35 © 2013 Orientation in Objects GmbH
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
We are not Swing developers! ‣ GWT development is web development! ‣ GWT applications are JavaScript applications! ‣ GWT is very good at hiding this! ‣ We can deny knowledge about it! ‣ … but not forever Java JavaScript !37 © 2013 Orientation in Objects GmbH
JS Apps do DOM manipulation ‣ GWT widget API hides this from the user! ‣ Abuse of composition leads to heavy DOM manipulation! ‣ Custom components are important, and there are things that we should be aware of... © 2013 Orientation in Objects GmbH !38
DOM API ‣ Document Object Model! ‣ Representation of HTML document in memory! – Tree stucture! ‣ Manipulation/creation of elements! ‣ Navigation of elements !39 © 2013 Orientation in Objects GmbH
DOM API in GWT DivElement  element  =       Document.get().createDivElement(); element.appendChild(otherElement); element.getChild(0); element.removeChild(otherElement);
DOM events ‣ Bubbling:! ! The process by which an event propagates upward ! through its ancestors after being handled by the event's ! target. ! Source: http://www.w3.org/TR/DOM-Level-2-Events/events.htm#Events-overview-terminology ! ‣ Event.stopPropagation! – The event won‘t be delivered to listeners of ancestors! ! ‣ Event.preventDefault! – Prevents default browser behavior !41 © 2013 Orientation in Objects GmbH
DOM events ‣ Sinking: Event.sinkEvents(element,  Event.ONCLICK); Event.setEventListener(element,  new   EventListener()  {      @Override        public  void  onBrowserEvent(Event  event)  {            if  (event.getTypeInt()  ==  Event.ONCLICK)  {                  […]            }      } }); !42 © 2013 Orientation in Objects GmbH
Reflows ‣ Layout update! ‣ DOM changes do not directly result in a visual/layout update! – All Updates that occur in one JS execution result in one update! ‣ Effective size and position of elements are only available after update !43 © 2013 Orientation in Objects GmbH
Distinct phases ! ! ! ! ! ! ‣ JS Execution! ‣ CSS/ Layout update! Browsers are single-threaded ‣ Render !44 © 2013 Orientation in Objects GmbH
Hooks idle Scheduler.scheduleEntry(); GWT application code .scheduleFinally(); Browser event loop .scheduleDeferred();
JavaScript execution defers rendering ‣ Long lasting JS execution causes delay in rendering! – The browser hangs...! ‣ Try to keep JS execution short! – Execute incrementally! – Animations! ‣ Try to avoid JS executions !46 © 2013 Orientation in Objects GmbH
CSS ‣ Use CSS layouts to handle resizing without JavaScript! ‣ Bad CSS selectors can lead to slow down of rendering! – Define the right most selector as specific as possible! – Avoid selectors that are too complex! – […]! ‣ Try to express states as CSS classes CSS is the new 
 native !47 © 2013 Orientation in Objects GmbH
Too many divs... ‣ Semantic markup ! – ul/li vs div/span! ‣ Accessibility! – WAI-ARIA !48 © 2013 Orientation in Objects GmbH
Compatibility Source: http://caniuse.com
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
Bad Smell: refused bequest Subclasses get to inherit the methods and data of their parents. But what if they don’t want or need what they are given? They are given all these great gifts and pick just a few to play with. ! The traditional story is that this means the hierarchy is wrong. http://sourcemaking.com/refactoring/refused-bequest 978-0201485677
WhatYouNeed(tm) YourGreatWidget
Nooooooooo!!!!!! FlexTable YourGreatWidget
Don’t extend FlexTable Flextable
Use a Composite, the thing holding a Widget Widget
Use a Composite, the thing holding a Widget
The trick Widget
The trick Widget Composite
The trick Widget Composite YourGreatWidget
You end up exposing only widget + YourGreatInterface Widget Composite YourGreatWidget
In a hurry? Widget Composite YourGreatWidget FlexTable
The trick Widget initWidget( flexThing ) Composite YourGreatWidget FlexTable
Internals are locked away Widget Composite YourGreatWidget FlexTable
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
GWT Widgets and DOM elements
GWT Widgets and DOM elements div input div
GWT Widgets and DOM elements SearchBox div input div
GWT Widgets and DOM elements ‣ Two representations! – Logical (Java)! – Physical (HTML/DOM) SearchBox div input div !68 © 2013 Orientation in Objects GmbH
The contract of GWT widgets ‣ setElement(Element)! ! Sets  this  object's  browser  element.   ! UIObject  subclasses  must  call  this   method  before  attempting  to  call  any   ! other  methods,  and  it  may  only  be   ! called  once. ! ! ! ‣ To be on the safe side: do it in the constructor !69 © 2013 Orientation in Objects GmbH
Widget lifecycle - Construction public  Led()  {        setElement(Document.get().createDivElement());        setStyleName(getResources().style().led());        […]   }
Widget lifecycle - Attach ‣ void onLoad()! This  method  is  called  immediately  after  a   ! widget  becomes  attached  to  the  browser's   document. ! ‣ AttachEvent.Handler.onAttachOrDetach(…) Fired  when  the  event  source  is  attached  to  the   browser's  document  or  detached  from  it. !71 © 2013 Orientation in Objects GmbH
Widget lifecycle - Detach ‣ void onUnload()! This  method  is  called  immediately  before  a   ! widget  will  be  detached  from  the  browser's   document. ! ‣ AttachEvent.Handler.onAttachOrDetach(…) Fired  when  the  event  source  is  attached  to  the   browser's  document  or  detached  from  it. !72 © 2013 Orientation in Objects GmbH
GWT Events ! ! ! ! CloseEvent ! ! ‣ GWTEvent JavaScriptObject NativeEvent OpenEvent ResizeEvent DOMEvent BlurEvent Native events are not enough!! – Tab selection?! ‣ SelectionEvent ! Fire existing GwtEvents! HasNativeEvent FocusEvent ChangeEvent KeyEvent – SelectionEvent! – SelectionChangeEvent! – ValueChangeEvent! ‣ ! If none matches your use-case: define your own! !73 © 2013 Orientation in Objects GmbH
Custom event development Events between 
 Widgets by sending
 and listening to GwtEvents GwtEvent GwtEvent Event handling in 
 the component, listen to 
 native events Event onBrowserEvent(Event event)
Custom event development Events between 
 Widgets by sending
 and listening to GwtEvents Event handling in 
 the component, listen to 
 native events ValueChangeEvent Event LEDActivationEvent Event.ONCLICK, 
 Event.ONKEYDOWN
Basic handling of DOM events public  Led()  {        sinkEvents(Event.ONCLICK); } ! @Override   public  void  onBrowserEvent(Event  event)  {      if  (event.getTypeInt()  ==  Event.ONCLICK)  {            toggleLed();      }      […] }
Providing events to the user @Override   public  HandlerRegistration  addValueChangeHandler( ValueChangeHandler<Boolean>  handler)  {      return  addHandler(handler,                            ValueChangeEvent.getType()); } ! @Override   public  void  setValue(Boolean  value,  boolean  fireEvents)  {      this.value  =  value;        if(fireEvents)  {            ValueChangeEvent.fire(this,  value);      } }
Custom Events generics... GwtEvent EventHandler generics... MyEvent MyEventHandler
Define your own events: handler… public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  { ! […] ! !      public  interface  Handler  extends  EventHandler  {            void  onSomethingHappened(ExampleEvent  event);      } ! […] ! }
Define your own events: payload public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  {   ! […] !      private  final  int  value;        public  ExampleEvent(int  value)  {            this.value  =  value;      }   !      public  int  getValue()  {            return  value;      }   ! ! } […]
Define your own events: dispatching public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  {   ! […] ! !      protected  void  dispatch(Handler  handler)  {            handler.onSomethingHappened(this);      } ! ! } […]
Define your own events: allow registration public  HandlerRegistration  addExampleHandler( ExampleHandler  handler)  {      return  addHandler(handler,  ExampleEvent.getType()); }
Eventmanager Event ? Handler Handler Handler
Eventmanager Event ! Handler Handler Handler
Define your own events public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  { !      private  static  Type<ExampleEvent.Handler>  type; !      public  static  Type<ExampleEvent.Handler>  getType()  {            if  (type  ==  null)  {                  type  =  new  Type<ExampleEvent.Handler>();            }            return  type;      }      @Override        public  Type<Handler>  getAssociatedType()  {            return  getType();      } }
Use GWT Optimizations ‣ ClientBundle! ‣ CSSResource! ‣ ImageResource connection bottleneck HTTP 1.1! 8.1.4 Practical Considerations! A single-user client SHOULD NOT maintain more than 2 connections © 2013 Orientation in Objects GmbH with any server or proxy. !86
Use GWT Optimizations public  interface  Resources  extends  ClientBundle  {        @Source("SearchBox.css")        Style  style();   !      @Source("search.png")        ImageResource  search();   }   ! public  interface  Style  extends  CssResource  {        String  root();        String  text();        String  icon();   }
How to build widgets ‣ Manual DOM manipulation! ‣ UiBinder !88 © 2013 Orientation in Objects GmbH
UiBinder <ui:UiBinder   xmlns:ui="urn:ui:com.google.gwt.uibinder"   xmlns:g="urn:import:com.google.gwt.user.client.ui" >        <ui:with  type=„[…]"  field="style"></ui:with>        <div  class="{style.root}">              <input  type="text"  class="{style.text}"  />              <div  class="{style.icon}"></div>        </div>   </ui:UiBinder>  
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
Composite Pattern ‣ Something that contains widgets and IS a widget! ‣ We know that from other UI toolkits (e.g. Swing)! ‣ In GWT we use **Panels for this !91 © 2013 Orientation in Objects GmbH
We all did it already verticalPanel.add(new  Label("Hello  GWT  world!")); dockLayoutPanel.addWest(new  CustomerForm(),  300); headerPanel.setContentWidget(new  CustomerForm());
Widgets, panels and DOM elements Panel div div label Label div input TextBox
The magic behind it ‣ The Panel ensures that the widget‘s underlying DOM element is correctly attached to the document! ‣ Structure of logical and physical representation 
 must be consistent !94 © 2013 Orientation in Objects GmbH
The magic behind it public  void  add(Widget  widget)  {        […]        element.appendChild(widget.getElement());        adopt(widget);        […]   }
Contract public  interface  HasWidgets  extends   Iterable<Widget>  {   !      void  add(Widget  w); !      void  clear(); !      Iterator<Widget>  iterator(); !      boolean  remove(Widget  w); }
Coding against interfaces is possible public  interface  IsWidget  {      Widget  asWidget(); } interface  ForIsWidget  extends  HasWidgets  {      void  add(IsWidget  w); !      boolean  remove(IsWidget  w); }
Supporting UiBinder ‣ Supporting UiBinder is easy as long as we have ….! – Default constructor! – Default add method! ‣ We can improve the UiBinder compatibility of our widgets! – @UiConstructor! – @UiChild !98 © 2013 Orientation in Objects GmbH
UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
What about Layouts? When we think
 of layouts, we
 think of structuring
 the UI from
 a bigger perspektive
Structuring Relationship between widgets, MVP, Eventbus, etc... ! ! Not here, not now...
Positioning JS positioning CSS Layout
Web page layouts Desktop like, 
 full page Long page,
 scroll up/ down
 page
Standard widgets Resize inside out
Layout widgets resize chaining through ! ProvidesResize RequiresResize ! ! ! Chaining is required,
 resize event only top level, not propagated by browser Resize outside in
Full page application, inside out & outside in RootLayoutPanel
Scrolling page application
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
Widgets do not scale…
Widgets do not scale…
Heap dumping Total memory No grid, mostly empty Object count 4.8 > 98,000 15.6 > 570,000 Grid, Text 6.5 > 180,000 SafeHTML 4.9 > 99,000 Grid, Widgets
Why? setInnerHtml, job done As with CSS: native vs JS Many, many objects and 
 DOM manipulation
Bonus feature ‣ SafeHTML provides some level 
 of security against script injection! ‣ SafeHTML templates 
 provides some 
 pain easing in HTML
 development! ‣ Getting used to SafeHTML 
 ! helps getting used to cell widgets, 
 ! ! helps getting used to cell grids, … © 2013 Orientation in Objects GmbH !117
SafeHtmlTemplates interface  MyTemplate  extends  
 SafeHtmlTemplates  { !      @Template("<td>{0}</td>")      SafeHtml  cell(String  content); !      @Template("<tr>{0}</tr>")      SafeHtml  row(SafeHtml  cells); !      @Template("<table>{0}</table>")      SafeHtml  table(SafeHtml  rows);   }
Finally NoWidgets Layouts Panels Composite Simple widgets Committing to web development Getting started
Go native whenever possible ‣ CSS is run natively by the browser! ‣ Optimize DOM manipulation by providing bigger HTML chunks 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 !120 © 2013 Orientation in Objects GmbH
Separate browser specifics Don‘t if – then – else for different browsers, use deferred binding <replace-with class="de...MyEntryPointIE"> <when-type-is class="de...MyEntryPointDefault" /> <any> <when-property-is name="user.agent" value="ie6" /> <when-property-is name="user.agent" value="ie8" /> <when-property-is name="user.agent" value="ie9" /> <when-property-is name="user.agent" value="opera" /> </any> </replace-with> !121 © 2013 Orientation in Objects GmbH
Avoid spaghetti code ‣ Try software engineering, it‘s ok! ‣ Many known patterns work well with GWT! ‣ If you don‘t know better, use MVP !122 © 2013 Orientation in Objects GmbH
SINGLETON You must not public static instance
Thank you for your attention !

More Related Content

PPT
Introduction to Google Web Toolkit
byDidier Girard
 
PDF
125 고성능 web view-deview 2013 발표 자료_공유용
byNAVER D2
 
PPTX
WebGL Crash Course
byTony Parisi
 
PPTX
WebGL For Game Development Spring 2013
byTony Parisi
 
PPTX
Amp by Google: The Present And Future Of Quick Content Delivery
byRaunak Hajela
 
PDF
Building a Better Web with HTML5 and CSS3
byKarambir Singh Nain
 
PPTX
Mobile Java with GWT: Still "Write Once, Run Everywhere"
byAlex Theedom
 
PPT
HTML5 Dev Conf 2013 Presentation
byIker Jamardo
 
Introduction to Google Web Toolkit
byDidier Girard
 
125 고성능 web view-deview 2013 발표 자료_공유용
byNAVER D2
 
WebGL Crash Course
byTony Parisi
 
WebGL For Game Development Spring 2013
byTony Parisi
 
Amp by Google: The Present And Future Of Quick Content Delivery
byRaunak Hajela
 
Building a Better Web with HTML5 and CSS3
byKarambir Singh Nain
 
Mobile Java with GWT: Still "Write Once, Run Everywhere"
byAlex Theedom
 
HTML5 Dev Conf 2013 Presentation
byIker Jamardo
 

What's hot

PDF
VueJS Introduction
byDavid Ličen
 
PDF
The WebKit project
byjuanjosanchezpenas
 
PDF
GWT - AppDays - (25 aprile 2014, pordenone)
byfirenze-gtug
 
PDF
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
byRapidValue
 
PDF
Scalable Front-end Development with Vue.JS
byGalih Pratama
 
PPTX
HTML5 Introduction
bybeforeach
 
PDF
Building native Win8 apps with YUI
byTilo Mitra
 
PDF
GWT 2.0 - December 15 2009
bysullis
 
PDF
Knockout mvvm-m1-slides
byMasterCode.vn
 
PDF
What Web Developers Need to Know to Develop Windows 8 Apps
byDoris Chen
 
PDF
Korea linuxforum2014 html5game-sangseoklim
bySang Seok Lim
 
PDF
Web Components mit Polymer und AngularJS 1.x
byPatrickHillert
 
PPTX
Design Patterns every Android developer should know
bymuratcanbur
 
PDF
JHipster for Spring Boot webinar
byJulien Dubois
 
PDF
Room with a Vue - Introduction to Vue.js
byZachary Klein
 
PDF
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(3)
byJollen Chen
 
VueJS Introduction
byDavid Ličen
 
The WebKit project
byjuanjosanchezpenas
 
GWT - AppDays - (25 aprile 2014, pordenone)
byfirenze-gtug
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
byRapidValue
 
Scalable Front-end Development with Vue.JS
byGalih Pratama
 
HTML5 Introduction
bybeforeach
 
Building native Win8 apps with YUI
byTilo Mitra
 
GWT 2.0 - December 15 2009
bysullis
 
Knockout mvvm-m1-slides
byMasterCode.vn
 
What Web Developers Need to Know to Develop Windows 8 Apps
byDoris Chen
 
Korea linuxforum2014 html5game-sangseoklim
bySang Seok Lim
 
Web Components mit Polymer und AngularJS 1.x
byPatrickHillert
 
Design Patterns every Android developer should know
bymuratcanbur
 
JHipster for Spring Boot webinar
byJulien Dubois
 
Room with a Vue - Introduction to Vue.js
byZachary Klein
 
課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(3)
byJollen Chen
 

Similar to GWT widget development

PDF
Javaland 2014 / GWT architectures and lessons learned
bypgt technology scouting GmbH
 
PDF
GWT Reloaded
byMarcin Szałomski
 
PPT
GWT Training - Session 1/3
byFaiz Bashir
 
PDF
First steps with GWT @ Google IO Extended - Pordenone
byGiampaolo Trapasso
 
PDF
GWT Architectures and Lessons Learned (WJAX 2013)
bypgt technology scouting GmbH
 
PDF
Javascript as a target language - GWT KickOff - Part 2/2
byJooinK
 
PDF
T 0230 Google Wave Powered By Gwt
bysupertoy2015
 
PPTX
SoftShake 2013 - Vaadin componentization
byNicolas Fränkel
 
PPT
GWT
byLorraine JUG
 
PDF
The Java alternative to Javascript
byManuel Carrasco Moñino
 
PPT
GWT is Smarter Than You
byRobert Cooper
 
PPT
Google Web Toolkits
byYiguang Hu
 
PPTX
Highload JavaScript Framework without Inheritance
byFDConf
 
PPTX
GWT = easy AJAX
byOlivier Gérardin
 
PDF
Present and Future of GWT from a developer perspective
byManuel Carrasco Moñino
 
PPT
GWT Extreme!
bycromwellian
 
PDF
Gwt.Create Keynote San Francisco
byRay Cromwell
 
PPTX
Google web toolkit web conference presenation
byStephen Erdman
 
PDF
All about GWT
byEd Bras
 
PDF
Speed up your GWT coding with gQuery
byManuel Carrasco Moñino
 
Javaland 2014 / GWT architectures and lessons learned
bypgt technology scouting GmbH
 
GWT Reloaded
byMarcin Szałomski
 
GWT Training - Session 1/3
byFaiz Bashir
 
First steps with GWT @ Google IO Extended - Pordenone
byGiampaolo Trapasso
 
GWT Architectures and Lessons Learned (WJAX 2013)
bypgt technology scouting GmbH
 
Javascript as a target language - GWT KickOff - Part 2/2
byJooinK
 
T 0230 Google Wave Powered By Gwt
bysupertoy2015
 
SoftShake 2013 - Vaadin componentization
byNicolas Fränkel
 
GWT
byLorraine JUG
 
The Java alternative to Javascript
byManuel Carrasco Moñino
 
GWT is Smarter Than You
byRobert Cooper
 
Google Web Toolkits
byYiguang Hu
 
Highload JavaScript Framework without Inheritance
byFDConf
 
GWT = easy AJAX
byOlivier Gérardin
 
Present and Future of GWT from a developer perspective
byManuel Carrasco Moñino
 
GWT Extreme!
bycromwellian
 
Gwt.Create Keynote San Francisco
byRay Cromwell
 
Google web toolkit web conference presenation
byStephen Erdman
 
All about GWT
byEd Bras
 
Speed up your GWT coding with gQuery
byManuel Carrasco Moñino
 

More from pgt technology scouting GmbH

KEY
Modularization in java 8
bypgt technology scouting GmbH
 
KEY
GWT - building a better web
bypgt technology scouting GmbH
 
KEY
Gwt, die bessere spinne
bypgt technology scouting GmbH
 
ZIP
Google Web Toolkit
bypgt technology scouting GmbH
 
PDF
Client-Server-Kommunikation mit dem Command Pattern
bypgt technology scouting GmbH
 
PDF
GWT architecture best practices and lessons learned
bypgt technology scouting GmbH
 
Modularization in java 8
bypgt technology scouting GmbH
 
GWT - building a better web
bypgt technology scouting GmbH
 
Gwt, die bessere spinne
bypgt technology scouting GmbH
 
Google Web Toolkit
bypgt technology scouting GmbH
 
Client-Server-Kommunikation mit dem Command Pattern
bypgt technology scouting GmbH
 
GWT architecture best practices and lessons learned
bypgt technology scouting GmbH
 

Recently uploaded

PDF
Saga: The new era of transactions in a microservices architecture
byGiovanni Marigi
 
PPTX
Design Flaws and Known Attacks in Agentic AI - ITI Business Session
byInformation Technology Institute
 
PDF
Requestly or Postman: What’s the Right API Tool for Your Team?
byhenrycavill30521
 
PDF
Chapter 2 Computer Threat .pdf
byGetnet Tigabie Askale -(GM)
 
PDF
Mobile Onboarding UX 11 Best Practices for Retention (2026).pdf
byDesign Studio UI UX
 
PDF
6 Insights from the Patron Saint of AI Failure
byScott M. Graffius
 
PPTX
Building Real-Time Voice AI — Udaiappa Ramachandran
byUdaiappa Ramachandran
 
PPTX
JAVA Programming Lecture 1 C 4 Yourself.pptx
byyvsbglfaeahuyldzhq
 
PPTX
DVCON24-IBM ai/ml driven hardware verification
byArun Joseph
 
PPTX
Flutter & Firebase Session Slides - GDG VESIT
bygdgcodecellcmpn
 
PDF
Generating Structured Outputs from Unstructured Content Using LLMs
byEnterprise Knowledge
 
PDF
Best-Travel-Portal-Development-Solutions-for-Online-Growth
bykashishnagarrajput
 
PDF
SEO in Charleston SC | Local SEO Strategies to Grow Your Business.pdf
bycustomdigitalsolutio1
 
PDF
Purple Team - Active Directory and AzureAD v1
byVICTOR MAESTRE RAMIREZ
 
PPTX
Full course that Prymehat uploads for you version 2
byOhenebaManu1
 
PDF
Effective Ai powered mock interview .pdf
byamazingnishusingh766
 
PPTX
Unit 1 Introduction of Computer Networks
bySuvarnaSharma5
 
PDF
Josh Chu Boston - An Innovative Technology Executive
byJosh Chu Boston
 
PPTX
KTU-PEMET413 -MODULE 2-POLYMER MATRIX COMPOSITES - LECTURE 1.pptx
byVINAY B
 
PPT
Waste water treatment plant operation and maintenance
byDuggineniRamakrishna
 
Saga: The new era of transactions in a microservices architecture
byGiovanni Marigi
 
Design Flaws and Known Attacks in Agentic AI - ITI Business Session
byInformation Technology Institute
 
Requestly or Postman: What’s the Right API Tool for Your Team?
byhenrycavill30521
 
Chapter 2 Computer Threat .pdf
byGetnet Tigabie Askale -(GM)
 
Mobile Onboarding UX 11 Best Practices for Retention (2026).pdf
byDesign Studio UI UX
 
6 Insights from the Patron Saint of AI Failure
byScott M. Graffius
 
Building Real-Time Voice AI — Udaiappa Ramachandran
byUdaiappa Ramachandran
 
JAVA Programming Lecture 1 C 4 Yourself.pptx
byyvsbglfaeahuyldzhq
 
DVCON24-IBM ai/ml driven hardware verification
byArun Joseph
 
Flutter & Firebase Session Slides - GDG VESIT
bygdgcodecellcmpn
 
Generating Structured Outputs from Unstructured Content Using LLMs
byEnterprise Knowledge
 
Best-Travel-Portal-Development-Solutions-for-Online-Growth
bykashishnagarrajput
 
SEO in Charleston SC | Local SEO Strategies to Grow Your Business.pdf
bycustomdigitalsolutio1
 
Purple Team - Active Directory and AzureAD v1
byVICTOR MAESTRE RAMIREZ
 
Full course that Prymehat uploads for you version 2
byOhenebaManu1
 
Effective Ai powered mock interview .pdf
byamazingnishusingh766
 
Unit 1 Introduction of Computer Networks
bySuvarnaSharma5
 
Josh Chu Boston - An Innovative Technology Executive
byJosh Chu Boston
 
KTU-PEMET413 -MODULE 2-POLYMER MATRIX COMPOSITES - LECTURE 1.pptx
byVINAY B
 
Waste water treatment plant operation and maintenance
byDuggineniRamakrishna
 

GWT widget development

  • 1.
    GWT widget development Eventhough widget libraries for GWT exist, it’s sometimes necessary to create a widget on your own. Widget creation will confront you with challenges like GWT specifics or the way browsers work.! Participants will learn how to compose existing widgets as well as creating new ones based on DOM elements. As it is important to know how browsers behave, topics like DOM API, reflows and event propagation will be explained. But there are also GWT specific aspects, like important interfaces and classes or how to prevent code injection.
  • 2.
  • 3.
  • 4.
  • 5.
    It’s all abouthaving the choice
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
    or buying. + support +vendor lock-in
  • 11.
  • 12.
    We only have60 Minutes We must assume you are not new to GWT
  • 13.
  • 14.
    What are components? com·po·nent kəmˈpōnənt/ ! apart or element of a larger whole, esp. a part of a machine or vehicle.
  • 15.
    What are UIcomponents?
  • 16.
  • 17.
    Code reuse? Just import libraryinto project, and use this progress bar. Don‘t reinvent the wheel, unless it is a better wheel...
  • 18.
    Code reuse bycomposition
  • 19.
  • 20.
    separation of concerns? Thecoders at 
 gwt-bootstrap did the progress bar widget magic.! ! I will never build widgets!!!! ! It is not of my concern. I simply use them!!!
  • 21.
    RIGHT? Yes…! ! But still…! ! …third partywidgets are generic components.
  • 22.
    RIGHT? Yes…! ! But still…! ! …third partywidgets are generic components.
  • 23.
    Don‘t use generictools, unless you are Mac Gyver… MAC GYVER All he needed was a ball-point pen and a paper clip
  • 24.
  • 25.
  • 26.
    You got thepicture,
 right?
  • 27.
    You got thepicture,
 right? Label VerticalPanel HorizontalPanel VerticalPanel HorizontalPanel Label Label FlexTable FlexTable VerticalPanel HorizontalPanel FlexTable HorizontalPanel Label Label Label
  • 28.
    Unfortunately, we aremodern Mac Gyvers! <div /> WEB DEVELOPER A div is all you need
  • 29.
  • 30.
    So what isa GWT Widget?
  • 31.
    It‘s a JSthing holding a DOM element <div />
  • 32.
    Created to workaroundIE6 memory leaks
  • 33.
    Widgets are quiteheavy weight
  • 34.
    Each widget includesfull event management... ...even if there is nothing to see
  • 35.
    Custom components ‣ Increaseefficiency in development! ‣ Domain driven! ‣ Avoid composition abuse! ‣ Implement custom design! ‣ Create more effective widgets! ‣ Cheaper in the long run !35 © 2013 Orientation in Objects GmbH
  • 36.
  • 37.
    We are notSwing developers! ‣ GWT development is web development! ‣ GWT applications are JavaScript applications! ‣ GWT is very good at hiding this! ‣ We can deny knowledge about it! ‣ … but not forever Java JavaScript !37 © 2013 Orientation in Objects GmbH
  • 38.
    JS Apps doDOM manipulation ‣ GWT widget API hides this from the user! ‣ Abuse of composition leads to heavy DOM manipulation! ‣ Custom components are important, and there are things that we should be aware of... © 2013 Orientation in Objects GmbH !38
  • 39.
    DOM API ‣ DocumentObject Model! ‣ Representation of HTML document in memory! – Tree stucture! ‣ Manipulation/creation of elements! ‣ Navigation of elements !39 © 2013 Orientation in Objects GmbH
  • 40.
    DOM API inGWT DivElement  element  =       Document.get().createDivElement(); element.appendChild(otherElement); element.getChild(0); element.removeChild(otherElement);
  • 41.
    DOM events ‣ Bubbling:! ! Theprocess by which an event propagates upward ! through its ancestors after being handled by the event's ! target. ! Source: http://www.w3.org/TR/DOM-Level-2-Events/events.htm#Events-overview-terminology ! ‣ Event.stopPropagation! – The event won‘t be delivered to listeners of ancestors! ! ‣ Event.preventDefault! – Prevents default browser behavior !41 © 2013 Orientation in Objects GmbH
  • 42.
    DOM events ‣ Sinking: Event.sinkEvents(element,  Event.ONCLICK); Event.setEventListener(element,  new   EventListener()  {      @Override        public  void  onBrowserEvent(Event  event)  {            if  (event.getTypeInt()  ==  Event.ONCLICK)  {                  […]            }      } }); !42 © 2013 Orientation in Objects GmbH
  • 43.
    Reflows ‣ Layout update! ‣DOM changes do not directly result in a visual/layout update! – All Updates that occur in one JS execution result in one update! ‣ Effective size and position of elements are only available after update !43 © 2013 Orientation in Objects GmbH
  • 44.
    Distinct phases ! ! ! ! ! ! ‣ JSExecution! ‣ CSS/ Layout update! Browsers are single-threaded ‣ Render !44 © 2013 Orientation in Objects GmbH
  • 45.
  • 46.
    JavaScript execution defersrendering ‣ Long lasting JS execution causes delay in rendering! – The browser hangs...! ‣ Try to keep JS execution short! – Execute incrementally! – Animations! ‣ Try to avoid JS executions !46 © 2013 Orientation in Objects GmbH
  • 47.
    CSS ‣ Use CSSlayouts to handle resizing without JavaScript! ‣ Bad CSS selectors can lead to slow down of rendering! – Define the right most selector as specific as possible! – Avoid selectors that are too complex! – […]! ‣ Try to express states as CSS classes CSS is the new 
 native !47 © 2013 Orientation in Objects GmbH
  • 48.
    Too many divs... ‣Semantic markup ! – ul/li vs div/span! ‣ Accessibility! – WAI-ARIA !48 © 2013 Orientation in Objects GmbH
  • 49.
  • 50.
  • 51.
    Bad Smell: refusedbequest Subclasses get to inherit the methods and data of their parents. But what if they don’t want or need what they are given? They are given all these great gifts and pick just a few to play with. ! The traditional story is that this means the hierarchy is wrong. http://sourcemaking.com/refactoring/refused-bequest 978-0201485677
  • 52.
  • 53.
  • 54.
  • 55.
    Use a Composite,the thing holding a Widget Widget
  • 56.
    Use a Composite,the thing holding a Widget
  • 57.
  • 58.
  • 59.
  • 60.
    You end upexposing only widget + YourGreatInterface Widget Composite YourGreatWidget
  • 61.
  • 62.
    The trick Widget initWidget( flexThing) Composite YourGreatWidget FlexTable
  • 63.
    Internals are lockedaway Widget Composite YourGreatWidget FlexTable
  • 64.
  • 65.
    GWT Widgets andDOM elements
  • 66.
    GWT Widgets andDOM elements div input div
  • 67.
    GWT Widgets andDOM elements SearchBox div input div
  • 68.
    GWT Widgets andDOM elements ‣ Two representations! – Logical (Java)! – Physical (HTML/DOM) SearchBox div input div !68 © 2013 Orientation in Objects GmbH
  • 69.
    The contract ofGWT widgets ‣ setElement(Element)! ! Sets  this  object's  browser  element.   ! UIObject  subclasses  must  call  this   method  before  attempting  to  call  any   ! other  methods,  and  it  may  only  be   ! called  once. ! ! ! ‣ To be on the safe side: do it in the constructor !69 © 2013 Orientation in Objects GmbH
  • 70.
    Widget lifecycle -Construction public  Led()  {        setElement(Document.get().createDivElement());        setStyleName(getResources().style().led());        […]   }
  • 71.
    Widget lifecycle -Attach ‣ void onLoad()! This  method  is  called  immediately  after  a   ! widget  becomes  attached  to  the  browser's   document. ! ‣ AttachEvent.Handler.onAttachOrDetach(…) Fired  when  the  event  source  is  attached  to  the   browser's  document  or  detached  from  it. !71 © 2013 Orientation in Objects GmbH
  • 72.
    Widget lifecycle -Detach ‣ void onUnload()! This  method  is  called  immediately  before  a   ! widget  will  be  detached  from  the  browser's   document. ! ‣ AttachEvent.Handler.onAttachOrDetach(…) Fired  when  the  event  source  is  attached  to  the   browser's  document  or  detached  from  it. !72 © 2013 Orientation in Objects GmbH
  • 73.
    GWT Events ! ! ! ! CloseEvent ! ! ‣ GWTEvent JavaScriptObject NativeEvent OpenEvent ResizeEvent DOMEvent BlurEvent Native eventsare not enough!! – Tab selection?! ‣ SelectionEvent ! Fire existing GwtEvents! HasNativeEvent FocusEvent ChangeEvent KeyEvent – SelectionEvent! – SelectionChangeEvent! – ValueChangeEvent! ‣ ! If none matches your use-case: define your own! !73 © 2013 Orientation in Objects GmbH
  • 74.
    Custom event development Eventsbetween 
 Widgets by sending
 and listening to GwtEvents GwtEvent GwtEvent Event handling in 
 the component, listen to 
 native events Event onBrowserEvent(Event event)
  • 75.
    Custom event development Eventsbetween 
 Widgets by sending
 and listening to GwtEvents Event handling in 
 the component, listen to 
 native events ValueChangeEvent Event LEDActivationEvent Event.ONCLICK, 
 Event.ONKEYDOWN
  • 76.
    Basic handling ofDOM events public  Led()  {        sinkEvents(Event.ONCLICK); } ! @Override   public  void  onBrowserEvent(Event  event)  {      if  (event.getTypeInt()  ==  Event.ONCLICK)  {            toggleLed();      }      […] }
  • 77.
    Providing events tothe user @Override   public  HandlerRegistration  addValueChangeHandler( ValueChangeHandler<Boolean>  handler)  {      return  addHandler(handler,                            ValueChangeEvent.getType()); } ! @Override   public  void  setValue(Boolean  value,  boolean  fireEvents)  {      this.value  =  value;        if(fireEvents)  {            ValueChangeEvent.fire(this,  value);      } }
  • 78.
  • 79.
    Define your ownevents: handler… public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  { ! […] ! !      public  interface  Handler  extends  EventHandler  {            void  onSomethingHappened(ExampleEvent  event);      } ! […] ! }
  • 80.
    Define your ownevents: payload public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  {   ! […] !      private  final  int  value;        public  ExampleEvent(int  value)  {            this.value  =  value;      }   !      public  int  getValue()  {            return  value;      }   ! ! } […]
  • 81.
    Define your ownevents: dispatching public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  {   ! […] ! !      protected  void  dispatch(Handler  handler)  {            handler.onSomethingHappened(this);      } ! ! } […]
  • 82.
    Define your ownevents: allow registration public  HandlerRegistration  addExampleHandler( ExampleHandler  handler)  {      return  addHandler(handler,  ExampleEvent.getType()); }
  • 83.
  • 84.
  • 85.
    Define your ownevents public  class  ExampleEvent  extends   GwtEvent<ExampleEvent.Handler>  { !      private  static  Type<ExampleEvent.Handler>  type; !      public  static  Type<ExampleEvent.Handler>  getType()  {            if  (type  ==  null)  {                  type  =  new  Type<ExampleEvent.Handler>();            }            return  type;      }      @Override        public  Type<Handler>  getAssociatedType()  {            return  getType();      } }
  • 86.
    Use GWT Optimizations ‣ClientBundle! ‣ CSSResource! ‣ ImageResource connection bottleneck HTTP 1.1! 8.1.4 Practical Considerations! A single-user client SHOULD NOT maintain more than 2 connections © 2013 Orientation in Objects GmbH with any server or proxy. !86
  • 87.
    Use GWT Optimizations public  interface  Resources  extends  ClientBundle  {        @Source("SearchBox.css")        Style  style();   !      @Source("search.png")        ImageResource  search();   }   ! public  interface  Style  extends  CssResource  {        String  root();        String  text();        String  icon();   }
  • 88.
    How to buildwidgets ‣ Manual DOM manipulation! ‣ UiBinder !88 © 2013 Orientation in Objects GmbH
  • 89.
    UiBinder <ui:UiBinder   xmlns:ui="urn:ui:com.google.gwt.uibinder"   xmlns:g="urn:import:com.google.gwt.user.client.ui" >        <ui:with  type=„[…]"  field="style"></ui:with>        <div  class="{style.root}">              <input  type="text"  class="{style.text}"  />              <div  class="{style.icon}"></div>        </div>   </ui:UiBinder>  
  • 90.
  • 91.
    Composite Pattern ‣ Somethingthat contains widgets and IS a widget! ‣ We know that from other UI toolkits (e.g. Swing)! ‣ In GWT we use **Panels for this !91 © 2013 Orientation in Objects GmbH
  • 92.
    We all didit already verticalPanel.add(new  Label("Hello  GWT  world!")); dockLayoutPanel.addWest(new  CustomerForm(),  300); headerPanel.setContentWidget(new  CustomerForm());
  • 93.
    Widgets, panels andDOM elements Panel div div label Label div input TextBox
  • 94.
    The magic behindit ‣ The Panel ensures that the widget‘s underlying DOM element is correctly attached to the document! ‣ Structure of logical and physical representation 
 must be consistent !94 © 2013 Orientation in Objects GmbH
  • 95.
    The magic behindit public  void  add(Widget  widget)  {        […]        element.appendChild(widget.getElement());        adopt(widget);        […]   }
  • 96.
    Contract public  interface  HasWidgets  extends   Iterable<Widget>  {   !      void  add(Widget  w); !      void  clear(); !      Iterator<Widget>  iterator(); !      boolean  remove(Widget  w); }
  • 97.
    Coding against interfacesis possible public  interface  IsWidget  {      Widget  asWidget(); } interface  ForIsWidget  extends  HasWidgets  {      void  add(IsWidget  w); !      boolean  remove(IsWidget  w); }
  • 98.
    Supporting UiBinder ‣ SupportingUiBinder is easy as long as we have ….! – Default constructor! – Default add method! ‣ We can improve the UiBinder compatibility of our widgets! – @UiConstructor! – @UiChild !98 © 2013 Orientation in Objects GmbH
  • 99.
    UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
  • 100.
    UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
  • 101.
    UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
  • 102.
    UiChild example @UiChild   public  void  addField(Widget  widget,  String   label)  {        […]   } <ui:UiBinder  […]  xmlns:oio="urn:import:[…]">        <oio:SimpleFormPanel>              <oio:field  label="Firstname">                    <g:TextBox  />              </oio:field>        </oio:SimpleFormPanel>   </ui:UiBinder>  
  • 103.
  • 104.
    What about Layouts? Whenwe think
 of layouts, we
 think of structuring
 the UI from
 a bigger perspektive
  • 105.
  • 106.
  • 107.
    Web page layouts Desktoplike, 
 full page Long page,
 scroll up/ down
 page
  • 108.
  • 109.
    Layout widgets resize chaining through ! ProvidesResize RequiresResize ! ! ! Chainingis required,
 resize event only top level, not propagated by browser Resize outside in
  • 110.
    Full page application,inside out & outside in RootLayoutPanel
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
    Heap dumping Total memory Nogrid, mostly empty Object count 4.8 > 98,000 15.6 > 570,000 Grid, Text 6.5 > 180,000 SafeHTML 4.9 > 99,000 Grid, Widgets
  • 116.
    Why? setInnerHtml, job done As withCSS: native vs JS Many, many objects and 
 DOM manipulation
  • 117.
    Bonus feature ‣ SafeHTMLprovides some level 
 of security against script injection! ‣ SafeHTML templates 
 provides some 
 pain easing in HTML
 development! ‣ Getting used to SafeHTML 
 ! helps getting used to cell widgets, 
 ! ! helps getting used to cell grids, … © 2013 Orientation in Objects GmbH !117
  • 118.
    SafeHtmlTemplates interface  MyTemplate  extends  
 SafeHtmlTemplates  { !      @Template("<td>{0}</td>")      SafeHtml  cell(String  content); !      @Template("<tr>{0}</tr>")      SafeHtml  row(SafeHtml  cells); !      @Template("<table>{0}</table>")      SafeHtml  table(SafeHtml  rows);   }
  • 119.
  • 120.
    Go native wheneverpossible ‣ CSS is run natively by the browser! ‣ Optimize DOM manipulation by providing bigger HTML chunks 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 010101010101010101010101010101010101010101010101 !120 © 2013 Orientation in Objects GmbH
  • 121.
    Separate browser specifics Don‘tif – then – else for different browsers, use deferred binding <replace-with class="de...MyEntryPointIE"> <when-type-is class="de...MyEntryPointDefault" /> <any> <when-property-is name="user.agent" value="ie6" /> <when-property-is name="user.agent" value="ie8" /> <when-property-is name="user.agent" value="ie9" /> <when-property-is name="user.agent" value="opera" /> </any> </replace-with> !121 © 2013 Orientation in Objects GmbH
  • 122.
    Avoid spaghetti code ‣Try software engineering, it‘s ok! ‣ Many known patterns work well with GWT! ‣ If you don‘t know better, use MVP !122 © 2013 Orientation in Objects GmbH
  • 123.
    SINGLETON You must notpublic static instance
  • 124.