What's the point?
Sling lets you drive your content repository from within a webpage by making an ajax request with jQuery. And it's easy.
How do we get started?
- create your sample application: create a folder "helloJquery" (e.g. with webDAV)
- download jQuery and copy it in your "helloJquery" folder
- create a file helloJquery.html with the content below and copy it in your "helloJquery"
- point your browser to http://localhost:8888/helloJquery/helloJquery.html. the next steps are there...
<html> <head> <title>Driving Sling with jQuery</title> <script type="text/javascript" src="jquery-1.2.6.js"></script> </head> <body> <h3>Driving Sling with jQuery</h3> <p>Start firebug, click on Console, then go multiline (click the little red arrow on the bottom bottom right)</p> <p>enter the code below, click on 'run'</p> <pre> $.post( "/content/*", { ':nameHint': 'myName', oneProperty: 'oneValue' }, function(data){ alert(data); } ); </pre> <p>Then <a href="http://localhost:7402/content/myname.html">view your new node</a></p> </body> <html>
What just happened?
We used jQuery to create a node named "mynode" below "content", with a property "oneProperty" and value "oneValue".
$.post( "/content/*", { ':nameHint': 'myName', oneProperty: 'oneValue' }, function(data){ alert(data); } );
If you are not familiar with jQuery, the code might look cryptic, but in 2 words: $.post creates the ajax post request, taking 3 parameters:
- "/content/*" as url, using SlingPostServlet to create a new jcr node under the /content node
- ':nameHint': "mynode", oneProperty: 'oneValue' is a key:pair list of request parameters.
- ':nameHint' is a command (starts with ':') that tells Sling to use "mynode" for the node name.
- oneProperty: sets one property under mynode
- the third (optional) parameter is a callback
It's the ajax equivalent of using this html form:
<form action="/content/*" method="POST"> <input type="hidden" name=":nameHint" value=""myName"> <input type="text" name="oneProperty" value="oneValue"> </form>
Cross-posted on my blog