Wicket Dynamic Components

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


November 30th, 2007

Dynamic Markup and onthefly Components

binding XML content to Wicket Components

Wouter HuijninkFunc. 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

QuestionWhat is your preferred Java Web Development

framework?



November 30th, 2007


Correct response (needless to say):Wicket



November 30th, 2007


Interaction TypeChoice, with options

StrutsTapestryWicket



November 30th, 2007


Response processingAn exact match is required of the candidate

response and the correct response



November 30th, 2007


ScoringThe default score is 0, a correct response gives

you a score of 1



November 30th, 2007

QTI Representation

<assessmentItem identifier="choice" title="Web Framework"> <responseDeclaration identifier="R"> <correctResponse> <value>C</value> </correctResponse> </responseDeclaration> <itemBody> <p>What is your preferred Java web development framework?</p> <choiceInteraction responseIdentifier="R" maxChoices="1"> <simpleChoice identifier="A">Struts</simpleChoice> <simpleChoice identifier="B">Tapestry</simpleChoice> <simpleChoice identifier="C">Wicket</simpleChoice> </choiceInteraction> </itemBody></assessmentItem>



November 30th, 2007

As XHTML

<form id="questionForm" action="/questionHandler" method="POST"> <p>What is your preferred Java web development framework?</p> <p> <input name="fw" type="radio" value="A">Struts</input> <br /> <input name="fw" type="radio" value="B">Tapestry</input> <br /> <input name="fw" type="radio" value="C">Wicket</input> <br /> </p><p> <input type="submit" value="Am I right or am I right?" /> </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 ("input".equals(tag.getName()) && "submit".equals(tag.getAttr..("type", ..))) { 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="text" wicket:id="name"/> 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="choice" title="Web Framework"> <responseDeclaration identifier="R"> <correctResponse> <value>C</value> </correctResponse> </responseDeclaration> <itemBody> <p>What is your preferred Java web development framework?</p> <choiceInteraction responseIdentifier="R" maxChoices="1"> <simpleChoice identifier="A">Struts</simpleChoice> <simpleChoice identifier="B">Tapestry</simpleChoice> <simpleChoice identifier="C">Wicket</simpleChoice> </choiceInteraction> </itemBody></assessmentItem>



November 30th, 2007

Generated markup

<wicket:panel> <div class="qtiItem"> <p>What is your preferred Java web development framework?</p> <div class="blockInteraction choiceInteraction"> <span class="prompt"/> <div wicket:id="iSession.responseVars.R.cResponse"> <label><input value="A" type="radio"/>Struts</label> <label><input value="B" type="radio"/>Tapestry</label> <label><input value="C" type="radio"/>Wicket</label> </div> </div> <div class="clr"/> </div></wicket:panel>



November 30th, 2007

Binding

The wicket:id="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

[email protected]

mailto:[email protected]



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 ([email protected])

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?

Wicket Dynamic Components

Technology