file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                       XML d...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
file:///../intern/Standaarden/Logo/groene%20onderbalk.png




                                                            ...
Upcoming SlideShare
Loading in …5
×

Wicket Dynamic Components

11,795 views

Published on

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,795
On SlideShare
0
From Embeds
0
Number of Embeds
769
Actions
Shares
0
Downloads
170
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Wicket Dynamic Components

  1. 1. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Dynamic Markup and  on­the­fly Components binding XML content to Wicket Components Wouter Huijnink Func. Internet Integration November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  2. 2. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Structure of this talk Introduction  The problem by example  Our pre­Wicket approach  Requirements  Approach  Todo  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  3. 3. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Func. Internet Integration Web Applications on Open Source java   component stack: Wicket – Spring – Hibernate – CXF (XFire) Using Wicket for 2.5 years now  component framework ­> OO  clean separation of markup and code  accessibility (Ajax fallback)  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  4. 4. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Triggers Request for proposal: generic editing page for   XSD­defined XML blobs New project: application for online examination  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  5. 5. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Common Denominators No POJO representation of domain (XML)  dynamic page structure (content dependent)  Wicket components picked at runtime  Requirement: Wicket application in full control  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  6. 6. file:///../intern/Standaarden/Logo/groene%20onderbalk.png The Problem by Example Dynamic edit/search forms  User interactions specified in XML  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  7. 7. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Dynamic Forms Content repository: objects + metadata  Metadata defined in XSD, stored as XML  Requirement: multi profile support  Requirement: no refactoring required when new   profile is added by administrator November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  8. 8. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Example: CZP metadata form November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  9. 9. file:///../intern/Standaarden/Logo/groene%20onderbalk.png XML defined User Interactions customer: publisher  educational content  all content is strictly formalized (XML)  Educational Standards applied where possible  IMS Question Type Interaction (QTI) for   survey / exam style content November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  10. 10. file:///../intern/Standaarden/Logo/groene%20onderbalk.png QTI defines question  correct answer  interaction types (Choice, Text, Order, ...)  response processing rules  scoring  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  11. 11. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Trivial Test Element Question What is your preferred Java Web Development  framework? November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  12. 12. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Trivial Test Element Correct response (needless to say): Wicket November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  13. 13. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Trivial Test Element Interaction Type Choice, with options Struts Tapestry Wicket November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  14. 14. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Trivial Test Element Response processing An exact match is required of the candidate  response and the correct response November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  15. 15. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Trivial Test Element Scoring The default score is 0, a correct response gives  you a score of 1 November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  16. 16. file:///../intern/Standaarden/Logo/groene%20onderbalk.png QTI Representation <assessmentItem identifier=quot;choicequot; title=quot;Web Frameworkquot;>   <responseDeclaration identifier=quot;Rquot;>     <correctResponse>       <value>C</value>     </correctResponse>   </responseDeclaration>   <itemBody>     <p>What is your preferred Java web development framework?</p>     <choiceInteraction responseIdentifier=quot;Rquot; maxChoices=quot;1quot;>       <simpleChoice identifier=quot;Aquot;>Struts</simpleChoice>       <simpleChoice identifier=quot;Bquot;>Tapestry</simpleChoice>       <simpleChoice identifier=quot;Cquot;>Wicket</simpleChoice>     </choiceInteraction>   </itemBody> </assessmentItem> November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  17. 17. file:///../intern/Standaarden/Logo/groene%20onderbalk.png As XHTML <form id=quot;questionFormquot; action=quot;/questionHandlerquot; method=quot;POSTquot;>  <p>What is your preferred Java web development framework?</p>  <p>    <input name=quot;fwquot; type=quot;radioquot; value=quot;Aquot;>Struts</input> <br />    <input name=quot;fwquot; type=quot;radioquot; value=quot;Bquot;>Tapestry</input> <br />    <input name=quot;fwquot; type=quot;radioquot; value=quot;Cquot;>Wicket</input> <br />  </p> <p>    <input type=quot;submitquot; value=quot;Am I right or am I right?quot; />  </p>  </form> November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  18. 18. file:///../intern/Standaarden/Logo/groene%20onderbalk.png In the Browser November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  19. 19. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Multiple Interactions November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  20. 20. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Drawing Interaction November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  21. 21. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Graphic Gap Match November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  22. 22. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Previous Approach Intermediate format: XForms  Mixed frameworks: Wicket + Chiba  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  23. 23. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Previous Approach November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  24. 24. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Previous Approach ­ Issues Chiba hacks required  XForms rather complex  Control hell: both Chiba and Wicket process   user actions and data November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  25. 25. file:///../intern/Standaarden/Logo/groene%20onderbalk.png What do we want now? To be able to create on­the­fly, dynamic,  interactive components, using generic Wicket  components November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  26. 26. file:///../intern/Standaarden/Logo/groene%20onderbalk.png What do we want now? often updated, dynamic content   containing standardized XML  Object Oriented approach  generic components  properly integrated in Wicket  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  27. 27. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Our Approach generate Wicket markup from content and   return this as the Component's markup parse the dynamically created markup  for each markup element add the appropriate   FormComponent  (CheckBox, TextField,  DropDownChoice, ...) November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  28. 28. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Step 1 AutoComponentPanel asks for its associated markup  loops over tags, if ComponentTag: call internal,   overrideable method  getMarkupComponent(ComponentTag tag, MarkupStream stream) November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  29. 29. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Step 1 AutoComponentPanel Default implementation: check for the usual  suspects, e.g. if (quot;inputquot;.equals(tag.getName()) &&     quot;submitquot;.equals(tag.getAttr..(quot;typequot;, ..))) {   return new Button(tag.getId(), ..); } November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  30. 30. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Step 1 AutoComponentPanel The wicket:id of the added components are  treated as property expressions that are bound to  this component's model. <input type=quot;textquot; wicket:id=quot;namequot;/>  binds the generated TextField to the model  object's name property. November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  31. 31. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Step 2 AssessmentItemPanel model: AssessmentItem (generic POJO)  supplies its own markup by transforming the   contents of its itemBody  QTI ­> XSLT ­> XHTML with wicket tags extends AutoComponentPanel ­> generated   wicket tags will automatically be bound to  FormComponents November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  32. 32. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Step 2 AssessmentItemPanel getMarkupResourceStream snippet: Source source = new StreamSource(         new StringReader(assessmentItem.getXml()         )); StringWriter result = new StringWriter(); ... transformer.transform(source,          new StreamResult(result)); return new StringResourceStream(         result.toString()); November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  33. 33. file:///../intern/Standaarden/Logo/groene%20onderbalk.png QTI revisited <assessmentItem identifier=quot;choicequot; title=quot;Web Frameworkquot;>   <responseDeclaration identifier=quot;Rquot;>     <correctResponse>       <value>C</value>     </correctResponse>   </responseDeclaration>   <itemBody>     <p>What is your preferred Java web development framework?</p>     <choiceInteraction responseIdentifier=quot;Rquot; maxChoices=quot;1quot;>       <simpleChoice identifier=quot;Aquot;>Struts</simpleChoice>       <simpleChoice identifier=quot;Bquot;>Tapestry</simpleChoice>       <simpleChoice identifier=quot;Cquot;>Wicket</simpleChoice>     </choiceInteraction>   </itemBody> </assessmentItem> November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  34. 34. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Generated markup <wicket:panel>   <div class=quot;qtiItemquot;>     <p>What is your preferred Java web development framework?</p>       <div class=quot;blockInteraction choiceInteractionquot;>         <span class=quot;promptquot;/>         <div wicket:id=quot;iSession.responseVars.R.cResponsequot;>           <label><input value=quot;Aquot; type=quot;radioquot;/>Struts</label>           <label><input value=quot;Bquot; type=quot;radioquot;/>Tapestry</label>           <label><input value=quot;Cquot; type=quot;radioquot;/>Wicket</label>         </div>       </div>     <div class=quot;clrquot;/>   </div> </wicket:panel> November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  35. 35. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Binding The wicket:id=quot;iSession.responseVars.R.cResponse”  markup element is bound to a nested property of  the AssessmentItem  (which has an ItemSession, which has a  Map<String, ResponseVariable>, and a  ResponseVariable has a cResponse) November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  36. 36. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Result All QTI content can be rendered, previously   entered responses are displayed when the user POSTs his response, the   response is bound automatically to the  AssessmentItem domain object the Form's onSubmit() doesn't need to do   any processing, but just persists the  AssessmentItem's response part. November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  37. 37. file:///../intern/Standaarden/Logo/groene%20onderbalk.png To Do add support for complex QTI interactionTypes  refactor:  extract code from current project  make truly generic  document properly  create small demo app  release  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  38. 38. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Want to know more? Check our sponsor desk for live examples  Wouter Huijnink  wouter@func.nl November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  39. 39. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Shameless plug: Webical November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  40. 40. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Shameless plug: Webical Open Source web based iCalendar client  Wicket,   Fully accessible  Ajax add­ons  plugin architecture  http://www.webical.org/  November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png
  41. 41. file:///../intern/Standaarden/Logo/groene%20onderbalk.png Q & A (wouter@func.nl) Why didn't you ... ?  Wouldn't it have been much nicer if you ... ?  I can't believe you actually ... !  I want to work with you guys! Can I sign up right   here, right now? November 30th, 2007 file:///../intern/Standaarden/Logo/groene%20onderbalk.png

×