Dynamic XML Components in Wicket

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

Dynamic Markup and
onthefly Components

binding XML content to Wicket Components

Wouter Huijnink
Func. Internet Integration
November 30th, 2007



Structure of this talk

Introduction


The problem by example


Our preWicket approach


Requirements


Approach


Todo


November 30th, 2007



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



Triggers

Request for proposal: generic editing page for


XSDdefined XML blobs
New project: application for online examination


November 30th, 2007



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



The Problem by Example

Dynamic edit/search forms


User interactions specified in XML


November 30th, 2007



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



Example: CZP metadata form

November 30th, 2007



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



QTI defines

question


correct answer


interaction types (Choice, Text, Order, ...)


response processing rules


scoring


November 30th, 2007



Trivial Test Element

Question
What is your preferred Java Web Development
framework?

November 30th, 2007




Correct response (needless to say):
Wicket

November 30th, 2007




Interaction Type
Choice, with options
Struts
Tapestry
Wicket

November 30th, 2007




Response processing
An exact match is required of the candidate
response and the correct response

November 30th, 2007




Scoring
The default score is 0, a correct response gives
you a score of 1

November 30th, 2007



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



As XHTML

<form id=quot;questionFormquot; action=quot;/questionHandlerquot; method=quot;POSTquot;>
<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



In the Browser

November 30th, 2007



Multiple Interactions

November 30th, 2007



Drawing Interaction

November 30th, 2007



Graphic Gap Match

November 30th, 2007



Previous Approach

Intermediate format: XForms


Mixed frameworks: Wicket + Chiba


November 30th, 2007



Previous Approach

November 30th, 2007



Previous Approach Issues

Chiba hacks required


XForms rather complex


Control hell: both Chiba and Wicket process


user actions and data

November 30th, 2007



What do we want now?

To be able to create onthefly, dynamic,
interactive components, using generic Wicket
components

November 30th, 2007



What do we want now?

often updated, dynamic content


containing standardized XML


Object Oriented approach


generic components


properly integrated in Wicket


November 30th, 2007



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



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




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




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



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



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



QTI revisited

<assessmentItem identifier=quot;choicequot; title=quot;Web Frameworkquot;>
  <responseDeclaration identifier=quot;Rquot;>
    <correctResponse>
      <value>C</value>
    </correctResponse>
  </responseDeclaration>
  <itemBody>
    <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



Generated markup

<wicket:panel>
  <div class=quot;qtiItemquot;>
      <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



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



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



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



Want to know more?

Check our sponsor desk for live examples


Wouter Huijnink


wouter@func.nl

November 30th, 2007



Shameless plug: Webical

November 30th, 2007



Shameless plug: Webical

Open Source web based iCalendar client


Wicket,


Fully accessible


Ajax addons


plugin architecture


http://www.webical.org/


November 30th, 2007



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


Dynamic XML Components in Wicket

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Dynamic XML Components in Wicket

Semelhante a Dynamic XML Components in Wicket (20)

Último

Último (20)

Dynamic XML Components in Wicket