Eduzine© - RIA

Exploring OOPS - JavaScript Style: Part 3 - Polymorphism

eduzine@edujinionline.com (Eduzine) — Wed, 18 Jun 2008 00:34:10 -0700

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) — Tue, 17 Jun 2008 21:33:51 -0700

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) — Mon, 16 Jun 2008 21:53:49 -0700

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

Flex Data Driven Controls - Part 2

eduzine@edujinionline.com (Eduzine) — Tue, 10 Jun 2008 10:19:00 -0700

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) — Sat, 07 Jun 2008 22:39:44 -0700

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.

Eduzine© - RIA

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

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

`EmployeeProfile` Definition

`instanceof` Operator

`ComboBox` Configuration