Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Yahoo's Rich Web UIs for Java Developers : Page 2

Java developers who develop web applications with server-side frameworks often don't have the JavaScript expertise to create rich user interfaces. Learn how Yahoo User Interface (YUI) can help bridge that gap.


WEBINAR: On-Demand

Unleash Your DevOps Strategy by Synchronizing Application and Database Changes REGISTER >

YUI's Object-Oriented JavaScript Design

Until AJAX frameworks emerged, JavaScript was not treated as an application development platform. Despite its support for object-oriented (OO) design, JavaScript was treated merely as a scripting language to implement minimal dynamic web page behavior. To leverage OO design in JavaScript development, YUI uses an object-oriented design in all its components.

The following sections demonstrate OO programming in JavaScript and introduce an approach that will help you structure your classes for OO JavaScript applications. The YUI library provides the components to facilitate this style of development.

Creating Namespaces

In enterprise software, it is very common to group classes based on behavior in a namespace. So it is important to learn about namespaces before learning to create classes and objects.

If you want all your namespaces to fall under the Yahoo namespace, you can create them like this:

YAHOO.namespace("myapp"); YAHOO.namespace("myapp.util"); YAHOO.namespace("myapp.ui"); YAHOO.myapp.Main = function() { }

This code creates three namespaces as well as a class under the namespace YAHOO.myapp.

Alternatively, you can define your own namespace as follows:

if(!DevX) DevX = {}; if(!DevX.myapp) DevX.myapp = {}; DevX.myapp.Main = function() { }

Managing Files

You can define multiple classes in the same JavaScript file, but it is a good practice to have separate files for them.

Defining Classes

You can define a class in one of two ways: using an object literal or defining a function. Object literals typically are useful for defining classes that contain all static methods and do not need a constructor to initialize. The following code snippets show how to define a Util class using the object literal approach.

Suppose the file util.js contains the following:

if(!DevX) DevX = {}; if(!DevX.myapp) DevX.myapp = {}; DevX.myapp.Util = { TIMEOUT : 5, // Timeout constant in minutes for server requests isBrowserIE : function() { return YAHOO.env.ua.ie > 0; } }

To use this class, you wouldn't need to create an instance of Util. You instead would access the members directly:

if(DevX.myapp.Util.isBrowserIE()) { // IE specific behavior }

Alternatively, you can define a class using a function. Suppose the file main.js has the following contents. Refer to the inline comments to understand the class definition.

if(!DevX) DevX = {}; if(!DevX.myapp) DevX.myapp = {}; DevX.myapp.Main = function (title) { // Constructor var t = title; // Private variable /** * Private method */ function getTitle() { return t; } /** * Public method */ this.refresh = function () { // Refresh the main page } };

You can instantiate and use the defined class as follows:

var main = new DevX.myapp.Main('Home page'); main.refresh();

As you add more functionality to your class, your constructor would keep growing because all the members are defined within it. To define additional method and fields, you could use the method YAHOO.lang.augment to define your method and fields outside the constructor. Consider how this code adds a login method to the class Main:

YAHOO.lang.augment(DevX.myapp.Main, { login : function(username, password) { // perform login operation } });

Implementing Inheritance

You can implement inheritance by using the utility method YAHOO.lang.extend. Consider subclassing the class Main and changing the behavior of the method refresh.

As an example, the file application main.js has the following contents:

if(!DevX) DevX = {}; if(!DevX.myapp) DevX.myapp = {}; DevX.myapp.AppMain = function () { //Call the super class constructor DevX.myapp.AppMain.superclass.constructor.call(this, 'App Main'); // Derived class specific initialization goes here } YAHOO.lang.extend(DevX.myapp.AppMain, DevX.myapp.Main); DevX.myapp.AppMain.prototype.refresh = function () { // Modify refresh behavior }

The prototype keyword refers to the structure of the class.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date