Links
Archives
Google Search
Syndicate This Blog
Calendar
|
September '10 | |||||
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | |||
Saturday, June 14. 2008
Creating Custom Widget in Dojo - Part 2: Templated Widgets
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._Wigetbut an array comprising ofdijit._Widgetanddijit._Templated. - It contains two properties -
templateStringandtemplatePath.
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 bothdijit._Widgetanddijit._Templatedhave the methodbuildRendering, the final definition that will survive is that ofdijit._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
spanwhich comprises of the anchor element. - The
hrefattribute of the anchor element has the value as that of the propertyhrefof the objectedujini.Anchor(Syntax${href}). - The content within the anchor element has the value as that of the property
textof theedujini.Anchorobject. - Note that we have still not made use of
targetandtitleproperties. 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.
Quicksearch
Yahoo! Groups
Categories
Blog Administration
Technorati
Google Analytics
Powered by
Valtrex. Valtrex als.
Tracked: Aug 07, 06:35