Presentation held at Web Montag Stockholm, March 2008. Introduction of JCR, Sling and the µjax AJAX-based access layer to a content repository. The presentation includes the demo of the µjax Dojo integration.

1. µjax in 30
minutes
lars.trieloff@day.com
weblogs.goshaky.com/weblogs/lars

2. µjax in 30
minutes
JCR m
eets
AJAX
lars.trieloff@day.com
weblogs.goshaky.com/weblogs/lars

3. Lars Trieloff
• Product Manager at Day
• Author, Blogger, Open
Source Code
• Apache Cocoon
• Mindquarry
• Goshaky
• DAX

4. µjax
content repository vs. ajax

5. µjax
content repository vs. ajax
What’s JCR (elevator pitch)
Introducing µjax
silve
r

6. µjax
content repository vs. ajax
What’s JCR (elevator pitch)
Introducing µjax
silve
r

8. What’s JCR?

9. What’s JCR?
“The API should be a standard,
implementation independent, way
to access content bi-directionally
on a granular level to a
content repository.”

10. What’s JCR?
“The API should be a standard,
implementation independent, way
to access content bi-directionally
on a granular level to a
content repository.”
?

11. What’s JCR?
“The API should be a standard,
implementation independent, way
to access content bi-directionally
on a granular level to a
content repository.”
?

12. Best of both worlds.
database fi les yste m
content repositor y

13. Best of both worlds.
database fi les yste m
hier-
integ archi
rity structu
re es
read streams
tx query write locking
access
control
multi-
value g
un-
versionin
structured “full- sort obser-
text” order vation
content repositor y

14. Some known JCR Applications

15. Some known JCR Applications
Fast
Enterprise
BEA Portal Oracle Portal Interface 21 Search
Sun JBoss Portal
OpenPortal Day Spring
Communique Framework
DAM Day
magnolia WCMS Communique
Apache Sling
Mindquarry Collab
Alfresco ECMS
Collaboration Apache Tapestry
QSLabs Day
Apache Compliance Communiqué
Cocoon WCMS IBM FileNet
Artifactory medic-2-medic WebSiteManager
Apache James Maven Proxy mapofmedicine
Exo
ECMS Platform TYPO3
GX WebManager v5.0 WCM
InfoQ
Online Hippo Liferay
Nuxeo ECM Community CMS Enterprise Portal
Jahia Sakai
Percussion Framework E-learning
Rhythmix QuickWCM Sourcemix
WCMS Lutece Sourcemix
Portal

16. µjax
content repository vs. ajax
What’s JCR (elevator pitch)
Introducing µjax
silve
r

17. µjax
content repository vs. ajax
What’s JCR
Introducing µjax

18. µjax
content repository vs. ajax
What’s JCR
Introducing µjax
silve
r

19. Introducing µjax
Repository based AJAX

20. Introducing µjax
JCR

21. Introducing µjax
JCR

22. Introducing µjax
JCR

23. Introducing µjax
JCR
the other side

24. Introducing µjax
JCR
the other side
de
ve
h a lope
t r
“i want to build webapps”
a rs )
me ( l

25. Introducing µjax
JCR
the other side
de
ve
h a lope
t r
“i want to build webapps”
a rs )
me ( l

26. Introducing µjax
JCR
the other side
de
ve
h a lope
t r
“i want to build webapps”
a rs )
me ( l

27. Introducing µjax
JCR
de
ve
h a lope
t r
a rs )
me ( l silve
r
µjax

28. Introducing µjax
JCR
de
ve
h a lope
t r
a rs )
me ( l silve
r
µjax
very simple
projection:
fits the bill

29. Introducing µjax
JCR
de
ve
h a lope
t r
a rs )
me ( l silve
r
µjax
very simple
projection: “usecas
fits the bill driven
e”

30. Introducing µjax
I browser & ujax.js
reading: json & resource GET’s
writing: form-POST & GET
s s
J2EE Web
Server
3
2
Browser I
2 UjaxServlet.java
translating requests
to JCR calls
3 JCR Compliant
Content Repository

31. Introducing µjax
I browser & ujax.js
reading: json & resource GET’s
writing: form-POST & GET
s s
J2EE Web
Server
3
2
Browser I
very simple js A 2 UjaxServlet.java
translating requests
read content, FoPI to to JCR calls
rms
to write conten
t 3 JCR Compliant
Content Repository

32. Introducing µjax
I browser & ujax.js
reading: json & resource GET’s
writing: form-POST & GET
s s
J2EE Web
Server
3
2 handles all the h
particularly se
eavy lifting,
curity
Browser I 16 t
ons
very simple js A 2 UjaxServlet.java
translating requests
read content, FoPI to to JCR calls
rms
to write conten
t 3 JCR Compliant
Content Repository

33. Getting ready...
download a
nd install test & mount as a drive

34. hello, world.
tle>
world</ti
ello,
<html> itle>µjax:h
<t
<head> /h2>
</he ad> o, world<
<h 2>hell
<body>
>
</body
>
</html
drag, drop, done
http://localhost:7402/
firststeps/0_hello.htm
l

35. simple write example
tle>
examp le</ti
write
simple
<html> itle>µjax: OSTquot;>
<hea d><t hod=quot;P
y> aquot; met
d><bod ion=quot;/mydat
</hea m act
or -->
<f <!-- title > equot; />
/h2
<h2>Title< textquot; name =quot;Titl
=quot;
<input type ion -->
pt ionquot;>
<!-- descri on</h2> script
ti quot;De
<h2>Descrip s=quot;5quot; name=
ow
<textarea r
area>
</text -->
olor
<!-- c r</h2>
<h2>Colo orquot;>
e=quot;Col redquot;>red
<select nam alue=quot;
v >green
<option lue=quot;greenquot;
<option va
</select>
write me!
http://localhost:7402/firs
tsteps/1_write.html
rm>
</
</body
fo
>
>
</html

36. simple read example
title>
mple</
ad exa
simple re
<html> itle>µjax:
<t
<head>
</head
> cript
ax.jsquot;></s
<body> pt src=quot;/rj +'quot;>';
<scr i ataquot;); +node.Color
(quot;/myd :'
<s cri pt> getContent round-color
=Ujax. backg
va r node div style=quot;
v='< ;
var di .write(div)
nt
docume >
pt
</scri ript> Title)
;
2><sc e(node.
<h cument.writ
d o
></h2> ion);
</script t> script
rip de.De
<p><sc nt.write(no
docume p>
pt></
</scri
div>
</
read me!
http://localhost:7402/firs
tsteps/2_read.html
</body
</html
>
>

37. add new entry
itle>
ple</t
y exam
w entr
add ne
<html> itle>µjax:
<t
<head> body> es/*quot; taquot;>
/entri art/form-da
>< mydata p
</head m action=quot;/ type=quot;multi
or nc
<f od=quot;POSTquot; e
meth
lequot; />
tle </h2> quot; name=quot;Tit
<h2>Ti ype=quot;text
<input t tarea>
></tex
2> ptionquot;
cription</h ame=quot;Descri
<h2>Des rows=quot;5quot; n
<textarea
/h2>
<h2> Color< =quot;Colorquot;>
e red
<select nam alue=quot;redquot;> green
v quot;>
<option alue=quot;green
v
<option
</select>
agequot;/>
add new
http://localhost:7402/firststeps/3_addnew.html
age</h2> equot; name=quot;Im
<h2>Im ype=quot;fil
<inp ut t
nput t
ype=quot;s
ubmitquot;
></p>
><i
<p
form>
</
>
</body
>
</html

38. list entries
itle>
ple</t
s exam
list entrie
<html> itle>rjax:
t squot;);
<head>< /entrie
mydata
[ ...] ent(quot;/
etCont
<s cript> ries=Ujax.g
t
var en
pt>
</scri quot;>');
olor+'
<div> ntry.C
t> ries) { lor:'+e
<scrip ar a in ent s[a]; und-co
ackgro h3>');
for (v ntry=entrie iv style=quot;b le+'</
var e .write('<d +entry.Tit
nt >' );
docume .write('<h2 Description
nt y.
docume .write(entr
nt
docume
ge) {
ry.Ima
if(ent
[...] }
v>');
('</di
.write
http://lo
list entries
calhost:7
document
</a>
402/first
} > dd new
steps/4_l pt tmlquot;>a
ist.html </scri quot;3_addnew.h
f=
<a hre
</div>
>
</body
>
</html

39. views
[...]
t>
<scrip wizard();
Ujax.
pt>
</scri
[...]
rd();
! Rja x.w iza
!
ript>
resource or ! </sc
http://l iented urls
ocalhost
:7402/my
data/ent
ries.lis
t.html

40. views

41. Dojo Integration
er with less than 50 LOC
repository brows

42. µjax
content repository vs. ajax
What’s JCR
Introducing µjax

43. µjax
content repository vs. ajax
What’s JCR
Introducing µjax
silve
r

44. If you remember only 2 things.
I dev.day.com
Download CRX and play with µjax.
2 keep an eye on “
apache sling”

45. If you remember only 2 things.
I dev.day.com
Download CRX and play with µjax.
2 keep an eye on “
apache sling”
riously!
se