gwt 2 is smarter than you
TRANSCRIPT
GWT 20 is Smarter than You
Robert ldquokebernetrdquo CooperInternap Network Services Inc
GWT in Practice (httpmanningcomcooper)
GWT 1x
Desktop Style UI APIsSmart Java JavaScript compilationrarr
Deferred BindingCode pruningstaticificationinliningetc
Google Institutional KnowledgeCache Strategy (Out of the Box)I18n Strategy (Out of the Box)Image DL optimization (Out of the Box)Two iterations of compression optimization
Testing Packaging ClientServer modules
GWT 1x Progress
Compiler Compiler CompilerMulti-threadedSOYCNew Compression Naming (15 better)
Java 15 Language Features (Generics)JavaScriptObject Overlays
OMGWTFBBQ awesome sauce
Handler rather than Listener (Easy Cleanup)JettyPluggable servers
Only really used for GAE right now
GWT 20
Out of Process Hosted Mode (OOPHMDevMode)No more platform browserXB testing on one deviceYay Swing (No more SWT nightmare)
Compiled StylesheetsTakes ImageBundle to the next levelBrowser-specific CSS optionsTemplates for Sprites etc
GWT 20
UIBinderDeclarative UI supportIntegrates better with standard methodologyCan make UI binding easier
Developer Guided Code PointcutsrunAsync allows for jit code loading inside an
application
LayoutPanelAbsolutely positioned with CSS-driven size hinting
(awesome sauce)
OOPHM
No more SWT BrowserDriven by NPAPI plugin for all browsers
Demo
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 1x
Desktop Style UI APIsSmart Java JavaScript compilationrarr
Deferred BindingCode pruningstaticificationinliningetc
Google Institutional KnowledgeCache Strategy (Out of the Box)I18n Strategy (Out of the Box)Image DL optimization (Out of the Box)Two iterations of compression optimization
Testing Packaging ClientServer modules
GWT 1x Progress
Compiler Compiler CompilerMulti-threadedSOYCNew Compression Naming (15 better)
Java 15 Language Features (Generics)JavaScriptObject Overlays
OMGWTFBBQ awesome sauce
Handler rather than Listener (Easy Cleanup)JettyPluggable servers
Only really used for GAE right now
GWT 20
Out of Process Hosted Mode (OOPHMDevMode)No more platform browserXB testing on one deviceYay Swing (No more SWT nightmare)
Compiled StylesheetsTakes ImageBundle to the next levelBrowser-specific CSS optionsTemplates for Sprites etc
GWT 20
UIBinderDeclarative UI supportIntegrates better with standard methodologyCan make UI binding easier
Developer Guided Code PointcutsrunAsync allows for jit code loading inside an
application
LayoutPanelAbsolutely positioned with CSS-driven size hinting
(awesome sauce)
OOPHM
No more SWT BrowserDriven by NPAPI plugin for all browsers
Demo
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 1x Progress
Compiler Compiler CompilerMulti-threadedSOYCNew Compression Naming (15 better)
Java 15 Language Features (Generics)JavaScriptObject Overlays
OMGWTFBBQ awesome sauce
Handler rather than Listener (Easy Cleanup)JettyPluggable servers
Only really used for GAE right now
GWT 20
Out of Process Hosted Mode (OOPHMDevMode)No more platform browserXB testing on one deviceYay Swing (No more SWT nightmare)
Compiled StylesheetsTakes ImageBundle to the next levelBrowser-specific CSS optionsTemplates for Sprites etc
GWT 20
UIBinderDeclarative UI supportIntegrates better with standard methodologyCan make UI binding easier
Developer Guided Code PointcutsrunAsync allows for jit code loading inside an
application
LayoutPanelAbsolutely positioned with CSS-driven size hinting
(awesome sauce)
OOPHM
No more SWT BrowserDriven by NPAPI plugin for all browsers
Demo
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20
Out of Process Hosted Mode (OOPHMDevMode)No more platform browserXB testing on one deviceYay Swing (No more SWT nightmare)
Compiled StylesheetsTakes ImageBundle to the next levelBrowser-specific CSS optionsTemplates for Sprites etc
GWT 20
UIBinderDeclarative UI supportIntegrates better with standard methodologyCan make UI binding easier
Developer Guided Code PointcutsrunAsync allows for jit code loading inside an
application
LayoutPanelAbsolutely positioned with CSS-driven size hinting
(awesome sauce)
OOPHM
No more SWT BrowserDriven by NPAPI plugin for all browsers
Demo
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20
UIBinderDeclarative UI supportIntegrates better with standard methodologyCan make UI binding easier
Developer Guided Code PointcutsrunAsync allows for jit code loading inside an
application
LayoutPanelAbsolutely positioned with CSS-driven size hinting
(awesome sauce)
OOPHM
No more SWT BrowserDriven by NPAPI plugin for all browsers
Demo
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
OOPHM
No more SWT BrowserDriven by NPAPI plugin for all browsers
Demo
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Demo
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Styesheets
ImageResource replaces ImageBundleInlining as data URLs rather than windowed
imagesOne HTTP Request
Reusable constant valuesFix your colors once
CSS ClassName compilationMake your stuff smaller
Code-Compile works with Point Cuts
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Stylesheets (Examples)
MyModulecss
def smallText 10px
def baseText 00CCCC
myLabelText
font-size smallText
Color baseText
myUnderline
Border-bottom 1px solid baseText
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Stylesheets (Examples)
interface MyModuleCss extends CssResource
String myLabelText
ClassName(ldquomyUnderlinerdquo) Optional (name)
String myUnderlineClass
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Stylesheets (Examples)
if (compile property) (match value)
if useragent msie msie8
halfOpaque
filter alpha(opacity = 50)
else
halfOpaque
opacity 05
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Stylesheets (Examples)
sprite myEditButton
border 1px outset silver
background silver
Gwt-image ldquoedit-iconrdquo
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Resource
Easy inclusion of CSSImagesEtc into moduleI18n of all resources based on namingOne-line compile-time optioning off all
resources
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Resources (Examples)
interface MyResources extends ClientBundle
Source(ldquoMyModulecssrdquo)
Strict
Css myCss Depends on below
Source(ldquoMyEditIconpngrdquo)
ImageResource editIcon
Source(ldquoSomeTextFiletxtrdquo) LOAD FROM WEB
ExternalTextResource configFile
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Compiled Resources
I18n select orderSource() +rdquo[ln]_[cc]rdquo (EN_us EN_au FR_ca)Source() +rdquo[ln]rdquo (EN FR)Source()
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
UIBinder
Declarative UIsWork from XHTML sourceEasy process integration with designers
New HTML DOM classesEasier to work with native DOM without userui
classes
Namespacing in XML allows for easy use of GWT widgets
(Better than Android )Cleaner than using Widgets everywhere
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
UIBinder (Examples)
MyWidgetxml
ltDOCTYPE uiUiBinder SYSTEM httpdlgooglecomgwtDTDxhtmlentgt
ltuiUiBinder xmlnsui=urnuicomgooglegwtuibinder xmlnsg=urnimportcomgooglegwtuserclientuigt
ltgHTMLPanelgt
ltspan uifield=rdquolabelrdquogt ltgListBox uifield=listBox visibleItemCount=1gt
ltgHTMLPanelgt
ltuiUiBindergt
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
UIBinder (Examples)
MyWidgetjava
class MyWidget extends Widget Or UIObject
interface Binder extends UIBinderltWidget MyWidgetgt forces compile generation
private static final Binder BINDER = GWTcreate(Binderclass)
UiField
SpanElement label
UiField
ListBox listBox
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
UIBinder (Examples)
MyWidgetjava (cont)
public MyWidget(String labelString options)
setElement(BINDERcreateAndBindUI(this))
for(String option options)
thislistBoxaddItem(option)
thislabelsetInnerText(label)
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
Developer Guided Pointcuts
GWT 20 is the first compiler I have ever seen that does this
Super Simple SyntaxAll Memory References Remain in PlaceSome Dev Planning Needed for Optimal Use
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
How Compiled GWT Works
Standard Linker compiles into iframe with parent Window and Document objects injected
Anonymous classes follow Java spec of custom ltinitgt based on final availability as constructor args and Pass-By-(Pointer-)Value states
Statics held on Prototypes no global JavaScript context
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
How GWT 20 Pointcuts Work
A call is made to GWTrunAsync(Runnable r)GWT proxies the current pointer references into
a callback JavaScript methodA separate JavaScript file is loaded into the
current runtimeThe callback method is invoked with the current
pointer setSubsequent calls simply invoke the callback
method directly once the code is loaded
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20 Pointcuts Caveats
Shared code compiles to the root projectIf PC(a) and PC(b) share core it goes to root
unless you package a PC(c) with shared code for a and b
Try and break code as cleanly as possibleCore libs still go to the root if where needed
(doesnt save you core collections etc)
Can be slower if abusedStill better to get as much as possible on the first
requestCaching strategies dont span pointcuts
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20 Layout Panel
Problem To many layouts with GWT Panels dont work the way you want them toDesktop GUI panels default to 100 fillMath between fixed pixel size panels and ldquorestrdquo
isnt cleanly supported by CSS and requires reflow() handlers
Doesnt work well for DIP displays and new mobile awesome (Droid)
Solution New GWT panels support a ldquoCSS Accelleratedrdquo flow system based on absolutes
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20 LayoutPanel
Classic Example DockPanelImplemented with a 5 cell lttablegtSizes determined by internal elements not the
wrapperWindow resizes require rescaling of defaults
New version DockPanelTakes a layout unit defaultProvides default fill for unsized elementsControl is in the panel not the elements
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20 LayoutPanel (Examples)
DockPaneljava
DockLayoutPanel p = new DockLayoutPanel(UnitEM)
paddNorth(new HTML(header) 2)
paddSouth(new HTML(footer) 2)
paddWest(new HTML(navigation) 10)
padd(new HTML(content))
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20 LayoutPanel (Examples)
ldquoContentrdquo is now liquid fillChanging EM to PCT doesnt alter the fill for
ldquoContentrdquoInternals use CSS to handle fill sizes so
OpenGLPDFWhatever rendering systems apply and doesnt require a separate eventing chain
FASTCompare to Objective-J etc
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
GWT 20 Summary
CSS is downloaded in second HTTP call compiled to iteration
Compiled CSS iteration includes all images Base64 but Gziped if done right
Pointcuts allow for fractional Code+CSS downloads as part of sub-apps
New Layout system is faster and requires less ldquoonAttach()onWindowResize()rdquo hackery
New developer toolchain is easier to use
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-
PostScript SpeedTracer
SpeedTracer is a new UI to the GWT performance hooks from 17
Is Chrome specificMay not reflect real-world timings in
MSIEFFOpera because of Chromes (awesome) V8 JavaScript engine
Shouldnt replace DebugPanel from 17
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
-