GWT

2,873 views

Published on

GWT by Ophir Radnitz from AlphaCSP

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,873
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
114
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

GWT

  1. 2. GWT It’s Java all the way Ophir Radnitz Consultant, AlphaCSP
  2. 3. Mission Statement <ul><li>“ GWT's mission is to radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise AJAX for any modern browser. ” </li></ul>
  3. 4. Overview <ul><li>Introduction </li></ul><ul><li>Demo Features </li></ul><ul><li>Discussion </li></ul><ul><li>Summary </li></ul>
  4. 5. Overview <ul><li>Introduction </li></ul><ul><li>Demo Features </li></ul><ul><li>Discussion </li></ul><ul><li>Summary </li></ul>
  5. 6. Overview <ul><li>Java Javascript compiler (!) </li></ul><ul><li>Dynamic, reusable UI components </li></ul><ul><li>Fast, responsive rich interface </li></ul><ul><li>Easy on the developer </li></ul><ul><li>Apache v2.0 license </li></ul>
  6. 7. Features (1 of 2) <ul><li>Cross browser compatibility </li></ul><ul><li>Highly optimized output </li></ul><ul><li>A good handle on The Web </li></ul><ul><ul><li>Browser history management </li></ul></ul><ul><ul><li>Safe and powerful DOM access </li></ul></ul><ul><ul><li>Bookmarkable stuff </li></ul></ul><ul><ul><li>Secure remoting </li></ul></ul>
  7. 8. Features (2 of 2) <ul><li>Lots of ready rich components </li></ul><ul><li>JUnit integration </li></ul><ul><li>Built-in benchmarking </li></ul><ul><li>Easy I18N </li></ul><ul><li>Debugging </li></ul><ul><li>Your IDE </li></ul>
  8. 9. … Powered By GWT <ul><li>Google Code </li></ul><ul><li>Google Health </li></ul><ul><li>Google Checkout </li></ul><ul><li>Google Base </li></ul><ul><li>Lombardi Blueprint </li></ul><ul><li>Contact Office </li></ul><ul><li>Compiere </li></ul><ul><li>Queplix </li></ul><ul><li>Awdio </li></ul><ul><li>DimDim </li></ul><ul><li>Scenechronize </li></ul><ul><li>QueWeb CRM </li></ul><ul><li>Applications built at SAP, SAS, Library of Congress </li></ul>
  9. 10. History <ul><ul><li>May </li></ul></ul><ul><ul><li>August </li></ul></ul><ul><ul><li>November </li></ul></ul><ul><ul><li>February </li></ul></ul><ul><ul><li>August </li></ul></ul><ul><ul><li>May </li></ul></ul><ul><li>Formerly known as “ Project Red Pill ” </li></ul><ul><li>Announced on JavaOne 2006 </li></ul>
  10. 11. Status <ul><li>Version 1.5 Release Candidate </li></ul><ul><ul><li>Support for Java 5 features </li></ul></ul><ul><ul><li>Even more compiler optimizations </li></ul></ul><ul><ul><li>UI library additions (animations, themes) </li></ul></ul><ul><ul><li>I18N (Bi-di, pluralizations), accessibility </li></ul></ul><ul><ul><li>Better DOM API </li></ul></ul><ul><li>Emerging libraries and integrations </li></ul>
  11. 12. What’s in it? JRE Emulation (java.lang, java.util) GWT Compiler Hosted Browser Class Library
  12. 13. Where does Speed Come From? <ul><li>Fewer Requests (by far) </li></ul><ul><li>Compiler optimization Javascript </li></ul><ul><li>Deferred binding </li></ul><ul><li>Versioned cache </li></ul><ul><li>Efficient RPC </li></ul><ul><li>Reduced load on the server </li></ul>
  13. 14. Deferred Binding <ul><li>The GWT Mantra: </li></ul><ul><ul><li>Why do at runtime what you can do at compile time? </li></ul></ul>MyService service = GWT . create ( MyService . class );
  14. 15. Hosted Mode
  15. 16. Entry Point Anatomy MyPage.html < script language =&quot;javascript&quot; src =&quot; com.alphacsp.demo.MyModule.nocache.js “/> com.alphacsp.demo.MyModule. <MD5>.cache.js “
  16. 17. Compiled Javascript function com_alphacsp_contacts_Contacts(){var l='',B='&quot; for &quot;gwt:onLoadErrorFn&quot;',z='&quot; for &quot;gwt:onPropertyErrorFn&quot;',wb='&quot;></script>',n='/',kb='226AF0230B73371F6FD432899942EF89.cache.html',ib='6C5371FFFFB5323F9D8058C234E97823.cache.html',jb='86331CB96F6F13236040789304D78367.cache.html',lb='96AB31FA627C259590E8CA143E53C3E0.cache.html',vb='<script id=&quot;',sb=&quot;<script>com_alphacsp_contacts_Contacts.onInjectionDone('com.alphacsp.contacts.Contacts')</script>&quot;,v='=',y='Bad handler &quot;',ob='DOMContentLoaded',mb='E6FAB8BEE24B098AC223BA54C66FD81B.cache.html',xb='SCRIPT',ub='__gwt_marker_com.alphacsp.contacts.Contacts',o='base',q='clear.cache.gif',m='com.alphacsp.contacts.Contacts',u='content',db='gecko',eb='gecko1_8',nb='gwt.hybrid',A='gwt:onLoadErrorFn',w='gwt:onPropertyErrorFn',t='gwt:property',hb='hosted.html?com_alphacsp_contacts_Contacts',bb='ie6',pb='iframe',p='img',qb=&quot;javascript:''&quot;,r='meta',gb='moduleRequested',ab='msie',s='name',D='opera',rb='position:absolute;width:0;height:0;border:none',F='safari',tb='selectionDone',cb='selectionStart',x='startup',fb='unknown',C='user.agent',E='webkit';var zb=window,k=document,bc=zb.external,yb=zb.__gwtstatsEvent?function(a,b,c,d){zb.__gwtstatsEvent(a,b,c,d)}:null,oc,ec,Eb,Db=l,hc={},rc=[],nc=[],Cb=[],kc,mc;yb&&yb(m,x,cb,{millis:(new Date()).getTime()});if(!zb.__gwt_stylesLoaded){zb.__gwt_stylesLoaded={}}if(!zb.__gwt_scriptsLoaded){zb.__gwt_scriptsLoaded={}}function dc(){try{return bc&&(bc.gwtOnLoad&&zb.location.search.indexOf(nb)==-1)}catch(a){return false}}function gc(){if(oc&&ec){var c=k.getElementById(m);var b=c.contentWindow;b.__gwt_initHandlers=com_alphacsp_contacts_Contacts.__gwt_initHandlers;if(dc()){b.__gwt_getProperty=function(a){return Fb(a)}}com_alphacsp_contacts_Contacts=null;b.gwtOnLoad(kc,m,Db);yb&&yb(m,x,tb,{millis:(new Date()).getTime()})}}function ac(){var j,h=ub,i;k.write(vb+h+wb);i=k.getElementById(h);j=i&&i.previousSibling;while(j&&j.tagName!=xb){j=j.previousSibling}function d(b){var a=b.lastIndexOf(n);return a>=0?b.substring(0,a+1):l};if(j&&j.src){Db=d(j.src)}if(Db==l){var c=k.getElementsByTagName(o);if(c.length>0){Db=c[c.length-1].href}else{var g=k.location;var e=g.href;Db=d(e.substr(0,e.length-g.hash.length))}}else if(Db.match(/^w+:///)){}else{var f=k.createElement(p);f.src=Db+q;Db=d(f.src)}if(i){i.parentNode.removeChild(i)}}function lc(){var f=document.getElementsByTagName(r);for(var d=0,g=f.length;d<g;++d){var e=f[d],h=e.getAttribute(s),b;if(h){if(h==t){b=e.getAttribute(u);if(b){var i,c=b.indexOf(v);if(c>=0){h=b.substring(0,c);i=b.substring(c+1)}else{h=b;i=l}hc[h]=i}}else if(h==w){b=e.getAttribute(u);if(b){try{mc=eval(b)}catch(a){alert(y+b+z)}}}else if(h==A){b=e.getAttribute(u);if(b){try{kc=eval(b)}catch(a){alert(y+b+B)}}}}}}function qc(d,e){var a=Cb;for(var b=0,c=d.length-1;b<c;++b){a=a[d[b]]||(a[d[b]]=[])}a[d[c]]=e}function Fb(d){var e=nc[d](),b=rc[d];if(e in b){return e}var a=[];for(var c in b){a[b[c]]=c}if(mc){mc(d,a,e)}throw null}nc[C]=function(){var d=navigator.userAgent.toLowerCase();var b=function(a){return parseInt(a[1])*1000+parseInt(a[2])};if(d.indexOf(D)!=-1){return D}else if(d.indexOf(E)!=-1){return F}else if(d.indexOf(ab)!=-1){var c=/msie ([0-9]+).([0-9]+)/.exec(d);if(c&&c.length==3){if(b(c)>=6000){return bb}}}else if(d.indexOf(db)!=-1){var c=/rv:([0-9]+).([0-9]+)/.exec(d);if(c&&c.length==3){if(b(c)>=1008)return eb}return db}return fb};rc[C]={gecko:0,gecko1_8:1,ie6:2,opera:3,safari:4};com_alphacsp_contacts_Contacts.onInjectionDone=function(){oc=true;yb&&yb(m,x,gb,{millis:(new Date()).getTime()});gc()};com_alphacsp_contacts_Contacts.onScriptLoad=function(){ec=true;gc()};ac();lc();var pc;if(dc()){pc=hb}else{try{qc([D],ib);qc([F],jb);qc([bb],kb);qc([eb],lb);qc([db],mb);pc=Cb[Fb(C)]}catch(a){return}}var jc;function ic(){if(!Eb){Eb=true;gc();if(k.removeEventListener){k.removeEventListener(ob,ic,false)}if(jc){clearInterval(jc)}}}var cc;function fc(){if(!cc){cc=true;var a=k.createElement(pb);a.src=qb;a.id=m;a.style.cssText=rb;a.tabIndex=-1;k.body.appendChild(a);a.src=Db+pc}}if(k.addEventListener){k.addEventListener(ob,function(){fc();ic()},false)}var jc=setInterval(function(){if(/loaded|complete/.test(k.readyState)){fc();ic()}},50);k.write(sb)}com_alphacsp_contacts_Contacts.__gwt_initHandlers=function(i,e,j){var d=window,g=d.onresize,f=d.onbeforeunload,h=d.onunload;d.onresize=function(a){try{i()}finally{g&&g(a)}};d.onbeforeunload=function(a){var c,b;try{c=e()}finally{b=f&&f(a)}if(c!=null){return c}if(b!=null){return b}};d.onunload=function(a){try{j()}finally{h&&h(a)}}};com_alphacsp_contacts_Contacts();
  17. 18. Project structure Resource Description /client Your client-side stuff /server Your server-side stuff /public Your resources (css, images, js) MyModule.gwt.xml Your module configuration
  18. 19. Configuration A module file: < module > < inherits name =“ com.google.gwt.user.User “ / > < entry-point class =“ com.alphacsp.demo.MyModule &quot; / > </ module > Contact.gwt.xml
  19. 20. Agenda <ul><li>Introduction </li></ul><ul><li>Demo Features </li></ul><ul><li>Discussion </li></ul><ul><li>Summary </li></ul>
  20. 21. Base HTML Template < html > < head > <!-- Properties can be specified to influence deferred binding --> < meta name ='gwt:property' content ='locale=en_UK'> < link rel =&quot;stylesheet&quot; href =&quot;Calendar.css&quot;> < title >Demo Contacts Application</ title > </ head > < body > < script language =&quot;javascript&quot; src =&quot; com.alphacsp.demo.MyModule.nocache.js “/> <!-- Include a history iframe to enable full GWT history support --> < iframe src =&quot;javascript:''&quot; id =&quot;__gwt_historyFrame&quot; style =&quot;width:0;height:0;border:0“/> < div id =“ niceWidgetThingHere ”/> </ body > </ html > Contact.html Standard GWT injection Access and manipulate however you like
  21. 22. View Technology (1 of 2) FormPanel loginPanel = new FormPanel (); loginPanel . setFrame ( true ); loginPanel . setBorders ( true ); loginPanel . setButtonAlign ( HorizontalAlignment. CENTER); loginPanel . setHeading (constants. login ()); loginPanel . setFieldWidth (210); loginPanel . setLabelWidth (100); loginPanel . setWidth (400); TextField usernameField = new TextField < String >(); usernameField . setFieldLabel( constants. userNameField ()); loginPanel . add ( usernameField ); TextField passwordField = new TextField < String >(); passwordField . setFieldLabel( constants. passwordField ()); passwordField . setPassword( true ); loginPanel . add ( passwordField ); LoginView.java
  22. 23. View Technology (2 of 2) Button loginButton = new Button (constants. loginButton ()); loginButton . setType (&quot;submit&quot;); loginButton . addSelectionListener( new SelectionListener < ButtonEvent >() { @Override public void componentSelected ( ButtonEvent be) { login ( usernameField . getValue (), passwordField . getValue ()); } }); loginPanel . addButton ( loginButton ); LoginView.java Client-side event handling 
  23. 24. Page Flow private void switchToView ( View view) { viewport . removeAll (); viewport . add (view. getContent ()); viewport . layout (); } Controller.java What’s a page?
  24. 25. Form Binding List < TableColumn > columns = new ArrayList < TableColumn >(); columns . add ( new TableColumn ( “name” , constants . nameColumn (), 150)); columns . add ( new TableColumn ( “email” , constants . emailColumn (), 150)); columns . add ( new TableColumn ( “department” , constants . departmentColumn (), 100); Table table = new Table ( new TableColumnModel ( columns )); LookupView.java
  25. 26. Pagination // table TableColumnModel columnModel = new TableColumnModel ( columns ); Table table = new Table ( columnModel ); // pagingLoader PagingLoader < PagingLoadConfig > pagingLoader = new BasePagingLoader (proxy); // store ListStore < Employee > store = new ListStore < Employee >( pagingLoader ); // binder new TableBinder < Employee >( table , store ); PagingToolBar toolBar = new PagingToolBar (50); toolBar . bind ( pagingLoader ); LookupView.java
  26. 27. Table Sorting pagingLoader. setRemoteSort ( false ); LookupView.java
  27. 28. Validation emailField . setAllowBlank (false); emailField . setRegex (&quot; [a-zA-Z0-9]@+ &quot;); emailField . getMessages (). setRegexText (“Please use alphabet only); emailField . setValidator ( new Validator () { public String validate ( Field field, String value) { // … } }); LookupView.java
  28. 29. AJAX (1 of 2) Registering the service under this name Mandatory stuff… It’s great to be a servlet @RemoteServiceRelativePath (&quot;l ookup &quot;) public interface LoginService extends RemoteService { Employee login ( String userName, String password) throws UnsuccessfulLoginException ; } LoginService.java public interface LoginServiceAsync { void login ( String userName, String password, AsyncCallback<Employee> callback); } LoginServiceAsync.java public class LoginServiceImpl extends RemoteServiceServlet { String login ( String userName, String password) { // …. } } LoginServiceImpl.java
  29. 30. AJAX (2 of 2) LoginServiceAsync loginService = GWT . create ( LoginService . class ); loginService . login (username, password, new AsyncCallback<Employee> { public void onSucces s( Employee result) { passwordField . setValue (&quot;&quot;); controller . setUsername (username); controller . loggedIn (); } public void onFailure ( Throwable caught) { try { throw caught; } catch ( UnsuccessfulLoginException e) { loginPanel . setHeading (caught. getMessage ()); } catch ( Throwable throwable) { // do whatever } } }); Yeepee! Deal with it… LoginView.java
  30. 31. I18N Support (1 of 2) public interface LoginMessages extends Messages { String fieldBlank ( String fieldName); // … } LoginMessages.java fieldBlank = {0} cannot be empty. … . LoginMessages.properties LoginConstants messages = GWT . create ( LoginMessages .class ); String message = messages . fieldBlank (“Username”); anywhere
  31. 32. I18N Support (2 of 2) < head > < meta name =&quot; gwt:property &quot; content =&quot; locale=ja_JP &quot;> < head > myPage.html http://www.example.org/myapp.html? locale=fr_CA Locale resolution: By metadata: By request parameter:
  32. 33. Error Handling GWT . setUncaughtExceptionHandler ( new GWT . UncaughtExceptionHandler () { public void onUncaughtException ( Throwable e) { GWT . log (e. getMessage (), e); // … } }); Contacts.java
  33. 34. Agenda <ul><li>Introduction </li></ul><ul><li>Demo Features </li></ul><ul><li>Discussion </li></ul><ul><li>Summary </li></ul>
  34. 35. Documentation <ul><li>GWT reference </li></ul><ul><li>Decent Javadoc </li></ul><ul><li>Active Forum </li></ul><ul><li>onGWT.com, GWT Site </li></ul><ul><li>Books </li></ul>
  35. 36. Did You Know? <ul><li>Can be very minimal </li></ul><ul><li>Doesn’t require a Java backend </li></ul><ul><li>Doesn’t mess with your Javascript </li></ul><ul><li>Conversational state is saved in the client </li></ul>
  36. 37. Design <ul><li>Programmatic layouting </li></ul><ul><li>Everything is CSS </li></ul><ul><li>Go ahead, tweak your DOM </li></ul><ul><li>Out of the box themes </li></ul>
  37. 38. Roadmap <ul><li>Simplified RPC </li></ul><ul><li>Support for very large modules </li></ul><ul><li>Drag and drop support </li></ul><ul><li>Animation/effects support </li></ul><ul><li>Vector graphics library (canvas, SVG, VML) </li></ul>
  38. 39. Tools <ul><li>IntelliJ IDEA </li></ul><ul><li>Cypal Studio (for Eclipse) </li></ul><ul><li>GWT4NB (for NetBeans) </li></ul><ul><li>Instantiations </li></ul><ul><li>Maven </li></ul>
  39. 40. Integrations <ul><li>HTML </li></ul><ul><li>Seam, Grails, Spring MVC </li></ul><ul><li>Google APIs, Google Gears </li></ul>
  40. 41. 3 rd party <ul><li>Ext-GWT </li></ul><ul><li>Gwittir </li></ul><ul><li>GWT Rocket </li></ul><ul><li>GWT Log </li></ul>
  41. 42. Agenda <ul><li>Introduction </li></ul><ul><li>Demo Features </li></ul><ul><li>Discussion </li></ul><ul><li>Summary </li></ul>
  42. 43. Cons <ul><li>It runs as Javascript </li></ul><ul><ul><li>No real concurrency </li></ul></ul><ul><ul><li>Very limited reflection </li></ul></ul><ul><li>Limited POJO binding so far </li></ul><ul><li>Verbatim design takes work </li></ul><ul><li>Think outside the box </li></ul>
  43. 44. Pros <ul><li>Fast, fast, fast (and dynamic) </li></ul><ul><li>Easy to mix </li></ul><ul><li>OO, nice tooling </li></ul><ul><li>Conversational state </li></ul><ul><li>No more markup/Javascript soup </li></ul><ul><li>Think outside the box </li></ul>
  44. 45. Resources <ul><li>http://code.google.com/webtoolkit/ </li></ul><ul><li>http:// www.onGWT.com </li></ul><ul><li>http://del.icio.us/liqweed/GWT </li></ul>
  45. 46. <ul><li>Thank </li></ul><ul><li>You ! </li></ul>

×