Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,528
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DirectToWeb 2.0 Ravi Mendis
  • 2. WhyWeb 2.0?
  • 3. Problem• Fragile • Large EOModel • ~10^3 Rules • ~10^2 Page Configs • ~10^2 Custom Components
  • 4. Solution• Tests • Selenium Support• Consolidate Codebase • Custom Components • Rules
  • 5. Objectives
  • 6. Objectives• Hooks • Selenium • Ajax• Themed UI
  • 7. How?
  • 8. DirectToWeb 2.0• Semantic HTML • Table-less • Well-formed • xHTML5 Validated• CSS3
  • 9. DirectToWeb 2.0• Semantic HTML• CSS3• Ajax • Dynamic D2W• Scriptaculous• Selenium
  • 10. Semantic HTML
  • 11. Semantic HTML
  • 12. Semantic HTML - Example
  • 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. Semantic HTML• No Tables! ...only for Tabular Data• Use: • <div>, <span> • Lists: <ul>, <ol> • Text: <p>• No Images
  • 15. CSS3• ALL Layout • Positions & Margins • Columns• Colours & Fonts• Images• 2D Effects
  • 16. Well Formed
  • 17. Well-Formed HTML// Closed Elements.// E.g:<div>...</div><br />// proper nesting<ul> <li>...</li></ul>
  • 18. Well-Formed HTML// Unique IDs<div id=”a”>Hey, i’m unique...</div>
  • 19. Validate
  • 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. Default Assignments• PageConfig → UID • <entity, task>• D2W Context → UID • <entity, task, key>
  • 22. Default Assignments• idForPageConfiguration• idForProperty• nameForProperty (Forms)
  • 23. Default Assignments• Hooks • CSS3 • Ajax • Selenium
  • 24. D2W + Semantic HTML
  • 25. =
  • 26. CSS3 - Customizations• Title• Buttons
  • 27. CSS3 - Pseudo-Classesdiv#a h2.entity:after { content: " Management";}
  • 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. CSS3 - Web Inspector
  • 30. Custom UI
  • 31. Rules + CSS• ERD2WDisplayString• D2W Delayed Assignment • Key “class”• CSS • Image Replacement
  • 32. D2W Rules
  • 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. Ajax
  • 35. AjaxRich Client Stateless Services: XML, JSON Stateless Servers:
  • 36. http://Thin-client Stateful Servers: WebObjects
  • 37. Demo
  • 38. Ajax .show() .toggle() .hide()Element.show Element.toggleElement.hide
  • 39. Embrace Statelessness!
  • 40. Ajax Actions jQuery.get() .load()jQuery.post()Ajax.Request .update()Ajax.Updater
  • 41. Ajax ActionsWeb Page Page Fragment
  • 42. Web ActionsWeb Page Web Page
  • 43. Web State WebObjects
  • 44. Ajax State WebObjects
  • 45. No Backtrack Too Far!
  • 46. Dynamic D2W
  • 47. Demo
  • 48. Dynamic D2W• NO Custom Components!• Embedded List• Ajax• Delayed Assignment
  • 49. Dynamic D2W - Rules
  • 50. Dynamic D2W - Example• restrictedChoiceKey• Ajax updater
  • 51. Scriptaculous
  • 52. Effect - Toggle• Effect.toggle • ID • slide
  • 53. Effect - Toggle// WODCollapseLink: WOHyperlink { href = "#"; onclick = onClick;}
  • 54. Effect - Toggle// Java - detail togglepublic String onClick() { return "Effect.toggle($(" + tbodyID() + "), slide, {duration: 0.8}); return false;"; // tbodyID = Customer2_detail}
  • 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. Selenium
  • 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. Demo
  • 59. Q: How Do I Modernize My D2W Application?
  • 60. liteDiva
  • 61. Migration - Phase #1• HTML5 & CSS3 • Strip Tables • Themes• Selenium Tests
  • 62. Migration - Phase #2• Ajax • Widgets • Effects• Selenium Tests (Update)
  • 63. Migrating to DirectToWeb 2.0 Page Custom Rules Configurations Components 34 126 2 40 183 4 67 180 0
  • 64. Q&A
  • 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