03 September 2009

Manipulating Combo-Boxes in JSPX, An Introduction to the framework

In the name of ALLAH


You can read this article in a better format also from here
JSPX is a pure Java open source free web RAD framework that easier and faster than
most of the existing frameworks.
It Contains a lot of features that improve productivity. You just need to know
HTML and JAVA to master JSPX.
You can know about this amazing framework from :
http://jspx-bay.sourceforge.net
Go to the link indicated above, download the demo project, open it in your
favorite IDE and enjoy.
The link above contains some documentation that you can learn from, but from my
point of view, try to look at the source code, you will learn more and more.
Let's start taking about a simple example of how to deal with combo boxes ( or
drop-down lists, or selects)
Among many features that JSPX provides, it provides ease to deal with comboboxes.
One of the most basic features your web application should contains, is the login
form. So, let's implement it in JSPX.
First lets talk about the Model:
You will have a User bean, that represents the user of your system, with the
following possible implementation:
public class User {
public User() {}

private long userId;
private String username;
private Date birthDate;
private String password;
// getters and setter goes here
}
Here's the country class:
public class Country {
private String value ;
private String name ;
// getters and setters goes here
}
Let's take a step further and take about the persistence layer, the layer that is
responsible for CRUD operations (Create, Read, Update and Delete)
here's the UserDAO :

public class UserDAO {
public void save(User user){
// implement it as you like, using JDBC, using Hibernate, JPA
// we here to talk about the presentation tire :)
}
public User get (long id){

}
}
here's the countryDAO:
public class CountryDAO {
public List<Country> getCountryList() {
// yes, do it your way, we are to talk about JSPX, not Hibernate :)
}
}

So far, so good, but lets see how JSPX looks like.
JSPX is a zero configuration framework, but you should do one thing, just to
register the Controller Servlets in web.xml, you will do this once, only once. I
will not talk about this as the demo application that you gonna download already
configured, just give a look to web.xml file in the demo application.
JSPX is to deal deal with uses cases, each use case has a two components, HTML
file and a Java class, the HTML is to represent the view and the Java bean is to
form as a controller. So first you will need to write the HTML file, it is all
about basic HTML tags with very little costume tags.
Here's the JSPX page (register.jspx, the jspx extention is just a convention, you
can change it, but you will have to tell your container that you did, by
modifying web.xml)


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://jspx-bay.sourceforge.net/jspx.xsd"
controller="jspx.demo.web.controller.RegisterPage">
<!--
this is the root element for each page in JSPX, the one that you
should care about is the controller, it is the backing-bean, the Java
file that we taked about above
-->

<html>
<head>
<title>In the name of ALLAH, my first JSPX Page</title>
</head>
<body>
<h2>First JSPX Page</h2>
<form id="form1"> <!-- don't set an action to this form -->
<table>
<tr>
<td>
<label>Username</label>
</td>
<td>
<input id="usernameTxt" type="text" size="10" width="150" />
<validator control_to_validate="usernameTxt" type="required"
indicator="*" message="username cannot be empty" group="registerGroup" />
</td>
<!--
validators is a big advantage, that we gonna take about in coming
lessons, or you can discover it your self, it is too simple
-->

</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input id="passwordTxt" type="password" size="10" width="150" />
<validator control_to_validate="passwordTxt" type="required"
indicator="*" message="password cannot be empty" group="registerGroup" />
</td>
</tr>
<tr>
<td>
<label>BirthDate</label>
</td>
<td>
<calendar id="calenderTxt" dateFormat="dd/MMM/yyyy" />
</td>
<!--
calendar is a very great calendar, that returns dates as Date
objects
-->

</tr>
<tr>
<td>
<label>Country</label>
</td>
<td>
<select id="countrySelect" list="${countries.countryList}"
onServerChange="countriesChanged">
<option textProperty="name" valueProperty="value" />
</select>
<!--
the key point is this lesson is to take about this control, we
will going to talk about in a bit
-->

<br />
<br />
<label id="currentCountryLbl" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="register" onServerClick="registerUser"
group="registerGroup" />
</td>
</tr>
<tr>
<td colspan="2">
<label id="resultLbl"></label>
</td>
</tr>
</table>
</form>
</body>
</html>
</page>



and here's the Page class


package jspx.demo.web.controller;
import jspx.demo.model.User;
import eg.java.net.web.jspx.engine.annotation.JspxBean;
import eg.java.net.web.jspx.ui.controls.WebControl;
import eg.java.net.web.jspx.ui.controls.html.elements.Calendar;
import eg.java.net.web.jspx.ui.controls.html.elements.Label;
import eg.java.net.web.jspx.ui.controls.html.elements.inputs.Password;
import eg.java.net.web.jspx.ui.controls.html.elements.inputs.TextBox;
import eg.java.net.web.jspx.ui.controls.html.elements.select.Select;
import eg.java.net.web.jspx.ui.pages.Page;
//each Controller extends eg.java.net.web.jspx.ui.pages.Page
public class RegisterPage extends Page {
// we should add this annotation for the CountryDAO class to be referenced
// in the <select> tag in the JSPX page
@JspxBean (name="countries", scope=JspxBean.REQUEST)
private CountryDAO countries = new CountryDAO();
// the following is the UI objects the corresponds to the controls on the form
// they are tied together just by the id attribute on the jspx page to be
// as the same name in this class
private TextBox usernameTxt;
private Password passwordTxt;
private Calendar calenderTxt;
private Select countrySelect;
private Label resultLbl;
private Label currentCountryLbl;
// getters and setter
public TextBox getUsernameTxt() {
return usernameTxt;
}
public void setUsernameTxt(TextBox usernameTxt) {
this.usernameTxt = usernameTxt;
}
public Password getPasswordTxt() {
return passwordTxt;
}
public void setPasswordTxt(Password passwordTxt) {
this.passwordTxt = passwordTxt;
}
public Calendar getCalenderTxt() {
return calenderTxt;
}
public void setCalenderTxt(Calendar calenderTxt) {
this.calenderTxt = calenderTxt;
}
public Select getCountrySelect() {
return countrySelect;
}
public void setCountrySelect(Select countrySelect) {
this.countrySelect = countrySelect;
}
public Label getResultLbl() {
return resultLbl;
}
public void setResultLbl(Label resultLbl) {
this.resultLbl = resultLbl;
}
public CountryDAO getCountries() {
return countries;
}
public void setCountries(CountryDAO countries) {
this.countries = countries;
}
public Label getCurrentCountryLbl() {
return currentCountryLbl;
}
public void setCurrentCountryLbl(Label currentCountryLbl) {
this.currentCountryLbl = currentCountryLbl;
}
// we will take about in a bit too
public void registerUser(WebControl sender, String args) {
User user = new User();
user.setUsername(getUsernameTxt().getValue());
user.setPassword(getPasswordTxt().getValue());
user.setBirthDate(getCalenderTxt().getDate());
getResultLbl().setValue(user.getUsername() + " " + user.getPassword() +
" " + user.getBirthDate()
+ " " + countrySelect.getValue());
}
public void countriesChanged(WebControl sender, String args) {
getCurrentCountryLbl().setValue(getCountrySelect().getValue());
}
}

Here's the illustration for the two postponed points above:
<select id="countrySelect" list="${countries.countryList}"
onServerChange="countriesChanged">
<option textProperty="name" valueProperty="value" />
</select>
select : the the HTML combobox tag:
id : should be used for this control to be referenced in the Java class
list : the name of the object that contains the list of the countries to be
rendered. (It may be a DAO object as of your case)
textProperty: the name of the property of the Country class to be displayed in the
combobox, It should be a collection property.
valueProperty : the name of the property of the Country class to be used as the
value behind the text in the combobox, It should be a collection property.
One pig feature of JSPX that although the form handles the validation, changing
the selection of the combobox will not cause validation errors on the fields that
to be validated.
The last thing is to talk about is the registerUser() and countriesChanged()
methods. This two methods are actually events fired by JSPX.
To Allow a Tag to fire an event, just set the onServerClick attribute with a
method name and define this method in the Java class, of course with a defined
signature that appears in the Java file.
For example, the submit button :
<input type="submit" value="register"
onServerClick="registerUser" group="registerGroup" />
It indicates that whenever the user clicks the register button, the following
method will be called:

public void registerUser(WebControl sender, String args) {
User user = new User();
user.setUsername(getUsernameTxt().getValue());
user.setPassword(getPasswordTxt().getValue());
user.setBirthDate(getCalenderTxt().getDate());
getResultLbl().setValue(user.getUsername() + " " + user.getPassword() +
" " + user.getBirthDate() + " " + countrySelect.getValue());
}
Also note that, In the above method, we set the Label resultLbl value. This label
is a JSPX label. We tied this label tag with the Java property resultLbl just by
defining a variable of type eg.java.net.web.jspx.ui.controls.html.elements.Label
with the same id as the label tag.
As you saw, the JSPX is a simple and a productive Java RAD framework, and this is
not all about JSPX, but there are more from validation to AJAX support to master
pages.
I will try to talk about all of these features soon.
Thanks.


No comments: