title: component(s) failed to render
body: <p>I am following the tutorial on <a href="http://www.7thweb.net/wicket-jquery-ui/wizard/DefaultWizardPage?3" rel="nofollow noreferrer">http://www.7thweb.net/wicket-jquery-ui/wizard/DefaultWizardPage?3</a></p>
  
  <p><strong>I get the error When running the my code</strong></p>
  
  <pre><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 &lt;wicket:extend&gt;.
  
  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]]
  
  </code></pre>
  
  <p>My code files looks as follows.</p>
  
  <p><strong><em>WizardPage.html</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:wicket="http://wicket.apache.org"&gt;
  &lt;head&gt;
      &lt;wicket:head&gt;
          &lt;title&gt;Wicket jQuery UI: wizard&lt;/title&gt;
      &lt;/wicket:head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;wicket:child&gt;
  
      &lt;div id="demo-panel"&gt;
          &lt;form wicket:id="form"&gt;
              &lt;button wicket:id="open"&gt;Create User&lt;/button&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;div wicket:id="feedback" style="width: 360px;"&gt;&lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div wicket:id="wizard"&gt;&lt;/div&gt;
  &lt;/wicket:child&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>WizardPage.java</strong></p>
  
  <pre><code>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&lt;Void&gt; form = new Form&lt;Void&gt;("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);
              }
          });
      }
  }
  </code></pre>
  
  <p><strong><em>User.java</em></strong></p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p><strong><em>UserWizard.java</em></strong></p>
  
  <pre><code>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&lt;User&gt;
  {
      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&lt;?&gt; 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&lt;User&gt;(new Model&lt;User&gt;());
      }
  
      /**
       * Provides the 'Name and email' step&lt;br&gt;
       * Associated markup file is DefaultWizardPage$UserWizard$Step1.html
       */
      class Step1 extends WizardStep
      {
          private static final long serialVersionUID = 1L;
  
          public Step1()
          {
              super("Name &amp; email", "Please provides a user name and an email");
  
              this.add(new RequiredTextField&lt;String&gt;("name"));
              this.add(new EmailTextField("mail"));
          }
      }
  
      /**
       * Provides the 'Role' step&lt;br&gt;
       * 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&lt;String&gt;("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("&lt;ul&gt;");
              builder.append("&lt;li&gt;").append("User name: ").append(user.getName()).append("&lt;/li&gt;");
              builder.append("&lt;li&gt;").append("User mail: ").append(user.getMail()).append("&lt;/li&gt;");
              builder.append("&lt;li&gt;").append("User role: ").append(user.getRole()).append("&lt;/li&gt;");
              builder.append("&lt;/ul&gt;");
  
              this.setContentModel(Model.of(builder.toString()));
          }
      }
  }
  </code></pre>
  
  <p>I tried solving the problem with these tags.</p>
  
  <pre><code>&lt;input wicket:id="name"/&gt;
  &lt;input wicket:id="mail"/&gt;
  </code></pre>
  
  <p>But with no luck</p>
  
  <p>How do I solve this?</p>