RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Apply DWR to Data Validation in an AJAX Application : Page 2

Learn how to use the open source Direct Web Remoting (DWR) library to dynamically generate JavaScript that includes a callback function parameter for web page updates in AJAX applications.


Creating a DWR Application
The AJAX registration form validation application will validate a user ID through a form for creating a user registration with a unique user ID. If the specified user ID isn't in the UserTable database table, the message "User ID is valid" displays, and a new user registration entry can be created. If the user ID is in the database already, the validation message "User ID is not Valid" displays.

  1. Select File-->New to create a JDeveloper application and project.
  2. Select General-->Application in the New Gallery window.
  3. Specify an application name—DWRApp, for example—and click OK.
  4. Specify a project name—DWR, for example—and click OK.
  5. Select File-->New to create a JavaServer Page (JSP).
  6. Select Web Tier-->JSP-->JSP in the New Gallery window, and click OK to start the Create JSP Wizard.
  7. Follow the wizard's steps to select "web application version servlet 2.4."
  8. Specify the file name, userregistration.jsp.
  9. Select the default Error Page Options, and select the default tag libraries, which are none.
  10. Select the default HTML Options.

When you click Finish the newly created JSP can be used to specify an HTML form and JavaScript functions, which will be discussed shortly.

The next step is to create a Java class that is to be remoted with DWR-generated JavaScript. Select File-->New, select General-->Java Class in the New Gallery window, and click OK. Specify the Java class name, UserRegistration, and a package name, dwr, and then click OK to add the Java class to the JDeveloper application.

You need to add a DWR configuration file, dwr.xml, to the WEB-INF directory. Select the WEB-INF folder in the Applications Navigator, and select File-->New. Select General-->XML-->XML Document in the New Gallery window, and click OK. Specify the file name as dwr.xml, and click OK to create the file. Create a directory named lib in the WEB-INF directory, and copy the dwr.jar file to it (see Figure 1).

Now configure a connection with the JBoss application server. Select the Connections tab, right-click the Application Server node, and select Create New Application Server Connection to start the Create Application Server Connection Wizard. Click Next; specify the connection name, JBossConnection; select Connection Type as JBoss 4.x, and click Next. In the JBoss Directory window specify the deploy directory—for example, \Jboss\jboss-4.0.5.GA\server\default\deploy—and click Next. When you click Finish, a JBoss application server connection is created (see Figure 2).

Figure 1. DWR Application Structure: The directory structure for the DWR application setup should look like this.
Figure 2. JBoss Connection: The Create Application Server Connection Wizard lets you establish a connection with the JBoss application server.

Now you can modify the DWR application files. Use the dwr.xml file to specify creators and converters. Create the dwr.xml file by basing it on the Document Type Definition (DTD) for it. Its root element is dwr. Use the creators to create JavaScript corresponding to Java classes, and use converters to convert between Java datatypes on the server side and JavaScript datatypes on the client side. These datatypes and the date converter are enabled by default; therefore, you won't be using a converter:

  • boolean
  • byte
  • short
  • int
  • long
  • float
  • double
  • char
  • java.lang.Boolean
  • java.lang.Byte
  • java.lang.Short
  • java.lang.Integer
  • java.lang.Long
  • java.lang.Float
  • java.lang.Double
  • java.lang.Character
  • java.math.BigInteger
  • java.math.BigDecimal
  • java.lang.String

Classes that are to be allowed access from JavaScript are specified in the allow element. The create element specifies the classes that are to be remoted in JavaScript:

<!ELEMENT allow ((create | convert)*)>

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date