Post on 09-May-2015
description
µjax in 30 minutes
lars.trieloff@day.comweblogs.goshaky.com/weblogs/lars
µjax in 30 minutes
JCR meetsAJAX
lars.trieloff@day.comweblogs.goshaky.com/weblogs/lars
µjaxcontent repository vs. ajax
µjaxcontent repository vs. ajax
What’s JCR (elevator pitch)
Introducing µjaxsilver
µjaxcontent repository vs. ajax
What’s JCR (elevator pitch) Introducing µjax
silver
What’s JCR?
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.”
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.”?
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.”?
Best of both worlds.database filesystem
content repository
Best of both worlds.database filesystem
content repository
read
write
hier-archiesstreams
locking accesscontrol
integrity structure
tx query
un-structured “full-
text” sortorder
versioning
obser-vation
multi-value
Some known JCR Applications
Sourcemix SourcemixPercussion Rhythmix Lutece Portal
QuickWCM WCMS
Jahia Framework
Hippo CMSInfoQ Online CommunityNuxeo ECM
Sakai E-learning
TYPO3 v5.0 WCMGX WebManagerExo ECMS Platform
Liferay Enterprise Portal
Artifactory Maven ProxyIBM FileNet WebSiteManagerApache James medic-2-medic mapofmedicine
Day Communiqué WCMS
Apache Tapestry
Day Communique Collab
QSLabs ComplianceApache Cocoon
Alfresco ECMSApache Sling
Mindquarry Collaboration
Day Communique DAMmagnolia WCMS
JBoss Portal
Some known JCR Applications
Sun OpenPortalInterface 21 Spring Framework
Fast Enterprise SearchOracle PortalBEA Portal
µjaxcontent repository vs. ajax
What’s JCR (elevator pitch) Introducing µjax
silver
µjaxcontent repository vs. ajax
What’s JCRIntroducing µjax
µjaxcontent repository vs. ajax
What’s JCRIntroducing µjax
silver
Introducing µjax
Repository based AJAX
Introducing µjax
JCR
Introducing µjax
JCR
Introducing µjax
JCR
Introducing µjax
JCR
the o
ther
side
Introducing µjax
JCR
me (david)
developer hat
“i want to build webapps” the o
ther
side
Introducing µjax
JCR
me (david)
developer hat
“i want to build webapps” the o
ther
side
Introducing µjax
JCR
me (david)
developer hat
“i want to build webapps” the o
ther
side
Introducing µjax
JCR
me (lars)
developer hat
µjax
silver
Introducing µjax
JCR
me (lars)
developer hat
very simple projection: fits the bill
µjax
silver
Introducing µjax
JCR
me (lars)
developer hat
very simple projection: fits the bill
µjax
“usecase” driven
silver
Introducing µjax
I2
3
Browser
J2EE WebServer
browser & ujax.jsreading: json & resource GET’swriting: form-POSTs & GETs
UjaxServlet.javatranslating requests to JCR callsJCR CompliantContent Repository
I
2
3
Introducing µjax
I2
3
Browser
J2EE WebServer
browser & ujax.jsreading: json & resource GET’swriting: form-POSTs & GETs
UjaxServlet.javatranslating requests to JCR callsJCR CompliantContent Repository
I
2
3very simple js API to read content, Forms to write content
Introducing µjax
I2
3
Browser
J2EE WebServer
browser & ujax.jsreading: json & resource GET’swriting: form-POSTs & GETs
UjaxServlet.javatranslating requests to JCR callsJCR CompliantContent Repository
I
2
3very simple js API to read content, Forms to write content
handles all the heavy lifting, particularly security16 tons
Getting ready...
download and installtest & mount as a drive
hello, world.
drag, drop, donehttp://localhost:7402/firststeps/0_hello.html
<html>
<head><title>r
jax:hello, wor
ld</title>
</head>
<body><h2>hell
o, world</h2>
</body>
</html>
simple write example
write me!http://localhost:7402/firstst
eps/1_write.html
<html>
<head><title>r
jax: simple wr
ite example</t
itle>
</head><body>
<form action="
/mydata" metho
d="POST">
<!-- title -->
<h2>Title</h2>
<input type="t
ext" name="Tit
le" />
<!-- descripti
on -->
<h2>Descriptio
n</h2>
<textarea rows
="5" name="Des
cription">
</te
xtarea>
<!-- color -->
<h2>Color</h2>
<select name="
Color">
<option value=
"red">red
<option value=
"green">green
</select>
</form>
</body>
</html>
simple read example
read me!http://localhost:7402/firststeps/2_read.html
<html>
<head><title>r
jax: simple re
ad example</ti
tle>
</head>
<body>
<script src
="/rjax.js"></
script
<script>
var node=Rj
ax.getContent(
"/mydata");
var div='<d
iv style="back
ground-color:'
+node.Color+'"
>';
document.wr
ite(div);
</script>
<h2><script>
document.write
(node.Title);
</script></h2>
<p><script>
document.write
(node.Descript
ion);
</script></p>
</div>
</body>
</html>
add newhttp://localhost:7402/firststeps/3_addnew.html
add new entry<html>
<head><title>r
jax: add new e
ntry example</
title>
</head><body>
<form action="
/mydata/entrie
s/*"
method="PO
ST" enctype="m
ultipart/form-
data">
<h2>Title</h2>
<input type="t
ext" name="Tit
le" />
<h2>Descriptio
n</h2>
<textarea rows
="5" name="Des
cription"></te
xtarea>
<h2>Color</h2>
<select name="
Color">
<option value=
"red">red
<option value=
"green">green
</select>
<h2>Im
age</h2>
<input
type="file" n
ame="Image"/>
<p><input type
="submit"></p>
</form>
</body>
</html>
list entries
list entrieshttp://localhost:7402/firststeps/4_list.html
<html>
<head><title>r
jax: list entr
ies example</t
itle>
[...]
<script>
var entries=Rj
ax.getContent(
"/mydata/entri
es");
</script>
<div>
<script>
for (var a i
n entries) {
var entry=ent
ries[a];
document.
write('<div st
yle="backgroun
d-color:'+entr
y.Color+'">');
document.
write('<h2>'+e
ntry.Title+'</
h3>');
document.
write(entry.De
scription);
if(entry.
Image) {
[...]
}
document.
write('</div>'
);
document.
write('<a href
="/mydata/entr
ies?rjax:remov
e='
+a+'">r
emove</a>');
}
</script>
<a href="3_add
new.html">add
new</a>
</div>
</body>
resource oriented urlshttp://localhost:7402/mydata/entries.list.html
views
[...]
<script>
Rjax.wizard();
</script>
[...]
! ! Rjax.wizard();
! </script>
views
µjaxcontent repository vs. ajax
What’s JCRIntroducing µjax
µjaxcontent repository vs. ajax
What’s JCRIntroducing µjax
silver
If you remember only 2 things.
dev.day.com Download CRX and play with µjax. keep an eye on “apache sling”2
I
If you remember only 2 things.
dev.day.com Download CRX and play with µjax. keep an eye on “apache sling”2
I
seriously!