New WEB 2.0 Applications: A perfect combination of XPage and traditional Servlet

Overview

IBM Lotus Notes/domino 8.5 provides a new development technology-xpage for Lotus Domino WEB 2.0 application developers, which you can use to create WEB 2.0 applications.

The XPage front-end is implemented using JSF (JavaServer face) technology and encapsulates calls to Dojo controls, which are more aesthetically pleasing than traditional Lotus Domino Web development, using the XPage Development Web application interface. When creating an AJAX-based WEB 2.0 application in a XPage application, you can build an elegant front-end interface with XPage controls and Dojo controls. However, a back-end program is needed to handle the business logic, which enables the separation of the business logic layer and the application display layer. The Servlet is a good choice for processing business logic with a strong function.

Next, this article will detail how to use XPage and Servlet technology to create WEB 2.0 applications, and we will use a simple user login scenario to demonstrate the description.

Using Dojo to create Ajax clients in XPage

Lotus Domino Designer 8.5.1 provides users with a visual development environment that integrates the Eclipse IDE, with a powerful Web page Design view that programmers can use to get a "WYSIWYG" user experience, as shown in Figure 1.

Figure 1.XPage Design view

View artwork (larger)

Lotus Domino Designer provides program developers with a large number of available WEB 2.0 controls, including core controls and container controls. As shown in Figure 1, the Control Panel area. However, if you don't see a Dojo control in this panel, how do you use the Dojo control? We can edit the properties of the XPage control and bind it to a Dojo control. As shown in Figure 2.

Figure 2. Dojo Control Bindings

In the property box for a control, select Dojotype to the desired dojo control type so that the control can be bound to the corresponding dojo control. Of course, for developers who are very familiar with dojo, you can also add Dojo controls directly in the form of code. For example, in code mode, the following code represents a Dojo text input box.

Listing 1.Dojo text input box

<input dojotype= "Dijit.form.TextBox" type= "text" name= "name" id= "name"/>

Whether you add a Dojo control in design mode or code mode, the effect is the same, and you can preview it in design mode.

Add two input boxes to the XPage page, one for entering a username and another for entering a password. We name the username input box username, name the password input box password, and in the Servlet, the component value will be obtained according to the component name. In addition, add a login button, which completes the design of the input box. The XPage Dojo login client code is as follows.

Listing 2. Client code

<div dojotype= "Dijit. Dialog "id=" Formdialog "title=" System Login Dialog "
execute= "alert (' submitted w/args:\n ' + Dojo.tojson (arguments[0), true)"; >
<table>
<tr>
<td>
<label for= "Name" >username: </label>
</td>
<td>
<input dojotype= "Dijit.form.TextBox" type= "text" name= "name"
id= "Name"/>
</td>
</tr>
<tr>
<td>
<label for= "loc" >password: </label>
</td>
<td>
<input dojotype= "Dijit.form.TextBox" type= "text" name= "Loc"
id= "Loc"/>
</td>
</tr>
<tr>
<TD colspan= "2" align= "Center" >
<xp:button dojotype= "Dijit.form.Button" type= "Submit"
Value= "Login" ></xp:button>
</td>
</tr>
</table>
</div>

In Lotus Domino Designer, click the preview icon to see the preview of the XPage page in the browser, as shown in the following figure.

Figure 3. Client Preview

Creating a Servlet in Domino Designer

Creating a running servlet on a Domino Server is not the same as creating a servlet on a traditional servlet container, such as Tomcat, Resin. Developers who have contacted Domino Designer should be aware that in Domino application there is no web.xml for us to add the Servlet address map. So there's no way to add Servlet services to Domino application. The answer is in the negative. Next, we'll tell you how to add a Servlet to your Domino application as a server-side program for our WEB 2.0 application.

Perspective selection

To add a Servlet to the Domino application, we need to switch Domino Designer to the Java perspective, and the pivot chart to switch to the following selection steps:

Click Window > Open Perspective > Other in the Domino Designer menu bar to pop up the following dialog box.

Figure 4. Perspective Selection dialog box

You can complete the switch from Domino Designer perspective to the Java perspective by selecting the Java Perspective in the Perspective Selection dialog box, shown in Figure 4.

Add Servlet Factory Mapping file

Adding a Servlet service to the Domino Designer also requires mapping files and requires that we build the corresponding mapping directory. Add a folder named Source under the Webcontent/web-inf path. Then right click on the project root > Properties > Source > Add Folder ..., select the newly added Source folder located under Web-inf path, click OK. As shown in Figure 5 below.

Figure 5. Building a mapping path

View artwork (larger)

After clicking OK, add a folder named Meta-inf under the source folder, where you will need to add a folder called Services. The Servlet map file is placed inside the folder. At this point, we have successfully completed the construction of the mapped folder. The project directory structure in Domino Designer's Package Explorer view is as follows.

Figure 6. Directory structure diagram

Once you have completed building the project directory structure, you will also need to add the Servlet service mapping file. Under the Services folder, add a text file named Com.ibm.xsp.adapter.servletFactory that indicates the path to the Servlet Factory class. In the sample project, the path to the Servlet Factory is test. Servletfactory, you only need to indicate the path to the Factory class in the Servlet Factory class mapping file. As shown in the code listing.

Listing 3.Servlet Factory Mapping file

Test. Servletfactory

At this point, the addition of the Servlet Factory mapping file has been completed. The next step is to build a factory class with the class named Servletfactory in the test path, which will be responsible for all Servlet mapping transformations.

Building a Servlet Factory

The Servletfactory class in Domino application needs to implement the Com.ibm.designer.runtime.domino.adapter.IServletFactory interface and implement the Init method and Getservletmatch method. Developers implement the Servlet mapping definition in this factory class.

The sample code for Servletfactory is shown in the following code listing.

Listing 4.ServletFactory Sample Code

Package test;

Import Javax.servlet.Servlet;
Import javax.servlet.ServletException;

Import Com.ibm.designer.runtime.domino.adapter.ComponentModule;
Import Com.ibm.designer.runtime.domino.adapter.IServletFactory;
Import Com.ibm.designer.runtime.domino.adapter.ServletMatch;

public class Servletfactory implements Iservletfactory {

private static final String Servlet_widget_class = "Test." Helloworldservlet ";
private static final String Servlet_widget_name = "Hello World SERVLET";


Private Componentmodule module;

public void init (Componentmodule module) {
This.module = module;
}

Public Servletmatch Getservletmatch (string contextpath, String path) throws Servletexception {
try {
throw new Exception ();
}
catch (Throwable t) {
T.printstacktrace ();
}

String Servletpath = "";

if (Path.contains ("/helloworld")) {
String pathinfo = path;
return new Servletmatch (Getwidgetservlet (), servletpath,pathinfo);
}

return null;
}

Public Servlet Getwidgetservlet () throws Servletexception {
Return Module.createservlet (Servlet_widget_class, servlet_widget_name,null);
}

}

As shown in the listing code, the Servletfactory implements the Iservletfactory interface and completes the Init method and the Getservletmatch method.

In this Servletfactory factory class, a servlet named "Hello World servlet" is defined, and the functionality implementation class for the servlet is test. Helloworldservlet. So, what is the access URL for the Servlet? This needs to be explained in the Getservletmatch method.

Listing 5. Servlet URL Mapping Code

if (Path.contains ("/helloworld")) {
String pathinfo = path;
return new Servletmatch (Getwidgetservlet (), servletpath,pathinfo);
}

The code in Listing 5 gives an instance of the Servlet mapping definition. When you need to add a Servlet to Domino application that accesses the URL "/helloworld," you need to add such a piece of code to the Getservletmatch method. Servletfactory implements a servletmatch through a user-defined Getwidgetservlet method to complete the definition of a Servlet mapping.

At this point, experienced developers should be able to imagine the process of a Servlet working in Domino application. When a user accesses a servlet with a path of "/helloworld", Domino Server finds the servlet Factory factory class based on the servlet Factory mapping file and checks in the Getservletmatch method of the factory class Find out if there is a Servlet processing method for "/helloworld". If so, the method is used to build a servletmatch, return to the client, successfully complete the Servlet's access operation, and if not, return a failure error message to the client.

Building a Servlet class

Now that you have finished configuring the servlet mapping file, you should be familiar with this part of the implementation of the Servlet class. Under the test package, add a Java class named Helloworldservlet, which must inherit from the abstract class Javax.servlet.http.HttpServlet and should complete the implementation of methods such as Doget. This method is the specific operation of the Servlet server side. The sample code is as follows.

Listing 6.Servlet Class Sample code

Package test;

Import java.io.IOException;
Import Java.io.PrintWriter;

Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;

public class Helloworldservlet extends HttpServlet {
/**
* Domino Application Servlet Demo code
*/
Private static final long serialversionuid = 1L;

public void Doget (HttpServletRequest req, httpservletresponse Res)
Throws Servletexception, IOException {
PrintWriter out = Res.getwriter ();
String username = req.getparameter ("username");
String Password = req.getparameter ("password");
if (username = null | | password = NULL) {
OUT.PRINTLN ("Miss parameter username or password!");
} else {
if (Username.trim (). Equals ("admin")
&& Password.trim (). Equals ("admin")) {
Out.println ("Login Success");
} else
Out.println ("Login failure");
}

Out.close ();
}

}

This Servlet class implements the Doget method and completes a simple login operation that returns a successful login prompt to the client when the user name is admin and the password is admin. Otherwise, prompt for login failure. This is not the same as the traditional servlet class, but it should be noted that in the Domino application servlet, the servlet can obtain information about the Notes logged-in user. For example, the following code can obtain the current operating user's Notes username information, more advanced features readers can access XPage materials to further study.

Listing 7.Servlet fetching Notes user Information

try {
Session session=notescontext.getcurrent (). Getcurrentsession ();
Out.print ("Operator Username:" + session.getcommonusername ());
catch (Throwable t) {
T.printstacktrace (out);
}

Servlet Run Test

We have successfully completed the development of adding a servlet to Domino application, and then test to see if the servlet is working properly.

Enter the URL address http://localhost/servlettest.nsf/xsp/helloworld of the Servlet in the browser address bar to see the following information:

Miss parameter username or password!

As can be learned from above, this information prompts input parameters are incomplete, need to add parameters username or password. Next, enter the address http://localhost/servlettest.nsf/xsp/helloworld?username=test&&password=test in the browser and we can see The Servlet returns information to us:

Login failure

This information prompts us for login failure and we can see the login Success prompt when we pass username and password with the value admin to the Servlet.

The Servlet works fine.

XPage Dojo Client Connection to Servlet

We have used Doji to complete the client login interface design work, and completed the login Servlet development work, to use Ajax technology to complete the entire login process, the next thing to do is to chain the whole process.

Add Data submission function

When users fill out the login username and password information, click the "Login" button to login operation, you need to use JavaScript script to achieve the collection of information, and through the XMLHttpRequest to the Servlet to send user information to complete the login operation.

Open the Domino Designer perspective of Lotus Domino Designer, select Code > Script libraries in the project directory, right-click New Script libraries, and add a named login The client JavaScript script, as follows.

Listing 8.login JavaScript Corner Book

function Dominologin (dialogfields) {
Dojo.xhrpost ({
URL: ' Xsp/helloworld ',
Content:dialogfields,
Load:function (data) {
alert (data);
},
Error:function (Error) {
Console.error (' ERROR: ', error);
}
});
}

We submit the user login information to the Servlet in a xhrpost manner and use the alert function to display the login return information.

In addition, we need to fix the code for submitting the form information for the Dojo login box. Select the XPage login page, select Resources > Add Script Library > Login (client) in the Properties view, and click OK to complete the add confirmation. This allows you to successfully add the login JavaScript script to the XPage page, and if you open the page's source to find it, you can find one line of code:

<xp:script src= "/login.js" clientside= "true" ></xp:script>

Next, modify the Logindialog information submission method, as shown below.

Listing 9.form Information Submission code

<div dojotype= "Dijit. Dialog "id=" Logindialog "execute=" Dominologin (arguments[0)); >

Through this code, form uses the Dominologin method to submit the login information.

Connection test

The development of all login operations has been completed, everything is ready, only the test. The next thing to do is to test whether our code is working properly.

Open the login page: HTTP://LOCALHOST/SERVLETTEST.NSF/DOJODIALOG.XSP, enter the username and password information, click "Login" for the login operation. However, the server side does not have feedback information, this is why.

We use Mozillafirefox's FireBug plug-in to debug and view error messages. You can find the following error message in the FireBug network view.

Figure 7.FireBug Error Tip

We can see from the error message that we are submitting the login information in a xhrpost manner, but the Servlet does not support HTTP method POST. What is the reason for that? Yes, because we implemented only the Doget method in the Servlet class, but did not implement the DoPost method, the servlet naturally does not support HTTP methods POST.

Problem correction

When you know the problem, all you have to do is fix the problem. There are two ways to address this problem:

Using Xhrget method to submit the login data information;

Add the DoPost method to the Servlet to implement the processing of the HTTP methods POST request.

We used the second approach to solve the problem, adding the following code to the Servlet class.

Listing 10.Servlet DoPost Method code

public void DoPost (HttpServletRequest req, httpservletresponse Res)
Throws Servletexception, IOException {
This.doget (req, res);
}

After the modification is complete, log on again. In the Login XPage page enter username test, password test, click "OK" to login, you can see "Login failure" message.

Figure 8. Logon Failure prompt Information

When we enter user name admin, password admin for login test, you can see the feedback of successful login, as shown in the following figure.

Figure 9. Login Success Prompt Information

At this point, we have successfully used the XPage Dojo and Servlet technology to complete the WEB 2.0 implementation of the login feature.

Summarize the basic development environment for XPage applications, how to use Dojo components in XPage, how to create a Servlet application in Domino application, and how to use Ajax technology in XPage for WEB 2.0 drive The hair was told. I believe you have a basic understanding of the entire process, you can use XPage and Servlet for integrated development, to create a simple XPage WEB 2.0 applications. If the reader wants to learn more and have a deeper grasp of XPage, you can view the documentation in resources.