Apr
24
Dojo for Sling 101
filed under sling tutorial | posted by Lars Trieloff
My recent activity in the Sling community has been centered around SLING-301, an enhancement request that adds Dojo classes to Sling readily available for every application developer. You might ask: “What is so great about Dojo, that it needs to be added to Sling?”. Let me answer this with a short 101 on using Dojo with regard to Sling.
Dojo is a Javascript framework that can be used for client-side and server-side Javascript programming and will provide a rich programming environment for Javascript programmers providing browser abstractions, a persistent storage API, a Comet client library, a widget library, a template system, a module system that supports lazy loading, a query framework, Javascript language enhancements such as easy class-based inheritance, enhanced for loops and many more. From my personal experience the Dojo Toolkit is a very well-engineered piece of software with good modularization and proper use of abstractions, which might be a reason why large web applications such as Bloglines or AOL webmail are using Dojo as the primary Javascript framework. This use of abstractions and modularizations is what makes Dojo so easily integrateable with Sling.
As you might know, Sling comes with the Sling client library, a component that allows Javascript developers to access the underlying Java Content Repository by GETting a JSON representation of a node (or a tree of nodes) and POSTing updates to nodes through web forms. While this is convenient if you are developing small applications from scratch, you might want to use an existing Javascript Widget library instead to spare the hassle of implementing all widgets yourself and dealing with browser quirks. This is where Dojo comes into play. Dojo provides a large widget library (called Dijit) that contains components such as Combo-Boxes, Tree Controls or, in the (DojoX package) a complete Grid control that supports column and row spanning, sorting and customizable cell editors. All of these widgets use a modular Store API to access its data model and this Store API is independent of implementation, which allowed me to create specialized Stores that allow accessing the Content Repository in a transparent way. The Store API itself is modular, so there are widgets and stores that only require and provide read access, others have support for write access, others for identity and thus hierarchical storage. The Sling stores provide all of these aspects and can be used for all widgets as a consequence. In order to use the Store API, you have to follow this procedure:
a) Load the Dojo Bundle using the Sling console
b) Create an HTML page that imports the Dojo Javascript and CSS files:
<html>
<head>
<title>Dojo and Sling</title>
<style type="text/css">
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dojox/grid/_grid/tundraGrid.css";
</style>
<script type="text/javascript"
src="../../../dojo/dojo.js"
djConfig="isDebug: true,
parseOnLoad: true, usePlainJson: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Tree");
dojo.require("dojox.data.SlingNodeStore");
dojo.require("dojox.data.SlingPropertyStore");
dojo.require("dojox.grid._data.model");
</script>
</head>
<body class="tundra">
Create the data store. You can do this declarative by using following HTML snippet in your page:
<div dojoType="dojox.data.SlingNodeStore" url="/" jsId="nodeStore"></div>
Use the Data store, for instance in a Tree widget. Please note the query attribute of the div, which will take care that the tree only shows nodes with a primary type of either nt:folder or nt:file, making it a poor man’s file browser.
<div dojoType="dijit.Tree"
id="tree1" store="nodeStore"
query="{ query: { 'jcr:primaryType' : ['nt:folder',
'rep:root'] } }">
</div>
If you would like to learn more about Dojo, head to the Dojo homepage and do not forget to take a look at the Dojo Feature Explorer provided by Dojo Campus, a blog providing well written tutorials on various aspects of Dojo.
Related Posts
5 comments
This is cool! It's a creative use of Dojo Data's storage abstraction, coupled with the Dijit work. I take it Sling is an implementation of the Java Content Repository spec? BTW, you should wire this into Dojo Storage and Dojo Offline to make it work offline (I'm biased though, those are my modules ;)
Best,
Brad Neuberg
http://codinginparadise.org
Hi Brad, Dojo Storage support is on my mental roadmap, but I cannot make any promises. Sling can be seen as a layer on top of the Java Content Repository that translates JCR nodes into HTTP resources and representations. One of the out-of-the-box representations is JSON, which made implementing these modules so easy.
That's really cool. The tree works for me, but I get the following message in the content pane:
DEPRECATED: Tree: from version 2.0, should specify a model object rather than a store/query
Maybe there's an incompatibility issue?
Thanks for your interesting blog posts!
Andreas Hartmann
Following the tutorial at http://dojotoolkit.org/2008/02/24/dijit-tree-and-dojo-data-dojo-1-1-model, I changed it like this, and the warning is gone:
Oops, XML doesn't seem to be escaped.