µjax in 30 minutes

Slideshow Transcript

1. Slide 1: µjax in 30 minutes lars.trieloff@day.com weblogs.goshaky.com/weblogs/lars
2. Slide 2: µjax in 30 minutes JCR m eets AJAX lars.trieloff@day.com weblogs.goshaky.com/weblogs/lars
3. Slide 3: µjax content repository vs. ajax
4. Slide 4: µjax content repository vs. ajax What’s JCR (elevator pitch) Introducing µjax silve r
5. Slide 5: µjax content repository vs. ajax What’s JCR (elevator pitch) Introducing µjax silve r
6. Slide 7: What’s JCR?
7. Slide 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.”
8. Slide 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.” ?
9. Slide 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.” ?
10. Slide 11: Best of both worlds. database fi les yste m content repositor y
11. Slide 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
12. Slide 13: Some known JCR Applications
13. Slide 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
14. Slide 15: µjax content repository vs. ajax What’s JCR (elevator pitch) Introducing µjax silve r
15. Slide 16: µjax content repository vs. ajax What’s JCR Introducing µjax
16. Slide 17: µjax content repository vs. ajax What’s JCR Introducing µjax silve r
17. Slide 18: Introducing µjax Repository based AJAX
18. Slide 19: Introducing µjax JCR
19. Slide 20: Introducing µjax JCR
20. Slide 21: Introducing µjax JCR
21. Slide 22: Introducing µjax JCR the other side
22. Slide 23: Introducing µjax JCR the other side de ve h a lope t r “i want to build webapps” me d) (d a v i
23. Slide 24: Introducing µjax JCR the other side de ve h a lope t r “i want to build webapps” me d) (d a v i
24. Slide 25: Introducing µjax JCR the other side de ve h a lope t r “i want to build webapps” me d) (d a v i
25. Slide 26: Introducing µjax JCR de ve h a lope t r a rs ) me ( l silve r µjax
26. Slide 27: Introducing µjax JCR de ve h a lope t r a rs ) me ( l silve r µjax very simple projection: fits the bill
27. Slide 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”
28. Slide 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
29. Slide 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
30. Slide 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
31. Slide 32: Getting ready... download a nd install test & mount as a drive
32. Slide 33: hello, world. tle> world</ti ello, <html> itle>rjax: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
33. Slide 34: simple write example tle> examp le</ti write simple <html> itle>rjax: OST\"> <hea d><t hod=\"P y> a\" met d><bod ion=\"/mydat </hea m act or --> <f <!-- title > e\" /> /h2 <h2>Title< text\" name =\"Titl =\" <input type ion --> pt ion\"> <!-- descri on</h2> script ti \"De <h2>Descrip s=\"5\" name= ow <textarea r area> </text --> olor <!-- c r</h2> <h2>Colo or\"> e=\"Col red\">red <select nam alue=\" v >green <option lue=\"green\" <option va </select> write me! http://localhost:7402/firs tsteps/1_write.html rm> </ </body fo > > </html
34. Slide 35: simple read example title> mple</ ad exa simple re <html> itle>rjax: <t <head> </head > cript ax.js\"></s <body> pt src=\"/rj +'\">'; <scr i ata\"); +node.Color (\"/myd :' <s cri pt> getContent round-color =Rjax. backg va r node div style=\" 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 > >
35. Slide 36: add new entry itle> ple</t y exam w entr add ne <html> itle>rjax: <t <head> body> es/*\" ta\"> /entri art/form-da >< mydata p </head m action=\"/ type=\"multi or nc <f od=\"POST\" e meth le\" /> tle </h2> \" name=\"Tit <h2>Ti ype=\"text <input t tarea> ></tex 2> ption\" cription</h ame=\"Descri <h2>Des rows=\"5\" n <textarea /h2> <h2> Color< =\"Color\"> e red <select nam alue=\"red\"> green v \"> <option alue=\"green v <option </select> age\"/> add new http://localhost:7402/firststeps/3_addnew.html age</h2> e\" name=\"Im <h2>Im ype=\"fil <inp ut t nput t ype=\"s ubmit\" ></p> ><i <p form> </ > </body > </html
36. Slide 37: list entries itle> ple</t s exam list entrie <html> itle>rjax: ; <head> <t ries\") ata/ent [...] (\"/myd t> .getC ontent <scrip ntries=Rjax var e pt> </scri \">'); olor+' <div> ntry.C t> r ies) { lor:'+e <scrip ar a in ent s[a]; und-co ackgro h3>'); for (v ntry=entrie iv style=\"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 [...] } ove=' ax:rem ; ies?rj /div>') mydata/entr ite('< \"/ cum ent.wr e('<a href= list entries do .writ document move</a>'); re http://lo +a+'\"> calhost:7 402/first steps/4_l ist.html } > ew</a> pt tml\">add n </scri \"3_addnew.h f= <a hre </div> > </body
37. Slide 38: views [...] t> <scrip wizard(); Rjax. pt> </scri [...] rd(); ! Rja x.w iza ! ript> resource or ! </sc http://l iented urls ocalhost :7402/my data/ent ries.lis t.html
38. Slide 39: views
39. Slide 40: µjax content repository vs. ajax What’s JCR Introducing µjax
40. Slide 41: µjax content repository vs. ajax What’s JCR Introducing µjax silve r
41. Slide 42: If you remember only 2 things. I dev.day.com Download CRX and play with µjax. 2 keep an eye on “ apache sling”
42. Slide 43: 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