Eduzine© - Ajax

DWT - Take off and Problems Galore

eduzine@edujinionline.com (Eduzine) — Thu, 04 Sep 2008 15:28:12 -0700

The DWT project commenced about a fortnight back and soon hit some roadblocks.

Firstly, the Ajax communication to the server in Google Web Toolkit is asynchronous and as such retrieving the templates in template based widgets was an issue. For which the team wrote a quick-fix to query the server synchronously. A function getText was added to com.edujinilabs.dwt.client.dojo.Dojo class (see the code here).

Ok... that was an easy go. But then, we had the real fun!

Template-based Widgets rely on dynamically created properties (JavaScript is, after all, dynamically typed language). However, the first problem is that Java is statically typed; secondly, GWT changes the field/function names upon recompilation, and finally - Java does not support function references.

A detailed problem description and proposed solution has been put up on the DWT Blog.

Have you got some suggestions or inputs? Do write in...

Creating Custom Widget in Dojo - Part 1

eduzine@edujinionline.com (Eduzine) — Thu, 12 Jun 2008 00:00:00 -0700

Did you know that the Edujini Gang is working on Dojo for more than a year now! Surprising right? Since there has been not a single entry on Dojo until the recent the recent announcement of the Project DWT (Dojo on Google Web Toolkit).

Introduction

Dojo Toolkit offers a simple yet powerful architecture to be able to create custom widgets. In Part 1 of the series of articles, we look at how to create a custom widget - probably with minimal styling and functionality.

Downloads

Yo! Buddy. The downloads are available in the downloads area.

What you should know...

Well, you should be very comfortable with the following:

JavaScript - By the way, did you know that JavaScript is Object Oriented? No? Ok... Will provide some articles soon.
Defining custom objects (I will not use the term class) in JavaScript using Dojo Toolkit. If not, you can have a peek in at Dojo Documentation.

Getting Started

Well, the first thing that you will need it Dojo Toolkit itself. You can download it from Dojo Downloads. And then, just a simple vanilla text editor - Notepad, TextPad, EditPlus, Notepad++ - just anything.

Widget Definition

Let us create a simple widget that will just say "Hello, World!" (hard-coded) to start with, and subsequently, the content will be customizable.

Widget Implementation

I assume that the Dojo Toolkit library (downloaded earlier) has been extracted in the folder /home/edujini/eduzine/dojo. Let us create another folder /home/edujini/eduzine/dojo/edujini. I will not discuss, here in this article, on how to specify a custom location for custom definitions in Dojo. That is out of scope of this article.

Within this sub-folder, create a file CustomWidget.js with the following contents:

/**
  Part of the Eduzine (http://eduzine.edujini-labs.com) Articles.
 
  Downloads available at http://downloads.edujini-labs.com
 
  (C) 2008, Edujini Labs Pvt Ltd
  http://www.edujini-labs.com
 /

dojo.provide('edujini.CustomWidget');
dojo.require('dijit._Widget');

dojo.declare("edujini.CustomWidget", dijit._Widget,
{
  postCreate : function()
  {
    this.domNode.innerHTML = 'Hello, World!';
  }
});

One of the more important functions of the object dijit._Widget is postCreate. We override the method to provide our implementation and that is to simply set the innerHTML of the container to the text Hello, World!.

Using Custom Widget

Ok... now that we have got the widget, we do not know how and if it works. So, let's just write a simple test page (HTML) to use it. Create a file /home/edujini/eduzine/custom-widget-test.html with the following contents.

<html>
  <head>
    <title>Edujini Custom Widget Test</title>

    <script type="text/javascript" language='javascript' src="dojo/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
    <script type='text/javascript' language='javascript'>
      dojo.require('dijit.form.Button');
      dojo.require('edujini.CustomWidget');
    </script>
  </head>
  <body>
  <!--
    /**
      Part of the Eduzine (http://eduzine.edujini-labs.com) Articles.
     
      Downloads available at http://downloads.edujini-labs.com
     
      (C) 2008, Edujini Labs Pvt Ltd
      http://www.edujini-labs.com
     /
  -->
    <div id='w1' dojoType='edujini.CustomWidget'></div>
  </body>
</html>

With this, the response that we expect is something as given below (I've highlighted the output using the red-ellipse. You'll not get it):

Customizing the Widget

The next step is to customize the Hello, World! with a user defined content. Let's say that the default value of the content to be displayed is Hello, World!. To this effect, update the CustomWidget.js as follows (changes highlighted in bold):

dojo.declare("edujini.CustomWidget", dijit._Widget,
{
  text: 'Hello, World!',

  postCreate : function()
  {
    this.domNode.innerHTML = this.text;
  }
});

Simultaneously, we update the custom-widget-test.html file to as follows:

  <body>
    <div id='w1' text='Hello, Edujini World!' dojoType='edujini.CustomWidget'></div>
  </body>

And that's it! Look at the HTML file in the browser...

Summary

In this article, we learnt:

To create a custom widget using Dojo Toolkit.
To create a property that can be used subsequently in the widget.
Had a brief venture into the method postCreate - one of the key methods. It it called after all entries from the HTML have been read and parsed. We shall look into the details of this method later on when we explore the lifecycle of Dojo Widgets.

Dojo on Google Web Toolkit

eduzine@edujinionline.com (Eduzine) — Wed, 11 Jun 2008 11:15:00 -0700

This is the updated version of the announcement - the License has been changed to New BSD

To take the development experience with Dojo Toolkit on to the next level using Google Web Toolkit, Edujini Labs plans to port Dojo Toolkit for GWT.

The project would soon be hosted at SourceForge under both ~~GPL v2/3~~ New BSD and commercial license. We have sought for the project name "DWT" (applied under APT process, and may take 2-3 weeks for complete takeover).

The project would be led by Gaurav Vaish, initially supported by core team comprising of

Abdul Prodhani
Hair S Nair
Shake Sajan

To get started, a quick proof-of-concept demo has been created. It's not a very clean implementation - just a get started stuff.

The video for the demo is available can be downloaded here.

You can support this project by spreading the word, to start with . Just "Digg It".
Some people have reported problems with Digging the articles on Eduzine... if that's the case with you, "Digg This" - http://blogs.edujini-labs.com/2008/05/30/dwt/

Google Web Toolkit says, "Hello, World!" - Part 2

eduzine@edujinionline.com (Eduzine) — Tue, 27 May 2008 15:31:49 -0700

Introduction

In the second article in the series - Google Web Toolkit says, "Hello, World!" - we learn how to do the same stuff in, probably, a more structured manner: use Eclipse IDE to write the code, compile and launch. So that we don't have to switch across the Java editor, command prompt and the browser.

And the code - available at downloads in the GWT category.

Getting Started

The software required are:

Java SDK from Sun Java Website
Eclipse IDE from Eclipse website. If you are confused what to download, get the Eclipse IDE for Java EE developers directly from here.
Google Web Toolkit from Google Code Website
Apache Tomcat from Apache Website
Cypal Studio here

Step 1: Creating Web Application

First step is to create a "Dynamic Web Project" in Eclipse.

Choose Web -> Dynamic Web Project.

Select appropriate Web Server Runtime - the "Target Runtime". [If the only entry that you get is <none>, create a "New..." one. Point it to the Apache Tomcat folder.] From the "Configurations", select "Cypal Studio GWT Project".

Finally, provide a meaningful "Context Root", or leave it as it.

Open the "Project Explorer" view. You should see similar to as shown below.

Step 2: Adding a Module

Our web application is now ready. What we now need is to add the "HelloWorld" module as what we did through the applicationCreator.cmd utility earlier. However, this time we will use the GUI.

We need to add a new "GWT Module" to our application. Follow these steps:

Add a new item:
Add a new Module:
Give the name of the package as com.edujinilabs.tutorials.gwt.hw (note that there is no 'client' as we had earlier), and the name of the class as HelloWorld.

The module has been added. The following artifacts would have been generated:

Module definition file: com/edujinilabs/tutorials/gwt/hw/HelloWorld.gwt.xml
HTML file: com/edujinilabs/tutorials/gwt/hw/public/HelloWorld.html
Implementation Code: com/edujinilabs/tutorials/gwt/hw/client/HelloWorld.java
Empty package com.edujinilabs.tutorials.gwt.hw.server

Step 3: Hello World Implementation

We, now, have the skeleton to push in our code. What we shall do is have a simple Button on the click of which we shall show a simple alert. Update the class HelloWorld to the following code:

package com.edujinilabs.tutorials.gwt.hw.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class HelloWorld implements EntryPoint
{
    public void onModuleLoad()
    {
        Button helloBtn = new Button();
        helloBtn.setText("Say Hello");

        helloBtn.addClickListener(new ClickListener() {
            public void onClick(Widget sender)
            {
                Window.alert("Hello, World!");
            }
        });

        RootPanel.get().add(helloBtn);
    }
}

Step 4: Launching the Application

We need to configure two things to launch and run the application. First, create a new "Run" configuration. Go to Run -> Run..., and follow these steps:

Add a new configuration:
Provide a meaningful name to the configuration. Choose the project (if not already chosen) and the module.
Select the "Parameters" tab and configure the memory to be provided on the heap:

Click, optionally Apply and then, Run.

Voila! We again the got the Google Web Toolkit Development Shell! Great, isn't it - noting that we did not touch anything outside Eclipse IDE this time.

What next? Click on the button and "Say Hello".

Summary

We can use the Cypal Studio plug-in for Eclipse to ease our life working with GWT. Well, of course, the power lies with GWT.

Google Web Toolkit says, "Hello, World!" - Part 1

eduzine@edujinionline.com (Eduzine) — Mon, 26 May 2008 15:34:00 -0700

Introduction

Google Web Toolkit (from Google, at Google Code) is a fantastic framework with a very interesting concept - write in Java run in JavaScript! This article demonstrates how to get started with Google Web Toolkit.

The first part of the article demonstrates how to use the default tools provided in GWT to write the "Hello World" application. The second in the series will demonstrate how to use Cypal Studio Plug-in for Eclipse to make your life easy when it comes to creating, compiling and running GWT applications.

As usual, the code is available in the Downloads section. Direct link to the Google Web Toolkit category is here.

What you need to know

You will need to know Java, at the least because, as I mentioned earlier, majority of the code is written in Java. And please, no generics.

Step 1: Getting Started

Well, the first step is to download Java SDK, if you already don't have one. And then, you will need GWT.

Here's the list, bulleted:

Java SDK from Sun Java Website
Google Web Toolkit from Google Code Website

I don't think there should be any trouble to download and install.

Step 2: Looking at GWT

Browse to the folder where you extracted Google Web Toolkit. The folder structure should be similar to shown below.

Step 3: Creating GWT Application

The very first step that you will do with GWT, after all installation, is to create a GWT Application.

If you look at the files, you will notice a file applicationCreator.cmd. You guessed it right, that's our starting point.

At the command prompt, go the folder and issue the following command:

applicationCreator.cmd -out gwt-hello-world com.edujinilabs.tutorials.gwt.hw.clent.HelloWorld

You will notice a set of files created for you.

Step 4: Launching Application in 'Hosted' Mode

Descend into the folder gwt-hello-world. You will notice two files - HelloWorld-compile.cmd and HelloWorld-shell.cmd

Launch HelloWorld-shell.cmd. You will notice two windows opened - one titled "Google Web Toolkit Development Shell / Port 8888" and the other titled "Wrapper HTML for HelloWorld".

In the second window, click the button that reads "Click me". Voila! It says, "Hello World!".

Where's the code?

If you go into the folder gwt-hello-world/src/com/edujinilabs/tutorials/gwt/hw/client, you will notice HelloWorld.java. Yes, that's where the original code is.

Where's the JavaScript?

Ok! I agree. Browsers do not, yet, natively run Java code. So, where's the JavaScript? It's hidden right now. Let's generate. On the command prompt, issue the following command (in the same folder as where you issued HelloWorld-shell.cmd:

HelloWorld-compile.cmd

Descend into the folder www/com.edujinilabs.tutorials.gwt.hw.HelloWorld. You will notice two files - HelloWorld.html and com.edujinilabs.tutorials.gwt.hw.HelloWorld.nocache.js. Now, that's where the code is.

Conclusion

Well, without getting into even a single line of code, we have been able to say, "Hello World!" using Google Web Toolkit. We have been able to get a peek into where the original Java code resides, and where do we get the compiled / generated JavaScript and HTML content.

We shall explore Google Web Toolkit in greater depth in next articles. Keep watching the category Google Web Toolkit / GWT