Did you add HTML markup for the steps to your project?
See the “name” and “mail” markup in Step1.html
Solution 1 :
Problem :
I am following the tutorial on http://www.7thweb.net/wicket-jquery-ui/wizard/DefaultWizardPage?3
I get the error When running the my code
Last cause: The component(s) below failed to render. Possible reasons could be that:
1) you have added a component in code but forgot to reference it in the markup (thus the component will never be rendered),
2) if your components were added in a parent container then make sure the markup for the child container includes them in <wicket:extend>.
1. [RequiredTextField [Component id = name, page = com.mycompany.WizardPage, path = wizard:form:view:name, type = org.apache.wicket.markup.html.form.RequiredTextField, isVisible = true, isVersioned = false]]
2. [EmailTextField [Component id = mail, page = com.mycompany.WizardPage, path = wizard:form:view:mail, type = org.apache.wicket.markup.html.form.EmailTextField, isVisible = true, isVersioned = false]]
My code files looks as follows.
WizardPage.html
<!DOCTYPE html>
<html xmlns_wicket="http://wicket.apache.org">
<head>
<wicket:head>
<title>Wicket jQuery UI: wizard</title>
</wicket:head>
</head>
<body>
<wicket:child>
<div id="demo-panel">
<form wicket_id="form">
<button wicket_id="open">Create User</button>
<br/><br/>
<div wicket_id="feedback" style="width: 360px;"></div>
</form>
</div>
<div wicket_id="wizard"></div>
</wicket:child>
</body>
</html>
WizardPage.java
package com.mycompany;
import com.googlecode.wicket.jquery.ui.JQueryIcon;
import com.googlecode.wicket.jquery.ui.form.button.AjaxButton;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
public class WizardPage extends WebPage {
private static final long serialVersionUID = 1L;
public WizardPage() {
// Form //
Form<Void> form = new Form<Void>("form");
this.add(form);
// FeedbackPanel //
final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");
form.add(feedback.setOutputMarkupId(true));
// Wizard //
final UserWizard wizard = new UserWizard("wizard", "Create a user") {
private static final long serialVersionUID = 1L;
@Override
protected void onCancel(AjaxRequestTarget target) {
this.info("Canceled...");
target.add(feedback);
}
@Override
protected void onFinish(AjaxRequestTarget target) {
User user = this.getModelObject();
this.info(String.format("Created user: '%s' - %s [%s]", user.getName(), user.getMail(), user.getRole()));
target.add(feedback.setEscapeModelStrings(false));
}
};
this.add(wizard);
// Button //
form.add(new AjaxButton("open") {
private static final long serialVersionUID = 1L;
@Override
protected String getIcon() {
return JQueryIcon.GEAR;
}
@Override
protected void onSubmit(AjaxRequestTarget target) {
wizard.setModelObject(new User());
wizard.open(target);
}
});
}
}
User.java
package com.mycompany;
import org.apache.wicket.util.io.IClusterable;
public class User implements IClusterable
{
private static final long serialVersionUID = 1L;
private final String name;
private final String mail;
private final String role;
public User()
{
this.name = "";
this.mail = "";
this.role = "";
}
public User(String name, String mail, String role)
{
this.name = name;
this.mail = mail;
this.role = role;
}
@Override
public String toString()
{
return String.format("%s [%s] - %s", this.getName(), this.getMail(), this.getRole());
}
public String getName() {
return name;
}
public String getMail() {
return mail;
}
public String getRole() {
return role;
}
}
UserWizard.java
package com.mycompany;
import com.googlecode.wicket.jquery.ui.form.RadioChoice;
import com.googlecode.wicket.jquery.ui.widget.wizard.AbstractWizard;
import org.apache.wicket.extensions.wizard.StaticContentStep;
import org.apache.wicket.extensions.wizard.WizardModel;
import org.apache.wicket.extensions.wizard.WizardStep;
import org.apache.wicket.markup.html.form.EmailTextField;
import org.apache.wicket.markup.html.form.RequiredTextField;
import org.apache.wicket.model.CompoundPropertyModel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import java.util.Arrays;
abstract class UserWizard extends AbstractWizard<User>
{
private static final long serialVersionUID = 1L;
public UserWizard(String id, String title)
{
super(id, title);
WizardModel wizardModel = new WizardModel();
wizardModel.add(new Step1());
wizardModel.add(new Step2());
wizardModel.add(new Step3());
wizardModel.setLastVisible(true); // makes the 'last step button' visible
this.init(wizardModel);
}
@Override
protected IModel<?> initModel()
{
// We need to have a model at initialization if none has been supplied to the ctor
// Calling #setModel should be avoided afterward, so we can specify a CPM here
return new CompoundPropertyModel<User>(new Model<User>());
}
/**
* Provides the 'Name and email' step<br>
* Associated markup file is DefaultWizardPage$UserWizard$Step1.html
*/
class Step1 extends WizardStep
{
private static final long serialVersionUID = 1L;
public Step1()
{
super("Name & email", "Please provides a user name and an email");
this.add(new RequiredTextField<String>("name"));
this.add(new EmailTextField("mail"));
}
}
/**
* Provides the 'Role' step<br>
* Associated markup file is DefaultWizardPage$UserWizard$Step2.html
*/
class Step2 extends WizardStep
{
private static final long serialVersionUID = 1L;
public Step2()
{
super("User role", "Please select the user role");
this.add(new RadioChoice<String>("role", Arrays.asList("Admin", "User", "Guest")).setRequired(true));
}
}
/**
* Provides the 'summary' step
*/
class Step3 extends StaticContentStep
{
private static final long serialVersionUID = 1L;
public Step3()
{
super("Summary", "Please review information below:", Model.of(), true);
}
@Override
protected void onConfigure()
{
super.onConfigure();
User user = UserWizard.this.getModelObject();
StringBuilder builder = new StringBuilder("<ul>");
builder.append("<li>").append("User name: ").append(user.getName()).append("</li>");
builder.append("<li>").append("User mail: ").append(user.getMail()).append("</li>");
builder.append("<li>").append("User role: ").append(user.getRole()).append("</li>");
builder.append("</ul>");
this.setContentModel(Model.of(builder.toString()));
}
}
}
I tried solving the problem with these tags.
<input wicket_id="name"/>
<input wicket_id="mail"/>
But with no luck
How do I solve this?