µjax in 30 minutes (for Stockholm)

2,779 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,779
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

µjax in 30 minutes (for Stockholm)

  1. 1. µjax in 30 minutes lars.trieloff@day.com weblogs.goshaky.com/weblogs/lars
  2. 2. µjax in 30 minutes JCR m eets AJAX lars.trieloff@day.com weblogs.goshaky.com/weblogs/lars
  3. 3. Lars Trieloff • Product Manager at Day • Author, Blogger, Open Source Code • Apache Cocoon • Mindquarry • Goshaky • DAX
  4. 4. µjax content repository vs. ajax
  5. 5. µjax content repository vs. ajax What’s JCR (elevator pitch) Introducing µjax silve r
  6. 6. µjax content repository vs. ajax What’s JCR (elevator pitch) Introducing µjax silve r
  7. 7. What’s JCR?
  8. 8. 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.”
  9. 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. 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. 11. Best of both worlds. database fi les yste m content repositor y
  12. 12. 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
  13. 13. Some known JCR Applications
  14. 14. 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
  15. 15. µjax content repository vs. ajax What’s JCR (elevator pitch) Introducing µjax silve r
  16. 16. µjax content repository vs. ajax What’s JCR Introducing µjax
  17. 17. µjax content repository vs. ajax What’s JCR Introducing µjax silve r
  18. 18. Introducing µjax Repository based AJAX
  19. 19. Introducing µjax JCR
  20. 20. Introducing µjax JCR
  21. 21. Introducing µjax JCR
  22. 22. Introducing µjax JCR the other side
  23. 23. Introducing µjax JCR the other side de ve h a lope t r “i want to build webapps” a rs ) me ( l
  24. 24. Introducing µjax JCR the other side de ve h a lope t r “i want to build webapps” a rs ) me ( l
  25. 25. Introducing µjax JCR the other side de ve h a lope t r “i want to build webapps” a rs ) me ( l
  26. 26. Introducing µjax JCR de ve h a lope t r a rs ) me ( l silve r µjax
  27. 27. Introducing µjax JCR de ve h a lope t r a rs ) me ( l silve r µjax very simple projection: fits the bill
  28. 28. 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”
  29. 29. 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
  30. 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 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
  31. 31. 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
  32. 32. Getting ready... download a nd install test & mount as a drive
  33. 33. 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
  34. 34. 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
  35. 35. 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 > >
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. views
  40. 40. Dojo Integration er with less than 50 LOC repository brows
  41. 41. µjax content repository vs. ajax What’s JCR Introducing µjax
  42. 42. µjax content repository vs. ajax What’s JCR Introducing µjax silve r
  43. 43. If you remember only 2 things. I dev.day.com Download CRX and play with µjax. 2 keep an eye on “ apache sling”
  44. 44. 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

×