Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 1
Introduction to the
Google Web...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 2
Welcome!
• About This Seminar
...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 3
Agenda
• Brief AJAX Review
• I...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 4
Agenda
• Review of MVC (Model ...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 5
Agenda
• Overview of Advanced ...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 6
AJAX Review
• “Traditional” Sy...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 7
AJAX Review
• “New” Asynchrono...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 8
AJAX Review
• AJAX (Asynchrono...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 9
AJAX Review
// Simplified Non-...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 10
AJAX Review
• Benefits
• Abil...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 11
AJAX Review
• Challenges
• Va...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 12
AJAX Review
• Challenges
• Br...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 13
GWT Overview
• What is GWT?
•...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 14
GWT Overview
• Axis of specif...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 15
GWT Overview
• Benefits
• Str...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 16
GWT Overview
• Installation
•...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 17
GWT Overview
• Major Componen...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 18
Anatomy of a GWT Module
• App...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 19
GWT Basic Widget Demonstratio...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 20
GWT Basic Widget Demonstratio...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 21
GWT Basic Widget Demonstratio...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 22
GWT Basic Widget Demonstratio...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 23
GWT Basic Widget Demonstratio...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 24
GWT Basic Widget Demonstratio...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 25
Review of MVC
• Model / View ...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 26
Review of MVC
Controller
Mode...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 27
Review of MVC
Controller
Mode...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 28
Creating a GWT Module
• Desig...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 29
Creating a GWT Module
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 30
Creating a GWT Module
• Panel...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 31
Creating a GWT Module
• The M...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 32
Creating a GWT Module
• Debug...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 33
Creating a GWT Module
• Packa...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 34
Advanced Topics in GWT
• Emul...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 35
Advanced Topics in GWT
• Call...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 36
Advanced Topics in GWT
• Call...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 37
Advanced Topics in GWT
• JUni...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 38
Additional Resources
• Widget...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 39
Additional Resources
• Classe...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 40
Summary
• Review of GWT Major...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 41
Questions and Discussion
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 42
Intertech Resources
• Interte...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 43
Intertech Training
• Founded ...
Complete Java
Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 44
Intertech Consulting
• In add...
Upcoming SlideShare
Loading in …5
×

Google Web Toolkit (GWT) Training

6,859 views

Published on

http://www.Intertech.com

This presentation is from an Intertech Oxygen Blast on Google Web Toolkit (GWT).

Published in: Technology, Business

Google Web Toolkit (GWT) Training

  1. 1. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 1 Introduction to the Google Web Toolkit (GWT) Jason S. Shapiro Java Instructor, Intertech
  2. 2. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 2 Welcome! • About This Seminar • What We Will Cover • Light Review of AJAX Basics • Introduction to GWT • Creating an Internationalized “Task List” widget with GWT • Prerequisites • Basic Understanding of Java • Basic Understanding of Servlet Containers (Tomcat, etc.) • About Me • Java Instructor @ Intertech • ~14 Years Software Development / Architecture Experience
  3. 3. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 3 Agenda • Brief AJAX Review • Introduction to GWT • Benefits • Installation • Major Components • Anatomy of a GWT Module • Directory Tree • Shell & Browser • Compiler
  4. 4. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 4 Agenda • Review of MVC (Model / View / Controller) Architecture • Implementing a GWT Module • Design / Selecting Widgets • Implementing View Behavior • Adding Style • Communicating to the Controller (GWT RPC) • Internationalization (i18n)
  5. 5. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 5 Agenda • Overview of Advanced Topics • Emulated JRE • JSNI • JUnit & GWT • Additional Resources • Questions / Discussion
  6. 6. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 6 AJAX Review • “Traditional” Synchronous Page Request
  7. 7. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 7 AJAX Review • “New” Asynchronous Page Request
  8. 8. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 8 AJAX Review • AJAX (Asynchronous JavaScript and XML) • XMLHttpRequest Object • JavaScript • DOM (Document Object Model) • Creating an AJAX Request / Handling an AJAX Response • Create a “Callback” JavaScript function to handle the response • Create an XMLHttpRequest object for the request • Register your “Callback” function • Send off the object to a server with your request • When “Callback” function is called (and the “readystate” tells you that it’s complete, update your page through the DOM.
  9. 9. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 9 AJAX Review // Simplified Non-Cross-Browser Compliant Code for Demo Purposes function updateStockPriceRequest ( symbol ) { var url = “stockTicker.jsp?symbol=“ + escape(symbol); request = new XMLHttpRequest(); request.open( “GET”, url, true ); request.onreadystatechange = updateStockPrice; request.send( null ); } function updateStockPrice() { if( request.readyState == 4) { if( request.status == 200 ) { document.getElementById( “stockPrice” ).innerHTML = request.responseText; } } }
  10. 10. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 10 AJAX Review • Benefits • Ability for request / responses to be made without interrupting additional activity on a webpage. • Faster response • Reduced page processing / Network traffic • Minimized redundancy; only the pieces that need to be updated are manipulated. • Typically just the information for a given widget is returned, rather than redundant markup. • Example: Search Box Suggestion Widget
  11. 11. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 11 AJAX Review • Challenges • Variations between browsers // Simple Example of Variances; the DOM and Event Handling is even more complex… try { req = new XMLHttpRequest(); } catch (OldIE) { try { req = new ActiveXObject( “Msxml2.XMLHTTP” ); } catch (EvenOlderIE) { try { req = new ActiveXObject( “Microsoft.XMLHTTP” ); } } }
  12. 12. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 12 AJAX Review • Challenges • Breaking the “Back” Button • Testing & Debugging Applications
  13. 13. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 13 GWT Overview • What is GWT? • Google Web Toolkit • Used to create AJAX Widgets and Web Applications • Your Code is primarily written in Java • Native JavaScript can be inserted as well (JSNI) • Configuration file is used to generate axis of JavaScript variations
  14. 14. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 14 GWT Overview • Axis of specific instances • Language / Browser Mozilla IE Safari Opera English English / Mozilla English / IE English / Safari English / Opera French French / Mozilla French / IE French / Safari French / Opera German German / Mozilla German / IE German / Safari German / Opera Spanish Spanish / Mozilla Spanish / IE Spanish / Safari Spanish / Opera
  15. 15. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 15 GWT Overview • Benefits • Strongly Typed Language / Compile Time Checking • One code base used to generate multiple variations. • Updated Browsers / AJAX libraries requires only a recompilation of existing code. • Optimized JavaScript generation without large “if/else” blocks to handle multiple clients. • Ability to code and test in fully featured IDEs • New variations can be added by modifying well formed XML configuration files, affecting an entire code base. • “Out of the Box” support for Internationalization (i18n), JUnit, etc.
  16. 16. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 16 GWT Overview • Installation • Download Site • Environment Variables
  17. 17. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 17 GWT Overview • Major Components • Tools • Compiler • Shell / Browser • ApplicationCreator • ProjectCreator • Samples • Mail Example • Documentation • JavaDoc
  18. 18. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 18 Anatomy of a GWT Module • ApplicationCreator Args Description -eclipse Creates a debug launch configuration for the named eclipse project -out The directory to write output files into (defaults to current) -overwrite Overwrite any existing files -ignore Ignore any existing files; do not overwrite -addToClassPath Adds extra elements to the class path of files in the skeleton -addModule Adds extra GWT module to be inherited className The fully-qualified name of the application class to create
  19. 19. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 19 GWT Basic Widget Demonstration • Basic Widget from Application Creator • Java ByteCode in Hosted Browser • Logging • Compile / Browser Button
  20. 20. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 20 GWT Basic Widget Demonstration • Hosted Browser Options Args Description -port <port number> Changes the default port number of the embedded Tomcat server. If "auto" is specified, a random unused port number will be used. -noserver Prevents the embedded Tomcat server from running, even if a port is specified. -whitelist <regex list> Allows the user to browse URLs that match the specified regexes (comma or space separated). -blacklist <regex list> Prohibits the user from browsing URLs that match the specified regexes (comma or space separated). -logLevel <level> Sets the level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG, SPAM, or ALL -gen <directory> Specifies the directory into which generated files will be written for review.
  21. 21. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 21 GWT Basic Widget Demonstration • Hosted Browser Options Args Description -out <directory> Specifies the directory to write output files into. (Defaults to current.) -style Sets the script output style: OBF[USCATED], PRETTY, or DETAILED. (Defaults to OBF.) -ea Debugging: causes the compiled output to check assert statements <url> Automatically launches the specified URL. Required.
  22. 22. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 22 GWT Basic Widget Demonstration • There is also the ability to compile from the command line, using the generated: GWT Compiler. Args Description -logLevel <level> Sets the level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG, SPAM, or ALL -gen <directory> Specifies the directory into which generated files will be written for review. -out <directory> Specifies the directory to write output files into. (Defaults to current.) -treeLogger Logs output in a graphical tree view.
  23. 23. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 23 GWT Basic Widget Demonstration • GWT Compiler Args Description -style <style type> Sets the script output style: OBF[USCATED], PRETTY, or DETAILED (defaults to OBF). -ea Debugging: causes the compiled output to check assert statements. -validateOnly Validate all source code, but do not compile. <module> Names of modules to compile. Required.
  24. 24. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 24 GWT Basic Widget Demonstration • After Running Compile • Tree Structure / Distribution • “Axis” Script Creation • Dynamic Binding • Generated JavaScript • Obfuscated (Default) • Pretty • Detailed
  25. 25. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 25 Review of MVC • Model / View / Controller • Used to decouple layers and responsibilities • Promotes Reuse • Allows for Ease of Maintenance • Able to swap out parts without having touch entire codebase. • Popular MVC Frameworks • Struts • Spring MVC
  26. 26. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 26 Review of MVC Controller ModelView #1 #2 #3 #4
  27. 27. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 27 Review of MVC Controller ModelView #1 #2 #3 #4
  28. 28. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 28 Creating a GWT Module • Design / MVC • UML of Task List • applicationCreator & projectCreator • Eclipse Project Generation / Debug Launch • EntryPoint • onModuleLoad
  29. 29. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 29 Creating a GWT Module
  30. 30. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 30 Creating a GWT Module • Panels • Widgets • Out of the Box Choices (“Showcase”) • Extending Widget • Pros / Cons • Extending Composite • Adding Listeners • Observer Pattern
  31. 31. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 31 Creating a GWT Module • The Model • GWT RPC • I18n • Adding Style • Host Page vs. Config File • Binding to Elements • Adding to Page • Root Panel
  32. 32. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 32 Creating a GWT Module • Debugging the Application • Show the Debug Configuration • Packaging and Deploying • Client Side Only • www directory • Client & Server Side w/ WAR • Compile with Eclipse • Creat e WAR directory • Add WAR sub-directories • WEB-INF • WEB-INF/classes • WEB-INF/lib • Create Deployment Descriptor • WEB-INF/web.xml
  33. 33. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 33 Creating a GWT Module • Packaging and Deploying (Continued) • Client & Server Side w/ WAR • Copy www directory contents to WAR root • Copy bin directory contents to WEB-INF/classes • Copy gwt-servlet.jar to WEB-INF/lib • Use JAR or ZIP utility to create archive with “.war” extension. • Review of the Major Components for a GWT Module • Design • Select View Components • Add Style • Internationalize • Communicate with the model via the Observer Pattern” & GWT RPC
  34. 34. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 34 Advanced Topics in GWT • Emulated JRE • JavaDoc Reference • JSNI (JavaScript Native Interface) • Benefits • Allows the embedding of JavaScript inside of Java • Allows JavaScript to call Java methods and set/read properties • Challenges • Produces less portable code • JavaScript generation isn’t as optimized • Debugging tools, while in “hosted” mode, aren’t able to see anything beyond the JavaScript invocation.
  35. 35. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 35 Advanced Topics in GWT • Calling into JavaScript from Java setTimeout ( expression, timeout );setTimeout ( expression, timeout ); public static native void setTimeout(int timeout) /*-{ $wnd.setTimeout ( someMethod(), timeout ); }-*/;
  36. 36. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 36 Advanced Topics in GWT • Calling into Java from JavaScript • [instanceRef]@fullyQualifiedClassName::methodName(paramSignature)(paramArgs) package com.intertech; public TaskService { public void createTask(String str) { // Does something... } public native void doStuffFromJS(String str, int timeout) /*-{ $wnd.setTimeout ( someMethod(), timeout ); this.@com.intertech.TaskService::createTask(Ljava/lang/String;)(str); }-*/; }
  37. 37. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 37 Advanced Topics in GWT • JUnit & GWT • junitCreator -junit "C:eclipsepluginsorg.junit_3.8.2.v200706111738junit.jar" - module com.intertech.oxygenblast.gwt.todolist.ToDoList -eclipse StockWatcher com.intertech.oxygenblast.gwt.todolist.client.ToDoListTest
  38. 38. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 38 Additional Resources • Widget Libraries & Projects • http://groups.google.com/group/Google-Web-Toolkit?pli=1 • http://gwt-ext.com/ • Books • GWT in Action (Robert Hanson, Adam Tacy) • GWT in Practice (Robert Cooper, Charlie Collins)
  39. 39. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 39 Additional Resources • Classes at Intertech • Complete Java • Complete Java Web Development • Complete AJAX • Complete Spring • Complete Struts • http://www.intertech.com
  40. 40. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 40 Summary • Review of GWT Major Components • Review of GWT Benefits
  41. 41. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 41 Questions and Discussion
  42. 42. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 42 Intertech Resources • Intertech offers free: • Content packed newsletters • Podcasts through iTunes • YouTube videos • Free Oxygen Blast seminars • Whitepapers and .pdf downloads • For the above and special offers, register for the newsletter at the bottom of www.Intertech.com
  43. 43. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 43 Intertech Training • Founded in 1991, Intertech offers a full training line-up: • JEE, open source technologies • .NET, SQL Server, SharePoint • XML, Ajax • Delivery formats include: • Instructor-led public and onsite • Instructor-led night and virtual • Self-paced study • For advanced purchase customers, Intertech offers Elite Rewards™—call 651-994-8558 +23
  44. 44. Complete Java Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 44 Intertech Consulting • In addition to training, Intertech delivers consulting • Consulting is part of our brand: Instructors Who Consult | Consultants Who Teach • Give your project success with our consulting services • To learn more, contact us at 651-994-8558 +11

×