µjax in 30 minutes (for Stockholm)

µjax in 30 minutes

[email protected]/weblogs/lars

mailto:[email protected]


µjax in 30 minutes

JCR meetsAJAX

[email protected]/weblogs/lars



Lars Trieloff• Product Manager at Day

• Author, Blogger, Open Source Code

• Apache Cocoon

• Mindquarry

• Goshaky

• DAX

µjaxcontent repository vs. ajax


What’s JCR (elevator pitch)

Introducing µjaxsilver


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.”?

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


What’s JCR (elevator pitch) Introducing µjax

silver


What’s JCRIntroducing µjax



silver

Introducing µjax

Repository based AJAX

Introducing µjax

JCR

Introducing µjax

JCR

the o

ther

side

Introducing µjax

JCR

me (lars)

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



I

2

3very simple js API to read content, Forms to write content

Introducing µjax

I2

3

Browser

J2EE WebServer



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>µ

jax:hello, wor

ld</title>

</head>

<body><h2>hell

o, world</h2>

</body>

</html>

http://localhost:7402/crx/rjax/firststeps/1_write.html









simple write example

write me!http://localhost:7402/firstst

eps/1_write.html

<html>

<head><title>µ

jax: simple wr

ite example</t

itle>

</head><body>

<form action="

/mydata" metho

d="POST">



<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>

</form>

</body>

</html>

simple read example

read me!http://localhost:7402/firststeps/2_read.html

<html>

<head><title>µ

jax: simple re

ad example</ti

tle>

</head>

<body>

<script src

="/rjax.js"></

script

<script>

var node=Uj

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>µ

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=Uj

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>'

);

}

</script>

<a href="3_add

new.html">add

new</a>

</div>

</body>

</html>












resource oriented urlshttp://localhost:7402/mydata/entries.list.html

views

[...]

<script>

Ujax.wizard();

</script>

[...]

! ! Rjax.wizard();

! </script>













Dojo Integration

repository browser with less than 50 LOC



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!

µjax in 30 minutes (for Stockholm)

Technology

Transcript of µjax in 30 minutes (for Stockholm)