Skip to content

October 4, 2009

Prototype-UI: A quick start guide on Ajax Windows

by Joe Kuan

Prototype-UIHere is a short tutorial showing you how to use Prototype-UI to create Ajax windows and control the properties between windows.

Introduction
There are many window based Ajax frameworks out there in the market, ZK, Backbase, Ext-JS, YUI, GWT, etc. It depends on whether your web application requires to be client or server centric or a bit of both and the complexity of it. They all need a bit of learning curve. Recently, I came across another window based Ajax product, Prototype-UI, which is based on the well known Prototype and Scriptaculous libraries. Prototype-UI is a client centric and it is an extension work on previously known as PCW window library.

It is unfair to compare Prototype-UI to the other Ajax frameworks mentioned above because other frameworks have a lot more features such as JDBC, tree view, drop down menus, layout manager, etc. Also if you don’t fancy programming Javascript, then other frameworks such as GWT, ZK have a lot to offer. If your web application is heavy LAMP based and involves a lot of data plots and complicate GUI, then those Ajax frameworks probably a better choice. However for average web front end, Prototype-UI should be sufficient. I personally prefer Prototype-UI because

  1. Based on the well known Prototype library which takes a lot of pain out of Javascript programming
  2. Less learning curve and good programming style (see examples below)
  3. Lightweight compare to other Ajax frameworks

EXAMPLE 1: Create a Window

The following example pops up a simple dialog.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link type="text/css" rel="stylesheet" href="../css/themes/window/window.css"/>
<link type="text/css" rel="stylesheet" href="../css/themes/window/alphacube.css"/>
<script language="JavaScript" type="text/javascript" src="../js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="../js/scriptaculous.js"></script>
<script language="javascript" type="text/javascript" src="../js/prototype-ui/prototype-ui.packed.js"></script>
<script language="javascript" type="text/javascript">
function launchDialog() {
    new UI.Window({
       theme: 'alphacube',
       shadow: true
    })
    .center()
    .setHeader('Testing')
    .setContent("<iframe src='http://www.prototypejs.org' frameborder=0 width=100% height=100% scrolling=no />")
    .show(true)
}
</script>
</head>
<body>
<a href='#' onclick='launchDialog();'>Click me</a>
</body>
</html>

The Javascript function launchDialog creates a window within the IE 8 browser and the Prototype homepage is loaded inside the Prototype-UI window.

Prototype-ui screenshot

EXAMPLE 2: Create a Dialog

The next example demonstrates how easy to launch a dialog and how simple to override the callback function. The launchDialog routine launches a confirm dialog which the ok callback function recursively call itself with different theme, ie every time the ok button is clicked, the dialog destroys itself and displays a new confirm dialog with new theme look.

function launchDialog(count) {

    var themes = [ 'mac_os_x', 'vista', 'alphacube' ];
    var this_theme = themes[count % 3];
    new UI.Dialog({
       buttons: [
         { title: 'Ok', className: 'Ok', callback: function(win) { launchDialog(count + 1); win.destroy(); } },
         { title: 'Cancel', className: 'Cancel', callback: function(win) { win.destroy(); } }
       ],
       theme: this_theme,
       shadow: true,
       height: 150
    })
    .center()
    .setHeader('Test')
    .setContent('You click: ' + count + '. Theme: ' + this_theme)
    .show()
}

A dialog box with Mac OS X theme within Safari 4.0.3 browser.

Prototype-UI dialog

EXAMPLE 3: Create two windows. First window calls the second window to change content and properties

This is a slightly more complicate example showing you how we can update the content from one modal window to another window. First, we have a Javascript function to launch the first window.

function launchWin1() {

  new UI.Window({
        id: 'window_1',
        theme: 'mac_os_x',
        shadow: true,
        width: 250,
        height: 180
    })
    .setHeader('Master')
    .setAjaxContent('test1.html')
    .show(true)
}

The window loads the content from a file test1.html which has a HTML Form

<FORM name=test_form id=test_form>
Header: <INPUT TYPE=TEXT name=header value= ><BR/>
Content: <INPUT TYPE=TEXT name=content value= ><BR/>
Width: <INPUT TYPE=TEXT name=width value= ><BR/>
Height: <INPUT TYPE=TEXT name=height value= ><BR/>
Theme: <INPUT TYPE=TEXT name=theme value= ><BR/>
<INPUT TYPE=BUTTON name=launch value="Launch Window 2" onclick='launchWin2();' >
<INPUT TYPE=BUTTON name=update value=Update onclick='update_win2();' >
</FORM>

The form contains two buttons one to launch the second window, the other one is to update the second window properties. The functions for both buttons are:

function launchWin2() {

  new UI.Window({
        id: 'window_2',
        theme: 'alphacube',
        shadow: true,
        width: 250,
        height: 130
    })
    .setHeader('Slave')
    .show()
    .setContent('Waiting for update');
}

function update_win2() {

  var win2 = UI.defaultWM.getWindow($('window_2'));

  win2.setContent($('test_form').content.value)
  .setTheme($('test_form').theme.value)
  .setHeader($('test_form').header.value)
  .setSize(parseInt($('test_form').width.value), parseInt($('test_form').height.value), true)
  .activate();
}

As you can see, we use UI.defaultWM (WindowManager class) to get the Prototype-UI window object with the id property, window_2. Once we have the window object, we can change the properties. Following screenshot shows launching both windows in Firefox 3.5.3.

Both windows 1

Enters new properties values on the Master window (id: window_1) and clicks Update button to update Slave window (id: window_2). Following screenshot shows Slave window with new content including the theme changed from Alphacube to Vista theme.

Both windows 2

Version compatibility problem

One thing to watch out is the version of Prototype combine with Prototype-UI and also the compatiblility with IE8. This means if you download all the latest version, they may not work together. For instance, at the time of writing if I use the latest version Prototype 1.6.1_rc2 and the latest version Prototype-UI, I cannot get the window drag to work. In order to get everything in harmony, I have to use Prototype 1.6.0.3, Scriptaculous 1.8.2 and latest Prototype-UI for Safari 4.0.3 and Firefox 3.5.3 to work and includes the following meta tag to work on IE8:

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

Conclusion

Prototype-UI is in development stage, currently offers Window and Carousel classes. More components such as Calendar, Menus, etc will be included in the future release and I personally think it has a great potential. Prototype-UI is client centric with very little learning curve needed. It offers good programming style and flexibility.

I work for iTrinegy and here are my other Prototype-UI blogs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: