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

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?

Wicket Dynamic Components

Technology

Introdução Wicket

Wicket - JUG Lausanne

US Army Aviation Helicopter Dynamic Components

Wicket Tutorial

Cricket Oval aricket Oval And Practice Wicket Floodlightingd...

Wicket and Scala

General Wicket Patterns - Packt

Sticky Wicket December 2012

The Visual Delta Force: Dynamic Visualforce Components

Migrating to Apache Wicket

Dynamic Components of Personal Power (Book Excerpt)

Sticky Wicket VI

Curso Wicket

Sticky Wicket August 2013

Wicket in 60 Minutes Wicket 4 Newbs. Even Voorstellen...

Wicket Viewer - Apache Isis