Get jspx at SourceForge.net. Fast, secure and Free Open Source software downloads home | download | demo project | contact us
jspx

Rate this article:

email
comment
Average Rate= 4.0

Simple Form (Ajax)

This is the same as the Simple Form however this time Ajax is used. In order to convert your pages into ajax behavior, it is simply required to wrap that desired html part with <AjaxPanel> tag.


Html file
  1. The Form is only wrapped with <AjaxPanel>.

Demo

Username:
Password:
Mobile:
email:
Birthdate:
Martial Status:

Source Code:

<page contoller="org.bay.jspx.demo.live.SimpleForm" >
	<html>
		<body>
			<form>
				<ajaxPanel>
					<table cellspacing="20px;"  class="demotext">
						<tr>
							<td>
							<table>
								<tr>
									<td> Username: </td>
									<td>
									<input type="text" id="username" />
									</td>
								</tr>
								<tr>
									<td> Password: </td>
									<td>
									<input type="password" id="password" />
									</td>
								</tr>
								<tr>
									<td> Mobile: </td>
									<td>
									<input type="text" id="mobile" />
									</td>
								</tr>
								<tr>
									<td> email: </td>
									<td>
									<input type="text" id="email" />
									</td>
								</tr>
								<tr>
									<td> Birthdate: </td>
									<td>
									<calendar id="birthdate" title="birth date"/>
									</td>
								</tr>
								<tr>
									<td> Martial Status: </td>
									<td>
									<select id="mstatus">
										<option value="Single"> Single </option>
										<option value="Married"> Married </option>
										<option value="Divorced"> Divorced </option>
										<option value="In relationship"> In relationship </option>
									</select></td>
								</tr>
								<tr>
									<td colspan="2" align="right">
									<input type="button" onserverclick="printUser" value="save"/>
									</td>
								</tr>
							</table>
							</td>
							<td valign="top">
							<table id="userData" rendered="false">
								<tr>
									<td> Username: </td>
									<td> ${this.usernameVal} </td>
								</tr>
								<tr>
									<td> Password: </td>
									<td> ${this.passwordVal} </td>
								</tr>
								<tr>
									<td> Mobile: </td>
									<td> ${this.MobileVal} </td>
								</tr>
								<tr>
									<td> email: </td>
									<td> ${this.emailVal} </td>
								</tr>
								<tr>
									<td> Birthdate: </td>
									<td> ${this.birthdateVal} </td>
								</tr>
								<tr>
									<td> Martial Status: </td>
									<td> ${this.mstatusVal} </td>
								</tr>
							</table></td>
						</tr>
					</table>
				</ajaxPanel>
			</form>
		</body>
	</html>
</page>
		
				
package org.bay.jspx.demo.live;

import eg.java.net.web.jspx.engine.annotation.JspxWebControl;
import eg.java.net.web.jspx.ui.controls.WebControl;
import eg.java.net.web.jspx.ui.controls.html.GenericWebControl;
import eg.java.net.web.jspx.ui.controls.html.elements.Calendar;
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;

public class SimpleForm extends Page
{

	@JspxWebControl
	TextBox username;
	@JspxWebControl
	Password password;
	@JspxWebControl
	TextBox email;
	@JspxWebControl
	Calendar birthdate;
	@JspxWebControl
	Select mstatus;
	@JspxWebControl
	TextBox mobile;

	@JspxWebControl
	GenericWebControl userData;

	public void printUser(WebControl sender, String args)
	{
		usernameVal = username.getValue();
		passwordVal = password.getValue();
		emailVal = email.getValue();
		if (birthdate.getDate() != null)
			birthdateVal = birthdate.getDate().toString();
		mstatusVal = mstatus.getValue();
		mobileVal = mobile.getValue();
		userData.setRendered(true);
	}

	String usernameVal;
	String passwordVal;
	String emailVal;
	String birthdateVal;
	String mstatusVal;
	String mobileVal;

	public String getUsernameVal()
	{
		return usernameVal;
	}

	public String getPasswordVal()
	{
		return passwordVal;
	}

	public String getEmailVal()
	{
		return emailVal;
	}

	public String getBirthdateVal()
	{
		return birthdateVal;
	}

	public String getMstatusVal()
	{
		return mstatusVal;
	}

	public String getMobileVal()
	{
		return mobileVal;
	}
}