Solution 1 :

Did you add HTML markup for the steps to your project?

See the “name” and “mail” markup in Step1.html

Problem :

I am following the tutorial on

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.


<!DOCTYPE html>
<html xmlns_wicket="">
        <title>Wicket jQuery UI: wizard</title>

    <div id="demo-panel">
        <form wicket_id="form">
            <button wicket_id="open">Create User</button>
            <div wicket_id="feedback" style="width: 360px;"></div>
    <div wicket_id="wizard"></div>

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");

        // FeedbackPanel //
        final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");

        // Wizard //
        final UserWizard wizard = new UserWizard("wizard", "Create a user") {

            private static final long serialVersionUID = 1L;

            protected void onCancel(AjaxRequestTarget target) {

            protected void onFinish(AjaxRequestTarget target) {
                User user = this.getModelObject();

      "Created user: '%s' - %s [%s]", user.getName(), user.getMail(), user.getRole()));


        // Button //
        form.add(new AjaxButton("open") {

            private static final long serialVersionUID = 1L;

            protected String getIcon() {
                return JQueryIcon.GEAR;

            protected void onSubmit(AjaxRequestTarget target) {
                wizard.setModelObject(new User());

package com.mycompany;


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.mail = "";
        this.role = "";
    public User(String name, String mail, String role)
    { = name;
        this.mail = mail;
        this.role = role;
    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;

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


    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);

        protected void 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>");


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?