DUE TO SPAM, SIGN-UP IS DISABLED. Goto Selfserve wiki signup and request an account.
...
This
...
mini
...
tutorial
...
shows
...
you
...
how
...
to
...
call
...
Wicket
...
from
...
Javascript.
...
It
...
is
...
based
...
on
...
an
...
...
...
...
Setting up the Wicket response to the JavaScript call
Add the AbstractDefaultAjaxBehavior to the component you'd like to call from javascript. You then have to override the respond method of AbstractDefaultAjaxBehavior to perform your actions and to append your changes to the response
For example in your panel:
| Code Block |
|---|
|http://www.nabble.com/forum/ViewPost.jtp?post=14693821&framed=y]. h3. Setup the Wicket response to the Javascript call Add the AbstractDefaultAjaxBehavior to the component you'd like to call from javascript. You then have to override the respond method of AbstractDefaultAjaxBehavior to perform your actions and to append your changes to the response For example in your panel: {{{ final AbstractDefaultAjaxBehavior behave = new AbstractDefaultAjaxBehavior() { protected void respond(final AjaxRequestTarget target) { target.add(new Label("foo", "Yeah I was just called from Javascript!")); } }; add(behave); }}} h3. Add the calling Javascript to the page header Any component can add Javascript to the page header by implementing IHeaderContributor, that's where the response-object gets passed. TODO: add an example of Java code. Here is an example Javascript code: {{{ |
Invoking JavaScript from your Java Wicket component
Any component can add Javascript to the page header by implementing IHeaderContributor, that's where the
response-object gets passed.
TODO: add an example of Java code.
Alternatively, you can add a Wicket label containing JavaScript to your page:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<script type="text/javascript" wicket:id="myScript">/* script will be rendered here */</script>
|
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
Label myScript = new Label("myScript", "callWicket();");
myScript.setEscapeModelStrings(false); // do not HTML escape JavaScript code
add(myScript);
|
Calling your Java Wicket component from JavaScript
If you add any class that extends AbstractDefaultAjaxBehavior to your page, wicket-ajax.js will be added to the header ofyour web page. wicket-ajax.js provides you with two basic methods to call your component:
Wicket 6.0+
You use Wicket.Ajax.get( ) and Wicket.Ajax.post( ) in JavaScript to do an Ajax call to Wicket manually. In Wicket 6, AbstractDefaultAjaxBehavior also has a convenience method to generate a JavaScript function that performs the call: getCallbackFunction(...). This method can also generate functions that pass parameters from JavaScript to Wicket.
Older Versions
function wicketAjaxGet(url, successHandler, failureHandler, precondition, channel)
and
function wicketAjaxPost(url, body, successHandler, failureHandler, precondition, channel)
| Note | ||
|---|---|---|
| ||
Note that some web servers gulp on HTTP POST requests with no POST content (in other words: "wicketAjaxPost($URL);" is evil). |
Example - Wicket 6.0+
This snippet is taken from a piece of code that makes use of PackageTextTemplate, which is added in the renderHead( component, response ) of AbstractDefaultAjaxBehavior
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
String componentMarkupId = component.getMarkupId();
String callbackUrl = behave.getCallbackUrl().toString();
Map<String, Object> map = new HashMap<>();
map.put( "callbackUrl", callbackUrl );
map.put( "args", "Your Arguments Here" );
map.put( "componentMarkupId", componentMarkupId );
PackageTextTemplate ptt = new PackageTextTemplate( clazz, "resources/main.js" );
OnDomReadyHeaderItem onDomReadyHeaderItem = OnDomReadyHeaderItem.forScript( ptt.asString( map ) );
|
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
var wcall = Wicket.Ajax.get({ u: '${callbackUrl}' + '${args}' });
|
Example - Older Versions
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
function callWicket() {
var wcall = wicketAjaxGet('$url$' + '$args$', function() { }, function() { });
}
}}}
|
'$url$'
...
is
...
obtained
...
from
...
the
...
method
...
behave.getCallbackUrl()
...
.
...
If
...
you
...
paste
...
the
...
String
...
returned
...
from
...
that
...
method
...
into
...
your
...
browser,
...
you'll
...
invoke
...
the
...
respond
...
method,
...
the
...
same
...
applies
...
for
...
the
...
javascript
...
method.
...
You
...
can
...
optionally
...
add
...
arguments
...
by
...
appending
...
these
...
to
...
the
...
URL
...
string.
...
They
...
take
...
the
...
form
...
&foo=bar.
Obtaining the GET/POST arguments on the server side
Ok, this is actually quite ugly, but you get the optional arguments in the response method like this:
| Code Block | ||
|---|---|---|
| ||
IRequestParameters params = RequestCycle.get().getRequest().getRequestParameters();
|
Or to retrieve a single parameter by its key:
| Code Block | ||
|---|---|---|
| ||
String paramFoo =&}}. h3. Obtaining the arguments Ok, this is actually quite ugly, but you get the optional arguments in the response method like so: {{{ Map map = ((WebRequestCycle) RequestCycle.get().getRequest().getRequestgetRequestParameters().getParameterMapgetParameterValue("foo"); }}} |