How to use Liferay's IO request module

Liferay AUI has one module called "aui-io-request" which allows to fetch dynamic data based on the user input and show the result back to the browser.

Here are the steps to use AUI autocomplete feature

1) Download and Extract "alloy-1.5.1" (required if bundle is not Liferay,lets say creating dynamic web project)
2) Create JSP file to add aui's js & corresponding stylesheet
3) Load "aui-io-request" module on JSP
4) Create Servlet to return dynamic data based on user input value
5)  Run & Verify

Here are the steps in detailed:

1) Download and Extract "alloy-1.5.1" (required if bundle is not Liferay,lets say creating dynamic web project)

This steps is required only if you are not using Liferay's bundle. Liferay bundle has AUI available by default.
For our example we have used "alloy-1.5.1". Lets download and copy our content to the location "{c:}\alloy-1.5.1".


2) Create JSP file to add aui's js & corresponding stylesheet

In order to use AUI components we need to import below files onto our JSP

We have created dynamic web project with the name "student". We have copied "{c:}\alloy-1.5.1\build" to the location "/student/WebContent/js/build" path.

Once its copied to the above path use below statements to include aui.js & "aui-ski-classic-all-min.css" like below:

<script src="/student/js/build/aui/aui.js" type="text/javascript"></script>
<link rel="stylesheet" href="/student/js/build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />

<form name="studentForm">
Student id : <input type="text" name="id" id="id" value="45" /> <br />
<input type="button" value="Go" id="go" />
</form>

3) Load "aui-autocomplete" module on JSP

Once aui.js is included on our JSP we need to load one of the modules from AUI.

Here is the code snippet to load "aui-autocomplete"

<script type="text/javascript">
YUI().use('aui-io-request','node',
 function(Y) {
   Y.one('#go').on(
     'click',
     function() {
       var studentId = Y.one('#id').val();          
         Y.io.request(
           '/student/Result?id=' + studentId,
           {             
             on: {
               success: function() {
                 // gets the result of this asynchronous request
                 var result = this.get('responseData');
alert(result);
               }
             }
           });        
     });
 });
</script>

We have use an example of student's result. On the JSP user will have to provide studnetId whose result one wants to see. After that user need to click on the
"Go" button to see the result on the screen. In our case result will be shown in the alertbox. We may show it on location as per our requirements.

4) Create Servlet to return dynamic data based on user input value

In our example we have passed "id" to the server side (Servlet in our case). "Result" servlet will return result based on the inputed "id" value.

Here is the code snippet for the quick reference.

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String id = request.getParameter("id");

if("45".equalsIgnoreCase(id)) {
response.getWriter().print("89%");
} else {
response.getWriter().print("78%");
}
System.out.println("I am in a Result");
}

5)  Run & Verify

By default when we load the result.jsp it will look something like this:


When we enter id as "45" and hit "Go" button it shows result like this:


When we enter id as "4" and hit "Go" button it shows result like this:


Cheers!
Henal Saraiya
(Lead Consultant)
CIGNEX Datamatics