Faster Development With EasyWicket

Erdinç Kocaman

Feb. 26, 10 · Interview

Like (0)

Save

10.26K Views

Wicket is a component based web framework which allows you to develop web applications in a similar way the desktop applications developed. The framework has very little effect on the HTML markup used. The dynamic elements of the html markup are marked with "wicket:id" attribute only. Eventhough it has very little addition on markup, its connection with the backend is very powerful thanks to the IModel interface.

IModel interface provides all the data the user interface elements need. Because the framework depends heavily on IModel interface, many implementations exist for IModel interface, but choosing the right model may be confusing at first. In addition to this, components of dynamic html elements created on server side but the creation and configuration of the components may lead to unnecessarily complex code.

For this reason, I am proposing another approach by using annotations to create and configure components on the server side. In order to explain it, I will create a simple "new user" page.

The source codes of the page is below;

PGNewUser.html :

<html>
	<head>
		<title>New User</title>
	</head>
<body>
<form wicket:id="form">
<table>
	<tr>
		<td> Name </td>
		<td> <input type="text" wicket:id="txtName"/> </td>
	</tr>
	<tr>
		<td> Surname </td>
		<td> <input type="text" wicket:id="txtSurname"/> </td>
	</tr>
	<tr>
		<td> Country </td>
		<td> <select wicket:id="countrySelection" /> </td>
	</tr>
	<tr>
		<td></td>
		<td> <button type="submit" wicket:id="btnSubmit"> Send </button> </td>
	</tr>	
</table>
</form>
</body>
</html>

PGNewUser.java:

public class PGNewUser extends WebPage implements IEasyWicketContainer{

   @EasyWicket(id="form")
   Form<Void> form;
	
   @EasyWicket(id="form.txtName", value="name")
   TextField<String> txtName;
	
   @EasyWicket(id="form.txtSurname", value="surname")
   TextField<String> txtSurname;
	
   @EasyWicket(id="form.countrySelection", value="selectedCountry", 
			list="countryList", idProperty="name", displayProperty="name")
   DropDownChoice<Country> countrySelection;
	
   @EasyWicket(id="form.btnSubmit", action="actionSubmit")
   Button btnSubmit;

	
   private static Logger logger = LoggerFactory.getLogger(PGNewUser.class);
   private List<Country> countryList;
   private Country selectedCountry;
   private String name, surname;
	
	
   public void initValues() {
      countryList = Arrays.asList(Country.values());
      selectedCountry = countryList.get(0);
   }
	
   public void pack() {
   }
	
   public void setCurrentWidgetContext(WidgetContext widgetContext) {
   }
	 
   public void actionSubmit() {
      logger.info("name=" + name + " surname=" + surname + " selected country=" + selectedCountry);
   }
}

Components are marked with EasyWicket annotation.

EasyWicket.java

@Retention(RetentionPolicy.RUNTIME)
@Target(ElementType.FIELD)
public @interface EasyWicket {
	
   public String id();
   public String value() default "";
   public String list() default "";
   public String action() default "";
	
   public boolean required() default false;
	
   public String visible() default "";
   public boolean ajaxEnabled() default false;
	
   // Data table
   public String rowsPerPage() default  "10";
   public String columns() default "";
	
   // Drop down
   public String displayProperty() default "";
   public String idProperty() default "";	
}

"id" is the path from topmost parent element to id of current dynamic element. If an element resides in a form element, and form element is the topmost parent then id of EasyWicket annotation is [form_element_id.element_id]. You can see an example of this usage in java code. The textfield for name of the user defined as following;

@EasyWicket(id="form.txtName", value="name")

Here you see that the EasyWicket id is the combination of form and text field elements separated by dot.

"value" is the value of the html element. "list" is the list of possible values. For example, DropDownChoice get list of the choices from this value. "action" is used for buttons and links. It is called when button submitted or link clicked. "required" call setRequired() function of a form component. "visible" is active for some elements. It specifies the name of function to determine the visibility of the element. "ajaxEnabled" make element ready for ajax manipulation. "rowsPerPage" and "columns" used for DataTable component. "displayProperty" and "idProperty" is used for DropDownChoice components. They are the names of the properties for displaying id and text of the select boxes.

The page component, PGNewUser implements IEasyContainer interface. This interface must be implemented for the components containing EasyWicket components.

IEasyWicketContainer.java

public interface IEasyWicketContainer {

   public void initValues();
   public void pack();
   public void setCurrentWidgetContext(WidgetContext widgetContext);
	
}

"initValues()" called before components instantiated and configured. You have to initialize the values here. "pack()" called after components instantiated. "setCurrentWidgetContext()" called by some of EasyWicket components like DropDownChoice while rendering the component. It just gives the state of the current component to the container to get values while rendering in progress.

And finally, If you want to enable EasyWicket library you have to add EasyWicketComponentListener to your application like that;

addComponentInstantiationListener(new EasyWicketComponentListener());

I attached source codes as zip file. Also you can get codes from easywicket.sourceforge.net.

Element

Opinions expressed by DZone contributors are their own.

Comments

Faster Development With EasyWicket

Popular on DZone

Partner Resources