Specific Examples of Components
Now I’ll give you some cheat examples for using components.
And also a little example with AJAX.
A note which applies to every featured component here:
In some situations, it could be handy that you declare the field of the component-object as a member field.
How to make a Link:
//Within a constructor or function in a Class inherited from BasePage:
this.add( new Link<Void>( "exampleLink" )
{
@Override
public void onClick()
{
// Code goes here
}
} );
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p><a href="#" wicket:id="exampleLink">click here</a></p>
</wicket:extend>
</body>
</html>
How to make a BookmarkablePageLink:
The difference is that this type of link could be bookmarked, the other type, Link, not.
//Within a constructor or function in a Class inherited from BasePage: this.add( new BookmarkablePageLink<Void>( "exampleBookLink", NextPage.class );
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p><a href="#" wicket:id="exampleBookLink">click here</a></p>
</wicket:extend>
</body>
</html>
How to make a Label:
A label is used to replace static information with information from the logic layer.
/// Class definition inherited from BasePage
private String personName;
/**
* Constructor:
*/
public ExamplePage()
{
this.personName = "John Doe";
this.add( new Label("lblPersonName", new PropertyModel<String>(this, "personName") );
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>Welcome <span wicket:id="lblPersonName">Nobody</span> !</p>
</wicket:extend>
</body>
</html>
How to make a Form:
public class ExamplePage
extends BasePage {
/**
* Constructor:
*/
public ExamplePage()
{
super();
// Note: In some situations, it could be handy that you declare the field of your Form as member field.
Form exampleForm = new Form("exampleForm")
{
@Override
public void onSubmit()
{
// More code goes here
}
};
this.add(exampleForm);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>This an example page</p>
<form wicket:id="exampleForm">
<label>This is an example of the form</label>
<!-- More code goes here -->
</form>
</wicket:extend>
</body>
</html>
Some form-specific components:
How to make a Button:
Button-Objects are more used to create a submit button for the form, which each their own destination.
public class ExamplePage
extends BasePage {
/**
* Constructor:
*/
public ExamplePage()
{
super();
// Note: Likely in this situation, it could be handy that you declare the field of your Form as member field.
Form exampleForm = new Form("exampleForm");
exampleForm.add(new Button("btnRefresh")
{
@Override
public void onSubmit() {
super.onSubmit();
refreshScreen();
}
});
this.add(exampleForm);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>This an example page</p>
<form wicket:id="exampleForm">
<label>This is an example of the form</label>
<input wicket:id="btnRefresh" type="submit" value="Refresh" />
</form>
</wicket:extend>
</body>
</html>
How to make a TextField:
public class ExamplePage
extends BasePage {
private String personName;
/**
* Constructor:
*/
public ExamplePage()
{
super();
this.personName = "John Doe";
// Note: Likely in this situation, it could be handy that you declare the field of your Form as member field.
Form exampleForm = new Form("exampleForm");
// Please note that there are also other type of validators available:
exampleForm.add(TextField<String>( "txtPersonName", , new PropertyModel<String>(this, "personName") ).add( StringValidator.minimumLength( 2 ) ).setRequired( true );
exampleForm.add(new Button("btnSave")
{
@Override
public void onSubmit() {
super.onSubmit();
save();
}
});
this.add(exampleForm);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>This an example page</p>
<form wicket:id="exampleForm">
<label>This is an example of the form</label>
<input wicket:id="txtPersonName" type="text" />
<input wicket:id="btnSave" type="submit" value="Save" />
</form>
</wicket:extend>
</body>
</html>
How to make a TextArea:
public class ExamplePage
extends BasePage {
private String personDescription;
/**
* Constructor:
*/
public ExamplePage()
{
super();
this.personDescription= "He Loves to code";
// Note: Likely in this situation, it could be handy that you declare the field of your Form as member field.
Form exampleForm = new Form("exampleForm");
// Please note that there are also other type of validators available:
exampleForm.add(TextArea<String>( "txtPersonDescription", , new PropertyModel<String>(this, "personDescription") ).add( StringValidator.minimumLength( 2 ) ).setRequired( true );
exampleForm.add(new Button("btnSave")
{
@Override
public void onSubmit() {
super.onSubmit();
save();
}
});
this.add(exampleForm);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>This an example page</p>
<form wicket:id="exampleForm">
<label>This is an example of the form</label>
<input wicket:id="txtPersonDescription" type="text" />
<input wicket:id="btnSave" type="submit" value="Save" />
</form>
</wicket:extend>
</body>
</html>
How to make a drop down chooser:
This one is somewhat complicated, since you also have to create a special class to render each option.
public class ExamplePage
extends BasePage {
private Status personStatus;
private List<Status> states;
/**
* Constructor:
*/
public ExamplePage()
{
super();
// Status is an enum.
this.personStatus = Status.OK;
this.states = Arrays.asList(Status.values());
// Note: Likely in this situation, it could be handy that you declare the field of your Form as member field.
Form exampleForm = new Form("exampleForm");
DropDownChoice chsStatus = new DropDownChoice("chsStatus", new PropertyModel<String>(this, "personStatus"), this.states, new StatusChoiceRenderer());
chsStatus.setNullValid(false);
exampleForm.add(chsStatus);
exampleForm.add(new Button("btnSave")
{
@Override
public void onSubmit() {
super.onSubmit();
save();
}
});
this.add(exampleForm);
}
}
/**
* The choice render class for the statuses.
*/
private class StatusChoiceRenderer
extends ChoiceRenderer<Status>
{
/**
* Constructor:
*/
public StatusChoiceRenderer()
{
super();
}
/**
* @return The display value of the status
* @param status The Status
*/
@Override
public Object getDisplayValue(Status status) {
return status.getStatus();
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>This an example page</p>
<form wicket:id="exampleForm">
<label>This is an example of the form</label>
<select wicket:id="chsStatus" >
<option selected="selected">Choose a status</option>
<option>OK</option>
<option>Standby</option>
</select>
<input wicket:id="btnSave" type="submit" value="Save" />
</form>
</wicket:extend>
</body>
</html>
How to use repeating for filling a Table and Fieldsets of a Form:
public class ExamplePage
extends BasePage {
/**
* Constructor:
*/
public ExamplePage()
{
super();
// Note: In some situations, it could be handy that you declare the field of your Form as member field.
Form exampleForm = new Form("exampleForm")
{
List persons = personManager.getAll();
add( new ListView<Person>( "personList", persons )
{
@Override
protected void populateItem( ListItem<Person> li )
{
final Person person = li.getModelObject();
li.add( new Label( "personId", "" + person.getID() ) );
li.add( new Label( "personName", person.getFirstName() + " " + person.getSurName() ) );
li.add( new Label( "personAddress", person.getAddress() ) );
li.add( new Label( "personTelephone", person.getTelephone() ) );
li.add( new Link<Person>( "btnDeletePerson", li.getModel() )
{
@Override
public void onClick()
{
personManager.remove( getModelObject() );
this.removePerson( getModelObject() );
}
});
}
});
add( new Link<Void>( "btnNewPerson" )
{
@Override
public void onClick()
{
this.addPerson();
}
});
};
this.add(exampleForm);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>This an example page</p>
<form wicket:id="frmList">
<wicket:enclosure child="">
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
<th>Actions</th>
</tr>
<tr wicket:id="personEntry">
<td><span wicket:id="personId">0</span></td>
<td><span wicket:id="personName">Name</span></td>
<td><span wicket:id="personAddress">Address</span></td>
<td><span wicket:id="personTelephone">Telephone</span></td>
<td>
<input wicket:id="btnDeletePerson" type="submit" value="Delete" />
</td>
</tr>
<tr>
<td colspan="2"><input wicket:id="btnNewPerson" type="submit" value="New Person" /></td>
</tr>
</table>
</wicket:enclosure>
</form>
</wicket:extend>
</body>
</html>
How to hide and unhide a component with AJAX:
public class ExamplePage
extends BasePage {
private WebMarkupContainer callContainer;
private Status personStatus;
private List<Status> states;
/**
* Constructor:
*/
public ExamplePage()
{
super();
// Status is an enum.
this.personStatus = Status.OK;
this.states = Arrays.asList(Status.values());
// Note: Likely in this situation, it could be handy that you declare the field of your Form as member field.
Form exampleForm = new Form("exampleForm");
DropDownChoice chsStatus = new DropDownChoice("chsStatus", new PropertyModel<String>(this, "personStatus"), this.states, new StatusChoiceRenderer());
chsStatus.setNullValid(false);
chsStatus.add(new AjaxFormComponentUpdatingBehavior("onChange") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
if (personStatus!= null) {
if( (personStatus.getId() <= 1) || personStatus.getTitle().toLowerCase().
matches(".+(Standby).+") ) {
amountOfKilometersContainer.setVisibilityAllowed(false);
} else {
callContainer.setVisibilityAllowed(true);
}
target.add(callContainer);
}
}
});
exampleForm.add(chsStatus);
this.callContainer = new WebMarkupContainer("callContainer");
this.callContainer.setOutputMarkupPlaceholderTag(true).setOutputMarkupId(true);
this.callContainer.setVisibilityAllowed(true);
exampleForm.add(this.callContainer);
this.callContainer.add(new Button("btnCall")
{
@Override
public void onSubmit() {
super.onSubmit();
call();
}
});
this.add(exampleForm);
}
}
/**
* The choice render class for the statuses.
*/
private class StatusChoiceRenderer
extends ChoiceRenderer<Status>
{
/**
* Constructor:
*/
public StatusChoiceRenderer()
{
super();
}
/**
* @return The display value of the status
* @param status The Status
*/
@Override
public Object getDisplayValue(Status status) {
return status.getStatus();
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example Page - Experience System</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<wicket:extend>
<p>This an example page</p>
<form wicket:id="exampleForm">
<label>This is an example of the form</label>
<fieldset>
<select wicket:id="chsStatus" >
<option selected="selected">Choose a status</option>
<option>OK</option>
<option>Standby</option>
</select>
</fieldset>
<fieldset wicket:id="callContainer">
<input wicket:id="btnCall" type="submit" value="Call" />
</fieldset>
</form>
</wicket:extend>
</body>
</html>
The building of a web application 