What's the cleanest way I can make a checkbox automatically submit the form it belongs to in Wicket? I don't want to include a submit button at all. The checkbox is backed by a boolean field in a domain object ("Account" in this case).
Simplified example with irrelevant parts omitted:
EntityModel<Account> accModel = new EntityModel<Account>(Account.class, id);
PropertyModel<Boolean> model = new PropertyModel<Boolean>(accModel, "enabled");
CheckBox checkBox = new CheckBox("cb", model);
Form form = new Form("form");
form.add(checkBox);
add(form);
HTML:
<form wicket:id="form" id="form" action="">
<input wicket:id="cb" type="checkbox" />
</form>
Edit: To clarify, my goal is just to change the domain object's field (-> value in database too) when the checkbox is toggled. Any (clean, easy) way to achieve that would be fine. (I'm not sure if you actually need the form for this.)
Just overriding wantOnSelectionChangedNotifications() for the checkbox—even without overriding onSelectionChanged()—seems to do what I want.
This way you don't need the form on Java side, so the above code would become:
EntityModel<Account> accModel = new EntityModel<Account>(Account.class, id);
add(new CheckBox("cb", new PropertyModel<Boolean>(accModel, "enabled")){
protected boolean wantOnSelectionChangedNotifications() {
return true;
}
});
Feel free to add better solutions, or a better explanation of what's going on with this approach!
Edit: On closer inspection, I guess the method's Javadoc makes it reasonably clear why this does what I wanted (emphasis mine):
If true, a
roundtrip will be generated with each
selection change, resulting in the
model being updated (of just this
component) and onSelectionChanged
being called.
While this may work, you are far better off using AjaxCheckBox. An anonymous subclass can be wired to receive events immediately as well as make changes to the UI outside the checkbox itself.
final WebMarkupContainer wmc = new WebMarkupContainer("wmc");
final EntityModel<Account> accModel = new EntityModel<Account>(Account.class, id);
wmc.setVisible(false);
wmc.setOutputMarkupPlaceholderTag(true);
form.add(new AjaxCheckBox("cb", new PropertyModel<Boolean>(accModel, "enabled")) {
#Override
protected void onUpdate(AjaxRequestTarget target) {
wmc.setVisible(accModel.isEnabled());
target.addComponent(wmc);
// .. more code to write the entity
}
});
In this contrived example, the WebMarkupContainer would be made visible in sync with the value of the checkbox.
Related
html file which looks like this:
<wicket:panel>
<form wicket:id="adminUIForm">
<table wicket:id="datatable" class="datatable"></table>
<div wicket:id="institutTablePanel"></div>
</form>
</wicket:panel>
But in my Java Code I only want to instantiate the component institutTablePanel, when a row in the datatable is clicked, because the constructor looks like this:
target.add(new InstitutTablePanel("institutLabelPabel", selectedContact));
And selectedContact cannot be empty.
Is there a possibility of doing this without getting an error that it cannot find the component in my JavaCode?
Edit:
This might be helpful
#Override
protected Item<Kontakt> newRowItem(final String id, final int index,
final IModel<Kontakt> model) {
Item<Kontakt> rowItem = new Item<Kontakt>(id, index, model);
rowItem.add(new AjaxEventBehavior("onclick") {
private static final long serialVersionUID = 1L;
#Override
protected void onEvent(AjaxRequestTarget target) {
selectedKontakt = model.getObject();
target.add(new InstitutTablePanel("institutTablePanel", selectedKontakt));
}
});
return rowItem;
}
Create an empty WebMarkupContainer that is a blank div and add it to your page/parent component. Next, onClick, use addOrReplace and replace the the WebMarkupContainer with the InstitutTablePanel. Both the WebMarkupContainer and the InstitutTablePanel should have the same wicket:id
You have to target existing components in your ajax calls, therefore i recommend initializing an InstitutTablePanel on initialization of the page with the model as Panel model. Passing model objects without the wrapping model is discouraged in wicket and leads to unnecessary problems.
You can change the InstitutTablePanel to be empty when its model object is null or empty.
Also, Wicket is built around passing models to components and not plain objects which might seem unnecessary at first but when complexity rises the pattern is preventing many bugs and errors.
Edit: dont forget to use setoutputmarkupid(true) on the added panel.
I was trying to create a link with the username on it (i.e. dynamic data), and couldn't manage to get the StringResourceModel to work with a Link.
My code looked something like:
Properties:
some.key=User name is: {0}
Java:
StringResourceModel model =
new StringResourceModel("some.key", this, null, new Object[] { getUserName() });
add(new Link("someid", model) {
#Override
public void onClick() {
// do something ...
}
});
HTML:
<a wicket:id="someid">some text to replace</a>
However, that didn't work, i.e. the text was never replaced.
I tried a different direction, which did work, and looks something like this:
Java:
StringResourceModel model =
new StringResourceModel("some.key", this, null, new Object[] { getUserName() });
Link link;
add(link = new Link("someid") {
#Override
public void onClick() {
// do something ...
}
});
link.add(new LabeL("anotherid", model));
HTML:
<a wicket:id="someid"><span wicket:id="anotherid">some text to replace</span></a>
(the properties file is the same).
My question is, am I right to assume that the StringResourceModel doesn't work with Links (I call this an assumption since I didn't see anything about this in the JavaDOC) ?
If not, how can the StringResourceModel be used directly with the Link, without the mediator Label ?
The model parameter in the Link constructor isn't meant to be used as a display value. To set the text of the link you need to explicitly add a Label to it:
Link<Void> link = new Link<Void>("link");
link.add(new Label("label", model);
add(link);
and in HTML:
<a wicket:id="link"><span wicket:id="label"></span></a>
The model in the constructor is meant to be used in the onclick method (or similar). For example (from the JavaDoc):
IModel<MyObject> model = ...;
Link<MyObject> link = new Link<MyObject>("link", model) {
public void onClick() {
MyObject obj = getModelObject();
setResponsePage(new MyPage(obj));
}
};
add(link);
In your first example, you aren't telling wicket to replace the text. You just apply a model to the link without telling wicket what to do with it.
To fix this, you'd need to replace your HTML with something along the lines of
<a wicket:id="someid"><wicket:message key="some.key">some text to replace</wicket:message></a>
I don't remember the syntax completely and can't try this right now but it should help you anyway.
I have the following java and html code:
this.leakageModel = new PropertyListView<Leakage> ( "leakage", new ArrayList<Leakage> ()) {
private static final long serialVersionUID = 1L;
#Override
protected void populateItem (final ListItem<Leakage> item) {
Link<String> brandLink = new Link<String> ("brandLink") {
private static final long serialVersionUID = -480222850475280108L;
#Override
public void onClick () {
//change another model in the page to update
//another table when the link is clicked
}
};
brandLink.add (new Label ("brand"));
item.add (brandLink);
} };
add (this.leakageModel);
html file:
<tr wicket:id="leakage" class="testClass">
<td class="testClass">
<a wicket:id="brandLink" href="#">
<span wicket:id="brand"></span>
</a>
</td>
</tr>
What I want to do is to be able to call a javascript function from inside the onClick() method.
The model update that I currently do inside the onClick method works well and updates another table on the page.
However everything I have tried to call a javascript function or change the css style has failed.
For instance:
Adding a css class:
add (new AttributeAppender("class", new Model("anotherclass"), " "));
Using an AjaxLink type instead, and a number of other things I have tried to no avail.
On a related note, my original intention is to hide all rows in the table except the one I have clicked. Maybe I can do this just from the Java code and have no need for Javascript at all, but updating the css as above doesn't work.
Any suggestions as to what am I doing wrong?
On a related note, my original intention is to hide all rows in the
table except the one I have clicked.
Instead of answering your question, I will try to provide a solution to your problem :).
It makes perfect sense to hide the table row via javascript. I would suggest doing it with Jquery as described in Hiding all but first table row with jQuery:
$("#myTbl tr:not(nth-child(3))").hide();
Now, you have to execute the above javascript snippet each time a user clicks your Wicket link. For this, you can for example create your own link class like this:
public class JavascriptLink extends Label{
public JavascriptLink(String id, String label) {
super(id, label);
add(new AttributeAppender("onclick", "...your javascript here..."));
}
}
I leave it to you to combine the jquery with the JavascriptLink to meet your requirements. It should work going in this direction.
I have a :
Client Class
ListView
TextField
I need to populate my ListView in order to form a table:
WORKING CODE:
clientModel = new LoadableDetachableModel() {
#Override
protected Object load() {
return Client.getClientListByCompanyName(searchClientInput.getValue());
}
};
searchClientInput.setModel(new Model<String>());
searchClientInput.add(new AjaxFormComponentUpdatingBehavior("onkeyup") {
#Override
protected void onUpdate(AjaxRequestTarget target) {
target.add(clientListViewContainer);
}
});
clientListView = new ListView<Client>(CLIENT_ROW_LIST_ID, clientModel) {
#Override
protected void populateItem(ListItem<Client> item) {
Client client = item.getModelObject();
item.add(new Label(CLIENT_ROW_COMPANY_CNPJ_ID, client.getCompanyName()));
item.add(new Label(CLIENT_ROW_COMPANY_NAME_ID, client.getCompanyCnpj()));
}
};
clientListViewContainer.setOutputMarkupId(true);
clientListViewContainer.add(clientListView);
add(clientListViewContainer);
Now, in my HTML, I have a TextField. Whenever an user types something in this TextField, a select will be made in the database with whatever he typed. So for each word, a select is made, and the table needs to be updated. I am guessing I will need to use AJAX and possibly a Model. I'm kind of lost about how I can do this, if someone can provide me examples I would be very grateful.
EDIT: New code that is throwing exception: Last cause: Attempt to set model object on null model of component: searchClientForm:searchClientInput
EDIT 2: Ok so the exception was that my TextField didn't had a model to bind data to. So what I did was: searchClientInput.setModel(new Model<String>());
I also had a problem with the event. Using onkeydown was working, but not as intended. I had Company Name 1-4. If I typed Company Name 1, I would need to press one key again so the table would get updated. With onkeyup this don't happens. Thanks for the help.
You could give the ListView a LoadableDetachableModel which provides the selected clients matching your TextField's value.
Use an AjaxFormComponentUpdatingBehavior on your TextField which add a parent of the ListView to the request target (don't forget #setOutputMarkupId().
I believe the best way to perform what you want (which is repainting a table/list at each input change --> DB access) is with a DataView and a DataProvider.
A DataView is just like the ListView component except it uses an IDataProvider to get the data you want to present. You are able to implement the DataProvider so it accesses your DB, and you can add restrictions (where clauses) to the DataProvider.
[this is more like pseudo-code]
public final class MyDataProvider<T> extends SortableDataProvider<T> {
// ...
Set filters;
// filters is the set where the restrictions you want to apply are stored
...
#Override
public Iterator<T> iterator(int first, int count) {
// DAO (Data Access Object) access to DB
// ...
return dao.findByRestrictions(filters).iterator();
}
...
}
Now on the ajax event on your input component you are able to update the filter being used in the DataProvider, and in the the next repaint of the DataView, the provider will "pull" the data matching the restrictions defined in the filter.
Hope it helps. Best regards.
In a Wicket app, I have a bunch of <button> elements to which I'm attacking a Link component. Now in the onClick() method of the component I want to disable or change the style of the button. How can I do that? Calling setEnabled(false) has no effect.
Repeated uses of onClick() are operating on the same object in memory. If you're not using Ajax, you can still maintain some state in an anonymous subclass of Link. Then, you can use onBeforeRender() and onComponentTag() to change how it is displayed each time.
Link<Void> link = new Link<Void>("myLink") {
private String customCSS = null;
private boolean customEnabled = true;
public void onClick() {
if (/* test to determine disabled */) {
customCSS = "disabled";
customEnabled = false;
} else {
customCSS = null;
customEnabled = true;
}
}
#Override
protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
if (customCSS != null)
tag.put("class", customCSS);
}
#Override
public boolean isEnabled() {
return super.isEnabled() && customEnabled;
}
};
AttributeModifiers (or other behaviors) aren't good for this case because, if you add them in the onClick() method, they will begin stacking on the same link for each click - since they are maintained as part of the Link's state.
Your Link can keep track of all manner of state, allowing your onClick() method to enable/disable/change/etc with repeated clicks.
You can also override onBeforeRender(), isVisible(), and other methods that are run each time the link is displayed on the page. The constructor, onConfigure(), and others are run just once, regardless of how many times you click the button.
I don't think this is an entirely good idea in Wicket. Of course it could be done by trickery, but it's far simpler to either:
Override the isEnabled() method to return a value derived from the model of the form/component.
Attach an AttributeModifier when you create the component, and use a model for it which returns a value derived as above.
Whichever you choose, the principle is to let Wicket "pull" rendering information in rather than pushing it explicitly.
The answer provided by Michael Borgwardt is nearly correct.
The problem is that you use Link. Disabled Links use <span> instead of
<a>/<button> and are surrounded with <em> by default. Using Button
component will set 'disabled' attribute in the element.
I would like to add, that you need to use HTML button element instead of <a> (link). Original answer can be counfusing, because Link and Button also exist in Wicket.
I think AjaxCallDecorator should be the class you need to use to disable/change style of the button.
The problem is that you use Link. Disabled Links use <span> instead of <a>/<button> and are surrounded with <em> by default.
Using Button component will set 'disabled' attribute in the element.
Take a look at SimpleAttributeModifier and AttributeAppender. Depending on your actual requirements one of those should do the trick. SimpleAttributeModifier adds or replaces an attribute of any HTML-Tag that has a prepresentation in wicket (replaces the css class), while AttributeAppender appends to the attributes (adds another css class). This should work for enabling/disabling buttons as well but I haven't tried that.
Example:
Label label = new Label("id", "Some silly text.")
add(label);
label.add(new SimpleAttributeModifier("class", "my-css-class");
For Ajax you'll have to add the component to the target as well.
More detailed example:
Java code:
import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Button;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.model.Model;
public class DemoPage extends WebPage {
public DemoPage() {
Form form = new Form("form");
add(form);
final WebMarkupContainer wmc = new WebMarkupContainer("greenText");
form.add(wmc);
form.add(new Link("redLink"){
#Override
public void onClick() {
wmc.add(new SimpleAttributeModifier("class", "redText"));
}});
final Button boldButton = new Button("boldButton"){
#Override
public void onSubmit() {
wmc.add(new AttributeAppender("class", true, new Model<String>("boldText"), " "));
}};
form.add(boldButton);
Link disabler = new Link("buttonDisabler") {
#Override
public void onClick() {
boldButton.add(new AttributeAppender("disabled", true, new Model<String>("disabled"), " "));
}
};
form.add(disabler);
}
}
corresponding HTML:
<html>
<head>
<style>
.redText {
color: red;
}
.greenText {
color: green;
}
.boldText {
font-weight: bold;
}
</style>
</head>
<body>
<form wicket:id="form">
<div class="greenText" wicket:id="greenText">This is Green.</div><br />
Make it red<br />
<input type="submit" wicket:id="boldButton" value="Make it bold" /><br />
Disable the button
</form>
</body>
</html>