Introduction to GWT

1. For Developers Introduction to GWT Hi everyone. In this session I will introduce you to GWT.Hi everyone. In this session I will introduce you to GWT.

2. My name is Robert Hanson http://roberthanson.org Mgr. of App. Development at QualityTech http://qualitytech.com Co-Author of GWT in Action from Manning http://manning.com/hanson Creator of GWT Widget Library http://gwt-widget.sourceforge.net Proprietor GWT Sandbox http://gwtsandbox.com Before I get started, let me introduce my self. My name is Robert Hanson and I work for QualityTech, a hosting provider. My role there is to oversee and participate in the development of new applications. I am also the co-author of GWT in Action, released about two years ago. I am also the creator of the GWT Widget Library, an open-source project. [[It was created with the help of community contributions, and contains an eclectic assortment of widgets. It has a sister project, the GWT Server Library, which provides Spring integration at the same URL.]] And lastly I started a website called GWT Sandbox, a place where I like to post experimental GWT code that I have written. [[Some things on there include an ORM solution for Google Gears, a Color Picker.]]Before I get started, let me introduce my self. My name is Robert Hanson and I work for QualityTech, a hosting provider. My role there is to oversee and participate in the development of new applications. I am also the co-author of GWT in Action, released about two years ago. I am also the creator of the GWT Widget Library, an open-source project. [[It was created with the help of community contributions, and contains an eclectic assortment of widgets. It has a sister project, the GWT Server Library, which provides Spring integration at the same URL.]] And lastly I started a website called GWT Sandbox, a place where I like to post experimental GWT code that I have written. [[Some things on there include an ORM solution for Google Gears, a Color Picker.]]

3. In this talk I want to begin by defining what GWT is, and why you might want to use it. We will take a tour of the GWT feature set. If time permits, I have a live demo, so that you can see working GWT code. And then we will wrap it up with a preview of the future of GWT. If you have a brief question regarding a feature that I am discussing, feel free to raise your hand. If you want to ask more in depth questions, or questions about something I didn�t discuss, there will be some time following the presentation for Q&A. So lets begin.In this talk I want to begin by defining what GWT is, and why you might want to use it. We will take a tour of the GWT feature set. If time permits, I have a live demo, so that you can see working GWT code. And then we will wrap it up with a preview of the future of GWT. If you have a brief question regarding a feature that I am discussing, feel free to raise your hand. If you want to ask more in depth questions, or questions about something I didn�t discuss, there will be some time following the presentation for Q&A. So lets begin.

4. Defining GWT What is it, and what�s in it for me? Defining GWT.Defining GWT.

5. What is GWT? A year and a half ago there was a GWT conference in San Francisco, and most GWT developers were shocked to hear that the Google developers pronounce it �Gwit�. It was actually debated quite a bit. I don�t think anyone liked �gwit�, but most went along with it, while others denounced it. For me, I just never got used to it, so I say G-W-T. The central tool to the toolkit is a Java to JavaScript compiler. I will talk about this quite a bit more when we discuss GWT�s features. It is shipped with a �hosted-mode� browser. This is a web browser meant to be used during development. It allows you to view your GWT application without having to compile it to JavaScript. The benefit here is quick feedback without recompiling and deploying your application, and it allows you to debug your application with a Java debugger. The JRE emulation library is set of Java classes found in the JRE that have re-implemented so that they can be compiled into JavaScript. We will discuss what this means a little later. And of course, there are a lot of widgets and tools. Lastly, I want to review the versions of GWT, because there have been some significant changes between releases that you should be aware of.What is GWT? A year and a half ago there was a GWT conference in San Francisco, and most GWT developers were shocked to hear that the Google developers pronounce it �Gwit�. It was actually debated quite a bit. I don�t think anyone liked �gwit�, but most went along with it, while others denounced it. For me, I just never got used to it, so I say G-W-T. The central tool to the toolkit is a Java to JavaScript compiler. I will talk about this quite a bit more when we discuss GWT�s features. It is shipped with a �hosted-mode� browser. This is a web browser meant to be used during development. It allows you to view your GWT application without having to compile it to JavaScript. The benefit here is quick feedback without recompiling and deploying your application, and it allows you to debug your application with a Java debugger. The JRE emulation library is set of Java classes found in the JRE that have re-implemented so that they can be compiled into JavaScript. We will discuss what this means a little later. And of course, there are a lot of widgets and tools. Lastly, I want to review the versions of GWT, because there have been some significant changes between releases that you should be aware of.

6. But why would you want to use GWT? The frequent answer to that question is �productivity�. Let me explain what I mean by that. Java has features that make it very useful in a team environment. Its support for encapsulation, allowing you to specify that a method is private, or only available to a sub-class. It uses static typing, which can be considered a form of documentation, making it easier for a developer to use an API that they didn�t develop. Java also has Javadoc, so creating documentation of the API is easy. Java has features that make it useful for very large projects. It has a package structure, allowing you to organize parts of your code. It has classes, allowing you to split your code into individual class definition files. It is object-oriented, allowing you to use well known patterns. The bottom line is that if you have a team of Java developers, then will simply be more productive writing Java code than they will writing JavaScript.But why would you want to use GWT? The frequent answer to that question is �productivity�. Let me explain what I mean by that. Java has features that make it very useful in a team environment. Its support for encapsulation, allowing you to specify that a method is private, or only available to a sub-class. It uses static typing, which can be considered a form of documentation, making it easier for a developer to use an API that they didn�t develop. Java also has Javadoc, so creating documentation of the API is easy. Java has features that make it useful for very large projects. It has a package structure, allowing you to organize parts of your code. It has classes, allowing you to split your code into individual class definition files. It is object-oriented, allowing you to use well known patterns. The bottom line is that if you have a team of Java developers, then will simply be more productive writing Java code than they will writing JavaScript.

7. So, what�s in it for Java developers. You get to use your fancy IDE. As an Eclipse user I have auto-completion, it allows me to follow code declarations, allows me to view a class hierarchy, integrates with subversion, has a task management tool, etc, etc. Using GWT allows me to use Ant or Maven to build my application. I can even use Hudson or Continuum for continuous integration. I have my collection of trusted design patterns. I have my testing tools. Namely JUnit. And I have the JRE, a set of classes that I am already familiar with. Now lets see what the code looks like.So, what�s in it for Java developers. You get to use your fancy IDE. As an Eclipse user I have auto-completion, it allows me to follow code declarations, allows me to view a class hierarchy, integrates with subversion, has a task management tool, etc, etc. Using GWT allows me to use Ant or Maven to build my application. I can even use Hudson or Continuum for continuous integration. I have my collection of trusted design patterns. I have my testing tools. Namely JUnit. And I have the JRE, a set of classes that I am already familiar with. Now lets see what the code looks like.

8. This is about as basic an application that you can write. Here I create a Button instance, attached a click handler to it, and add it to the RootPanel. The RootPanel is a special panel in GWT that represents the body of the web page. If you have done any UI development, like Swing, this should look familiar. Each widget is represented by a class, and widgets are assembled into a hierarchy of widgets. In this case the Button widget has been attached to the RootPanel. Behaviors can be added to widgets in the form of handlers. In this case we have attached a ClickHandler to our button. So when we run this application we are presented with a button. And clicking that button triggers the handler, which in turn displays an alert message.This is about as basic an application that you can write. Here I create a Button instance, attached a click handler to it, and add it to the RootPanel. The RootPanel is a special panel in GWT that represents the body of the web page. If you have done any UI development, like Swing, this should look familiar. Each widget is represented by a class, and widgets are assembled into a hierarchy of widgets. In this case the Button widget has been attached to the RootPanel. Behaviors can be added to widgets in the form of handlers. In this case we have attached a ClickHandler to our button. So when we run this application we are presented with a button. And clicking that button triggers the handler, which in turn displays an alert message.

9. Now lets talk about the workflow for developing a GWT application. It isn�t too much different than a traditional Java project. Now lets talk about the workflow for developing a GWT application. It isn�t too much different than a traditional Java project.

10. As usual, you start by writing some code in your IDE. It looks pretty much like any other Java project. In your project you can mix both client-side and server-side code. The difference is that the client-side code may only use classes from GWT�s JRE Emulation Library, while the server-side code can use the entire JRE. An example of this would be JDBC, which can only be used on the server-side. As usual, you start by writing some code in your IDE. It looks pretty much like any other Java project. In your project you can mix both client-side and server-side code. The difference is that the client-side code may only use classes from GWT�s JRE Emulation Library, while the server-side code can use the entire JRE. An example of this would be JDBC, which can only be used on the server-side.

11. Typically you will want to see what the application looks like, and to verify functionality. For that you can use the hosted-mode browser. This browser is running off of your Java code, as opposed to the JavaScript code. So it isn�t a real browser, but is pretty close. Just like a real browser, there is a refresh button. So you can simply make a change in the IDE, then hit the refresh button. You will notice that there are two windows. The one in the background is the console. You can log client-side messages to the console from your application for debugging and other purposes. The underlying rendering engine used in the hosted-browser will depend on what platform you develop on. On Windows it will be using Internet Explorer COM components, on Mac it will be using WebKit, and Linux it will use Mozilla. This will change in the future, and we will talk about that a little later.Typically you will want to see what the application looks like, and to verify functionality. For that you can use the hosted-mode browser. This browser is running off of your Java code, as opposed to the JavaScript code. So it isn�t a real browser, but is pretty close. Just like a real browser, there is a refresh button. So you can simply make a change in the IDE, then hit the refresh button. You will notice that there are two windows. The one in the background is the console. You can log client-side messages to the console from your application for debugging and other purposes. The underlying rendering engine used in the hosted-browser will depend on what platform you develop on. On Windows it will be using Internet Explorer COM components, on Mac it will be using WebKit, and Linux it will use Mozilla. This will change in the future, and we will talk about that a little later.

12. If needed, you can debug the code in your IDE, just like you normally would. The only difference is that you are using the host-mode browser in the process. You would set your break points, then launch the hosted-browser. Then click around in the hosted-browser until a break point is hit, then step through the code.If needed, you can debug the code in your IDE, just like you normally would. The only difference is that you are using the host-mode browser in the process. You would set your break points, then launch the hosted-browser. Then click around in the hosted-browser until a break point is hit, then step through the code.

13. When you are ready to look at your application in a real browser, perhaps to do some cross-browser testing, you can compile your code to JavaScript and use web-mode. There are a few ways to do this, but the easiest is to use the Compile/Browse button in the hosted-mode browser. This will compile your code, start an embedded Jetty server, open up your default web browser, and load the page.When you are ready to look at your application in a real browser, perhaps to do some cross-browser testing, you can compile your code to JavaScript and use web-mode. There are a few ways to do this, but the easiest is to use the Compile/Browse button in the hosted-mode browser. This will compile your code, start an embedded Jetty server, open up your default web browser, and load the page.

14. When you are ready to release your code, you can copy the compiled files up to your target server. If you look at these files, there are a lot of them, and they all have very long and cryptic names. There is an important purpose behind this. First, the reason for so many files. As you probably know, each browser has it�s own quirks. So when you write a class in GWT you have the ability to specify that a class should only be used in certain browsers. For example, a class that relies on the <canvas> HTML tag won�t work in Internet Explorer, but a class that relies on VML will. So�When you are ready to release your code, you can copy the compiled files up to your target server. If you look at these files, there are a lot of them, and they all have very long and cryptic names. There is an important purpose behind this. First, the reason for so many files. As you probably know, each browser has it�s own quirks. So when you write a class in GWT you have the ability to specify that a class should only be used in certain browsers. For example, a class that relies on the <canvas> HTML tag won�t work in Internet Explorer, but a class that relies on VML will. So�

15. In GWT you can specify a set of rules in an XML file called the module configuration file. In that file you can have the compiler use one class for one web browser, and a different class in another. Here is an example of that. In the GWT Widget Library there is a Canvas widget. The Canvas widget is an abstract class with two concrete implementations. The FFCanvasImpl uses the <canvas> HTML element, and the IECanvasImpl uses the VML elements. At compile time the compiler uses the module configuration files to come up with a list of permutations, and creates a separate JavaScript file for each. In most applications you will have five or six to cover each browser and sometimes different versions of the same browser. In other applications where you are using GWT�s internationalization capabilities you could potentially have one set of files per language. So if you supported five languages, you might have 25 JavaScript files. This is a lot of files, but it isn�t something that you need to manage manually. When your GWT application is loaded by the browser there is some bootstrap JavaScript code that will load the correct permutation for that browser. In GWT you can specify a set of rules in an XML file called the module configuration file. In that file you can have the compiler use one class for one web browser, and a different class in another. Here is an example of that. In the GWT Widget Library there is a Canvas widget. The Canvas widget is an abstract class with two concrete implementations. The FFCanvasImpl uses the <canvas> HTML element, and the IECanvasImpl uses the VML elements. At compile time the compiler uses the module configuration files to come up with a list of permutations, and creates a separate JavaScript file for each. In most applications you will have five or six to cover each browser and sometimes different versions of the same browser. In other applications where you are using GWT�s internationalization capabilities you could potentially have one set of files per language. So if you supported five languages, you might have 25 JavaScript files. This is a lot of files, but it isn�t something that you need to manage manually. When your GWT application is loaded by the browser there is some bootstrap JavaScript code that will load the correct permutation for that browser.

16. Now back to the cryptic file names. The name of each file is actually an MD5 sum of the file. So every time you change your code the filename changes. The reason for this is that you can have the browser cache the JavaScript file indefinitely, it is guaranteed to never change. If the contents of the JavaScript file did change, it would have a different name. You may also notice that the file extensions are dot-HTML. Again, there is a reason for this. Older versions of Internet Explorer have a bug that prevents you from compressing dot-JS files. The ultimate goal is a better user experience. The faster a user can download the application, and the longer it can be cached the better.Now back to the cryptic file names. The name of each file is actually an MD5 sum of the file. So every time you change your code the filename changes. The reason for this is that you can have the browser cache the JavaScript file indefinitely, it is guaranteed to never change. If the contents of the JavaScript file did change, it would have a different name. You may also notice that the file extensions are dot-HTML. Again, there is a reason for this. Older versions of Internet Explorer have a bug that prevents you from compressing dot-JS files. The ultimate goal is a better user experience. The faster a user can download the application, and the longer it can be cached the better.

17. Before we look at the features I want to discuss the different versions of GWT because there have been substantial changes. Version 1.4 was released in the Summer of 2007. It was the first non-beta release of GWT. It was felt that although GWT was stable that some organizations were holding back due to its beta status, so the change in status was made. At this point GWT did not yet allow you to use the Java 5 syntax changes, so generics and annotations were not available. This affected how some of GWT worked, and you had to use XDoclet style annotations in Javadoc blocks for certain features like RPC. Note that this is when most of the GWT books became available, so be careful when selecting and reading a book. In fact you will likely find there are currently no GWT books that are completely up to date, but that doesn�t mean that they don�t have any value. GWT 1.5 was released in the summer of 2008, with the primary change being that you could now use Java 5 syntax, and XDoclet style annotations were deprecated in favor of Java 5 annotations and generics. GWT 1.6 is currently a release candidate, and it is expected that this will be a short RC cycle. Some of the new features in 1.6 are a new project layout, which resembles an expanded war. This layout is more intuitive than the older style layout. A new event handler system replaces the older listener system. Among other things it allows access to more details about the event, and is easier to attach a handler to an event. Hosted mode now uses Jetty instead of Tomcat, so the start-up time should be a little better. You can now trigger native JavaScript events. And some new widgets were added, namely the DatePicker and LazyPanel. The LazyPanel delays its creation until it is actually displayed. This makes sense for something like a help window, where you might to delay its creation until it is actually needed. If you have a choice, I recommend going right to version 1.6. It should be final soon, and the improvements are fairly substantial.Before we look at the features I want to discuss the different versions of GWT because there have been substantial changes. Version 1.4 was released in the Summer of 2007. It was the first non-beta release of GWT. It was felt that although GWT was stable that some organizations were holding back due to its beta status, so the change in status was made. At this point GWT did not yet allow you to use the Java 5 syntax changes, so generics and annotations were not available. This affected how some of GWT worked, and you had to use XDoclet style annotations in Javadoc blocks for certain features like RPC. Note that this is when most of the GWT books became available, so be careful when selecting and reading a book. In fact you will likely find there are currently no GWT books that are completely up to date, but that doesn�t mean that they don�t have any value. GWT 1.5 was released in the summer of 2008, with the primary change being that you could now use Java 5 syntax, and XDoclet style annotations were deprecated in favor of Java 5 annotations and generics. GWT 1.6 is currently a release candidate, and it is expected that this will be a short RC cycle. Some of the new features in 1.6 are a new project layout, which resembles an expanded war. This layout is more intuitive than the older style layout. A new event handler system replaces the older listener system. Among other things it allows access to more details about the event, and is easier to attach a handler to an event. Hosted mode now uses Jetty instead of Tomcat, so the start-up time should be a little better. You can now trigger native JavaScript events. And some new widgets were added, namely the DatePicker and LazyPanel. The LazyPanel delays its creation until it is actually displayed. This makes sense for something like a help window, where you might to delay its creation until it is actually needed. If you have a choice, I recommend going right to version 1.6. It should be final soon, and the improvements are fairly substantial.

18. Feature Tour GWT�s Tools and Widgets So the core of GWT is the Java to JavaScript compiler. But that alone isn�t enough for a typical project. We need other tools. Things like internationalization, communication with the server, and a library of widgets. Let�s look at that now.So the core of GWT is the Java to JavaScript compiler. But that alone isn�t enough for a typical project. We need other tools. Things like internationalization, communication with the server, and a library of widgets. Let�s look at that now.

19. I have separated the features into core features and advanced features. The core features are the ones that will likely use in every GWT application. This includes the compiler and the JRE emulation library. This includes a way to allow your Java code call JavaScript code, and visa versa. This includes a set of widgets and panels. This includes a history sub-system. Last is a set of utilities. This includes a way to read query string parameters, read and write cookies, and even an XML parser.I have separated the features into core features and advanced features. The core features are the ones that will likely use in every GWT application. This includes the compiler and the JRE emulation library. This includes a way to allow your Java code call JavaScript code, and visa versa. This includes a set of widgets and panels. This includes a history sub-system. Last is a set of utilities. This includes a way to read query string parameters, read and write cookies, and even an XML parser.

20. The advanced features include the ability to call remote code on the server. This includes internationalization so that you can present your application in various languages. Image bundling is a mechanism that can decrease the download time of images by putting them all in the same file. Deferred binding is what we saw previously when we discussed having two implementations of a Canvas widget. What deferred binding means is that you can code to an abstract class or interface, and the actual implementation used will be inserted by the compiler at compile-time. Generators are a more complex form of deferred binding. Instead of having the compiler insert an existing implementation, the implementation to be inserted is generated from scratch. Last is a fairly new addition to the GWT tool-set. A linker is used at compile time to define how the artifacts are packaged.The advanced features include the ability to call remote code on the server. This includes internationalization so that you can present your application in various languages. Image bundling is a mechanism that can decrease the download time of images by putting them all in the same file. Deferred binding is what we saw previously when we discussed having two implementations of a Canvas widget. What deferred binding means is that you can code to an abstract class or interface, and the actual implementation used will be inserted by the compiler at compile-time. Generators are a more complex form of deferred binding. Instead of having the compiler insert an existing implementation, the implementation to be inserted is generated from scratch. Last is a fairly new addition to the GWT tool-set. A linker is used at compile time to define how the artifacts are packaged.

21. Now lets dig a little deeper on each. The compiler compiles Java source code, not bytecode. So you can�t use Scala, Goovy, Jruby, or any other language that compiles to bytecode. The current release of GWT does support Java 5 language features, including annotations, var args, static imports, etc. Part of the job of the compiler is to produce JavaScript code that properly cleans up your objects, reducing the number of memory leaks in your JavaScript application. We already discussed the multiple output files that the compiler creates. And we already touched on image bundling, but more on that later. Now lets dig a little deeper on each. The compiler compiles Java source code, not bytecode. So you can�t use Scala, Goovy, Jruby, or any other language that compiles to bytecode. The current release of GWT does support Java 5 language features, including annotations, var args, static imports, etc. Part of the job of the compiler is to produce JavaScript code that properly cleans up your objects, reducing the number of memory leaks in your JavaScript application. We already discussed the multiple output files that the compiler creates. And we already touched on image bundling, but more on that later.

22. As part of your project you will also have a module definition file. This configuration file is used to configure the compiler. It specifies what languages your application supports, what other modules you are making use of, allows you to override default settings for where your source code is, and most importantly defines the entry class to execute when the application starts. This module configuration file is about as simple as they come. We are inheriting the User module, which is required if you want to use any of the utility classes or widgets that come with GWT. Next we import a package that provides us with the standard theme. This isn�t required though. If you don�t use one of the built-in theme modules you would need to supply your own CSS styles for any widgets that you use. By the way, the this theme module doesn�t actually contain any code, it has only a CSS file and some images. But by inheriting from this module the GWT compiler will make sure these files are included in the output. Last we specify the entry point class of the application. In this case the HelloWorld class. As part of your project you will also have a module definition file. This configuration file is used to configure the compiler. It specifies what languages your application supports, what other modules you are making use of, allows you to override default settings for where your source code is, and most importantly defines the entry class to execute when the application starts. This module configuration file is about as simple as they come. We are inheriting the User module, which is required if you want to use any of the utility classes or widgets that come with GWT. Next we import a package that provides us with the standard theme. This isn�t required though. If you don�t use one of the built-in theme modules you would need to supply your own CSS styles for any widgets that you use. By the way, the this theme module doesn�t actually contain any code, it has only a CSS file and some images. But by inheriting from this module the GWT compiler will make sure these files are included in the output. Last we specify the entry point class of the application. In this case the HelloWorld class.

23. I already talked about the JRE Emulation Library, but not so much about the classes available in it. It includes a bunch of stuff from java.lang, including System, StringBuffer, Iterable, Throwable, etc. From java.util we have Collection, Map, Set, List, and a couple implementations of each, like Vector, ArrayList, HashMap, etc. One notable exception is the Calendar class. It is not available. A bunch of classes and interfaces from java.lang.annotation are available, a few from java.io, and a few from java.sql. The classes from java.sql are only datatypes. You can�t call the database directly from GWT.I already talked about the JRE Emulation Library, but not so much about the classes available in it. It includes a bunch of stuff from java.lang, including System, StringBuffer, Iterable, Throwable, etc. From java.util we have Collection, Map, Set, List, and a couple implementations of each, like Vector, ArrayList, HashMap, etc. One notable exception is the Calendar class. It is not available. A bunch of classes and interfaces from java.lang.annotation are available, a few from java.io, and a few from java.sql. The classes from java.sql are only datatypes. You can�t call the database directly from GWT.

24. There are often times where you need to write to the machine. In the case of GWT the machine is the browser, and its language is JavaScript. One way is to have your Java code call JavaScript is to use the JavaScript Native Interface, JSNI. The way you use it is to declare your method as native, which requires that you don�t supply a method body. But then you do supply a method body, but inside of a comment block. Anything inside that comment block is handled as JavaScript. The comment block delimiter is slash-star-dash-curly. This specific example is another form of JavaScript bridging called an overlay type. This class extends JacaScriptObject, meaning that it can subclass an existing JavaScript object. What you should take away from this is that GWT can do anything that JavaScript can do� because you can embed JavaScript in your classes.There are often times where you need to write to the machine. In the case of GWT the machine is the browser, and its language is JavaScript. One way is to have your Java code call JavaScript is to use the JavaScript Native Interface, JSNI. The way you use it is to declare your method as native, which requires that you don�t supply a method body. But then you do supply a method body, but inside of a comment block. Anything inside that comment block is handled as JavaScript. The comment block delimiter is slash-star-dash-curly. This specific example is another form of JavaScript bridging called an overlay type. This class extends JacaScriptObject, meaning that it can subclass an existing JavaScript object. What you should take away from this is that GWT can do anything that JavaScript can do� because you can embed JavaScript in your classes.

25. There are lots of widgets and panels. A panel is a widget that can contain other widgets. That is the only distinction that makes the two different. In GWT we use panels for layout. We have a HorizontalPanel for displaying its widgets from side to side, a VerticalPanel for displaying top to bottom. There is also a Grid, FlexTable, BorderPanel, and AbsolutePanel for more complex layouts. Panels can be added to other panels, so layouts can become increasingly complex. There are specialized panels like the StackPanel, DisclosurePanel, and others that allow user interaction with the panel to show or hide the widgets in the panel. There are form widgets like FormPanel, Button, TextBox, and RichTextArea. There is a MenuBar, a TabPanel, a SuggestBox, and more. There is also the GWT Incubator project where new widgets are made available for use, many of which come from the community. Once the API for a widget in the Incubator is stable it may be added to the core GWT widget set. In GWT 1.6 DatePicker and LazyPanel have graduated and are now a part of GWT. There are lots of widgets and panels. A panel is a widget that can contain other widgets. That is the only distinction that makes the two different. In GWT we use panels for layout. We have a HorizontalPanel for displaying its widgets from side to side, a VerticalPanel for displaying top to bottom. There is also a Grid, FlexTable, BorderPanel, and AbsolutePanel for more complex layouts. Panels can be added to other panels, so layouts can become increasingly complex. There are specialized panels like the StackPanel, DisclosurePanel, and others that allow user interaction with the panel to show or hide the widgets in the panel. There are form widgets like FormPanel, Button, TextBox, and RichTextArea. There is a MenuBar, a TabPanel, a SuggestBox, and more. There is also the GWT Incubator project where new widgets are made available for use, many of which come from the community. Once the API for a widget in the Incubator is stable it may be added to the core GWT widget set. In GWT 1.6 DatePicker and LazyPanel have graduated and are now a part of GWT.

26. When you download GWT there will be a samples folder in the distribution. This includes several sample projects including the Showcase application shown here. The Showcase provides examples of most of the widgets that come with GWT, and shows off both the built-in color themes and internationalization. When you download GWT there will be a samples folder in the distribution. This includes several sample projects including the Showcase application shown here. The Showcase provides examples of most of the widgets that come with GWT, and shows off both the built-in color themes and internationalization.

27. One of the early complaints of Rich Internet Applications was that they broke the browse button. Meaning that the back and forward buttons in the browser no longer worked as you would expect them to work. Typically the back button would take you out of the application. There have been solutions available for awhile, but they are typically difficult to implement by hand. To make this easy to implement, GWT provides a mechanism to manage history. There are two parts to the mechanism. The first is a hidden iframe that you would need to add to your web page. The second is a History class that allows you to register HistoryListeners as well as manage the history. In the URL a fragment identifier is used to hold the history token, allowing for sections of your application to be bookmarked.One of the early complaints of Rich Internet Applications was that they broke the browse button. Meaning that the back and forward buttons in the browser no longer worked as you would expect them to work. Typically the back button would take you out of the application. There have been solutions available for awhile, but they are typically difficult to implement by hand. To make this easy to implement, GWT provides a mechanism to manage history. There are two parts to the mechanism. The first is a hidden iframe that you would need to add to your web page. The second is a History class that allows you to register HistoryListeners as well as manage the history. In the URL a fragment identifier is used to hold the history token, allowing for sections of your application to be bookmarked.

28. There are a ton of utilities available as well. There is an XMLParser and a DOM class for manipulating the HTML DOM without having to resort to using JSNI. An Animation class for simple animations, a benchmarking tool, JUnit subclasses, number formatting, cookie handling, and the list goes on.There are a ton of utilities available as well. There is an XMLParser and a DOM class for manipulating the HTML DOM without having to resort to using JSNI. An Animation class for simple animations, a benchmarking tool, JUnit subclasses, number formatting, cookie handling, and the list goes on.

29. There are three flavors of RPC in GWT. The first is the GWT-RPC mechanism. It allows you to call remote methods on a Java application server, passing Java objects back and fourth. It handles all of the serialization tasks for you, so it is the preferred method if you are running Java on the server-side. The second is RequestBuilder. It allows you to load text data from any file or application that you might be running on your server. You might want to use this if you are running PHP on the server, or want to call a web service that returns XML. Last is the FormPanel. This replicates the functionality of an HTML form, except that the resulting page isn�t displayed to the user. Instead it is stored in a hidden frame, and made available via the API. Typically you wouldn�t use FormPanel, but it can be a handy tool. Also included in GWT is JSON and XML support. This makes it a little easier to create and parse both JSON and XML messages. There is no built-in support for SOAP or XML-RPC. So if you need to interact with a SOAP server you will need to create and parse the message yourself. If you need to use XML-RPC you should do a search for it, there should be a couple implementations in the wild.There are three flavors of RPC in GWT. The first is the GWT-RPC mechanism. It allows you to call remote methods on a Java application server, passing Java objects back and fourth. It handles all of the serialization tasks for you, so it is the preferred method if you are running Java on the server-side. The second is RequestBuilder. It allows you to load text data from any file or application that you might be running on your server. You might want to use this if you are running PHP on the server, or want to call a web service that returns XML. Last is the FormPanel. This replicates the functionality of an HTML form, except that the resulting page isn�t displayed to the user. Instead it is stored in a hidden frame, and made available via the API. Typically you wouldn�t use FormPanel, but it can be a handy tool. Also included in GWT is JSON and XML support. This makes it a little easier to create and parse both JSON and XML messages. There is no built-in support for SOAP or XML-RPC. So if you need to interact with a SOAP server you will need to create and parse the message yourself. If you need to use XML-RPC you should do a search for it, there should be a couple implementations in the wild.

30. If you need to target multiple languages with GWT, there is support for this. It supports insertion of messages at compile time, resulting in a set of JavaScript files for each language. This is useful in keeping the JavaScript file size down, especially when you want to support a lot of languages or have a lot of messages. You can also insert language specific messages at run-time using other methods, but this is more of something you would build yourself. For example, you could use one of the RPC mechanisms to load an XML file with the messages in it. GWT has support for left-to-right languages. And GWT also includes number and date formatting tools, allowing you to format values for different locales. If you need to target multiple languages with GWT, there is support for this. It supports insertion of messages at compile time, resulting in a set of JavaScript files for each language. This is useful in keeping the JavaScript file size down, especially when you want to support a lot of languages or have a lot of messages. You can also insert language specific messages at run-time using other methods, but this is more of something you would build yourself. For example, you could use one of the RPC mechanisms to load an XML file with the messages in it. GWT has support for left-to-right languages. And GWT also includes number and date formatting tools, allowing you to format values for different locales.

31. Before I describe image bundles, let me first explain the problem. When your browser downloads a file it needs to negotiate a connection with the server, download the file, and close the connection. Everything other than downloading the file is the overhead of managing that connection. This overhead can be costly when you need to download a lot of files. For example if your application uses a dozen icons. Image bundles reduce this overhead by combining all of those images into a single image. So there is only one file to download instead of a dozen. In some testing that I did, this cut the download time to roughly 40% of the original. The graphic here shows the Firebug console, and you can see it reduces the dozen image downloads in the left, to one download on the right. I also included what the combined image looks like. When you create the Image object in GWT for display, GWT uses CSS clipping to show only that part of the image. So from the user�s point of view it looks like 12 separate images, but there is really only one image being displayed 12 times, each time with different parts of the image clipped.Before I describe image bundles, let me first explain the problem. When your browser downloads a file it needs to negotiate a connection with the server, download the file, and close the connection. Everything other than downloading the file is the overhead of managing that connection. This overhead can be costly when you need to download a lot of files. For example if your application uses a dozen icons. Image bundles reduce this overhead by combining all of those images into a single image. So there is only one file to download instead of a dozen. In some testing that I did, this cut the download time to roughly 40% of the original. The graphic here shows the Firebug console, and you can see it reduces the dozen image downloads in the left, to one download on the right. I also included what the combined image looks like. When you create the Image object in GWT for display, GWT uses CSS clipping to show only that part of the image. So from the user�s point of view it looks like 12 separate images, but there is really only one image being displayed 12 times, each time with different parts of the image clipped.

32. Deferred binding is one of the most important parts of GWT. It allows you to provide different implementations of an abstract class of interface for different browsers. Here is an example of the DOM class, a utility class in GWT. In the module XML file for the package where the DOM class lives, there are some rules for the compiler. The first rule says, when the class is of type DOMImpl, and the browser is IE6, then use DOMImpl6. But if the browser is Gecko, then use DOMImplMozilla. Inside the DOM class is this line of code. It calls GWT.create(), passing DOMImpl.class. If you dig into the GWT code you will realize that GWT.create() doesn�t really do anything. It is really just a trigger to allow the compiler to return a class based on the rules in the module configuration file. So if the browser is IE the DOMImplIE6 class will be returned, and if it is a browser using the Gecko engine the DOMImplMozilla class will be returned. Again, going back to what I mentioned before, the compiler will create a separate JavaScript file for each browser. The way this works is that the compiler will look in all of the module XML files that are a part of the project, create a list of all of the possible values for �useragent�, then the compiler will compile a separate version of the project for each value of �useragent�. A linker will then create a bootstrap JavaScript file that performs the browser detection for loading the correct JavaScript file.Deferred binding is one of the most important parts of GWT. It allows you to provide different implementations of an abstract class of interface for different browsers. Here is an example of the DOM class, a utility class in GWT. In the module XML file for the package where the DOM class lives, there are some rules for the compiler. The first rule says, when the class is of type DOMImpl, and the browser is IE6, then use DOMImpl6. But if the browser is Gecko, then use DOMImplMozilla. Inside the DOM class is this line of code. It calls GWT.create(), passing DOMImpl.class. If you dig into the GWT code you will realize that GWT.create() doesn�t really do anything. It is really just a trigger to allow the compiler to return a class based on the rules in the module configuration file. So if the browser is IE the DOMImplIE6 class will be returned, and if it is a browser using the Gecko engine the DOMImplMozilla class will be returned. Again, going back to what I mentioned before, the compiler will create a separate JavaScript file for each browser. The way this works is that the compiler will look in all of the module XML files that are a part of the project, create a list of all of the possible values for �useragent�, then the compiler will compile a separate version of the project for each value of �useragent�. A linker will then create a bootstrap JavaScript file that performs the browser detection for loading the correct JavaScript file.

33. I already mentioned that the compiler removes any code that you don�t access. That means that reflection is simply not available. This causes a problem in some cases. For instance when you pass Java objects between the client and server the Java objects need to be serialized. Without reflection there can be no serialization. As a solution GWT provides compile-time code generation. The way it works is that you create a class that extends Generator, and you implement the generator() method. Within that method you literally generate Java code and return the class name that you created. Among other things you can use a TypeOracle to investigate the structure of other classes. It is basically reflection on Java source code. The generated class is compiled along with the rest of the Java source code into JavaScript. I already mentioned that the compiler removes any code that you don�t access. That means that reflection is simply not available. This causes a problem in some cases. For instance when you pass Java objects between the client and server the Java objects need to be serialized. Without reflection there can be no serialization. As a solution GWT provides compile-time code generation. The way it works is that you create a class that extends Generator, and you implement the generator() method. Within that method you literally generate Java code and return the class name that you created. Among other things you can use a TypeOracle to investigate the structure of other classes. It is basically reflection on Java source code. The generated class is compiled along with the rest of the Java source code into JavaScript.

34. But building the generator is the first part. A generator is triggered by adding a generate-with element to the module configuration. This is another example of deferred binding. So when you use GWT.create(), where the class argument is a RemoteService, a generator is triggered. In this case the generator will inspect your service interface, and create a concrete implementation that will allow you to call remote methods on the server.But building the generator is the first part. A generator is triggered by adding a generate-with element to the module configuration. This is another example of deferred binding. So when you use GWT.create(), where the class argument is a RemoteService, a generator is triggered. In this case the generator will inspect your service interface, and create a concrete implementation that will allow you to call remote methods on the server.

35. Once the compiler is done with its job, the linker steps in. The linker creates the bootstrap code, and packages the compiled files. There are 3 linkers that come with GWT, the standard linker, the cross-site linker, and a single script linker. By default the standard linker is executed, which loads the application into an Iframe. This provides some security advantages, but won�t work if the JavaScript files live on a different server than the web page that is including those files. In that case most browsers will not execute the JavaScript code for security reasons. For those occasions you would use the cross-site linker, which does not use an Iframe, and packages the code slightly differently. You can specify that you want this linker to be used by adding the add-linker element to your module configuration. Of course, if you have specific needs not met by either linker, you could write your own, for example if you wanted to package the project for deployment to a mobile device running Android.Once the compiler is done with its job, the linker steps in. The linker creates the bootstrap code, and packages the compiled files. There are 3 linkers that come with GWT, the standard linker, the cross-site linker, and a single script linker. By default the standard linker is executed, which loads the application into an Iframe. This provides some security advantages, but won�t work if the JavaScript files live on a different server than the web page that is including those files. In that case most browsers will not execute the JavaScript code for security reasons. For those occasions you would use the cross-site linker, which does not use an Iframe, and packages the code slightly differently. You can specify that you want this linker to be used by adding the add-linker element to your module configuration. Of course, if you have specific needs not met by either linker, you could write your own, for example if you wanted to package the project for deployment to a mobile device running Android.

36. Live Demo When things will likely go wrong Live Demo!Live Demo!

37. GWT 2.0 and Beyond The future of GWT GWT 2.0 and Beyond.GWT 2.0 and Beyond.

38. The GWT team has been churning out a major release about once a year since version 1.4, so I would expect the same for GWT 2.0. The first new feature is the out-of-process-hosted-mode, or OOPHM. Currently you are tied to the hosted-mode browser for debugging. In GWT 2.0 you will be able to use any major browser. If you want to live on the bleeding edge, this code is already available, but not currently stable enough for release. I know a few developers that are already using it with great success. The second major feature is code splitting. For extremely large GWT applications, with tens of thousands of lines of code, there have been complaints about the size of the application and the time it takes the application to start. And by complaints I mean that it takes 3 seconds to start the application instead of 1 second. Code splitting should ease this by allowing you to split out portions of your code that don�t need to be loaded right away, and can be deferred until they are needed. Beyond that you should expect the same from all new versions of GWT. And that is better performance, an expanded widget set, and more tools. The GWT team has been churning out a major release about once a year since version 1.4, so I would expect the same for GWT 2.0. The first new feature is the out-of-process-hosted-mode, or OOPHM. Currently you are tied to the hosted-mode browser for debugging. In GWT 2.0 you will be able to use any major browser. If you want to live on the bleeding edge, this code is already available, but not currently stable enough for release. I know a few developers that are already using it with great success. The second major feature is code splitting. For extremely large GWT applications, with tens of thousands of lines of code, there have been complaints about the size of the application and the time it takes the application to start. And by complaints I mean that it takes 3 seconds to start the application instead of 1 second. Code splitting should ease this by allowing you to split out portions of your code that don�t need to be loaded right away, and can be deferred until they are needed. Beyond that you should expect the same from all new versions of GWT. And that is better performance, an expanded widget set, and more tools.

39. The End The End.The End.