Monday, 20 June 2016

How to use Panels in Wicket framework ?


Panels in Wicket framework

Panels  are the components which can be reusable, this is one of the feature of wicket framework.
Here, we have created a class extending wicket Panel class and put all the component code which we want to reause : 

Here I have added the button code. 


public class SamplePanel extends Panel {
   private List<String> genderChoice = new ArrayList<String>();

   public SamplePanel(String id) {
       super(id);
             
       genderChoice.add("male");
       genderChoice.add("female");
             
       final UserModel userModel = new UserModel();
       Form<?> form = new Form<Object>("form");
             
       final TextField<String> textField = new TextField<String>
              ("text", new PropertyModel<String>(userModel, "name"));
       final DropDownChoice<String> gender = new DropDownChoice<String>(
              "gender", new PropertyModel<String>(userModel, "gender") , 
              genderChoice);
             
       /*AjaxButton ajaxButton = new AjaxButton("submit") {
          private static final long serialVersionUID = 1L;

          @Override
          protected void onSubmit(AjaxRequestTarget target, Form<?> form){
               super.onSubmit();
               textField.setEnabled(false);
               gender.setEnabled(false);
               target.addComponent(textField);
               target.addComponent(gender);
          };
                    
         }; */
             
             
        Button button = new Button("submit"{
            public void onSubmit() {
                super.onSubmit();
                System.out.println("Name: "+userModel.getName());
                System.out.println("Gender"+userModel.getGender());
            };
        };
             
        add(form);
             
        form.add(textField);
        form.add(gender);
        form.add(button);
    }

}


Create a new parallel HTML which should be starting with  <wicket:panel> and put all the markup code inside that panel : 
<wicket:panel>
    <form wicket:id="form">
         <input type="text" wicket:id="text"/> <br></br>
         <select wicket:id="gender">
              <option> </option>
         </select>
         <input type="submit" wicket:id="submit"/>
    </form>
</wicket:panel>


and add that panel inside the page where we want to add.

public class WelcomePage extends WebPage {      
     public WelcomePage() {
         add(new SamplePanel("panel1"));
         add(new SamplePanel("panel2"));
     }
}

Here I have added two panels panel1 and panel2.


Use those panels inside the page where we have to add : 
<!DOCTYPE html>
<html xmlns="http://wicket.apache.org">
<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
</head>
<body>
    <div wicket:id="panel1"></div>
    <div wicket:id="panel2"></div>
</body>
</html>

No comments:

Post a Comment

Note: only a member of this blog may post a comment.