One of the main design goals of Wicket is to use plain HTML markup files as view templates. Hence, JSP or JSF files can not be used in a Wicket application. However there might be some situations in which we would like to use some code from existing (maybe legacy) JSP/JSF pages directly in our Wicket pages.
Making Wicket coexist with JSP/JSF pages can be a nightmare, but now a new subproject from Wicketstuff named JEE Web Integration (created by Tobias Soloschenko) is able to bridge the gap between Wicket and these standard view technologies, making their integration pretty straightforward.
The source code used in this article is available at https://github.com/bitstorm/WicketExperiments/tree/master/JspIntegration .
NOTE: in this article we will see examples using JSP pages but the same concepts are valid also if we want to use JSF pages.
Embed JSP pages into Wicket pages.
This Wicketstuff project comes with custom tags that can be used to embed into a Wicket page/panel the markup generated either by a JSP or by a JSF, or even by a servlet. To use these tags with our Wicket application, we first need to register the component resolver JEEWebResolver during application's initialization:
@Override
public void init()
{
super.init();
getPageSettings().addComponentResolver(new JEEWebResolver());
}
Now we can include a JSP page using the special tag <wicket:jsp>. The following code is from HomePage.html:
<body>
The following content is from a JSP page:
<wicket:jsp file="/FormPage.jsp"/>
</body>
The context-relative path to the JSP page must be specified with the required attribute "file".
NOTE: the hosting Wicket page must be stateful. If your page is not automatically marked as stateful by Wicket, you must call 'setStatelessHint(false);' in its constructor or in its inizializer method.
Form support
From JSP pages we can create links that point to Wicket pages or forms that send data to Wicket pages. This is possible using using the tag library provided by this module:<%@ taglib prefix="wicket" uri="http://wicketstuff-jee-web.org/functions/jsp" %>Once we have included the library above in our JSP, we can specify in the form's attribute 'action' which Wicket page will receive the data writing its full-qualified class name:
<body>
Send a parameter to Wicket page. Click submit.
<form action="<wicket:url page="org.javalobby.ShowParameter"/>" method="POST">
<input type="text" name="textvalue" value="testvalue">
<input type="submit" value="Submit">
</form>
</body>
Please note that page class name must go inside special tag <wicket:url>.
Link support
Links from embedded JSP pages to Wicket pages can be created using the same <wicket:url> tag we have seen for forms:
<a href="<wicket:url page="org.javalobby.ShowParameter" query="name=theName"/>">Link rendered by tag</a>
In the example above you can see how we used 'query' attribute to specify the query parameters to send with our link. As an alternative we can also implement links usin EL functions instead of tags, keeping JSP pages xml-valid:
<a href="${wicket:urlWithQuery('mypackage.MyPage','param1=value1')}">EL link</a>
Ajax support
Embedded JSP pages can also send data to hosting page via AJAX using links and forms. To use AJAX support we must first configure in our application a global resource reference of type JEEWebGlobalAjaxHandler. To do this we use its static method 'configure':@Override
protected void init()
{
super.init();
getPageSettings().addComponentResolver(new JEEWebResolver());
JEEWebGlobalAjaxHandler.configure(this);
}
When we use AJAX the hosting page receives data through Wicket events infrastructure with a custom JEEWebGlobalAjaxEvent event. The original AjaxRequestTarget instance used for the AJAX request can be retrieved from the event itself:
@Override
public void onEvent(IEvent<?> event)
{
JEEWebGlobalAjaxEvent castedEvent = JEEWebGlobalAjaxEvent.getCastedEvent(event);
if (castedEvent != null)
{
AjaxRequestTarget ajaxRequestTarget = castedEvent.getAjaxRequestTarget();
StringValue paramVal = castedEvent.getPostParameters().getParameterValue("textvalue");
paramLabel.setDefaultModelObject("Last submitted value: " + paramVal);
ajaxRequestTarget.add(paramLabel);
}
}
Ajax form support
If we want to send a form via AJAX we must invoke function 'ajaxFormSubmit' in its submit attribute using an EL expression as shown below:<form id="form" method="post" onsubmit="${wicket:ajaxFormSubmit('POST')}">
<input type="text" name="textvalue" value="testvalue">
<input type="submit" value="Submit">
</form>
In the example above the form is sent using POST method but we could use GET as well.
Ajax link support
AJAX links work in much the same way as forms. In this case we use function 'ajaxGetWithQuery' with attribute onclick:
<a href="#" onClick="${wicket:ajaxGetWithQuery('textvalue=theLinkName')}">Click here</a> to send parameter 'textvalue=theLinkName'.
To read query parameters inside hosting page we must use page parameters in place of post parameters:
@Override
public void onEvent(IEvent<?> event)
{
JEEWebGlobalAjaxEvent castedEvent = JEEWebGlobalAjaxEvent.getCastedEvent(event);
if (castedEvent != null)
{
AjaxRequestTarget ajaxRequestTarget = castedEvent.getAjaxRequestTarget();
StringValue paramVal = castedEvent.getPageParameters().get("textvalue");
paramLabel.setDefaultModelObject("Last submitted value: " + paramVal);
ajaxRequestTarget.add(paramLabel);
}
}
Conclusion
Wicket is an excellent alternative to JSP/JSF technologies. With the new Wicketstuff module 'JEE Web Integration' now you have the chance to gradually migrate from JSP/JSF to Wicket avoiding the risk and the cost of a single-shot migration.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}