|
Getting Started for Developers
You are reading the CRX 2.1 version of Getting Started for Developers.
This documentation is also available for the following versions:
CRX 2.3
CRX 2.2
Note
This information is intended as an introduction to developing with CRX and assumes previous experience in development.
Introductions to CRXDE and CRXDE Lite
CRXDE Lite is embedded in CRX and enables you to perform standard development tasks in the browser. See Developing with CRXDE Lite for an introduction.
CRXDE is the Eclipse based version, a standalone product that works with CRX and offers additional functionality; for example, debugging and code-completion.
The example Developing a Simple Blog uses CRXDE Lite so will introduce certain basic tasks as well.
Learning by doing is often an efficient method - here a very simple example highlights some central issues and is followed by more detailed information (and links) about the concepts.
This example is intended as basic introduction to developing with CRX (together with CRXDE Lite). We will develop a simple Blog covering:
Note
The example uses a standard installation at:
http://localhost:7402/
If you have installed CRX at another location, then substitute this with:
http://<server-name>:<port-number>/
for example http://localhost:4502/
Note
This is a very simple blog, for real life usage extension would be necessary.
For ease of usage we are going to create the entire blog under one page.
Using CRXDE Lite, navigate to /content in the repository.
Select /content then using the context menu (usually the right mouse button) select Create... followed by Create Node.... The dialog that opens allows you to specify:
- Name: as required, for example myBlog.
- Type: select nt:unstructured
-
Select the new node myBlog.
Create a new property:
- Name: title
- Type: String
- Value: as required; for example, My Blog
Click Add (the green plus icon) to add the property to the list.
Create another new property:
- Name: body
- Type: String
- Value: as required; for example, Mine, all mine.
Click Add (the green plus icon)to add the property to the list.
-
Creating Individual Pages for each Post
Under the root page we will create a (self-imposed) structure for the individual posts. As this is a chronological blog we can use a simple structure based on dates.
Under the node myBlog create a new node:
- Name: 2010
- Type: nt:unstructured
- Properties:
- Name: title
- Type: String
- Value: 2010
- Name: body
- Type: String
- Value: All entries for 2010.
Under the node 2010 create a new node:
- Name: March
- Type: nt:unstructured
- Properties:
- Name: title
- Type: String
- Value: March 2010
- Name: body
- Type: String
- Value: All entries for March 2010.
Under the node March create a new node:
- Name: 01March2010
- Type: nt:unstructured
- Properties:
- Name: title
- Type: String
- Value: 1st March 2010
- Name: body
- Type: String
- Value: Sunny.<br>First day of meteorological spring.
Under the node March create another new node:
- Name: 02March2010
- Type: nt:unstructured
- Properties:
- Name: title
- Type: String
- Value: 2nd March 2010
- Name: body
- Type: String
- Value: Cloudy with sunny spells.
-
Rendering your Blog as HTML Pages
How a resource is rendered depends on the extension and selector used. These are used to select the script used for the rendering.
To render a resource as HTML the resource is selected with the extension .html, this then uses the script html.jsp. As we have not explicitly defined the sling:resourceType property on any of our nodes, the script will be taken from /apps/myBlog (the path is derived from the content path /content/myBlog).
Displaying the title and body
As a basic example we want to display the contents of the two properties title and body.
Under the node /apps create a new node:
- Name: myBlog
- Type: nt:folder
Select /apps/myBlog, then using the context menu select Create... followed by Create File.... The dialog that opens allows you to specify:
Click OK. The file is created and opened for edit in the right pane.
Copy the following code to html.jsp, then click Save All:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><% %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"><% %>
<%@page session="false"%> <%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%> <sling:defineObjects/>
<%@ page import="javax.jcr.Repository, javax.jcr.Session, javax.jcr.SimpleCredentials, javax.jcr.Node, java.net.URLEncoder, java.util.List, java.util.Iterator, javax.jcr.Value, javax.jcr.RepositoryException"%>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title><%= currentNode.getProperty("title").getString() %></title> </head> <body> <div> <h1><%= currentNode.getProperty("title").getString() %></h1> <br> <%= currentNode.getProperty("body").getString() %> </div> </body> </html>
From a browser access the node 2010 as html using:
http://localhost:7402/content/myBlog/2010.html
The tab name will show the contents of the property title, with the page content showing the contents of both the properties title and body:
You can also select the other nodes:
- http://localhost:7402/content/myBlog.html
- http://localhost:7402/content/myBlog/2010/March.html
- http://localhost:7402/content/myBlog/2010/March/01March2010.html
- http://localhost:7402/content/myBlog/2010/March/02March2010.html
All nodes will be rendered using the same script.
Showing Links to Child Pages
To allow a visitor to navigate through the blog, for each post we can provide links to all child pages.
Replace the contents of html.jsp with the following code; again click Save All:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><% %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"><% %>
<%@page session="false"%> <%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%> <sling:defineObjects/>
<%@ page import="javax.jcr.Repository, javax.jcr.Session, javax.jcr.SimpleCredentials, javax.jcr.Node, javax.jcr.NodeIterator, java.net.URLEncoder, java.util.List, java.util.Iterator, javax.jcr.Value, javax.jcr.RepositoryException"%>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title><%= currentNode.getProperty("title").getString() %></title> </head> <body> <div> <h1><%= currentNode.getProperty("title").getString() %></h1> <br> <%= currentNode.getProperty("body").getString() %> <br><br> <% NodeIterator ni = currentNode.getNodes();
while (ni.hasNext()) { Node nii = ni.nextNode(); String printNodePath = nii.getPath(); String printNodeTitle = nii.getProperty("title").getString(); %> <a href="<%= printNodePath %>.html"><%= printNodeTitle %></a> <br> <% } %> </div> </body> </html>
This adds the following to the script:
- the page imports needed to use node iterators
- the instructions to loop through all child nodes and show the title as a link
<br><br> <% NodeIterator ni = currentNode.getNodes();
while (ni.hasNext()) { Node nii = ni.nextNode(); String printNodePath = nii.getPath(); String printNodeTitle = nii.getProperty("title").getString(); %> <a href="<%= printNodePath %>.html"><%= printNodeTitle %></a> <br> <% } %>
From a browser access the node 2010 as html, again using:
http://localhost:7402/content/myBlog/2010.html
The page will have been updated with links to the child nodes:
You can also select the other nodes:
- http://localhost:7402/content/myBlog.html
- http://localhost:7402/content/myBlog/2010/March.html
- http://localhost:7402/content/myBlog/2010/March/01March2010.html
- http://localhost:7402/content/myBlog/2010/March/02March2010.html
Links to child nodes will be shown where available.
Adding, and linking to a CSS file will impose a predefined style across all pages.
Select /apps/myBlog, then using the context menu select Create... followed by Create File.... The dialog that opens allows you to specify:
Click OK to create the file; it will be opened for edit in the right pane.
Copy the following to style.css then click Save All:
body { margin-bottom:1px; font-family:georgia,times; color: red; }
a { padding: 5px; color: blue; }
a .small { padding: 2px; border: none; }
div { padding:5px; }
h1 { font-size: 150%; border-bottom: solid grey 1px; color: green; }
Add the following line to the <head> section of html.jsp; again click Save All:
<link rel="stylesheet" href="/apps/myBlog/style.css" type="text/css">
The script will now contain:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><% %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"><% %>
<%@page session="false"%> <%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%> <sling:defineObjects/>
<%@ page import="javax.jcr.Repository, javax.jcr.Session, javax.jcr.SimpleCredentials, javax.jcr.Node, javax.jcr.NodeIterator, java.net.URLEncoder, java.util.List, java.util.Iterator, javax.jcr.Value, javax.jcr.RepositoryException"%> <html> <head> <link rel="stylesheet" href="/apps/myBlog/style.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title><%= currentNode.getProperty("title").getString() == null ? "Title" : currentNode.getProperty("title").getString() %></title> </head> <body> <h1><%= currentNode.getProperty("title").getString() == null ? "Title" : currentNode.getProperty("title").getString() %></h1> <div class="body"> <br> <%= currentNode.getProperty("body").getString() == null ? "Body" : currentNode.getProperty("body").getString() %> <br><br> <% NodeIterator ni = currentNode.getNodes();
while (ni.hasNext()) { Node nii = ni.nextNode(); String printNodePath = nii.getPath(); String printNodeTitle = nii.getProperty("title").getString(); %> <a href="<%= printNodePath %>.html"><%= printNodeTitle %></a> <br> <% } %> </div> </body> </html>
Now when you access the node 2010 from a browser using:
http://localhost:7402/content/myBlog/2010.html
The style will have changed, in particular the fonts and colors used:
You can also select the other nodes:
- http://localhost:7402/content/myBlog.html
- http://localhost:7402/content/myBlog/2010/March.html
- http://localhost:7402/content/myBlog/2010/March/01March2010.html
- http://localhost:7402/content/myBlog/2010/March/02March2010.html
The same styles are applied to all pages.
To increase the stability of the rendering script you can introduce some basic error handling:
- check that the properties exist
- check that the properties are not null
To test the error handling you can create a new node under /content/myBlog/2010:
- Name: April
- Type: nt:unstructured
Do not create any properties for this node.
-
Access the node April from a browser using:
http://localhost:7402/content/myBlog/2010/April.html
An error message is seen as the script tries to access properties that do not exist:
title (500)
The requested URL /content/myBlog/2010/April.html resulted in an error in /apps/myBlog/html.jsp. Exception:
javax.jcr.PathNotFoundException: title
Now replace the entire contents of html.jsp with the following code and click Save All.
This:
- Sets default texts, to be used if the properties do not exist.
- Tests to confirm that the properties title and body do exist.
- Tests all properties and paths for null; if the value is null a standard text is taken for display.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><% %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"><% %>
<%@page session="false"%> <%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%> <sling:defineObjects/>
<%@ page import="javax.jcr.Repository, javax.jcr.Session, javax.jcr.SimpleCredentials, javax.jcr.Node, javax.jcr.NodeIterator, java.net.URLEncoder, java.util.List, java.util.Iterator, javax.jcr.Value, javax.jcr.RepositoryException"%>
<html> <head> <link rel="stylesheet" href="/apps/myBlog/style.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <% String currentNodeTitle = "Title Missing"; String currentNodeBody = "Body Missing"; if (currentNode.hasProperty("title")) { currentNodeTitle = currentNode.getProperty("title").getString() == null ? "Title Missing" : currentNode.getProperty("title").getString(); } if (currentNode.hasProperty("body")) { currentNodeBody = currentNode.getProperty("body").getString() == null ? "Body Missing" : currentNode.getProperty("body").getString(); } %> <title><%= currentNodeTitle %></title> </head> <body> <h1><%= currentNodeTitle %></h1> <div class="body"> <br> <%= currentNodeBody %> <br><br> <% NodeIterator ni = currentNode.getNodes();
while (ni.hasNext()) { Node nii = ni.nextNode(); String printNodePath = (nii.getPath() == null ? "Path" : nii.getPath()); String printNodeTitle = "Title missing"; if (nii.hasProperty("title")) { printNodeTitle = nii.getProperty("title").getString() == null ? "Title Missing" : nii.getProperty("title").getString(); } %> <a href="<%= printNodePath %>.html"><%= printNodeTitle %></a> <br> <% }
%> </div> </body> </html>
When you now access the node April from a browser using:
http://localhost:7402/content/myBlog/2010/April.html
The default texts can be seen for the properties that do not exist on this node:
Using WebDAV copy a (small) graphic file into /apps/myBlog. Call it myBlog.png.
Insert the following line immediately under the <body> line in the script:
<a href="/content/myBlog.html"><img src="/apps/myBlog/myBlog.png" width="80px" height="60px" border="0" alt="myBlog" /></a>
When you access any of the nodes in the browser the image appears. The underlying link will take you back to /content/myBlog.html.
Multiple Renderings of the same Page
As CRX uses Sling, the same principles of URL decomposition and Request Processing apply.
Certain renderings are available as standard with CRX:
XML The XML format can be accessed with the extension *.xml; for example:
- http://localhost:7402/content/myBlog/2010.xml
− <_x0032_010 jcr:primaryType="nt:unstructured" body="All entries for 2010." title="2010"> − <March jcr:primaryType="nt:unstructured" body="All entries for March 2010." title="March 2010"> <_x0030_1March2010 jcr:primaryType="nt:unstructured" body="Sunny<br>First day of meteorological spring." title="1st March 2010"/> <_x0030_2March2010 jcr:primaryType="nt:unstructured" body="Cloudy with sunny spells." title="2nd March 2010"/> </March> <April jcr:primaryType="nt:unstructured"/> </_x0032_010>
JSON The JSON format can be accessed with the extension *.json or *.infinity.json; for example:
- http://localhost:7402/content/myBlog/2010.json
to show details of the current node only
{"title":"My Blog","body":"Mine, all mine.","jcr:primaryType":"nt:unstructured"}
- http://localhost:7402/content/myBlog/2010.infinity.json
to show details of the current node and all nodes underneath
{ "title":"My Blog", "body":"Mine, all mine.", "jcr:primaryType":"nt:unstructured", "2010":{ "title":"2010", "body":"All entries for 2010.", "jcr:primaryType":"nt:unstructured", "March":{ "title":"March 2010", "body":"All entries for March 2010.", "jcr:primaryType":"nt:unstructured", "01March2010":{ "title":"1st March 2010", "body":"Sunny<br>First day of meteorological spring.", "jcr:primaryType":"nt:unstructured" }, "02March2010":{ "title":"2nd March 2010", "body":"Cloudy with sunny spells.", "jcr:primaryType":"nt:unstructured" } }, "April":{ "jcr:primaryType":"nt:unstructured" } }, "comment":{ "name":"me", "comment":"my comment.", "jcr:primaryType":"nt:unstructured" } }
Creating a Customized Rendering
To display a (more easily) printable version of your HTML page you can use the selector print together with the extension html:
http://localhost:7402/content/myBlog/2010.print.html
This will select a script:
- print.html.jsp - if available
- html.jsp - if print.html.jsp is not available
Select /apps/myBlog then using the context menu select Create... followed by Create File.... The dialog that opens allows you to specify:
print.html.jsp will be opened for edit in the right pane. Copy the following code to the new file, then click Save All:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><% %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"><% %>
<%@page session="false"%> <%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%> <sling:defineObjects/>
<%@ page import="javax.jcr.Repository, javax.jcr.Session, javax.jcr.SimpleCredentials, javax.jcr.Node, javax.jcr.NodeIterator, java.net.URLEncoder, java.util.List, java.util.Iterator, javax.jcr.Value, javax.jcr.RepositoryException"%>
<html> <head> <link rel="stylesheet" href="/apps/myBlog/style.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <% String currentNodeTitle = "Title Missing"; String currentNodeBody = "Body Missing"; if (currentNode.hasProperty("title")) { currentNodeTitle = currentNode.getProperty("title").getString() == null ? "Title Missing" : currentNode.getProperty("title").getString(); } if (currentNode.hasProperty("body")) { currentNodeBody = currentNode.getProperty("body").getString() == null ? "Body Missing" : currentNode.getProperty("body").getString(); } %> <title><%= currentNodeTitle %></title> </head> <body> <h1><%= currentNodeTitle %></h1> <div class="body"> <br> <%= currentNodeBody %> <br><br> <% NodeIterator ni = currentNode.getNodes();
while (ni.hasNext()) { Node nii = ni.nextNode(); String printNodePath = (nii.getPath() == null ? "Path" : nii.getPath()); String printNodeTitle = "Title missing"; if (nii.hasProperty("title")) { printNodeTitle = nii.getProperty("title").getString() == null ? "Title Missing" : nii.getProperty("title").getString(); } %> <a href="<%= printNodePath %>.html"><%= printNodeTitle %></a> <br> <% } %> <br><br> <form> <input type="button" value=" Print this page " onclick="window.print();" /> </form> </div> </body> </html>
Now you can access the node 2010 from a browser using:
http://localhost:7402/content/myBlog/2010.print.html
Adding the print selector to the uri presents you with a slightly different rendering of the page:
- the image is not displayed
- a print button is provided at the bottom of the page
You can also select the other nodes:
- http://localhost:7402/content/myBlog.print.html
- http://localhost:7402/content/myBlog/2010/March.print.html
- http://localhost:7402/content/myBlog/2010/March/01March2010.print.html
- http://localhost:7402/content/myBlog/2010/March/02March2010.print.html
The same rendering is applied to all pages.
Note
If you delete, or rename, print.html.jsp and reselect http://localhost:7402/content/myBlog/2010.print.html it will be rendered using html.jsp.
Allowing visitors to your site to post information can be achieved with forms.
Select /apps/myBlog, then using the context menu select Create... followed by Create File.... The dialog that opens allows you to specify:
comment.html will be created and opened for edit in the right pane. Copy the following code to the new file, then click Save All:
<html> <head><title>Simple write example</title> <link rel="stylesheet" href="/apps/myBlog/style.css" type="text/css"> </head> <body> <h1>Simple Write</h1> <!-- post your form to the content repository --> <form action="/content/myBlog/comment" method="POST"> <!-- title --> <h2>Name</h2> <input type="text" name="name" />
<!-- description --> <h2>Comment</h2> <textarea rows="5" name="comment"></textarea> <p><input type="submit" value="Submit"></p> </form><br> <div class="note"> This page does not use any custom client-side or server-side code to create content, the above HTML form is sufficient for this. </div> </body> </html>
Add the following line to your html.jsp script. Insert it just before the final </div>.
<br> <a href="/apps/myBlog/comment.html">Comment</a>
Select a page, for example http://localhost:7402/content/myBlog/2010.html.
A new link Comment will be shown:
Click on Comment, a new page will open allowing you to submit your name and a comment.
Enter your Name and a Comment then click Submit.
Using CRXDE Lite navigate to /content/myBlog. A new node comment has been created, with two properties name and comment, holding the details you have just entered.
Creating a Web Syndication Feed
A web syndication feed can be added. The following is a very simple example to show the general principles.
To illustrate the use of other scripting languages we will use ESP for this example.
Select /apps/myBlog, then using the context menu select Create... followed by Create File.... The dialog that opens allows you to specify:
rss.esp will be created and opened for edit in the right pane. Copy the following code to the new file, then click Save All:
<?xml version="1.0"?> <rss version="2.0"> <channel> <% var currentNodeTitle = "Title Missing"; var currentNodeBody = "Body Missing"; var currentNodePath = currentNode.getPath(); if (currentNode.hasProperty("title")) { currentNodeTitle = currentNode.getProperty("title").getString(); } if (currentNode.hasProperty("body")) { currentNodeBody = currentNode.getProperty("body").getString(); } %> <item> <title><%= currentNodeTitle %></title> <description><%= currentNodeBody %></description> <link>http://localhost:7402<%= currentNodePath %>.html</link> </item> </channel> </rss>
You can now select the feed for a page using the extension *.rss; for example, http://localhost:7402/content/myBlog/2010.rss:
This will show:
- the page title; this also functions as a link to the page content itself
- the page body content
Access Control for developers is covered under Access Rights.
Additionally you can read how access rights are administered in CRX - together with user and group accounts.
A Jackrabbit based document management system with dynamic ACLs is also discussed under The ACL is Dead.
As CRX is a JCR repository, node types are fully documented under 3.7 Node Types of the JCR 2.0 specification.
WebDAV access gives you direct access to the content repository through your desktop. You can access the contents of the respository as with a standard file-system, using an Explorer or Finder window.
Files dropped into the repository through the WebDAV connection are automatically full-text indexed and can be searched with the standard search interfaces through the standard Java APIs.
OSGi is a fundamental element in the technology stack of CRX. It is used to control the composite bundles of CRX and their configuration.
OSGi "provides the standardized primitives that allow applications to be constructed from small, reusable and collaborative components. These components can be composed into an application and deployed".
OSGI for beginners also provides an introduction to the general concepts, while OSGi at dev.day covers many aspects.
For CRX this allows easy management of bundles as they can be stopped, installed, started individually. The interdependencies are handled automatically. Each OSGi Component (see the OSGi Specification) is contained in one of the various bundles. For CRX you can manage the configuration settings for such bundles by either:
- configuring content-nodes in the repository (recommended).
- using the Apache Felix Web Console.
The CQ documentation covers OSGi configuration, again these principles can be applied to CRX and its bundles.
CRX is built using Sling, a Web application framework based on REST principles that provides easy development of content-oriented applications. Sling is based upon OSGi and uses a JCR repository, such as Apache Jackrabbit, or Day's CRX, as its data store.
- Sling Request Processing is covered in the CQ documentation - these general principles are the same and can be applied to CRX too.
- dev.day covers many Sling details of interest to a developer.
- Apache Con also archives various presentations including:
- Embrace OSGi - A Developer's Quickstart
- Rapid JCR applications development with Sling
As Sling is based upon OSGi, bundles are an integral concept.
The following locations contain information and examples about creating and deploying bundles:
Custom CQ5 Workflow that integrates Twitter and Jabber illustrates an example of working with third party libraries.
File Uploads in Sling (JCR EventListeners) illustrates observation listeners.
The Apache Sling Scheduler enables you to easily schedule jobs within your application. Jobs can be executed at a specific time, regularly at a given period or at the time given by a cron expression by leveraging the Sling scheduler service.
A coding example is also given on dev.day.
The following introduce services:
Summary of Information Sources...
Some have been referenced above, but the following are all valuable sources of information:
|
|
Note: Customers with DayCare user accounts need to create a new account for use on day.com.