GWT - Building Rich Internet Applications Using OO Tools
-
Upload
barciszewski -
Category
Technology
-
view
1.030 -
download
2
description
Transcript of GWT - Building Rich Internet Applications Using OO Tools
![Page 1: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/1.jpg)
Google Web Toolkit - Build Rich Web Applications with OO ToolsBenjamin ArciszewskiSenior Software Engineer - StudyBlue
![Page 2: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/2.jpg)
Today's Agenda
● Introduce GWT and talk about what it is, why it's different and why you should use it
● Talk about good/bad of the toolkit● Describe the components of GWT at a high
level● Go through the anatomy of a project● Walk through a sample app that is a little
more complex than 'hello world'● Bring it all together by showing some of the
functionality on StudyBlue.com
![Page 3: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/3.jpg)
Purpose
To get you excited about GWT and to build a large community of GWT users in Wisconsin so StudyBlue has a large pool of qualified developers to choose from as we grow...
![Page 4: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/4.jpg)
Something to think about...
How many Java LOC are in the StudyBlue Web application (method used is Eclipse metrics plugin, only com.sb.* packages)?
![Page 5: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/5.jpg)
10 Second History of the Web
● Web pages● Interactive Web pages● Web applications● Rich Internet Applications
![Page 6: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/6.jpg)
Traditional Frameworks
● MVC ○ Struts○ Struts II
● Component-based○ JSF○ Tapestry
● SOUI (AJAX)○ Ext JS○ DOJO○ jQuery
![Page 7: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/7.jpg)
Difficulty of traditional MVC frameworks
● Mixed languages○ Server
■ java, ruby, php, C#,...■ templates (HTML,XML, markup...)■ Glue languages (OGNL)
○ Client■ JavaScript■ HTML
● Server vs. Client○ No sharing of code○ Lots of config○ Lots of conversion
![Page 8: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/8.jpg)
Difficulty of Traditional Web Frameworks, continued
● Complex project setups○ Server-side code○ Client side code○ Templates○ Static files○ JavaScripts
![Page 9: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/9.jpg)
Ultimate Issue?
● They all treat Rich Internet Applications as Web Pages!
![Page 10: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/10.jpg)
Browser?
● Rich Object Model● Performant Script processing engine (V8)● Local persistence● Rich Graphics (Canvas)● Rich set of programming APIs● Complete set of events
![Page 11: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/11.jpg)
What is GWT?
Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords and Orkut. It's open source, completely free, and used by thousands of developers around the world. From:https://developers.google.com/web-toolkit/
![Page 12: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/12.jpg)
What is GWT?
GWT, aka the Google Web Toolkit, or "Gwit" as their team likes to say (which is a stupid pronunciation), is a Java skin on the Javascript language. It allows objected oriented, strictly-typed programming fans to work seamlessly with pixel perfect, anal retentive HTML/CSS gurus. In addition it provides tons of optimizations for code efficiency, internationalization, resource bundling, etc. Finally, it's flexible enough that you can bake it into any type of web application, using any type of server-client communication From:Chris Klunt, President andCo-Founder - StudyBlue
![Page 13: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/13.jpg)
What is GWT?
GWT is a client-side framework for developing rich internet applications in Java, taking advantage of all of the tools that come with a high-level language like Java. From:Dale Beerman, Chief Technical Architect - StudyBlue
![Page 14: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/14.jpg)
How GWT is Different
● Code is in Java (mostly)● 'compiled' to js/html ● No need for
○ page templates○ 'glue languages'○ scripting
● Full use of Java tool stack○ Eclipse debugger○ Code complete○ Continuous compilation
● Shared code between client/server
![Page 15: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/15.jpg)
Practical Description of GWT
● Set of tools that turn Java into html/js.○ Eclipse Plugin○ Project Generator○ J2SE proxy libraries ○ Compiler○ Browser Plugin (for development)○ Java Widget and Service API○ RPC mechanism○ WYSIWYG Visual Editor (We don't use)
![Page 16: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/16.jpg)
Advantages for doing it this way...
● Code is optimized for each browser during compile (read: optimization)
● Full OO abstractions: inheritance, polymorphism, encapsulation, extension
● One single language (mostly)● Ability to bind to 'native' JS when needed● Code re-use
○ Components, Widgets and Services● High quality, easily usable, libraries
![Page 17: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/17.jpg)
Disadvantages
● Compile can be slow (especially w/ i18n)○ One version for each browser, for each language,
exponential growth...● Plugin used for local testing in browser● Give up some control (but not as much as
you might think)● GWT Unit tests are SLOW● You sometimes think you are in Java
![Page 18: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/18.jpg)
Anatomy of a GWT Project
● Java code○ client - compiled to js/html and run in browser○ server - compiled to java and run on server○ shared - both (must be compliant w/ client)
● .gwt.xml - configuration file● .html host file - that will include your code● .css file - for styling
![Page 19: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/19.jpg)
GWT - RPC
● It's like magic○ Define an Interface○ Define an implementation in server○ Define an implementation w/ callback in client.
● To Configure○ Create an interface in client○ Create an asynchronous interface in client○ Create an implementation on server that extends
RemoteServiceServlet○ Configure Servlet in web.xml
● To use○ Get the Async version from GWT (GWT.create)○ Make calls, receive response in Callback
![Page 20: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/20.jpg)
UI code
● Widgets (Java objects)○ Your code creates views via Extension and/or
Composition● Customizable● Configurable● Similar to Swing ● Extensible● Optional .ui.xml file bindings (StudyBlue)
![Page 21: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/21.jpg)
Project Structure
![Page 22: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/22.jpg)
Organization - Config
![Page 23: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/23.jpg)
Organization - src
![Page 24: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/24.jpg)
Organization - war
![Page 25: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/25.jpg)
Interaction - Host Page - JavaScript
<script type="text/javascript" language="javascript" src="jugsampleapp/jugsampleapp.nocache.js"></script>
![Page 26: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/26.jpg)
Interaction - Host page - Elements
<h1>JUG Sample Application</h1> <div id="searchWrapper"> <div id="editor"><!-- GWT ... --></div> <div id="buttons"><!-- GWT ... --></div> </div> <div id="cardWall"> <div id="cardList" class="cardBox"><!-- GWT ... --></div> </div>
![Page 27: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/27.jpg)
Interaction - Execution Start
● EntryPoint.onModuleLoad● In our sample: JugSampleApp
![Page 28: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/28.jpg)
Interaction - RPC
● CardService (client)● CardServiceAsync (client)● CardServiceImpl extends
RemoteServiceServlet implements CardService(server)
![Page 29: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/29.jpg)
Sample Project
![Page 30: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/30.jpg)
Bring it together - Cardwall
![Page 31: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/31.jpg)
Bring it all together - Preview
![Page 32: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/32.jpg)
Bring it all together - Edit
![Page 33: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/33.jpg)
Bring it all together - Flip
![Page 34: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/34.jpg)
Bring it all together - Quiz
![Page 35: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/35.jpg)
How many LOC are in our app?
![Page 36: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/36.jpg)
Answer:
About 66,000
![Page 37: GWT - Building Rich Internet Applications Using OO Tools](https://reader033.fdocuments.net/reader033/viewer/2022060109/55595313d8b42a93708b476a/html5/thumbnails/37.jpg)
StudyBlue Any questions?Benjamin ArciszewskiSenior Software Engineer - StudyBlue