GWT/GAE: A example of GWT, Evolution with GWT Designer (PART2)

In a previous article, I have related the prerequisites, the configuration of a GAE account, the creation of a new Eclispe project with the type “Web Application Project” and the deployment of an application on the GWT embedded server named Jetty. In this article, we will discuss about the evolution of the interface with GWT Designer.

Here the points of these articles:

1. Prerequisites,
2. Configuration GAE account,
3. New Eclispe project with the type “Web Application Project”,
4. Deployment on GWT embedded server named Jetty,
5. Evolution of the interface with GWT Designer,
6. Deployment on a Jboss server,
7. Deployment on a Tomcat server,
8. Deployment on GAE cloud,
9. Creation of a new version n°2 of our application on GAE,
10. Internationalization of the application,

5. Evolution of the interface with GWT Designer
   Now, we will evolve the interface with GWT Designer and create a simple human–machine interface (HMI) with Rich interface (see the Google documentation).
   So, to open a “Entry Point” that has not been created by the tool or that is currently edited by a different editor (such as the standard Java Editor), simply right-click on the “Entry Point” file and select the menu “Open With > GWT Designer”.

   

   …then, the “Entry Point” will be opened in “Source” or “Design” views:
   

   So, we go on with the following steps:

   • Click on the “HorizontalPanel” icon in the Palette view and click again on the Design View,
   • In the “Components” view, drag and drop the components named “sendButton” and “nameField” in to the panel “horizontalPanel” in order obtain the following result:
     
   • …then, add a new horizontal panel:
     
   • …we will add a menubar in the newly added panel:
     
   • …adding of one submenu “File” and two menuitem “Edit” and “Help” in the above menubar like:
     
   • …in the submenu “File”, add a menuitem “Open” and a submenu “Other” containing a other menuitem “Test”:
     
   • …in the horizontal panel containing the “namedField” and “sendButton”, add a label with the text “Please enter your name:”:
     
   • …modify the properties of above horizontal panel containing the label, “namedField” and “sendButton”: set the verticalAlignment to “ALIGN_MIDDLE”, set the spacing to “20”:
     
   • …add a “VerticalPanel” in the “rootpanel” and add all existing panels inside it:
     

   Then, we add a callback to the menu-item “Test” on the click event with the following steps:

   • In the Designer view, double-click on the menu-item “Test”, and the plugin will open the “Source” view to write the source code of callback in a method execute():

     //...
     	/**
     	 * This is the entry point method.
     	 */
     	public void onModuleLoad() {
     //...		
     				
     		MenuItem mntmTest = new MenuItem("Test", false, new Command() {
     			public void execute() {
     									
     				// ... source code of callback					
     										
     			}
     		});
     //...
     }
     

   • …we will declare a global DialogBox:

     public class Huojavagwttest3 implements EntryPoint {
     	//...
     
     	private DialogBox dlg = new DialogBox();
     	
     	
     	
     	/**
     	 * This is the entry point method.
     	 */
     	public void onModuleLoad() {
     		//...
     	}
     }
     

   • …and we will use this DialogBox in the previous callback:

     MenuItem mntmTest = new MenuItem("Test", false, new Command() {
     	public void execute() {			
     		dlg.setText("Warning, Click done on the menu 121");
     										
     		HorizontalPanel hPanel = new HorizontalPanel();
     		hPanel.setSpacing(20);
     		hPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
     		hPanel.setHorizontalAlignment(HorizontalPanel.ALIGN_LEFT);
     		//
     		Label label = new Label();
     		label.setText("Why did you clicked on item 121?");
     		// Boutton "Close"
     		Button closeButton = new Button("Close"); // Ajout du Bouton Close en bas a droite 
     		closeButton.addClickHandler(new ClickHandler() { 
     			public void onClick(ClickEvent event) { 
     				dlg.hide();
     			} 
     		}); 
     	
     		hPanel.add(label);
     		hPanel.add(closeButton);
     		dlg.setWidget(hPanel);
     		dlg.show();										}
     });
     

   At last, we will deploy it on GWT embedded server named Jetty. To deploy an application in HOSTED mode (DEVELOPMENT mode) on the server JETTY embedded in GWT framework see the post GWT/GAE: Deployment an application on GWT embedded server named Jetty in Hosted mode.

   Importante note:
   If you encounter the following error during the displaying of application’s interface in the Jetty console:
   [ERROR] [huojavagwttest3] Warning: com.google.gwt.user.client.ui.RootPanel descendants will be incorrectly positioned, i.e. not relative to their parent element, when ‘position:static’, which is the CSS default, is in effect. One possible fix is to call ‘panel.getElement().getStyle().setPosition(Position.RELATIVE)’. java.lang.IllegalStateException: com.google.gwt.user.client.ui.RootPanel is missing CSS ‘position:{relative,absolute,fixed}’ at com.google.gwt.user.client.ui.AbsolutePanel.verifyPositionNotStatic(AbsolutePanel.java:288) at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:118) at com.ho.gwt.test3.module31.client.Huojavagwttest3.onModuleLoad(Huojavagwttest3.java:55)
   
   …then, add the following codes in the method “onModuleLoad()” in the entry point source file “Huojavagwttest3.java”:

   RootPanel rootPanel = RootPanel.get("nameFieldContainer");
   ...
   rootPanel.getElement().getStyle().setPosition(Position.RELATIVE);
   verticalPanel.getElement().getStyle().setPosition(Position.RELATIVE);
   

   … and check if the following exist in the code, else add it:

   // Add a handler to send the name to the server
   MyHandler handler = new MyHandler();
   sendButton.addClickHandler(handler);
   nameField.addKeyUpHandler(handler);
   

   Once, our project deployed on Jetty, we will have the following interface by opening the url http://127.0.0.1:8888/Huojavagwttest3.html?gwt.codesvr=127.0.0.1:9997:
   

   …then, fill in the field with a value (for example, I filled in my first name “Huseyin”), which will be send from client to server and the server replies “Hello, Huseyin!”:
   
   

   …click on the menu-item “Test”:
   

   Finally, we will remove the labels “Web Application Starter Project” and “Please enter your name:”
   
   …which don’t exist in the entry point source, but they are in the source code of the HTML page “Huojavagwttest3.html”, index of the application:
   
   …then, if we deploy again the application on GWT embedded server named Jetty, we will obtain:
   

In this article, we have done evolved the interface with GWT Designer and the deployment of an application on the GWT embedded server named Jetty. In next articles, we will discuss about the deployment of an application on a Jboss server, on a Tomcat server, on GAE cloud, on application versioning on GAE, on the Internationalization of the application…etc.

Source: huojavagwttest3.zip

Notes: This file huojavagwttest3.zip contains the final version of the tutorial (from PART1 to PART4), but, it is necessary to add the librairies appengine-api-1.0-sdk-1.6.1.jar, appengine-api-labs-1.6.1.jar, appengine-jsr107cache-1.6.1.jar, datanucleus-appengine-1.0.10.final.jar, datanucleus-core-1.1.5.jar, datanucleus-jpa-1.1.5.jar, geronimo-jpa_3.0_spec-1.1.1.jar, geronimo-jta_1.1_spec-1.1.1.jar, google_sql.jar, gwt-servlet.jar, jdo2-api-2.3-eb.jar and jsr107cache-1.1.jar.

Best regards,

Huseyin OZVEREN