Google Web Toolkit (GWT) Training

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 2

Complete Java Agenda • Brief AJAX Review • Introduction to GWT • Benefits • Installation • Major Components • Anatomy of a GWT Module • Directory Tree • Shell & Browser • Compiler Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 3

Complete Java 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) Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 4

Complete Java Agenda • Overview of Advanced Topics • Emulated JRE • JSNI • JUnit & GWT • Additional Resources • Questions / Discussion Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 5

Complete Java 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. Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 8

Complete Java 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; } } } Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 9

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 10

Complete Java 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” ); } } } Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 11

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 13

Complete Java GWT Overview •Language /specific instances Axis of Mozilla IE Safari Opera Browser • English English / Mozilla English / IE English / English / Safari Opera French French / Mozilla French / IE French / French / Safari Opera German German / Mozilla German / IE German / German / Safari Opera Spanish Spanish / Mozilla Spanish / IE Spanish / Spanish / Safari Opera Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 14

Complete Java 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. Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 15

Complete Java GWT Overview • Major Components • Tools • Compiler • Shell / Browser • ApplicationCreator • ProjectCreator • Samples • Mail Example • Documentation • JavaDoc Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 17

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 18

Complete Java GWT Basic Widget Demonstration • Basic Widget from Application Creator • Java ByteCode in Hosted Browser • Logging • Compile / Browser Button Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 19

Complete Java GWT Basic Widget Demonstration • Hosted Browser Options Args Description -port <port Changes the default port number of the embedded Tomcat number> 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 Allows the user to browse URLs that match the specified list> regexes (comma or space separated). -blacklist <regex Prohibits the user from browsing URLs that match the list> 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 20 written for review.

Complete Java 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. Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 21

Complete Java 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. Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 22

Complete Java 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. Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 23

Complete Java GWT Basic Widget Demonstration • After Running Compile • Tree Structure / Distribution • “Axis” Script Creation • Dynamic Binding • Generated JavaScript • Obfuscated (Default) • Pretty • Detailed Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 24

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 25

Complete Java Creating a GWT Module • Design / MVC • UML of Task List • applicationCreator & projectCreator • Eclipse Project Generation / Debug Launch • EntryPoint • onModuleLoad Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 28

Complete Java Creating a GWT Module • Panels • Widgets • Out of the Box Choices (“Showcase”) • Extending Widget • Pros / Cons • Extending Composite • Adding Listeners • Observer Pattern Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 30

Complete Java Creating a GWT Module • The Model • GWT RPC • I18n • Adding Style • Host Page vs. Config File • Binding to Elements • Adding to Page • Root Panel Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 31

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 32

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 33

Complete Java 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. Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 34

setTimeout ( expression, timeout ); Complete Java Advanced Topics in GWT • Calling into JavaScript from Java public static native void setTimeout(int timeout) /*-{ $wnd.setTimeout ( someMethod(), timeout ); }-*/; Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 35

Complete Java 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); }-*/; } Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 36

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 37

Complete Java 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) Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 38

Complete Java Additional Resources • Classes at Intertech • Complete Java • Complete Java Web Development • Complete AJAX • Complete Spring • Complete Struts • http://www.intertech.com Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 39

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 42

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 43

Complete Java 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 Copyright © Intertech, Inc. 2007 • www.Intertech.com • 800-866-9884 • Slide 44

Google Web Toolkit (GWT) Training

0 comments

Notes on slide 1

1 Favorite