Eduzine©

DWT - Take off and Problems Galore

eduzine@edujinionline.com (Eduzine) — 2008-09-04T15:28:12Z

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...

Standard Widget Toolkit: Part 1 - Hello, World!

eduzine@edujinionline.com (Eduzine) — 2008-06-25T15:58:16Z

Introduction

With this article, we start a series on Standard Widget Toolkit (SWT) and Eclipse Plug-in Framework at Eduzine^©. It is assumed that you have already heard about Eclipse and you are gungho about exploring it and may be getting into all its details.

SWT is the base UI toolkit to create the UI, mainly the native widgets. Then there is JFace, an abstraction that sits on top of JFace (a large part of it) and adds power to native widgets. And finally, there is Eclipse Plug-in Framework that helps creating applications in a modular fashion. Default implementation of the Eclipse Workbench (the main UI cockpit) uses SWT and JFace for its UI.

Following the tradition started few decades back, we start with "Hello, World!" application.

Downloads

The downloads are available in the Downloads area in the Eclise Standard Widget Toolkit category.

Pre-requisites

To get started, the following pre-requisites would be considered:

You know Java programming langauge.
You have JDK (not only JRE) installed on your machine (from http://java.sun.com).
You have Eclipse installed on your machine (from http://www.eclipse.org).

Case Study

We will create our final application in multiple steps. Here's the brief overview of these steps:

Step 1: Create a window that contains a text that reads "Hello, World!".
Step 2: Create a window that has a button on click of which we get launch other window with a text that reads, "Hello, World!".

And the "top level window" with a "Title Bar", "Minimize", "Maximize" and "Close" buttons - the one that interacts with the Desktop or "Window Manager" - is known as Shell in SWT.

Getting Started - Creating Project

We start by creating a project using Eclipse IDE. Follow these steps to create and configure a simple Java application project.

Step 1: In the "New Project" wizard, select "Java Project". Click Next.

Step 2: Give the name of the project - "HelloWorldSWT". Click Next.

Step 3: Go to the "Libraries" Tab. Click "Add External Jars..." button.

Step 4: Browse to the "plugins" folder within the folder where Eclipse is installed. Add references to org.eclipse.swt_<version>.jar and org.eclipse.swt.win32.win32.x86_<version>.jar. Click Finish.

Entry Point

Now that we have the project, let us create a class HelloWorldClass that will act as the entry point (through the main method) for our application.

Implementation: Step 1

Let's get started with the implementation. The first thing that we will ever need to create the UI is an instance of org.eclipse.swt.widgets.Display. The top-level window, as discussed earlier, is an instance of org.eclipse.swt.widgets.Shell.

Update the code for HelloWorldClass to as follows:

package com.edujinilabs.eduzine.eclipse.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
  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
 */
public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.open();
  }
}

Right click on the file and select "Run As..." -> "SWT Application".

While launching, keep a close eye on the monitor. What do you see?

Ouch! The new windows seems to be launched but also lost somewhere.

Well, if that's the case... you are on absolutely correct track!

The reason for this behaviour is that the open method is a non-blocking call meaning that it opens up the window and returns immediately. And in our code, nobody stops the controls to get transferred past-end of the main causing the application to terminate.

So, the next step is to add the code that does the following:

Waits indefinitely, only to be terminated if we click the close [X] button on the title-bar of the main window.
Does not use CPU cycles if no activity is to be performed.
Respond to events, if there is any activity and again go for indefinite wait.
On closing the main window, it frees up the resources used, especially OS resources like Font, Color, Pen/Brush etc.

The loop that does the first-three steps mentioned above is known as event loop.

Update the main method to the following code:

public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.open();

    while(!mainWindow.isDisposed())
    {
      if(!display.readAndDispatch())
      {
        display.sleep();
      }
    }
    display.dispose();
  }
}

Launch the application again. Not posting the screenshot since it's a huge window.

The next step is to add a text on the window that reads "Hello, World!". We make use of the Widget named Label.

The constructors of all basic widgets require the information about the parent container in which they will be placed - the containers referred to as Composite widgets. The second parameter to the constructor is a number (integer) representing the styles. We will explore the styles soon. So, what are we waiting for? Let's update the code... And ah! We shall resize the window to a smaller size.

public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    Label hwLabel = new Label(mainWindow, SWT.NONE);
    hwLabel.setText("Hello, World!");

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.setSize(300, 200);
    mainWindow.open();

    while(!mainWindow.isDisposed())
    {
      if(!display.readAndDispatch())
      {
        display.sleep();
      }
    }
    display.dispose();
  }
}

Things look much better now except only that we are yet, unable to see the Label.

Layout Manager

All Composite widgets use a layout manager - technically a subclass of org.eclipse.swt.layout.GridLayout - to layout the child widgets within themselves.

For our purpose, we make use of org.eclipse.swt.layout.GridLayout. We explore it later on. Update the code to as follows:

    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    mainWindow.setLayout(layout);

    Label hwLabel = new Label(mainWindow, SWT.NONE);
    hwLabel.setText("Hello, World!");

Launch the application! Voila! Got the "Hello, World!". The expected output is as below:

Implementation - Step 2

Now that we've got a simple but working application, let's move on to the next step, making it interactive. We replace the Label with a org.eclipse.swt.widgets.Button and popup a new window that reads, "Hello, World!"

Firstly, we replace Label with Button. Update the code to as follows:

package com.edujinilabs.eduzine.eclipse.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

public class HelloWorldClass
{
  public static void main(String[] args)
  {
    Display display = new Display();
    Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    mainWindow.setLayout(layout);

    Button hwBtn = new Button(mainWindow, SWT.NONE);
    hwBtn.setText("Say Hello");

    mainWindow.setText("Eduzine: SWT Hello World");
    mainWindow.setSize(300, 200);
    mainWindow.open();

    while(!mainWindow.isDisposed())
    {
      if(!display.readAndDispatch())
      {
        display.sleep();
      }
    }
    display.dispose();
  }
}

Subsequently, we create a class HelloWorldWindow with similar UI as created earlier. However, this time, the new class will have a new method open that will actually launch the UI. The definition of the class is as follows:

package com.edujinilabs.eduzine.eclipse.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

public class HelloWorldWindow
{
  private Shell window;

  public HelloWorldWindow(Shell parent)
  {
    this.window = new Shell(parent, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    window.setLayout(layout);

    Label hwBtn = new Label(window, SWT.NONE);
    hwBtn.setText("Hello, World!");

    window.setText("Eduzine: Child");
    window.setSize(200, 100);
  }

  public void open()
  {
    this.window.open();
  }
}

Now, the only missing link is to launch this window on the click of the button! What are we waiting for then? Let's do it! Update HelloWorldClass to as follows:

  public static void main(String[] args)
  {
    Display display = new Display();
    final Shell mainWindow = new Shell(display, SWT.DIALOG_TRIM);

    GridLayout layout = new GridLayout();
    mainWindow.setLayout(layout);

    Button hwBtn = new Button(mainWindow, SWT.NONE);
    hwBtn.setText("Say Hello");

    hwBtn.addSelectionListener(new SelectionAdapter() {
      public void widgetSelected(SelectionEvent e)
      {
        HelloWorldWindow w = new HelloWorldWindow(mainWindow);
        w.open();
      }
    });
    
    ...
  }

On launch, the output expected is follows (Hey! Don't forget to click the button).

Summary

In this article, we learnt how to get started with Standard Widget Toolkit, the UI Toolkit created for initially for Eclipse and now used by millions of developers worldwide!

In subsequent articles, we explore about SWT and Eclipse, and environment around them.

Exploring OOPS - JavaScript Style: Part 3 - Polymorphism

eduzine@edujinionline.com (Eduzine) — 2008-06-18T00:34:10Z

Introduction

In the third and last article of the series of "Exploring OOPS - JavaScript Style", we look at polymorphism in JavaScript.

Polymorphism literally means "multiple forms". In OOAD, it means that an object reference can take different behave differently depending upon the scenario.

Technically, there are two types of polymorphism - compile-time polymorphism and runtime polymorphism. One of the ways to implement compile-time polymorphism is method overloading while runtime polymorphism can be implemented by method overriding.

Downloads

The downloads are available in the Downloads area.

Compile-time Polymorphism

All functions in JavaScript are overloaded by default. Surprised, isn't it? Let's take a simple code below for analysis:

<html>
  <head>
    <title>OOPS in JavaScript - Polymorphism</code>
    <script language='javascript' type='text/javascript'>
      /**
        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
       /

      function addMethod(x, y)
      {
        document.writeln('x: ' + x + ', y: ' + y);
      }
    </script>
  </head>
  <body>
  <pre><script language='javascript' type='text/javascript'>
      addMethod();
      addMethod(1);
      addMethod(1, 2);
      addMethod(1, 2, 3);
      addMethod(1, 2, 3, 4);
    </script>
  </pre>
  </body>
</html>

For the time being, do not worry about the actual results. What is more important is that invocation of these methods do not result in any error whatsoever! And that's because all methods in JavaScript are, by default, overloaded. And did somebody say - that's compile-time polymorphism?

What we provide in the parameter-list to a JavaScript function is just names to those parameters so that it is convenient to access them. All parameters passed to a function are available through an automatically-created local-variable arguments. Let's redefine the same method to access all parameters passed to it, convert each into number and return the their sum (if they are not NaN).

<html>
  <head>
    <title>OOPS in JavaScript - Polymorphism</code>
    <script language='javascript' type='text/javascript'>
      /**
        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
       /

      function addMethod(x, y)
      {
        var rv = 0;
        var length = arguments.length;
        var n;

        for(var i = 0; i < length; i++)
        {
          n = Number(arguments[i]);
          if(!isNaN(n))
          {
            rv += n;
          }
        }
        return rv;
      }
    </script>
  </head>
  <body>
  <pre><script language='javascript' type='text/javascript'>
      document.writeln(addMethod());
      document.writeln(addMethod(1));
      document.writeln(addMethod(1, 2));
      document.writeln(addMethod(1, 2, 3));
      document.writeln(addMethod(1, 2, 3, 4));
    </script>
  </pre>
  </body>
</html>

arguments if of the type Arguments. Apart from other properties, one critical thing to which it provides access to is all the parameters passed to the function while invoking it.

Though it may sound unusual for those who are used to working with languages like C, C++, Java, C# etc but probably they can relate this to varargs. And the same mechanism is available for instance methods (for custom types) as well.

Runtime Polymorphism

Method overriding? Haven't we already discussed this in the previous article while discussing about inheritance?

Summary

In this article we learnt about polymorphism in JavaScript.

Exploring OOPS - JavaScript Style: Part 2 - Inheritance

eduzine@edujinionline.com (Eduzine) — 2008-06-17T21:33:51Z

Introduction

In the second article of the series of "Exploring OOPS - JavaScript Style", we look at how inheritance is implemented in JavaScript.

Inheritance can be described as reusability by virtue of heritage. An inherited data-type automatically obtains the functionality defined in the data-types from which it inherits.

JavaScript supports single inheritance, i.e., you can inherit from maximum one type. Also, it does not support the concept of interface introduced in languages like Java, C# to support multiple inheritance.

In JavaScript what we have is instance-inheritance (or runtime inheritance) rather than class-inheritance (or compile-time inheritance) making inheritance more powerful than probably any other language around (barring the ones like Smalltalk)!

Downloads

The downloads are available in the Downloads area.

Getting Started

In Part 1, we defined UserProfile with username and password. In this article, we create EmployeeProfile that inherits from UserProfile and adds employeeID. It also reimplements (override, if you like to use that word) authenticate method.

`EmployeeProfile` Definition

We start with defining EmployeeProfile with employeeID besides earlier properties. Create a file EmployeeProfile.js with the following code:

/**
  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
 /

function EmployeeProfile(username, password, employeeID)
{
  this.username = username;
  this.password = password;
  this.employeeID = employeeID;
}

The next step is to mark it inherited from UserProfile. For this, we need to work with the property prototype that is always available to us whenever we declare a function. (Note that all functions can be used as constructor.) Add the following additional code at the end of the code above:

EmployeeProfile.prototype = new UserProfile();

Note the following:

The inerhitance is defined not through the data-type UserProfile but through its instance.

The instance of UserProfile has been created without passing any parameters to the method.

Testing the Definition

So, it's time to test the definition so far... Let's create EmployeeProfile.html with the following content:

<html>
  <head>
    <title>OOPS in JavaScript - Inheritance</code>
    <script language='javascript' type='text/javascript' src='UserProfile.js'></script>
    <script language='javascript' type='text/javascript' src='EmployeeProfile.js'></script>
    <script language='javascript' type='text/javascript'>
      /**
        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
       /
      function validateUser()
      {
        var eid = document.getElementById('i').value;
        var uname = document.getElementById('u').value;
        var pwd = document.getElementById('p').value;

        var e = document.getElementById('result');

        var ep = new EmployeeProfile(uname, pwd, eid);
        e.innerHTML = 'Username: ' + ep.username
          + '<br/>Password: ' + ep.password
          + '<br/>EmployeeID: ' + ep.employeeID
          + '<br/>Authenticate: ' + ep.authenticate();
      }
    </script>
  </head>
  <body>
  Employee ID: <input type='text' name='i' id='i' />
  <br/>
  Username: <input type='text' name='u' id='u' />
  <br/>
  Password: <input type='password' name='p' id='p' />
  <br/>

  <button onclick='validateUser(); return false;'>Login</button>

  <div id='result'></div>

  </body>
</html>

I think the code is self explanatory. What we get is not only the three properties but also automatic definition of authenticate method for EmployeeProfile. After all, that's that inheritance is all about. In the definition of EmployeeProfile, we never mention about it but it is automatically available to it through its parent object UserProfile.

`instanceof` Operator

We'll explore method overriding and other complex (unexplored, not mentioned so far) things in a while. We take a short while to look at instanceof operator.

It is a binary operator. The left operand is the object-reference and the right operand is the function-definition (data-type reference). The operator returns a boolean value indicating whether the object is an instance of the corresponding type or not.

if(ep instanceof UserProfile)
{
  alert('ep is an instance of type UserProfile');
} else
{
  alert('ep is NOT an instance of type UserProfile');
}

You can add this code to the method validateUser. In our case, it must return true. Similarly, obj instanceof Object for any non-null value for obj will return true.

Method Reference and Optimization

And a very crutial item before we get back on to our main agenda.

Depending upon how we write the code, the methods may be loaded in memory multiple times. Which is bad for the appliation. We do not want identical piece of code to be loaded in memory multiple times. The code must be loaded only once and be executed in the context of the corresponding object. What am I talking? Update the code for the method validateUser to as follows:

function validateUser()
{
  var eid = document.getElementById('i').value;
  var uname = document.getElementById('u').value;
  var pwd = document.getElementById('p').value;

  var ep1 = new EmployeeProfile(uname, pwd, eid);
  var ep2 = new EmployeeProfile(uname, pwd, eid);

  alert('Are references same? ' + (ep1.authenticate == ep2.authenticate));
}

You are bound to get a false! It hurts.

Everytime we instantiate EmployeeProfile (or even UserProfile for that matter), code for the method authenticate is loaded into memory. Imagine if we have 1000 instances. Not only the properties are loaded into memory 1000 times, but also the code for the method. It's just too bad.

Let's fix this up...

Update the code for UserProfile to as follows:

function UserProfile(username, password)
{
  this.username = username;
  this.password = password;
}

UserProfile.prototype.authenticate = function()
{
  if(this.username == 'gvaish' && this.password == 'edujini')
  {
    return true;
  }
  return false;
}

Notice the use of prototype property once again. That holds the key! That's probably - The Key property in JavaScript.

Now, execute the test case once again. ep1.authenticate == ep1.authenticate must return true in this case! Detailed discussion around prototype is out of the scope of this article... but will have one some time soon.

Method Overriding

Next, we explore how to override the method authenticate. Update the definition of EmployeeProfile to as given below:

function EmployeeProfile(username, password, employeeID)
{
  this.username = username;
  this.password = password;
  this.employeeID = employeeID;
}

EmployeeProfile.prototype = new UserProfile();

EmployeeProfile.prototype.authenticate = function()
{
  if(this.employeeID == 123 && this.username == 'gvaish'
                  && this.password == 'edujini')
  {
    return true;
  }
  return false;
}

Go ahead and authenticate with various compbinations of the employeeID, username and password. Hurray! The method has been overridden (using the line of hierarchy of the object prototype).

The last thing that we see in method overriding is how to invoke the base-type method in the sub-type method. Well, the solution again lies in prototype!

Let us define the business logic for an employee's authentication as follows:

It checks for the authentication results from UserProfile. If it has failed, the result is failure.
It additionally checks for employeeID.

This way we keep EmployeeProfile independent of how the UserProfile authenticates itself. Modify EmployeeProfile to as follows:

function EmployeeProfile(username, password, employeeID)
{
  this.username = username;
  this.password = password;
  this.employeeID = employeeID;
}

EmployeeProfile.prototype = new UserProfile();

EmployeeProfile.prototype._authenticate = EmployeeProfile.prototype.authenticate;

EmployeeProfile.prototype.authenticate = function()
{
  if(this._authenticate())
  {
    return this.employeeID == 123;
  }
  return false;
}

Note that this is one of the various possible ways of achieving our target. We create a reference _authenticate to the original authenticate method (but did we get it from EmployeeProfile since we defined it in UserProfile - that's the magic of prototype in JavaScript).

Rerun your test case... Wow! We get what we expect...

Summary

In this article we learnt how encapsulation is implemented in JavaScript. To summarize, we explored the following:

Inheritance in JavaScript.
Use of prototype property to mark inheritance.
Defining new methods in the inherited type.
Override existing methods, optionally also calling the original method.
instanceof operator to check the underlying data-type inheritance hierarchy.

Exploring OOPS - JavaScript Style: Part 1 - Encapsulation

eduzine@edujinionline.com (Eduzine) — 2008-06-16T21:53:49Z

Introduction

As promised in one of the earlier articles, we discuss about how the various pillars of OOPS are implemented in JavaScript.

Obect Oriented Programming - as defined by Grady Booch - stands on three pillars:

Encapsulation
Inheritance
Polymorphism

Here, we explore how all three - Yes! All Three Pillars of OOPS - are implemented in JavaScript.

Downloads

The downloads are available in the Downloads area.

Getting Started

To get started, it is assumed that you are already familiar with basic JavaScript. If not you can look on the web for some tutorials on JavaScript 101 tutorials or the like. To be specific, the following fundamentals are assume:

Declaring variables - var keyword.
Basic data types supported - Object, Array, Boolean, Number, String and Function.
Writing functions - well, you got to be really very strong in functions!

4-Sutras while working with JavaScript

While working with JavaScript, always keep in mind the following, as Gaurav Vaish calls them, "4-Sutras":

All data-types are infinitely flexible.
All objects (references; instances) are infinitely extensible.
Objects are associative arrays.
It's all about functions.

"In JavaScript, whenever you run into any problem related to implementation or structuring of the code, these four sutras will help you out", says Gaurav.

Encapsulation

Encapsulation - in simplest terms - can be defined as putting the related items together. Structures in C is a way to implement encapsulation. Classes in C++, Java, C# etc is another way to implement encapsulation.

Let us see how encapsulation is implemented in JavaScript.

Welcome, Functions!

Gaurav's 4^th Sutra comes into action here - "It's all about functions".

Let us define a data-type UserProfile that encapsulates the following three items:

username: Property to hold the username of the user.
password: Property to hold the password of the user.
authenticate: Method to authenticate the user. Returns true if successful, false otherwise.

Let us implement the UserProfile with a constructor that takes the two properties as parameters and initializes itself. Create a file UserProfile.js (strictly speaking, the filename doesn't really matter) with the following code.

/**
  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
 /

function UserProfile(username, password)
{
  this.username = username;
  this.password = password;

  this.authenticate = function()
  {
    if(this.username == 'gvaish' && this.password == 'edujini')
    {
      return true;
    }
    return false;
  }
}

Notice the use of this keyword. Does it remind you of someting? Yes! You got it right... function is the way to implement the concept of class, or to speak - encapsulation.

Test Case

Ok... so, how do we use this new data-type that we just defined? Let's create a HTML file that will serve as the playground for our case-studies around the UserProfile. Create a file UserProfile.html (again, filename is not important at all) with the following content:

 1 <html>
 2   <head>
 3     <title>OOPS in JavaScript- Encapsulation</code>
 4     <script language='javascript' type='text/javascript' src='UserProfile.js'></script>
 5     <script language='javascript' type='text/javascript'>
 6       /**
 7         Part of the Eduzine (http://eduzine.edujini-labs.com) Articles.
 8        
 9         Downloads available at http://downloads.edujini-labs.com
10        
11         (C) 2008, Edujini Labs Pvt Ltd
12         http://www.edujini-labs.com
13        /
14       function validateUser()
15       {
16         var uname = document.getElementById('u').value;
17         var pwd = document.getElementById('p').value;
18
19         var e = document.getElementById('result');
20
21         var u = new UserProfile(uname, pwd);
22         var result = u.authenticate();
23         e.innerHTML = 'Result: ' + result;
24       }
25     </script>
26   </head>
27   <body>
28
29   Username: <input type='text' name='u' id='u' />
30   <br/>
31   Password: <input type='password' name='p' id='p' />
32   <br/>
33
34   <button onclick='validateUser(); return false;'>Login</button>
35
36   <div id='result'></div>
37
38   </body>
30 </html>

Analysis

Let's just analyze the code that we just wrote.

We have designed a simple form comprising of inputs for username and password, and a button to trigger validation.

The function validateUser defined at line 14-24 triggers the validation by extracting the values of username and password (lines 16-17).

At line 21, UserProfile is instantiated. Notice a very important thing - the function definition has been used as the constructor. Yes! That's where functions are so important in JavaScript. The functions in JavaScript are higher order functions (similar to that in Smalltalk), that can be used to retain the state.

At line 22, we invoke the method authenticate that returns a value true or false depending upon what we enter in the form.

So, go ahead and try out with different combinations of username and password, and checkout the results!

Summary

In this article we learnt how encapsulation is implemented in JavaScript. To summarize, we explored the following:

Encapsulation in JavaScript.
Use of this keyword within the type definition.
Defining properties and methods in JavaScript.

Creating Custom Widget in Dojo - Part 2: Templated Widgets

eduzine@edujinionline.com (Eduzine) — 2008-06-14T00:00:00Z

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) — 2008-06-12T00:00:00Z

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) — 2008-06-11T11:15:00Z

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/

Flex Data Driven Controls - Part 2

eduzine@edujinionline.com (Eduzine) — 2008-06-10T10:19:00Z

Introduction

In Part 2 of the series of articles on "Flex Data Driven Controls", we learn about how to provide custom rendering to a data bound control. And we choose List.

In the previous article, Part 1 of the series, we got ourselves started with data driven controls - ComboBox and DataGrid. In this article, we will lean to cutomize the how the items are finally presented to the end user.

The source code for this article is available in the Downloads area.

Getting Started

We reuse the previous definition of UserProfile. For completeness, the definition below is re-represented below:

package com.edujinilabs.eduzine.tutorials.flex.core
{
  /**
    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
   */
  public class UserProfile
  {
    private var _employeeID : int;
    private var _employeeName: String;
    private var _departmentName: String;

    public function UserProfile(eid: int = 0, name: String = null, deptName: String = null)
    {
      this._employeeID = eid;
      this._employeeName = name;
      this._departmentName = deptName;
    }

    public function get employeeID(): int
    {
      return _employeeID;
    }

    public function set employeeID(eid: int) : void
    {
      this._employeeID = eid;
    }

    public function get employeeName(): String
    {
      return _employeeName;
    }

    public function set employeeName(name: String) : void
    {
      this._employeeName = name;
    }

    public function get departmentName(): String
    {
      return _departmentName;
    }

    public function set departmentName(name: String) : void
    {
      this._departmentName = name;
    }
  }
}

As far the user interface is concerned, we replace the ComboBox with List and remove DataGrid from the previous MXML definition. There would be a need to customize the layout a bit. The final definition looks as follows (important changes have been marked in bold):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  height="426" width="400" borderThickness="2" borderStyle="solid"
  backgroundColor="#F0F0F0" cornerRadius="8">

  <mx:Label text="Edujini Labs Pvt Ltd" fontSize="14" fontFamily="Georgia"
  	fontWeight="bold" fontStyle="normal" color="#F5A83B" left="20" top="20"/>

  <mx:Label x="20" y="64" text="Edujini Team" fontFamily="Verdana" fontSize="10" fontWeight="bold"/>

  <mx:List id='eList' x="20" y="90" dataProvider="{employees}" labelField="employeeName"
  	cornerRadius="4" width="344" height="265">
  </mx:List>

  <mx:Label x="20" text="© 2008, Edujini Labs Pvt Ltd" fontFamily="Verdana"
  	fontSize="10" fontWeight="bold" bottom="20"/>

  <mx:Script>
    <![CDATA[
      import com.edujinilabs.eduzine.tutorials.flex.core.UserProfile;
      import mx.collections.ArrayCollection;

      [Bindable]
      private var employees: ArrayCollection = new ArrayCollection(
      [
        new UserProfile(11, "Shake Sajan", "Product Dev"),
        new UserProfile(24, "Meera", "Training"),
        new UserProfile(23, "Neelam", "Training"),
        new UserProfile(12, "Hari S Nair", "Product Dev"),
        new UserProfile(13, "Abdul Prodhani", "Product Dev"),
        new UserProfile(21, "Ashish Vaish", "Training"),
        new UserProfile(10, "Gaurav Vaish", "Technology"),
        new UserProfile(32, "Jagadish", "Marketing"),
        new UserProfile(33, "Anshu", "Marketing"),
        new UserProfile(22, "Padma Raviee", "Training"),
        new UserProfile(14, "Rajesh", "Technology"),
        new UserProfile(31, "Yashwanth C", "Management"),
        new UserProfile(34, "Ramesh", "Finance")
      ]);
    ]]>
  </mx:Script>
</mx:Application>

With this, the UI that we expect is as follows:

Flex Item Renderers

This interface is decently fine. Let's get something more out of this. How about change the UI to not only display the employees' names but also their Employee ID and the Department Name. And showing them a little formatted - say, in two lines rather than in a single line.

Adobe Flex data driven controls work internally with the so called item renderers to represent a "list of items". The external presentation may be linear, grid, tree or a combination of these.

To get started, let us define a simple renderer for our List. Modify the List definition to as follows:

  <mx:List id='eList' x="20" y="90" dataProvider="{employees}" labelField="employeeName"
    cornerRadius="4" width="344" height="265">
    <mx:itemRenderer>
      <mx:Component>
        <mx:VBox>
          <mx:Label text="ID: {data.employeeID}" />
          <mx:HBox width="100%">
            <mx:Label text="Name: {data.employeeName}" width="50%" />
            <mx:Label text="Department: {data.departmentName}" width="50%" />
          </mx:HBox>
        </mx:VBox>
      </mx:Component>
    </mx:itemRenderer>
  </mx:List>

The itemRenderer comprises of one VBox with two entries - a Label to display the Employee ID, and a HBox comprising of details for Employee Name and the Department Name.

Note that the itemRenderer element can contain only a definition of the Component which in turn can comprise of only one component. For example, it is not possible to have a Component with two Label elements directly within itself. These Labels must be enclosed in a container layout, like VBox in this case.

Also note that the controls are bount to values of the type {data.*}. data is a special variable in this case - it refers to the item being rendered. For each iteration corresponding to the entry in the dataProvider, data takes up the corresponding value. The type of the value referred to by data is same as that in the dataProvider, which in our case is com.edujinilabs.eduzine.tutorials.flex.core.UserProfile.

The UI expected is as below:

Flex Item Editors

Let's further fancy the UI and give the HR department an ease to be able to edit the details inline. When the HR personnel clicks on any entry, it should get into the edit mode and display the items as below:

Employee ID: Must be shown in a Label.
Employee Name: Must be shown in a TextInput, so that it may be updated.
Employee ID: Must be shown as a ComboBox, with a list of options available.

Now that we already know how to data-bind the controls, we can directly jump on to looking at the updated List definition in the MXML:

  <mx:List id='eList' x="20" y="90" dataProvider="{employees}" labelField="employeeName"
    cornerRadius="4" width="344" height="265" editable="true" itemEditEnd="event.preventDefault()">
    <mx:itemRenderer>
      <mx:Component>
        <mx:VBox>
          <mx:Label text="ID: {data.employeeID}" />
          <mx:HBox width="100%">
            <mx:Label text="Name: {data.employeeName}" width="50%" />
            <mx:Label text="Department: {data.departmentName}" width="50%" />
          </mx:HBox>
        </mx:VBox>
      </mx:Component>
    </mx:itemRenderer>
    <mx:itemEditor>
      <mx:Component>
        <mx:VBox>
          <mx:Label text="ID: {data.employeeID}" />
          <mx:HBox width="100%">
            <mx:TextInput text="{data.employeeName}" width="50%" />
            <mx:ComboBox width="50%" selectedItem="{data.departmentName}">
              <mx:dataProvider>
                <mx:String>Product Dev</mx:String>
                <mx:String>Training</mx:String>
                <mx:String>Technology</mx:String>
                <mx:String>Finance</mx:String>
                <mx:String>Management</mx:String>
              </mx:dataProvider>
            </mx:ComboBox>
          </mx:HBox>
        </mx:VBox>
      </mx:Component>
    </mx:itemEditor>
  </mx:List>

The updates in the code, now, must be self explanatory. You would also notice alternate form of specifying the dataProvider for the ComboBox. If you select any entry in the list, it must get into the edit-mode. The expected UI is as given below:

So, we seem to have got everything... except that the names / department names, if updated, do not effect the original items (the model). We shall explore this in our next article.

Summary

In this article, we learnt to:

Use Flex Item Renderers in data driven controls to create a rich UI to render the business objects.
Use Flex Item Editors to edit the business objects. We have left the task of updating the business objects to the next article.

Flex Data Driven Controls - Part 1

eduzine@edujinionline.com (Eduzine) — 2008-06-07T22:39:44Z

Introduction

Data driven controls are key to any UI toolkit, and Adobe Flex is no different.

In this article, we explore some data driven controls in Flex and look at their basic functionalities, especially the data binding and custom rendering.

In case you need a professional support on RIA, Web 2.0 and/or Adobe Flex, feel free to mail

Downloads are available in the Downloads section.

The Scenario

Let's take a fictitious but practical scenario. The HR department at Edujini Labs to be given a dashboard to:

Display employee names
Dispaly employee details

Other complexities like capabilities to edit the employee details, paginate the listing if the list is long et al can be added later on.

Getting Started...

To get started, let's freeze on the following UI:

For the employee list, we use a simple ComboBox to get started with. Later we'd explore other options
For the details, we use DataGrid.

The above UI can be generated using the following application definition (You will need Adobe Flex Builder to design it WSISYG or you can download the Adobe Flex SDK and use the MXML compiler to compile it at command line):

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  height="280" width="600" borderThickness="2" borderStyle="solid"
  backgroundColor="#F0F0F0" cornerRadius="8">

  <mx:Label text="Edujini Labs Pvt Ltd" fontSize="14"
      fontFamily="Georgia" fontWeight="bold" fontStyle="normal"
      color="#F5A83B" left="20" top="20"/>

  <mx:Label x="21" y="64" text="Edujini Team" fontFamily="Verdana"
      fontSize="10" fontWeight="bold"/>

  <mx:ComboBox x="21" y="90"></mx:ComboBox>

  <mx:DataGrid x="218" y="92" width="368">
    <mx:columns>
      <mx:DataGridColumn headerText="Employee ID" dataField="employeeID"/>
      <mx:DataGridColumn headerText="Employee Name" dataField="employeeName"/>
      <mx:DataGridColumn headerText="Department" dataField="departmentName"/>
    </mx:columns>
  </mx:DataGrid>

  <mx:Label x="21" y="248" text="© 2008, Edujini Labs Pvt Ltd"
      ontFamily="Verdana" fontSize="10" fontWeight="bold"/>

</mx:Application>

Note the definition of the DataGrid. It contains a bunch of DataGridColumn definitions. Each DataGridColumn has been specified a headerText - header of the column, and dataField - the property of the object whose value is to be displayed.

To model our data, let's create a class UserProfile in package, say, com.edujinilabs.eduzine.tutorials.flex.core. It comprises of the Employee ID, Employee Name and the Department Name.

package com.edujinilabs.eduzine.tutorials.flex.core
{
  /**
    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
   /
  public class UserProfile
  {
    private var _employeeID : int;
    private var _employeeName: String;
    private var _departmentName: String;

    public function UserProfile(eid: int = 0,
                           name: String = null, deptName: String = null)
    {
      this._employeeID = eid;
      this._employeeName = name;
      this._departmentName = deptName;
    }

    public function get employeeID(): int
    {
      return _employeeID;
    }

    public function set employeeID(eid: int) : void
    {
      this._employeeID = eid;
    }

    public function get employeeName(): String
    {
      return _employeeName;
    }

    public function set employeeName(name: String) : void
    {
      this._employeeName = name;
    }

    public function get departmentName(): String
    {
      return _departmentName;
    }

    public function set departmentName(name: String) : void
    {
      this._departmentName = name;
    }
  }
}

Notice that the property names have been purposely chosen to match the values of dataField of the DataGridColumn's defined earlier.

Data Model

Employee list would be represented using the variable employees of type mx.collections.ArrayCollection. Ensure that it is Bindable. Finally, let's popupate it with some data, as given below. Add the code directly into the MXML Application created.

  <mx:Script>
    <![CDATA[
      import com.edujinilabs.eduzine.tutorials.flex.core.UserProfile;
      import mx.collections.ArrayCollection;

      [Bindable]
      private var employees: ArrayCollection = new ArrayCollection(
      [
        new UserProfile(11, "Shake Sajan", "Product Dev"),
        new UserProfile(24, "Meera", "Training"),
        new UserProfile(23, "Neelam", "Training"),
        new UserProfile(12, "Hari S Nair", "Product Dev"),
        new UserProfile(13, "Abdul Prodhani", "Product Dev"),
        new UserProfile(21, "Ashish Vaish", "Training"),
        new UserProfile(10, "Gaurav Vaish", "Technology"),
        new UserProfile(32, "Jagadish", "Marketing"),
        new UserProfile(33, "Anshu", "Marketing"),
        new UserProfile(22, "Padma Raviee", "Training"),
        new UserProfile(14, "Rajesh", "Technology"),
        new UserProfile(31, "Yashwanth C", "Management"),
        new UserProfile(34, "Ramesh", "Finance")
      ]);
    ]]>
  </mx:Script>

Data Binding

The next step is to bind the employee list to ComboBox and the DataGrid. Update the definition to as following:

<mx:ComboBox x="21" y="90" dataProvider="{employees}"></mx:ComboBox>
<mx:DataGrid x="230" y="92" width="302" dataProvider="{employees}">

Note the special syntax - the variable employees has been enclosed in the curly-braces {}. This the data-binding syntax. It is a two step process:

Declare a variable with the attribute Bindable.
In MXML, use it within the curly braces.

After binding, the UI should appear as given below:

`ComboBox` Configuration

Everything looks fine except for that the ComboBox does not exactly display what we require. It displays the String representation of the UserProfile using the toString() method.

All we need to configure is the labelField of the ComboBox to tell it that it must pickup the text to be displayed to the UI from the corresponding property / field of the individual object of the collection. The default value of labelField is label.

Update the definition of the ComboBox used to as follows:

  <mx:ComboBox x="21" y="90" dataProvider="{employees}"
       labelField="employeeName">
  </mx:ComboBox>

Voila! The UI is exactly as what we want:

Summary

In this article, we learnt to:

Use data binding in Adobe Flex.
Bind data to the Flex controls ComboBox and DataGrid.
Display custom objects in the Flex control ComboBox.
Display custom objects in the Flex control DataGrid in multiple columns.

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

eduzine@edujinionline.com (Eduzine) — 2008-05-27T15:31:49Z

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) — 2008-05-26T15:34:00Z

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

Introduction to Windows Management Instrumentation

eduzine@edujinionline.com (Eduzine) — 2008-05-05T23:15:02Z

Introduction

Web Based Enterprise Mangaement (WBEM) is an industry initiative that establishes management infrastructure standards and provides a way to combine information from various hardware and software management systems. It specifies standards for a unified architecture allowing access to data from multiple underlying technologies and platforms and presenting it in a consistent fashion.

Microsoft Windows Management Instrumentation (WMI) is WBEM-compliant. It provides a consistent and descriptive model of the configuration, status and operational aspects of Microsoft Windows.

In essence, WMI provides:

Consitent model of Windows configuration, operation and status
A COM API providing a single point access to all management functions
Flexible architecture allowing vendors to extend the information model to cover new devices, applications, and other enhancements by writing WMI providers
WMI Query Language, WQL, that enables detailed queries of the information model
Scripting support, through Visual Basic, VBA, VBScript and JScript

In this article, we take the route of VBScript to discover some possibilities in WMI.

What do we do?

Let's create a simple VBScript to query WMI regarding the disks.

Code and Analysis

The first method that would ever used is to get the reference to the COM Object - winmgmts (CLSID: 172BDDF8-CEEA-11D1-8B05-00600806D9B6). This is the "Wbem Scripting Object Path" / "Wbem Object Path 1.0" Component. The complete code is:

GetObject("winmgmts:\\{machine-name}\root\cimv2")

In the code above, {machine-name} refers to the machine where the query is to be performed subsequently. Should you wish to perform the query on local machine, you can specify the name as "." (dot).

Now, I mentioned about WQL earlier. It's very similar to SQL, if you know that. To get started, it's identical. Let's query our machine to some basic information.

 1 Option Explicit
 2 Dim objWMIService, objItem, colItems, strComputer
 3
 4 strComputer = "."
 5
 6 Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\cimv2")
 7 Set colItems = objWMIService.ExecQuery("Select  from Win32_ComputerSystem")
 8
 9 For Each objItem in colItems
10    Wscript.Echo 
11        "Name: " & objItem.Name & vbCr & 
12        "System Type: " & objItem.SystemType & vbCr & 
13        "Manufacturer: " & objItem.Manufacturer & vbCr & 
14        "Model: " & objItem.Model & vbCr & 
15        "# Processors: " & objItem.NumberOfProcessors & vbCr & 
16        "RAM: " & CInt(objItem.TotalPhysicalMemory / (1024  1024)) & " MB" & vbCr & 
17        "Username: " & objItem.UserName & vbCr & 
18        "Timezone: " & objItem.CurrentTimeZone & " mins from GMT" & vbCr
19 Next
20
21 WSCript.Quit

At line 6, we get a reference to the COM Object for the root CIM v2 for the machine. CIMv2 stands for Common Information Model Version 2.
At line 7, we query the service for the class Win32_ComputerSystem.
Subsequently, we iterate through all the items and extract the information. In this case, the loop iterates only once because there is only one Computer System.
And the result is something as below:

Now, how about querying the information about the disk drive?

 1 Option Explicit
 2 Dim objWMIService, objItem, colItems, strComputer, intDrive
 3
 4 strComputer = "."
 5
 6 Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\cimv2")
 7 Set colItems = objWMIService.ExecQuery("Select  from Win32_DiskDrive")
 8
 9 For Each objItem in colItems
10    intDrive = intDrive + 1
11    Wscript.Echo 
12        "DiskDrive: " & intDrive & vbCr & 
13        "Caption: " & objItem.Caption & VbCr & 
14        "Description: " & objItem.Description & VbCr & 
15        "Manufacturer: " & objItem.Manufacturer & VbCr & 
16        "Model: " & objItem.Model & VbCr & 
17        "Name: " & objItem.Name & VbCr & 
18        "Partitions: " & objItem.Partitions & VbCr & 
19        "Size: " & CInt(objItem.Size / (1024  1024 * 1024)) & " GB" & VbCr & _
20        "SystemName: " & objItem.SystemName & VbCr
21 Next
22
23 WSCript.Quit

I don't think I need to explain the code above. Everything should be self-explanatory. The result is similar to the following:

Conclusion

WMI provides a great way to manipulate all system information, including software and hardware. What more - WMI Scripting provides a simple yet powerful mechanism for the same.

Web Service Specifications

eduzine@edujinionline.com (Eduzine) — 2007-06-30T00:08:27Z

Introduction

This article enlists the various specifications related to web services. The list covers both the first generation specifications as well as second generation specifications.

The article also provides hyperlinks to the specifications and their maintainers.

1^st Generation Specifications

The web-service framework by W3C consists of a foundation built on three core XML-based specifications: WSDL, SOAP, and UDDI. The standards, in conjunction with SO-Design Principles, form a basic XML-based web-service driven SOA.

The 1^st generation architecture allows for the creation of independent web-services. It has several limitations addressed in 2^nd generation specifications.

Simple Object Acccess Protocol: Establishes a standard message format that consists of an XML document capable of hosting RPC and document-centric data.

SOAP v1.1: Maintained by W3C. Specification is available here.
SOAP v1.2: Maintained by W3C. Specification is divided in four parts - Primer, Messaging, Adjuncts and Assertions and Test Collection

Web Service Description Language: Providing the foremost language for the description of Web service definitions.

WSDL v1.1: Mantained by W3C. Specification available here
WSDL v1.2: Maintained by W3C. Specification available in two parts - Core Language and Message Patterns.

2^nd Generation Specifications

The 2^nd generation specifications position SOA as a viable successor to the prior distributed-platforms.

Reliability and Messaging: Propose features that deal with reliabile delivery, self-governing messaging, message attachments, and message transmission performance.

WS-ReliableMessaging: Available at MSDN and DeveloperWorks
WS-Addressing: Available at MSDN
MTOM, DIME: Available at MSDN
MTOM and XOP: Available at W3C
WS-Attachments: Available at DeveloperWorks

Policies and Metadata: The WS-Policy framework comprises of a set of specifications that allow for the description of policies like business-rules, security etc

WS-Policy: Available at XML-SOAP.org, and a newer proposed version at W3C. Also available at DeveloperWorks
WS-PolicyAssertions: Available at DeveloperWorks
WS-MetadatExchange: Aavailable at MSDN

Security: The WS-Security framework provides a thorough security model consisting of a host of specifications

WS-Security: Maintained by OASIS
WS-SecureConversation, WS-Federation, WS-Trust: All maintained by OASIS
XML Encryption, XML Signature, XKMS, XACML, SAML: Maintained by W3C
WS-I Basic Security Profile: Maintained by WS-I

Context and Transaction Management: The WS-Coordination specification provides a context management system. Supports atomic and long-running transactions.

WS-Coordination: Maintained by OASIS
WS-Transaction: Maintained by OASIS
WS-AtomicTransaction: Maintained by OASIS
WS-BusinessActivity: Maintained by OASIS

Business Process Definitions: Provides support for workflow - orchestration and choreography.

BPEL: Maintained by OASIS
WSCI: Maintained by W3C
BPML: Maintained by BPMI (Note that there are not many takers for BPML. BPEL has a wider acceptance.

HOWTO: Configure Microsoft SQL Server for Mixed Mode Authentication

eduzine@edujinionline.com (Eduzine) — 2007-04-01T00:59:42Z

Introduction

At times, Windows Authentication in Microsoft SQL Server is not enough. One of the requirements is in ASP.Net as described in the FAQ here. This article descibes how to setup mixed mode authentication, also known as SQL Authentication, in Microsoft SQL Server 2000, 2005 and 2005 Express Edition.

Now of course, the need does not arise if the care is taken during installation of SQL Server 2000 and 2005. But for SQL Server 2005, it becomes mandatory. We explore all versions anyway.

Mixed Mode Authentication for SQL Server 2000

Launch Enterprise Manager for SQL Server 2000. Browse to the server node that you are interested in as shown below.

Right click and select the option Properties or from the Action menu, select Properties.

Go to the Security tab and select SQL Server and Windows option for Authentication.

You may need to restart the server.

Mixed Mode Authentication for SQL Server 2005 Express Edition

For SQL Server 2005 Express Edition, there is not GUI tool available to configure the server. You need to go it manually. The first step is to change the login-mode.

Open registry editor (launch application %WINDIR%\regedit.exe) and go to HKLM\Software\Microsoft\Microsoft SQL Server\MSSQL.1\MSSQLServer in the tree on the left.

On the right, look for an entry named LoginMode. The default value, when installed is 1. Update it to 2. The next step is to restart the service.

Launch your Service Manager (Start -> Run -> Type services.msc) and look for a service named MSSQL Server (SQLEXPRESS). Restart the service.

Hey! We are not done yet... at least practically. We need to add a user with administrative priviledges so that the database can be accessed from ASP.Net.
On the command prompt, login to SQL Server command prompt using the osql utility. SQL Server 2005 Express Edition is installed with the instance name SQLEXPRESS. Use the following command to login:

osql -E -S .\SQLEXPRESS

One the SQL-command prompt, execute the following?

1> exec sp_addlogin 'username', 'password'
2> go
1> exec sp_addsrvrolemember 'username', 'sysadmin'
2> go
1> quit

Replace the username and password but not forget the quotes. To verify, try login using the following on the command prompt:

osql -S .\SQLExpress -U username

Provide the password when asked for and you should be through!

Mixed Mode Authentication for SQL Server 2000

Launch SQL Server Management Studio. Connect using Windows Authentication. Ensure that you are logged in as with administrative privileges. On the machine node in Object Explorer, right click and select option Properties.

Go to the Security page and select SQL Server and Windows Authentication Mode for the Server Authentication.

You may need to restart the server.

Conclusion

For Microsoft SQL Server 2000 and 2005, having initial wrong choice for authentication is, now, not a burden. Also, for Microsoft SQL Server 2005 Express Edition, it is easy to configure it for the mixed mode authentication and create new IDs.

Eduzine©

DWT - Take off and Problems Galore

Standard Widget Toolkit: Part 1 - Hello, World!

Introduction

Downloads

Pre-requisites

Case Study

Getting Started - Creating Project

Entry Point

Implementation: Step 1

Layout Manager

Implementation - Step 2

Summary

Exploring OOPS - JavaScript Style: Part 3 - Polymorphism

Introduction

Downloads

Compile-time Polymorphism

Runtime Polymorphism

Summary

Exploring OOPS - JavaScript Style: Part 2 - Inheritance

Introduction

Downloads

Getting Started

EmployeeProfile Definition

Testing the Definition

instanceof Operator

Method Reference and Optimization

Method Overriding

Summary

Exploring OOPS - JavaScript Style: Part 1 - Encapsulation

Introduction

Downloads

Getting Started

4-Sutras while working with JavaScript

Encapsulation

Welcome, Functions!

Test Case

Analysis

Summary

Creating Custom Widget in Dojo - Part 2: Templated Widgets

Introduction

Downloads

Templated Widgets

Widget Definition

Widget Implementation

Template Definition

Test Case

Finishing Touches

Summary

Next Steps...

Creating Custom Widget in Dojo - Part 1

Introduction

Downloads

What you should know...

Getting Started

Widget Definition

Widget Implementation

Using Custom Widget

Customizing the Widget

Summary

Dojo on Google Web Toolkit

Flex Data Driven Controls - Part 2

Introduction

Getting Started

Flex Item Renderers

Flex Item Editors

Summary

Flex Data Driven Controls - Part 1

Introduction

The Scenario

Getting Started...

Data Model

Data Binding

ComboBox Configuration

Summary

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

Introduction

Getting Started

Step 1: Creating Web Application

Step 2: Adding a Module

`EmployeeProfile` Definition

`instanceof` Operator

`ComboBox` Configuration

1^st Generation Specifications

2^nd Generation Specifications