Gwt-Ext Hello World

From GWT-Ext

Jump to: navigation, search

Contents

Hello World

Create a new GWT-Ext project and name your package under the src folder as com.gwt_ext.mypackage.

HTML code

Let us first create the HTML page which will hold the content of your first GWT-Ext page. The HTML markup in this page is quite minimal as all of our content is generated dynamically in javascript. The ExtJS CSS and javascript libraries need to be included however and we will be designing the page as an XHTML strict page with the appropriate markup.

Create the HelloWorld.html file under com.gwt_ext.mypackage.public. Insert the following code into the HTML file: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <meta http-equiv="Content-Type" 
            content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Language" content="en-us" />
      <meta http-equiv="Content-Author" content="Sankar Gorthi" />
      <title>Hello World</title>
      <!-- Begin ExtJS library files -->
      <link rel="stylesheet" type="text/css" 
         href="js/ext/resources/css/ext-all.css"/>
      <script type="text/javascript"
         src="js/ext/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" 
         src="js/ext/ext-all.js"></script>
      <!-- End ExtJS library files -->
      <!-- The GWT js file generated at run time -->
      <script type="text/javascript" 
         src='com.gwt_ext.mypackage.HelloWorld.nocache.js'></script>
   </head>
 
   <body>
      <div id="main"></div>
   </body>
 
</html>

The div with id 'main' will hold the content of our page.

Java Code

Next, add the following code to the HelloWorld.java file located under com.gwt_ext.mypackage.client: 

package com.gwt_ext.mypackage.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Panel;
 
/**
 * @author Sankar
 * 
 */
public class HelloWorld implements EntryPoint {
 
   public void onModuleLoad() {
      Panel mainPanel = new Panel() {
         {
            setTitle("Hello World!");
            setHeight(300);
            setWidth(500);
            setFrame(true);
            setHtml("<p>This is my first GWT-Ext webpage and "
               + "it was a breeze to design!</p>");
            setStyle("margin: 10px 0px 0px 10px;");
         }
      };
 
      RootPanel.get().add(mainPanel);
   }
}

This application is now ready for execution.

The GWT Development Shell and the hosted browser will launch and your page will contain the Hello World panel with the text specified.

Exploring the Hello World Example

-- TODO.

Adding functionality

Now that we've added the panel, let's make it render to the empty div specified in the HTML markup.

We need to first retrieve the Element from the DOM of the rendered page. This is done using the GWT-Ext library's Ext core class. We call the Ext.get(String id) function and pass it the ID of the div we need to retrieve.

Next, we apply the Panel created to the Element retrieved. The code for this is shown below: 

package com.gwt_ext.mypackage.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.core.Ext;
import com.gwtext.client.core.ExtElement;
import com.gwtext.client.widgets.Panel;
 
/**
 * @author Sankar
 * 
 */
public class HelloWorld implements EntryPoint {
 
   public void onModuleLoad() {
      ExtElement main = Ext.get("main");
 
      Panel mainPanel = new Panel() {
         {
            setTitle("Hello World!");
            setHeight(300);
            setWidth(500);
            setFrame(true);
            setHtml("<p>This is my first GWT-Ext webpage and "
               + "it was a breeze to design!</p>");
            setStyle("margin: 10px 0px 0px 10px;");
         }
      };
 
      if (main != null) {
         mainPanel.setApplyTo(main.getDOM());
         mainPanel.render("");
      } else {
         RootPanel.get().add(mainPanel);
      }
   }
}

We first check if the main ExtElement was retrieved from the DOM. If it was, we apply the panel to that div's Element. Else, we simply add the panel created to the RootPanel.

That was easy wasn't it?

Retrieved from "http://gwt-ext.com/wiki/index.php/Gwt-Ext_Hello_World"
Personal tools