Eduzine© - Dojo

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 2: Templated Widgets

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

Introduction

In the Part 1 of the series, we learnt how to get started with creating custom UI widgets using Dojo Toolkit. In Part 2, learn to separate the UI from the business logic. Technically, we learn how to use templates to design the UI using simple HTML while keeping the functionality as separate JavaScript code.

Downloads

The downloads, as ever, are available in the downloads area.

Templated Widgets

Dijit sub-framework in Dojo Toolkit provides a support for templated widgets through the object dijit._Templated. Well, we do not inherit this but use as a mixin and choose dijit._Widget as the parent object.

Widget Definition

For our purpose of demonstration, we create a simple anchor widget. Yes, it's the <a href='...'>...</a> thing!

The widget supports the following properties:

href: The hyperlink to point to.
text: The text to be displayed to the end user.
target: The target window for the anchor (Optional).
title: Title for the anchor element (Optional).

Widget Implementation

Assuming that you have the folder layout as in the previous article (see here for reference), create a file /home/edujini/eduzine/dojo/edujini/Anchor.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.Anchor");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare("edujini.Anchor", [dijit._Widget, dijit._Templated],
{
  text: '',
  href: '',
  target: '',
  title: '',

  templateString  : null,
  templatePath    : dojo.moduleUrl('edujini', 'templates/Anchor.html'),
});

Notice the following things in the component definition:

The parent object is not a single entry dijit._Wiget but an array comprising of dijit._Widget and dijit._Templated.

It contains two properties - templateString and templatePath.

The intepretatin of the items in the array is as follows:

The first entry indicates the parent object - in this case, dijit._Widget.

The subsequent entries - in this case, only, dijit._Templated - indicate the objects from where the properties have to be "borrowed" or "overridden". For example, if both dijit._Widget and dijit._Templated have the method buildRendering, the final definition that will survive is that of dijit._Templated.

Template Definition

How that we have initial definition (components) of the edujini.Anchor widget ready, let's go ahead and design the layout. Create a file /home/edujini/eduzine/dojo/edujini/templates/Anchor.html with the following contents:

<span class='edujiniAnchor' dojoAttachPoint='domNode' ><a href='${href}' dojoAttachPoint='anchorNode'>${text}</a></span>

Ensure that there is not trailing newline after </span>

The interpretation of the layout is as follows:

The complete definition is encapsulated in a span which comprises of the anchor element.

The href attribute of the anchor element has the value as that of the property href of the object edujini.Anchor (Syntax ${href}).

The content within the anchor element has the value as that of the property text of the edujini.Anchor object.

Note that we have still not made use of target and title properties. We need to have logic for it!

Test Case

Let's create a file /home/edujini/eduzine/dojo/test-templated-widget.html with the following content:

<html>
  <head>
    <title>Edujini Tempalted Widget Test Case</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.Anchor');
    </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='a1' text='Hello, Edujini World!' href='http://www.edujini-labs.com' dojoType='edujini.Anchor'></div>
  </body>

</html>

Launch the HTML file in the browser... expected UI is:

Finishing Touches

The only functionality that remains is adding target and/or title, if provided. For that, we override the method postCreate in edujini.Anchor. The updated definition of the object is:

dojo.declare("edujini.Anchor", [dijit._Widget, dijit._Templated],
{
  text: '',
  href: '',
  target: '',
  title: '',

  templateString  : null,
  templatePath    : dojo.moduleUrl('edujini', 'templates/Anchor.html'),

  postCreate: function()
  {
    if(this.target)
    {
      this.anchorNode.setAttribute('target', this.target);
    }

    if(this.title)
    {
      this.anchorNode.setAttribute('title', this.title);
    }
  }
});

Let's also update the test case:

<div id='a1' text='Hello, Edujini World!'
  target='_edujini'
  title='Edujini Labs Home Page'
  href='http://www.edujini-labs.com'
  dojoType='edujini.Anchor'></div>

The expected UI is (after updates) is:

Summary

In this article, we learnt the following:

Create widgets with separated implementation for the layout (JavaScript) and the logic (HTML) - the "templated widgets".
Declare properties in the widget definition (JavaScript) and use them in the template (HTML) - syntax being ${property-name}.
How to set the attributes of the elements (well, that was plain vanilla W3C XML DOM API implementation in JavaScript), conditionally.

Next Steps...

Well, from this side... the next steps would be fulfill the earlier promise of an article on JavaScript - demonstrating the OOPS implementation in JavaScript.

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/