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.
Best,
Brad Neuberg
http://codinginparadise.org
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
var nodeModel = new dijit.tree.TreeStoreModel({store: nodeStore,
query: { 'jcr:primaryType' : ['nt:folder', 'rep:root'] }});
[End of script section]
div dojoType="dojox.data.SlingNodeStore" url="/" jsId="nodeStore">
I'd like to use dojo in Sling, but I have two questions:
1) Your script imports for the dojo js files use the paths "../../../dojo[dijit][dojox/. Why is that? How would I know to use those specific paths if I hadn't seen your example?
2) If I wanted to update the dojo bundle to use a different version, or perhaps create my own bundle, would I need to use specific paths for the js files in the bundle in order for your code, above, to work?
I just want to clarify my previous comment. The paths you used to reference the dojo script files are relative. My question is, relative to what? Do I have to store my html files in a particular node in the workplace for this to work?
you should definitely post your questions to the sling-dev mailing list, as there has been a lot of progress on the Sling-Dojo-integration (update to Dojo 1.2, using DojoRestStore) and I have to admit that I am a bit out of touch with the example code.