Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Google Web Toolkit Steve Wargolet Abstract With the advanced web applications of today such as Gmail, Twitter, and Facebook, it has become harder to create your own web application which lives up to today’s standards. Google Web Toolkit (GWT) is able to make this possible for an average Java developer. GWT is an open source web development toolkit used for creating complex dynamic browser-based applications. It allows the developer to code primarily using Java which is then translated into HTML, JavaScript, and AJAX. This means more developers can create web applications even if they lack knowledge in common web development tools and languages. GWT also offers an easy to use designer to help build the client portion of the application which means the developer will not need to learn CSS yet can still develop a fully functional and good-looking application. Introduction In the past, when there were only static webpages, if you wanted a client-server type application, it would have to be desktop-based and not web-based as the technology had not yet evolved enough. This meant that not only would the client portion have to be downloaded onto each machine, but anytime there was an update to the client, it would have to be re-downloaded by all users. Soon we were able to progress past the static-only webpages onto web applications which remedied this problem. “A web application is an application utilizing web and [web] browser technologies to accomplish one or more tasks over a network, typically through a [web] browser.”[1] With the introduction of more advanced interactive web applications from companies such as Google, Yahoo, and MSN, it has become harder to develop a web application which will live up to today’s standards. Many modern web applications have the feel of desktop applications but they are difficult to develop if you don’t have extensive knowledge in AJAX, HTML, CSS, JavaScript, or any of the other common languages/tools used to create a web application. This is where Google Web Toolkit becomes extremely useful. What is Google Web Toolkit? GWT is a powerful web application development toolkit which allows developers to create rich web applications using primarily Java. One of GWT’s main features is its ability to maintain Page |2 compatibility between multiple browsers. After you write your code in Java, GWT will convert it into equivalent standard-compliant JavaScript and HTML for each browser. GWT provides all the common User Interface widgets which a web developer might use and there are many addons for GWT which can be downloaded that introduce other widgets if needed. You can even combine widgets and panels to make a more complex widget such as two lists which support drag and drop, and then you can use this new widget between across areas of your application just like it is one of the default GWT widgets. I was able to accomplish a similar task with a GWT application I wrote. I extended the GWT list box to support more advanced features such as tooltips, multiple selections, and in-place editing. Without GWT, it would have taken quite a bit of research and coding effort to figure out how this could be done with JavaScript. GWT Designer GWT Designer is a powerful and intuitive tool which integrates directly into GWT to allow you to create a GUI for your application without spending a lot of time and effort creating and laying out the webpage. If you have worked on a webpage before you know how time consuming it can be to lay out elements on a webpage and make sure they work across multiple browsers and scale correctly when the browser is resized. GWT designer handles all these issues without much extra work from the developer. It has a very user friendly layout which can be seen in Figure 1 below. Figure 1: User Interface View for GWT Designer [2] Page |3 The designer offers a ‘Component Tree’ (1) which shows the hierarchical relationship between all of the components in your current GUI design. A ‘Property Pane’ (2) which displays all the available properties of your selected component. A ‘Palette’ (3) provides the user with quick access to components, both default, add-ons, and custom. The ‘Design View’ (4) shows the current design for your GUI. You can easily drag components from the ‘Palette’ and drop them into the design view and the Designer will generate all the necessary code automatically. Any needed events can be added by right clicking on a component and choosing one of many events. If you would like to modify the GUI code yourself for whatever reason, you can switch to the ‘Source View’ using the tabs at the bottom (5). Once you would like to test your design to see how it looks and behaves, you can click the ‘Preview’ button (6). This will bring up a preview of your current GUI design without having to go through the lengthy compilation process in which you can test the layout and resizing of your application, although it may not behave the same as when you compile it due to information that may be loaded from the server. Widgets and Panels GWT Designer contains all the default widgets and panels that are a part of GWT. You can easily add any of these widgets to a container by using drag-and-drop, similar to what Microsoft Visual Studio offers. You can also easily add event handlers and change properties of the widget. Panels There are many different panels available to you in GWT which each accomplish a different layout. There are more than 15 different panels available to use, each with its own strengths and weaknesses. The easiest panel to work with is the Absolute Panel which, just as its name suggests, places components on the panel absolutely. This means that wherever you place a component, it will stay there. This panel could work for small areas of your web application but should not be used for the whole application as it does not resize with the browser; so if you make the browser window smaller, it is likely that some of the components will go out of view. There are also Horizontal and Vertical Panels. These two panels are also very easy to use and will place components vertically or horizontally which makes it very easy to make columns or rows. The problem with these panels is that they use tables to align the components. This makes implementation of things such as scaling easier but makes readability extremely difficult when looking through the generated HTML, especially when there are embedded vertical or horizontal panels. Since these panels use standard table elements such as <td> and <tr>, GWT provides the same properties as tables such as padding and spacing. GWT also offers a horizontal and vertical panel which in which the columns and rows can be adjusted by dragging the edges, which are called Split Panels. Two other panels that use tables to provide a layout for the panel are Grid and Flex Table. Grid lays out components on the panel in a rectangular grid. The container is divided up into multiple equal-sized rectangles and one component can go into each rectangle. Flex Table follows the Page |4 same template as grid by splitting up the container into equal-sized rectangles, but Flex Table allows the components to span multiple rectangles. If you are used to using ‘divs’ and then styling your web application with CSS, GWT offers the Flow Panel which arranges components in sequential order, wrapping at the edge of the window. So if a component will go off the screen it will put the component onto the next line. You are then able to give the flow panel styling just like you would a div. The styling is applied directly into the design window which also makes styling a lot easier. Due to how the flow panel arranges components, GWT included a feature which shows where the component will be dropped as can be seen in Figure 2. Figure 2: Flow Panel; adding an element There are many other more specific panels which can be used such as the Dock Panel which lays out components in a North/South/East/West, Center fashion which is great for web applications that use a header, footer, or side bar. GWT also offers a Tab Panel as a default panel, which is extremely useful as writing your own tabs using JavaScript can become difficult. If you need a nice looking popup which does not interfere with other components, then you can use a Popup Panel. If you need a nice sidebar panel to show and hide components based on the header you click, then a Stack Panel works great. Google introduced all these panels to make your GUI development experience as painless as possible. With conventional web pages setting up the page with CSS can be very tedious; with GWT designer you can setup the layout of your web application in just a few hours. Widgets Widgets are components of a user interface in which the user can see information or interact. GWT provides many useful widgets which makes your web application have the same feel as a desktop application. The more basic widgets are text box, button, check box, radio button, and text area, but GWT also provides many more complex widgets that could be used in any Web Application. There is a Password Text Box which visually masks user input to prevent others from seeing. A Date Picker, which brings up a small calendar and allows the user to easily switch between months and pick an individual date. One very useful widget is the Suggest Box, in which displays a pre-configured set of items that closely match the users input. Suggest Page |5 Boxes are extremely common in modern web applications such as search engines, but are complex to implement manually. All of these provided widgets make development of your web application quite a bit easier as a simple drag and drop will generate much of the necessary code for you for that widget. These widgets also make your web application feel more desktop-like. Project Structure The structure of the code for your web application is important as it keeps your application organized and tells GWT where to look for certain aspects of your program. GWT can create the structure for you automatically if you start with their default application, otherwise you can create it yourself. All your production Java code goes under a src directory which is then divided into three more directories; client, shared, and server. The client directory contains code that runs on the user’s browser, the shared directory contains code that both the client and server can access, and the server directory contains code that runs only server-side. You can further divide your program into more directories if needed. For testing, you may create a test directory in which your JUnit tests will go into. Once you compile your application, a ‘war’ directory will be created and all your output code will be put into there. Within this directory you can find all your HTML, CSS, JavaScript, and jar files. An .xml file will also be generated which contains the module definitions for your project. It specifies the source, inheritance of basic GWT functionality and any other modules, and the entry-point for your application. The ‘Right’ Design Pattern When designing your User Interface it is very important to apply the correct design pattern to create a well-layered implementation. When Smalltalk was introduced in the 80s, the ModelView-Controller (MVC) pattern was used. The Model contains all the business logic such as servlets or anything which runs server-side. The Controller handles the communication between the client and server and can reside either client-side or server-side depending on the framework. The View is the client-side portion of the program which is what runs on the user’s browser. Figure 3 (left side) shows how the Model, View, and Controller relate to each other. This pattern causes some issues with GWT development though, for a couple reasons. The communication about changes between the Model and the View is complicated due to the server/client separation and testing is more difficult due to the view having to send queries to the model. A better pattern for GWT is the Model-View-Presenter pattern. The model and view perform the same role but now only the only way to have communication between the View and Model is through the Presenter. Figure 3 (right side) shows how the Model, View, and Presenter relate to each other. Page |6 In the Model-View-Presenter pattern, the view has no logic at all and only displays widgets and sends events to the Presenter. Any validation (such as making sure a zip code is five digits long) will be done in the Presenter. The Presenter is the main difference between MVP and MVC patterns. It essentially acts as a bridge between the Model and the View. When the user does something in the view that triggers an event, the Presenter will communicate with the model and then update the view depending on how the model changes. Figure 3: Shows relations in MVC (left) and relations in MVP (right) [3] Remote Procedure Calls Remote Procedure Calls (RPC) handle the communication between the server and client over HTTP. This allows the developer to pretty much treat the server and client as being on the same machine. One major difference with RPCs that many developers aren’t used to is that they are asynchronous. This means that a caller can initiate a process and other processes can continue even if a response has not been received. This is very different than what we are used to, since usually you can make a call and right away return some data and use it. This means that the user is able to continue accessing your web application although some things may not be loaded. To handle this, it is best to implement some client side code which temporarily disables the application until the data has been received from the server. There are three components needed when defining the RPC interface, an interface for the service which extends RemoteService and lists all the RPC methods (This looks similar to a C++ header file). Next a class which extends RemoteServiceServlet is needed. This class implements the interface which was created above. Finally an asynchronous interface which is based on the original service interface needs to be defined which will be called from the client-side code. This means that if you need to write a new function to return data to the client, then you will Page |7 need to write code not only in your server and client side files, but also the three service files. This takes quite a bit of extra work that most Java developers are not used to. Serialization “Serialization is the process of packaging the contents of an object so that it can (be) moved from one application to another application or stored for later used.”[2] When an object is transferred over the network with GWT RPC, it needs to be serialized. For an object to be serialized, every parameter and return type must be serializable. For a type to be serializable it must satisfy at least one of the following requirements. It is a primitive type (int, char, boolean, etc.) and the wrapper object is serializable by default. It is an array of serializable types A class is serializable if it meets these three requirements: o It implements either Java Serializable or GWT’s ‘IsSerializable’ interface, either directly, or because it derives from a superclass that does. o It’s non-final, non-transient instance fields are themselves serializable, and o It has a default (zero argument) constructor with any access modifier (e.g. private Foo(){} will work) [2] Browser History One main problem that GWT encounters is handling when the user uses the ‘Back’ button. GWT web applications use Ajax to create the page and modify individual elements on the page instead of refreshing the whole page. This makes events update faster but due to the lack of a URL changing, if the user hits back then he will be taken back to the previous page which he was on before going to the GWT web application. Fortunately GWT developed a way to handle this: a History class. The History class manages all the Back and Forward events while being completely transparent to the user. Whenever the user accesses a different part of the web application the URL will change slightly. For instance if your base URL is www.mywebapp.com/myapp, and the user accesses a registration form the URL would change to www.mywebapp.com/myapp#registration in which registration; the string after the hash mark; is a token used to identify that specific module of your web application. Compiler Page |8 One of the most advanced features of GWT is its Java-to-JavaScript compiler. It converts your Java code into equivalent JavaScript which can be run on all supported browsers. The compiler is extremely important because it does several code optimizing tasks when it runs, which often times creates better code than what can be hand written by experienced programmers. One feature of the compiler is the ability to choose one of the three output styles: Obfuscated, Pretty, or Detailed. Obfuscating the code will make the code essentially unreadable both for security purposes and to reduce the size of the JavaScript which needs to be downloaded. It does this by removing all unnecessary white spaces and making all variable names as short as possible. This allows the JavaScript code, which is client-side code, to be sent to the client faster. Pretty creates output which is readable to a human, and Detailed expands upon Pretty with more detail such as more verbose variable names. Optimizations Some of the more significant optimizations that GWT does are Dead Code Elimination, Constant Folding, Copy Propagation, String Interning, and Code In-lining. Dead Code Elimination: Eliminates code from the output that is never called. This means, if you write five functions and only call three of them, then the compiler will ignore the other two unused functions. One benefit of this is that you can write stub functions for later use and you don’t have to worry about it being generated into excess JavaScript code. It will even remove whole classes if the class is not used. Constant Folding: If a value of an expression can be figured out at compile time, then the compiler will calculate the result and will use the value directly instead of the expression. If you write code to bring up an alert window to say ‘Hello World’ using concatenation such as Window.alert(“Hello ” + “World”), the compiler will do the concatenation at compile time and produce the following JavaScript code, $wnd.alert(“Hello World”). [3] Copy Propagation: If a variable is calculated during compile time using Constant Folding and that variable is used later on to calculate another variable, then that second variable will be calculated at compile time also and substitute the value directly. For instance, if constant folding figured out that x = 20 and later on you have y = x + 10, then ‘y’ will be substituted with 30. String Interning: Saves memory and increases performance by replacing multiple references of string literals with global references. Code In-Lining: If a called method is relatively short, it will replace the method call with the actual method. These are just five of the many optimizations the GWT does to try and speed up your JavaScript code. Since GWT does many optimizations which rely on looking at the application as a whole, the compiler must compile the whole application every time to properly optimize. This can be Page |9 frustrating as the compilation process can become quite long depending on the size of your application. I have had compilations take upwards of one and a half minutes, which can quickly add up if you are testing a lot of small changes. Debugging and Testing Your Application An important part of the GWT development lifecycle is creating a good set of unit test cases. With GWT you can use the JUnit testing framework to test your application as they have integrated it well into GWT. GWT has created a special JUnit test case called GWTTestCase which acts similar to a normal JUnit test but will launch an instance of GWTs browser which emulates your application during test execution. If you need to debug your program, you can use the same formal methods that have been used in the past such as using breakpoints. If you are using eclipse as your IDE then when you set a breakpoint and debug the program, the perspective will be changed to a debug mode, allowing you to step through and step over just like a normal Java application. This means you can debug your program as if the web application was a normal application, although it doesn’t seem to work very well across the RPC calls. There is also a window to allow you to check variables and their current value to verify it is correct. When correcting a bug, GWT offers a mode called ‘Hosted Mode’ which allows you to make a change and refresh the browser to view the fix. This cuts out a long compilation process. Deploying Your GWT Application When deploying your GWT web application, a few more steps can be taken to try to speed up the application even more. Large amounts of JavaScript will be generated with large applications, all of which is usually downloaded when the user visits your page. This can cause significant slowdowns in the application. GWT tries to remedy this by introducing Code Splitting. This allows you to download only what is needed and then get other parts as needed. This isn’t something GWT does automatically, so this means that some code needs to be written to handle what code should be downloaded and when. All that is needed is a small bit of code shown in Figure 4. P a g e | 10 Figure 4: Code Splitting Example [2] Now instead of having a call to Window.alert, there is a call to GWT.runAsync which downloads the necessary code when the button click even happens. These runAsync calls can be very useful for events such as tab clicks or switching between pages as there is a lot more code which is downloaded than a simple Window.alert. In the end this will speed up the application overall as the user will only need to download what is needed. References [1] Remick, J. (2011, January 30). What is a web app? Here’s our definition. Retrieved from http://web.appstrom.net/general/opinion/what-is-a-web-app-heres-our-definition/ [2] Google. (2011) Google Web Toolkit. Retrieved from http://code.google.com/webtoolkit/ [3] Kereki, K.F. (2011). Essential GWT building for the web with Google Web Toolkit 2.0 Boston, MA : Perason Education, Inc. [4] Gupta, I. (2009). Accelerated GWT, building enterprise Google Web Toolkit applications. Berkeley, CA : Apress. [5] Chaganti, R (2007). Google Web Toolkit: GWT Java Ajax programming. Birmingham, UK : Packt Pub. Ltd.