Tuesday, June 17th, 2008
Category: Dojo
James Burke of AOL announced that AOL has released Dojo modules which wrap AOL's Web AIM API. This is a very big announcement as the Web AIM API lets developers incorporate core AIM functionality into any web page including the ability to sign on, send and receive IMs, and obtain a user's Buddy List.
My employer, AOL, just open-sourced some Dojo modules that include a wrapper for the Web AIM API and UI widgets for user presence, the buddy list and sending and receiving instant messages (IMs).
The modules are open source versions of the modules used by AOL Webmail, so they have history in a real product. The modules are designed for Dojo 1.1 and above.
This has been released as part of the AIMDojo project with version 1.0 immediately available for download. James has included demos of Dojo and WEB AIM integration.
Wednesday, June 11th, 2008
Category: Dojo
The team at Dojo have been really working hard to improve their documentation and put more information in the hands of Dojo developers. Between DojoCampus.org and the SitePen blog, they've really come a long way to providing solid education material for the Dojo community.
Normally, the Ajaxian Featured Tutorial consists of one really good educational piece but two really awesome tutorials were recently posted and I decided to give Ajaxian readers a two-fer:
Tutorial 1: Dojo Drag and Drop, Part 1: dojo.dnd
In the first part of this series, Revin Guillen takes you through the ins-and-outs of Dojo's drag and drop API named dojo.dnd.
What I really like about Revin's tutorial is his extensive code samples that reinforce the concepts. His demo code on building a drop handler, for example, is very extensive and concise allowing the reader to easily understand how to create the drop handler:
JAVASCRIPT:
-
-
// calculate simple totals in the wishlist and cart titles
-
var setupCartTitle = function(){
-
var title = "Shopping Cart";
-
var cartLength = cart.getAllNodes().length;
-
if(cartLength){
-
var items = cartLength> 1 ? " items" : " item";
-
title += " (" + cartLength + items + ")";
-
}
-
cartPane.setTitle(title);
-
};
-
var setupWishlistTitle = function(){
-
var title = "Wishlist";
-
var wishlistLength = wishlist.getAllNodes().length;
-
if(wishlistLength){
-
var items = wishlistLength> 1 ? " items" : " item";
-
title += " (" + wishlistLength + items + ")";
-
}
-
wishlistPane.setTitle(title);
-
};
-
dojo.connect(cart, "onDndDrop", setupCartTitle);
-
dojo.connect(wishlist, "onDndDrop", setupWishlistTitle);
-
Tutorial 3: A Beginner’s Guide to Dojo Charting, Part 1 of 2
Next up Doug McMaster teaches you how to leverage Dojo's charting capability:
In this two part guide, we look at how easy it is to get Dojo Charting up and running, and then examine in greater detail the options available for different looks for your charts. Today in Part 1, we start with a basic example and then examine all the options available in defining your plot type. Part 2 will cover the options available in defining the axes and data sets for your charts.
Doug explains how to easily create charts by customizing the available 2D charts included in Dojo charting API. Code as simple as:
HTML:
-
-
-
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true"></script>
-
-
-
-
dojo.require("dojox.charting.Chart2D");
-
-
makeCharts = function(){
-
-
var chart1 = new dojox.charting.Chart2D("simplechart");
-
chart1.addPlot("default", {type: "Lines"});
-
chart1.addAxis("x");
-
chart1.addAxis("y", {vertical: true});
-
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
-
chart1.render();
-
-
};
-
-
dojo.addOnLoad(makeCharts);
-
-
</script>
-
</head>
-
-
<div id="simplechart" style="width: 250px; height: 150px;"></div>
-
</body>
-
</html>
-
produces a nice chart like this:
Wednesday, June 4th, 2008
Category: Dojo, JavaScript, Library
Nexaweb has released a new product that build on Dojo, dojo.E:
dojo.E provides developers with the ability to use an XML based markup language to add in their Ajax behaviors. Markup whether — XML, HTML or CSS — simplifies development by allow developers to convey in simple text format what they would otherwise need to convey in code. Markup also provides a great abstraction layer that separates the implementation from the usage.
This release, which is an Apache style open source project itself, consists of two pieces:
dojo.E Markup
dojo.E Markup allows developers to describe their dojo components using a simple markup language that translates directly into dojo classes. For example declaring a button in dojo would be done one of two ways;
HTML:
-
-
<div dojoType=â€dijit.form.Button†label=â€Hello, worldâ€/>
-
Using JavaScript new dijit.form.Button(htmlElement, “Hello, Worldâ€);
dojo.E Markup provides a third way that allows developers to describe the button as follows:
HTML:
-
-
<script type=“text/xml†dojoType=“dojoe.XmlScriptâ€>
-
<ui xmlns:dijit=“dijitâ€>
-
<dijit :form.Button label=“Hello, World!â€
-
onclick=“alert(’It works!’)â€/>
-
</ui>
-
</script>
-
dojo.E Runtime
The runtime provides additional markup that makes modifying the HTML DOM or the dojo Components easier.
XML:
-
-
<xm :xmodify document=â€uiâ€>
-
</xm><xm :append select=â€//widget.SortListâ€>
-
<li>{0}</li>
-
</xm>
-
-
The xModify syntax above tells the dojo.E runtime to append a “
{0}
†tag to the dojo SortList component. The select statement in this case is a XPath statement and not a CSS selector. In the actual sample this snippet above is wrap with a “Macro†which allows the developer to parameterize the “{0}†and execute the xModify snippet when the developer clicks the “Add†button.
You can play with this in a live editor that shows samples such as a todo list:
XML:
-
-
<declarations>
-
<dojoe :Macro id="add" xmlns:dojoe="dojoe">
-
<![CDATA[
-
<xm:xmodify xmlns="html" xmlns:xm="dojoe" xmlns:dijit="dijit" document="ui">
-
<xm :append select="//widget.SortList ">
-
<li>{0}</li>
-
</xm>
-
-
]]>
-
</dojoe>
-
</declarations>
-
<ui xmlns:dijit="dijit" xmlns:dojox="dojox" xmlns="html">
-
<div id="input_container">
-
<span>ToDo:</span>
-
<input style="width: 184px; margin-left:3px;" id="textbox" type="text" class="input_tbx" value="Item"/>
-
<input class="button" type="button" value="Add" onclick="dojoe.containers.macro.get('add').execute(document.getElementById('textbox').value);" />
-
</div>
-
<div id="list_container">
-
<dojox :widget.SortList title="SortList From Markup" style="width:300px; height:150px;">
-
<li>A. Download and Install the dojo.E</li>
-
<li>B. Build dojo.E Application</li>
-
<li>C. Profit</li>
-
</dojox>
-
</div>
-
</ui>
-
