DirectToWeb 2.0     Ravi Mendis
WhyWeb 2.0?
Problem•   Fragile    •   Large EOModel    •   ~10^3 Rules    •   ~10^2 Page Configs    •   ~10^2 Custom Components
Solution•   Tests    •   Selenium Support•   Consolidate Codebase    •   Custom Components    •   Rules
Objectives
Objectives•   Hooks    •   Selenium    •   Ajax•   Themed UI
How?
DirectToWeb 2.0•   Semantic HTML    •   Table-less    •   Well-formed        •   xHTML5 Validated•   CSS3
DirectToWeb 2.0•   Semantic HTML•   CSS3•   Ajax    •   Dynamic D2W•   Scriptaculous•   Selenium
Semantic HTML
Semantic HTML
Semantic HTML - Example
Semantic HTML - Example// Look Ma - No tables!<h2>Menu</h2><ul>	     <li class="home">	     	     <a class="current" href=...
Semantic HTML•   No Tables!    ...only for Tabular Data•   Use:    •   <div>, <span>    •   Lists: <ul>, <ol>    •   Text:...
CSS3•   ALL Layout    •   Positions & Margins    •   Columns•   Colours & Fonts•   Images•   2D Effects
Well Formed
Well-Formed HTML// Closed Elements.// E.g:<div>...</div><br />// proper nesting<ul>   <li>...</li></ul>
Well-Formed HTML// Unique IDs<div id=”a”>Hey, i’m unique...</div>
Validate
WO - elementID<form name="f_1_1" method="post" action="/cgi-bin/WebObjects/MyApp.woa/wo/vrsdatqeeGoxo1tAggnGoM/0.1.1">    ...
Default Assignments•   PageConfig → UID    •   <entity, task>•   D2W Context → UID    •   <entity, task, key>
Default Assignments•   idForPageConfiguration•   idForProperty•   nameForProperty (Forms)
Default Assignments•   Hooks    •   CSS3    •   Ajax    •   Selenium
D2W + Semantic HTML
=
CSS3 - Customizations•   Title•   Buttons
CSS3 - Pseudo-Classesdiv#a h2.entity:after {	    content: " Management";}
CSS3 - Pseudo-Classes// Backdiv#a ul.batch_nav_bar li.back a.return span:before {	    content: "< ";}// Adddiv#a #ListActi...
CSS3 - Web Inspector
Custom UI
Rules + CSS•   ERD2WDisplayString•   D2W Delayed Assignment    •   Key “class”•   CSS    •   Image Replacement
D2W Rules
CSS - Image Replacement/* D2WDisplayBoolean2.css */span.true, span.false {    text-indent: -5000px;    display: block;    ...
Ajax
AjaxRich Client                     Stateless Services:                            XML,                            JSON   ...
http://Thin-client                        Stateful Servers:                             WebObjects
Demo
Ajax  .show()                  .toggle()   .hide()Element.show               Element.toggleElement.hide
Embrace Statelessness!
Ajax Actions jQuery.get()                 .load()jQuery.post()Ajax.Request                .update()Ajax.Updater
Ajax ActionsWeb Page             Page Fragment
Web ActionsWeb Page            Web Page
Web State            WebObjects
Ajax State             WebObjects
No Backtrack Too Far!
Dynamic D2W
Demo
Dynamic D2W•   NO Custom Components!•   Embedded List•   Ajax•   Delayed Assignment
Dynamic D2W - Rules
Dynamic D2W - Example•   restrictedChoiceKey•   Ajax updater
Scriptaculous
Effect - Toggle•   Effect.toggle    •   ID    •   slide
Effect - Toggle// WODCollapseLink: WOHyperlink {	    href = "#";	    onclick = onClick;}
Effect - Toggle// Java - detail togglepublic String onClick() {    return "Effect.toggle($(" + tbodyID() + "), slide, {dur...
Effect - Toggle// HTML<tr class = "detail">    <td class = "detail">        <div id = "Customer2_detail">            <div>...
Selenium
XPath/* Save button *///button[@class=save ERXSubmitButton-submitAction]/* Password field *///div[@id=Student_edit_passwor...
Demo
Q: How Do I Modernize My D2W         Application?
liteDiva
Migration - Phase #1•   HTML5 & CSS3    •   Strip Tables    •   Themes•   Selenium Tests
Migration - Phase #2•   Ajax    •   Widgets    •   Effects•   Selenium Tests (Update)
Migrating to DirectToWeb 2.0            Page                  Custom                        Rules        Configurations    ...
Q&A
References•   Semantic HTML    http://en.wikipedia.org/wiki/Semantic_HTML•   What is Diva Look?    http://wiki.objectstyle...
DirectToWeb 2.0
DirectToWeb 2.0
Upcoming SlideShare
Loading in …5
×

DirectToWeb 2.0

1,882 views

Published on

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

No Downloads
Views
Total views
1,882
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

DirectToWeb 2.0

  1. 1. DirectToWeb 2.0 Ravi Mendis
  2. 2. WhyWeb 2.0?
  3. 3. Problem• Fragile • Large EOModel • ~10^3 Rules • ~10^2 Page Configs • ~10^2 Custom Components
  4. 4. Solution• Tests • Selenium Support• Consolidate Codebase • Custom Components • Rules
  5. 5. Objectives
  6. 6. Objectives• Hooks • Selenium • Ajax• Themed UI
  7. 7. How?
  8. 8. DirectToWeb 2.0• Semantic HTML • Table-less • Well-formed • xHTML5 Validated• CSS3
  9. 9. DirectToWeb 2.0• Semantic HTML• CSS3• Ajax • Dynamic D2W• Scriptaculous• Selenium
  10. 10. Semantic HTML
  11. 11. Semantic HTML
  12. 12. Semantic HTML - Example
  13. 13. Semantic HTML - Example// Look Ma - No tables!<h2>Menu</h2><ul> <li class="home"> <a class="current" href="/cgi-bin/WebObjects/slowmation.woa/wa/default">Home</a> </li> <li class="public"> <a href="/cgi-bin/WebObjects/slowmation.woa/wa/galleryPage">Example slowmations</a> </li> <li class="resources"> <a href="/cgi-bin/WebObjects/slowmation.woa/wa/resourcesPage">Teaching resources</a> </li> <li class="software"> <a href="/cgi-bin/WebObjects/slowmation.woa/wa/softwarePage">Useful software</a> </li> <li class="instructions"> <a href="/cgi-bin/WebObjects/slowmation.woa/wa/instructionsPage">Instructions</a> </li> <li class="publications"> <a href="/cgi-bin/WebObjects/slowmation.woa/wa/researchPage">Research</a> </li> <li class="contact"> <a href="/cgi-bin/WebObjects/slowmation.woa/wa/contactsPage">Contact</a> </li></ul>
  14. 14. Semantic HTML• No Tables! ...only for Tabular Data• Use: • <div>, <span> • Lists: <ul>, <ol> • Text: <p>• No Images
  15. 15. CSS3• ALL Layout • Positions & Margins • Columns• Colours & Fonts• Images• 2D Effects
  16. 16. Well Formed
  17. 17. Well-Formed HTML// Closed Elements.// E.g:<div>...</div><br />// proper nesting<ul> <li>...</li></ul>
  18. 18. Well-Formed HTML// Unique IDs<div id=”a”>Hey, i’m unique...</div>
  19. 19. Validate
  20. 20. WO - elementID<form name="f_1_1" method="post" action="/cgi-bin/WebObjects/MyApp.woa/wo/vrsdatqeeGoxo1tAggnGoM/0.1.1"> <div>Username: <input type="text" name="1.1.1" /> </div> <div>Password: <input type="password" name="1.1.3" /> </div> <div><input title="Login" name="1.1.4" type="submit" /></div></form>
  21. 21. Default Assignments• PageConfig → UID • <entity, task>• D2W Context → UID • <entity, task, key>
  22. 22. Default Assignments• idForPageConfiguration• idForProperty• nameForProperty (Forms)
  23. 23. Default Assignments• Hooks • CSS3 • Ajax • Selenium
  24. 24. D2W + Semantic HTML
  25. 25. =
  26. 26. CSS3 - Customizations• Title• Buttons
  27. 27. CSS3 - Pseudo-Classesdiv#a h2.entity:after { content: " Management";}
  28. 28. CSS3 - Pseudo-Classes// Backdiv#a ul.batch_nav_bar li.back a.return span:before { content: "< ";}// Adddiv#a #ListActivityType ul.batch_nav_bar li.add a:after { content: " a New Activity";}
  29. 29. CSS3 - Web Inspector
  30. 30. Custom UI
  31. 31. Rules + CSS• ERD2WDisplayString• D2W Delayed Assignment • Key “class”• CSS • Image Replacement
  32. 32. D2W Rules
  33. 33. CSS - Image Replacement/* D2WDisplayBoolean2.css */span.true, span.false { text-indent: -5000px; display: block; width: 16px; height: 16px;}span.true { background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/CheckboxOn.gif);}span.false { background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/CheckboxOff.gif);}
  34. 34. Ajax
  35. 35. AjaxRich Client Stateless Services: XML, JSON Stateless Servers:
  36. 36. http://Thin-client Stateful Servers: WebObjects
  37. 37. Demo
  38. 38. Ajax .show() .toggle() .hide()Element.show Element.toggleElement.hide
  39. 39. Embrace Statelessness!
  40. 40. Ajax Actions jQuery.get() .load()jQuery.post()Ajax.Request .update()Ajax.Updater
  41. 41. Ajax ActionsWeb Page Page Fragment
  42. 42. Web ActionsWeb Page Web Page
  43. 43. Web State WebObjects
  44. 44. Ajax State WebObjects
  45. 45. No Backtrack Too Far!
  46. 46. Dynamic D2W
  47. 47. Demo
  48. 48. Dynamic D2W• NO Custom Components!• Embedded List• Ajax• Delayed Assignment
  49. 49. Dynamic D2W - Rules
  50. 50. Dynamic D2W - Example• restrictedChoiceKey• Ajax updater
  51. 51. Scriptaculous
  52. 52. Effect - Toggle• Effect.toggle • ID • slide
  53. 53. Effect - Toggle// WODCollapseLink: WOHyperlink { href = "#"; onclick = onClick;}
  54. 54. Effect - Toggle// Java - detail togglepublic String onClick() { return "Effect.toggle($(" + tbodyID() + "), slide, {duration: 0.8}); return false;"; // tbodyID = Customer2_detail}
  55. 55. Effect - Toggle// HTML<tr class = "detail"> <td class = "detail"> <div id = "Customer2_detail"> <div>....</div> // Second div nesting necessary for scriptaculous </div> </td></tr>
  56. 56. Selenium
  57. 57. XPath/* Save button *///button[@class=save ERXSubmitButton-submitAction]/* Password field *///div[@id=Student_edit_password_container]/input/* Error message *///div[@id=messages]/span[@class=error]
  58. 58. Demo
  59. 59. Q: How Do I Modernize My D2W Application?
  60. 60. liteDiva
  61. 61. Migration - Phase #1• HTML5 & CSS3 • Strip Tables • Themes• Selenium Tests
  62. 62. Migration - Phase #2• Ajax • Widgets • Effects• Selenium Tests (Update)
  63. 63. Migrating to DirectToWeb 2.0 Page Custom Rules Configurations Components 34 126 2 40 183 4 67 180 0
  64. 64. Q&A
  65. 65. References• Semantic HTML http://en.wikipedia.org/wiki/Semantic_HTML• What is Diva Look? http://wiki.objectstyle.org/confluence/display/WO/ERDivaLook• Podcast - Test Driven Development with WebObjects http://www.wocommunity.org/podcasts/WOWODCW09-TDD.mov

×