Ruben Daniels blog:
http://www.rubendaniels.com/2010/02/01/ajaxorg-platform-30-beta2-released/

My blog (in polish)
http://uzza.pl/blog-javascript/2010/02/03/ajax-org-platform-3-0-beta-2-ujrzala-swiatlo-dzienne/

Stay tuned !

You’ll find answers on following questions:

• How to add events to elements, and how to call component’s methods by its

At begining i would like to remind You about that we base on files from previous part of this article.

Events should be added in $draw function. We can do this in very simple way, by setting attribute to button node. Javeline Platform assing a unique id to each of components instances. In that way we can call component’s methods using that id’s to identify component object.

oButton.setAttribute("onmouseover", "jpf.lookup(" + this.uniqueId + ").$setStyleClass(this, 'hover');");
oButton.setAttribute("onmouseout", "jpf.lookup(" + this.uniqueId + ").$setStyleClass(this, '', ['hover']);");
oButton.setAttribute("onmousedown", "jpf.lookup(" + this.uniqueId + ").selectButton(this.innerHTML);");

In next step we’ll set captions to each of buttons. Why we didn’t do that when we was setting attributes ? Answer is simple, because we worked with xmlNodes.

So now we need to get htmlNodes (we will use this.oStatus in next steps) and define array with captions:

this.oStatus = this.$getLayoutNode("main", "status",  this.oExt);
this.oButtons = this.$getLayoutNode("main", "buttons",  this.oExt);
 
var captions = [
    1, 2, 3, 0, "/", "+",
    4, 5, 6, ".", "*", "-",
    7, 8, 9, "+/-", "%", "=",
];

We are looking for row and button elements among child nodes of oButtons element and we are setting captions to buttons:

var nodes1 = this.oButtons.childNodes;
for (var i = 0, l1 = nodes1.length, counter = 0; i < l1; i++) {
    if ((nodes1[i].className || "").indexOf("calcrow") != -1) {
        var nodes2 = nodes1[i].childNodes;
        for(var j = 0, l2 = nodes2.length; j < l2; j++) {
            if ((nodes2[j].className || "").indexOf("calcbtn") != -1) {
                nodes2[j].innerHTML = captions[counter++];
            }
        }
    }
}

We can’t forget about selectButton function. In that way You can communicate with component. Of course You don’t need use innerHTML, it can be something else.

this.selectButton = function(sChar) {
    this.oStatus.innerHTML += sChar;
};

You’ll find answers on following questions:

• How to add more elements to component
• How to set CSS only for specific browsers

For add more elements to component we need to define its in skin file. If we want use its only one time (in component), we can add its to MAIN section:

<j:main container="." buttons="div[2]" status="div[1]">
    <div class="calc">
        <div class="status"> </div>
        <div class="buttons"> </div>
    </div>
</j:main>

if more, better will be create a new section:

<j:calcrow>
    <div class="calcrow"> </div>
</j:calcrow>
<j:calcbtn>
    <div class="calcbtn"> </div>
</j:calcbtn>

Now we can use this elements in this.$draw method. At begining we get a status and buttons elements:

var oButtons = this.$getLayoutNode("main", "buttons", oExt);
var oStatus  = this.$getLayoutNode("main", "status", oExt);

First param sets a name of section from which we want to get a element, second a name of attribute which specify a XPath to it.

status="div[1]" //XPath to status element in <div class="calc">

To switch section to which we are taking a data from and create a new instance of it, we need to use following function:

this.$getNewContext(sectionName);

In that way we can create more the same elements. Like here where we created 3 rows with 6 buttons:

for (var i = 0; i < 3; i++) {
    this.$getNewContext("calcrow");
    var oRow = oButtons.appendChild(this.$getLayoutNode("calcrow"));
 
    for (var j = 0; j < 6; j++) {
        this.$getNewContext("calcbtn");
        var oButton = oRow.appendChild(this.$getLayoutNode("calcbtn"));
    }
}

Our component will be nothing if we won’t use CSS for it. Here is a simple CSS style to arrange buttons inline in rows and set some colors to elements.

<j:style><![CDATA[
.calc {
    width    : 192px;
    height   : 118px;
    border   : 1px solid black;
    overflow : hidden;
    padding  : 0;
}
.calc .status {
    width  : 100%;
    height : 23px;
}
 
.calc .calcrow {
 
}
 
.calc .calcbtn {
    width            : 30px;
    height           : 30px;
    background-color : silver;
    display          : inline-block;
    margin           : 1px;
}
]]></j:style>

Someone will tell “Ok, but this style is incorrect for Internet Exploerer”… Yes it is, now i need to introduct a simple way to specify CSS styles for specific browser. Here it is:

<j:style condition="jpf.isIE"><![CDATA[
.calc .calcbtn {
    float:left;
}
]]></j:style>

This code fix all problems with display:inline-block; option.

Of course we can use different conditions like:
jpf.isOpera, jpf.isSafari, jpf.isKonqueror, jpf.isIphone, jpf.isChrome, jpf.isGecko, jpf.isGecko3 or jpf.isIE8.

You’ll find answers for Your all questions in Javeline Platform RefGuide at http://www.ajax.org/documentation/refguide/

You’ll find answers on following questions:

• Which namespace should be used, and what files should be included
• How default skin declaration looks
• How much javascript code is needed to create the simplest component

I would like to show You in this article how easy is creating components. For example this will be a calc component. First of all we need to prepare a default html document with linked JPF library, skin file and our component js file.

index.html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:j="http://www.javeline.com/2005/jml" 
xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Calc component</title>
        <script src="jpf_release.js"></script>
        <script src="jpf.calc.js"></script>
    </head>
    <body>
        <j:skin src="skins.xml" icon-path=""></j:skin>
 
        <j:calc />
    </body>
</html>

In next step we should create a skin file with 2 sections: Style and Presentation:

skin.xml file

<?xml version='1.0'?>
<j:skin xmlns:j="http://www.javeline.com/2005/jml" 
xmlns="http://www.w3.org/1999/xhtml">
    <j:calc name="calc">
        <j:style><![CDATA[
            .calc {
 
            }
        ]]></j:style>
        <j:presentation>
            <j:main container=".">
                <div class="calc"> </div>
            </j:main>
        </j:presentation>
    </j:calc>
</j:skin>

As we see, there is a default declaration of skin for calc component:

Default declaration of skin

<j:calc name="calc"></j:calc>

If we’ll create more skins we need to change name attribute and CSS class name of main container. If these component will can contain other components, name of main and child containers should be realy unique, because they won’t be overwriting classes of contained components. (Remember, space between DIV tags should be there, this is not a misstake).

Class name of main container

<div class="calc"> </div>

And finaly, javascript code for new component should look like:

jpf.calc = jpf.component(jpf.NODE_VISIBLE, function(){
    this.$draw  = function() {
        this.oExt = this.$getExternal("main", null, function(oExt) {
 
        });
    };
}).implement(jpf.Presentation);

We are getting a container from skin file, and we puting it to document body. Please check source (for example in firebug). You should have there an empty DIV element with class=”calc”.

Open Your skin file and add this in spreadsheet skin:

.spreadsheet .records div.empty {
    /* Here goes CSS code */
}

If You don’t see results, go to presentation section and check what class name have this element:

<j:empty caption=".">
    <div class="empty"> </div>
</j:empty>

If You still don’t see any changes, clear cache in Your browser.

I assume that user have installed Zend Framework and downloaded Javeline Platform.

First we need to define Datagrid:

<j:datagrid
    id      = "DG"
    options = "sort|size"
    top     = "150"
    left    = "10"
    right   = "10"
    height  = "150"
    model   = "mdlDG"
> 
    <j:bindings>
        <j:column caption="Username" select="@username" width="50%"></j:column>
        <j:column caption="Email" select="@email" width="50%"></j:column>
        <j:traverse select="user" />
    </j:bindings>
    <j:model id="mdlDG" >
        <data>
        </data>
    </j:model>
</j:datagrid>

If we want set some default rows, we can do this between data tags.

<data>
    <user username="Somebody" email="someone@gmail.com"></user>
</data>

Next, we need to define button, which will be used to refreshing datagrid.

<j:button left="10" top="320" width="70" tooltip="Refresh datagrid" onclick="refresh()">Refresh</j:button>

When user clicked this button, refresh() function will be called.

function refresh() {
    socket.getUsers();
}

To communicating with server we’ll use Javeline Teleport:

<j:teleport>
    <j:rpc id="socket" protocol="cgi">
        <j:method
            name    = "getUsers"
            url        = "users/index/"
            receive  = "afterGetUsers">
         </j:method>
     </j:rpc>
</j:teleport>

Here we have created one method called getUsers refers to backend (PHP script).

Zend Framework understand “users/index” as: controller -> users, action -> index, of course we can put there link to “normal” script, for example: /modules/users.php.

After all, afterGetUsers function will be called automaticaly. getUsers and afterGetUsers its a javascript functions.

afterGetUsers function will be used for reloading datagrid with new content

function afterGetUsers(data, state, extra) {
    if (state == jpf.SUCCESS) {
        DG.getModel().load(data);
    }
}

Creating backend

Backend will be realy simple. We need to create one controller

application/controllers/UsersController.php

<?php
class UsersController extends Zend_Controller_Action {
    public $_model;
 
    public function indexAction() {
        $resp    = $this->getResponse();
 
        $resp->setHeader('Content-Type', 'text/xml');
 
        $model = $this->_getModel();
        $this->view->users = $model->getUsers();
 
        $resp->setHttpResponseCode(200);
    }
 
    protected function _getModel() {
        if (null === $this->_model) {
            require_once dirname(__FILE__).'/../models/Users.php';
            $this->_model = new Model_Users();
        }
        return $this->_model;
    }
}

where we receive data from database agency model which have implemented function to get it.

Model (application/models/Users.php):

class Model_Users {
    protected $_table;
 
    public function getTable() {
        if (null === $this->_table) {
            require_once dirname(__FILE__) . '/DbTable/Users.php';
            $this->_table = new Model_DbTable_Users;
        }
        return $this->_table;
    }
 
    public function getUsers() {
        $table = $this->getTable();
        $select = $table->getUsers();
 
        return $table->fetchAll($select)->toArray();
    }
}

Database table (application/models/DbTable/Users.php):

class Model_DbTable_Users extends Zend_Db_Table_Abstract {
 
    protected $_name = 'oda_user';
 
    public function getUsers() {
        return parent::select();
    }
}

If You want read more about it, please look at: Zend Framework Quick Start – Create a Model and Database Table

In next step we need to create view file, which parse our data to XML.

View (application/views/users/index.phtml):

$data = $this->users;
$len = count($data);
 
$result = '<?xml version="1.0" encoding="UTF-8" ?>'."\n";
$result .= '<data>'."\n";
    if ($len > 0) {
        for($i = 0; $i < $len; $i++) {
            $result .= '<user username="'.$data[$i]["username"].'" email="'.$data[$i]["email"].'"></user>'."\n";
        }
    }
    else {
        //load empty row - You can leave this else
        $result .= '<user />'."\n";
    }
echo $result .= '</data>';

If You have problems with getting new data, press F9 button to open JPF Debugger (remember, You need to have included jpf_debug.js not jpf_release.js) and check request and received data.

Example – Requested and recived data

GL & HF with JPF.

P.S. If You don’t know what GL & HF means… check GL & HF meaning

This is very simple operation. Please open Your skin.xml file and find Spreadsheet skin.

Under:

.spreadsheet .records div {     
 }

add this:

.spreadsheet .records div.selected {
     //css code for selected row when spreadsheet is not focused
 }
.spreadsheetFocus .records div.selected {
     //css code for selected row when spreadsheet is focused
 }

That’s all.

Download files

View Example

Please open Your favourite text editor or other tool which You are using to write Your code and type:

Primary content of HTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Drag &amp; Drop</title>
    </head>
    <body>
 
    </body>
</html>

Between of BODY tags add DIV element (with its drag indicator) which will be moved.

<div>
    <div class="drag_indicator"></div>
</div>

In next order we are connecting style sheet and javascript file:

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dragdrop.js"></script>

Body of .css file:

div.drag_indicator {
    width            : 100px;
    height           : 20px;
    background-color : yellow;
}
 
#block1 {
    width            : 100px;
    height           : 100px;
    background-color : red;
    position         : absolute;
}

In this way we defined red block of 100×100 pixels dimension with absolute position relative to browser window and yellow block of 100×20 pixels dimension.

In file with .js extension we are writing code which catch 3 actions in document object:

• onmousedown – when user press mouse button
• onmousemove – when user move mouse cursor
• onmouseup – when user release mouse button

Please look, mouse movement will be supported only when mouse button is pressed, that’s why onmousemove event is captured in onmousedown event.

document.onmousedown = function(e) {
    e = (e || event);
 
    document.onmousemove = function(e) {
        e = (e || event);          
    }
};
 
document.onmouseup = function(e) {
};

Code which supports events in Internet Explorer browser

e = (e || event);

When mouse button is pressed “onmousedown” event is activated. In first order we catch clicked object:

var target = e.target || e.srcElement;

If it is a HTML element, we break a code because this is highest embed element.

if (target.tagName == 'HTML')
        return;

In next step, we are looking for “drag_indicator” class in clicked element. If it haven’t, we are checking its parent nodes as long as we’ll found it or we came to the top of elements tree.

while (target != document.body && (target.className || "").indexOf("drag_indicator") == -1) {
    target = target.parentNode || target.parentElement;
}

If correct element haven’t been found, we break a script

if ((target.className || "").indexOf("drag_indicator") == -1)
        return;

When correct element has been clicked (div with block_indicator css class) script will go further. Because we wants to move entire block, not only a indicator we needs to find out its object. block_indicator is a child of block, so we needs to get it as follow:

target = target.parentNode;

In nexts lines we credit cursor position at the moment of click to sx and sy variables. In dx and dy we’ll keeping alteration (default is 0) and in l and t current position of block element.

 var sx = e.clientX, sy = e.clientY,
      dx = 0, dy = 0,
      l = target.offsetLeft,
      t = target.offsetTop;

In Firefox browser we encount a inconvenience of moving block. We can solve this problem using that condition:

if (e.preventDefault) {
    e.preventDefault();
}

In this moment we have all initial values. Now time has come for implementing dragging.

When block is moving, this function is called

document.onmousemove = function(e) {
}

To change a block position we need to read mouse cursor current position (e.clientX, e.clientY) and subtract it from initial values simultaneously saving it to dx i dy.

dx = e.clientX - sx;
dy = e.clientY - sy;

Finaly, we need to set current position (last position + alteration) to block element.

target.style.left = (l + dx) + "px";
target.style.top  = (t + dy) + "px";

When mouse button will be release, following code will be ran:

document.onmouseup = function(e) {
    document.onmousemove = null;
};

In this way, we created cross-browser compatible code that is smaller than 1kB.

We know it good from Windows or OS X. This is a cloud which allows notifying user about some actions or conditions.

Example of Growl which will be displayed when user choose Christmas Eve date.

<j:notifier position="bottom-right" margin="10 10">
    <j:event
        when="{txtDrop.value == '2008-12-24'}"
        message="Marry christmas !"
        icon="Reindeer.png"
        onclick="alert('something')">
   </j:event>
</j:notifier>

Result:

In order to avoid any doubts, i’ll show Caldropdown component, from which this date is collected:

<j:caldropdown
    id="txtDrop"
    output-format="yyyy-mm-dd">
</j:caldropdown>

Please remember about closing all tags, because Safari browser mind this.

In order to change growl’s skin, it’s enough to set skin attribute. Prepared are three:

• Notifer (default)
• Smoke
• Bubble

<j:notifier
    skin="bubble">
    <j:event></j:event>
</j:notifier>

“Default” means that, we musn’t set skin attribute for choosing it.

For all events which its defined in this component we can set too:

• position – vertical and horizontal element’s start position, it can be changed in any time, default is “top-right”
  Możliwe wartości:
  • top-right or right-top – element is placed in top-right corner of browser window
  • top-left or left-top – element is placed in top-left corner of browser window
  • bottom-right or right-bottom – element is placed in bottom-right corner of browser window
  • bottom-left or left-bottom – element is placed in bottom-left corner of browser window
  • center-center – element is placed in the middle of browser window
• margin – it’s a free space around popup element, default is 10px
• columnsize – specify element width and cols width where element will be displayed, default is 300 px
• arrange – popup elements can be displayed in rows or columns, default is “vertical”
  • vertical – element will be displayed in rows
  • horizontal – element will be displayed in columns
• timeout – after the timeout has passed the popup will dissapear automatically, when the mouse hovers over the popup it doesn’t dissapear, default is 2 seconds

Example:

<j:notifier
    position="top-right"
    margin="20"
    timeout="1"
    arrange="horizontal"
    columnsize="200">
    <j:event></j:event>
</j:notifier>

For more details, please check documentation on www.ajax.org.

It’s a component designated for browsing various types of images. We are loading images using model in very easy way:

    <j:model id="mdlImages" save-original="true" >
        <slideshow>
            <picture
                src="stuff/pic13.jpg"
                thumb="stuff/pic13_small.jpg"
                title="Landscape">
           </picture>
            ...
        </slideshow>
    </j:model>

set path to image file, its thumbnail and discription. If we are loading images from database (that’s enough loaded PHP file as model, which will be generating an XML code) and we are not sure whether all images, its thumbnails or discriptions exists, we can set default values:

    <j:slideshow
        defaultimage="stuff/default_image.jpg"
        defaultthumb="stuff/default_thumb.jpg"
        defaulttitle="Some discription">
    </j:slideshow>

If dimension of image is bigger than allowed size, it will be limited to maximal allowed size.

Using mouse we can move it in any direction to see rest of image. That overrun is signalized to user with “four arrows” icon in the left bottom corner of viewport.

Under viewport we will find three buttons. Two extreme buttons allows us changing images to next and previous. Centered button runs slideshow mode, that is automatic image swiching with some delay. Interval could be set in delay parameter.

    <j:slideshow delay="5"></j:slideshow>

which is expressed in seconds (default is 5 seconds). When this mode is active, extreme buttons its hided and Play button is changed to Stop button, which allows disabling this mode. During image is loading, “Loading…” is displaying, which could be set in loadmsg parameter.

    <j:slideshow loadmsg="Loading..."></j:slideshow>

In the bottom of browser window discription and thumbnails bars are placed.

Discription bar shows two informations. Image position on list and its discription. Of course We could choose what we want to display using title attribute:

    <j:slideshow title="number+text"></j:slideshow>

Possible values:

• number – description contains only slide number on a list
• text – description contains only text
• number+text – description contains slide number on a list and text

Thumbnails bar serve to browsing entire content without necessity of opening each picture. Using arrows placed on begining and on end we could scroll entire content.

Parameter thumbheight define thumbnails bar height.

    <j:slideshow thumbheight="60"></j:slideshow>

Default is 50px. Dimensions less than 40px will need intervention into graphics, because some elements will be to big for displaying.

It’s possible to make choice with mousewheel, which is scrolling thumbnails bar and automaticly choose selected image and with left-right arrows from keyboard.