Registration Form

Using AJAX Techniques in EP

Summary
This article throws light on using Ajax Techniques in Enterprise Portal. This article illustrates how to use a Ajax in Enterprise Portal by taking a simple real time scenario as an example. Author: Jithin.R.B Company: HCL Technologies Created on: 9 March 2007
Author Bio
Jithin.R.B is working as a Netweaver consultant for HCL Technologies Kolkata
SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG
BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 1
Table of Contents
Introduction ...................................................................................................................................... 3 The Problem to Solve ...................................................................................................................... 4 Solution Approach ........................................................................................................................... 4 Prerequisites.................................................................................................................................... 4 Setting up the Application ................................................................................................................ 4 Adding a Servlet to the Application .............................................................................................. 5 Creating Jsp Files ........................................................................................................................ 5 Solution Implementation .................................................................................................................. 6 Implementing the DAO................................................................................................................. 6 Implementing Presentation Layer ................................................................................................ 7 Implementing AjaxDemoComponent ........................................................................................... 7 Managing Configuration Files ...................................................................................................... 7 Inducting AJAX techniques into our Application .......................................................................... 7 The Application in Action ............................................................................................................... 10 Appendix ........................................................................................................................................ 12 Appendix A................................................................................................................................. 12 Appendix B................................................................................................................................. 15 Appendix C................................................................................................................................. 16 Appendix D................................................................................................................................. 18 Appendix E................................................................................................................................. 20 Appendix F ................................................................................................................................. 21 Appendix G ................................................................................................................................ 24 Appendix H................................................................................................................................. 25 Related Content............................................................................................................................. 27 Disclaimer and Liability Notice....................................................................................................... 28
Introduction
Asynchronous JavaScript and XML often abbreviated as AJAX is a technique for creating rich web applications. Main aim behind using AJAX techniques in a any web application is to have an enhanced GUI experience which has minimal screen refresh rates compared to traditional web applications. AJAX techniques allow exchanging data with the server side components like (Servlets), without reloading the page. Some of the real time situations which demands usage of AJAX are discussed below

Deep hierarchical Navigation Connected Dropdown Boxes Auto Completion of Textboxes
Alex Bosworth in his weblog has mentioned various scenarios in which Ajax should be used and should be avoided.
The Problem to Solve

This article shows how to use Ajax techniques in EP. The following assumptions set the scenario for the fictitious problem the implementation solves.
An User Registration Form is to be designed where user can specify User name according to his/her choice System needs to provide facility for the user to check if User Name specified by him/her is available or not Suitable Error/ Success Messages needs to be displayed.
Capturing the user details, saving details and providing error messages is not the real catch in this scenario, the real catch lies in the implementation of Check User Name Availability functionality. This functionality should make user to wait for a long time, since this is a pre registration process. If we follow traditional web application model, then user is bound to wait for some time, since in traditional web application model request and response are tightly coupled.
Solution Approach
A practical solution for the above mentioned problem can be achieved by introducing Ajax techniques for implementing Check User Name Availability functionality. Since we have decided about our solution approach lets dive a bit more deep into the implementation of our approach. Ajax requests generated from the JSP pages will be handled by a Servlet (say AjaxServlet). This servlet needs to be deployed as a Portal Component. This servlet processes the requests and returns the appropriate result. Now fusing a few lines of JavaScript code we can render this result to the user
Prerequisites
It is assumed that the reader is familiar with the following

PDK basics Using Servlets in EP: JavaScript basics.
I have already written an article which shows how to use servlets in EP. Please refer the same if you are not sure of using Servlets in EP
Setting up the Application

Launch NetWeaver Developer Studio Create a Portal Application Project. To create a portal application project follow the below mentioned steps o o o o From the File menu, select New... Other. The New window is displayed. Select Portal Application, and then Create a Portal Application Project. Click Next. In the Project name textbox, enter a name for the project, say AjaxDemo_EP. Click Finish.
Create an AbstractPortalComponent. To crate an AbstractPortalComponent follow the below mentioned steps o From the File menu, select new other. The New window is displayed.
o o
Select Portal Application, and then Create a New Portal Application Object. Click Next. Select the project to which you want to add the portal component (AjaxDemo_EP). Click Next. Select Portal Component AbstractPortalComponent. Click Next. Enter the following fields: Name: Name of component (say AjaxDemoComponent) Location: The location of the new Java class file for this component Class name: The Java class file for this component. Package name: The package name for the Java class file for this component.
o o
Click Finish.
Add the following jar files to your project class path o o o Servlet.jar Htmlb.jar com.sap.portal.appintegrator.sap.bwc_api.jar
Adding a Servlet to the Application To add a Servlet to the application follow the below mentioned steps

From the File menu, select new other. The New window is displayed. Select Java, and then Class. Click Next. Enter the following fields: o o o o o o Source Folder: AjaxDemo_EP/src.core Package: com.demos.servlets Name: AjaxServlet Modifiers: public Super Class: javax.servlet.http.HttpServlet Keep Inherited Abstract Methods as Checked
Click Finish
Creating Jsp Files Create two Jsp Files namely UserRegistrationForm.jsp and Success.Jsp under PORTAL-INF/Jsp folder.
Solution Implementation
Now since we have set up the development environment let us start with the solution implementation. Ideal way to start up with the solution implementation is to start with the DAO, then the Presentation Layer finally wire up the entire application using AbstractPortalComponent. Once the application is ready Ajax is introduced into the application by coding a few lines of JavaScript and then inducting a Servlet (AjaxServlet) into the application. Implementing the DAO The main functionality of the DAO is to

Save User Details Query User Details
It is evident from the functionality that the DAO requires Database interaction. So as to keep things simple, lets assume that DAO itself will maintain the data. Based on our assumption lets implement DAO as a singleton class which has can hold the user details in a HashMap. A successful user registration will add an entry into the HashMap with the UserName as the key. Existence of a UserName can be checked from the HashMap The code below is the base functional implementation of the DBAccessor class. It is a clean implementation and very generic. The code also shows the saveUser, checkUser methods for this class, which will be discussed shortly. DBAccessor Class public class DBAccessor { private static DBAccessor instance = null; private HashMap userMap;
private DBAccessor(){ userMap = new HashMap(); }
public synchronized static DBAccessor getInstance(){ if(instance==null){ instance = new DBAccessor(); } return instance; }
public UserDetailBean saveUser(UserDetailBean userBean) throws Exception{ String sUserName = userBean.getUserName(); if(userMap.containsKey(sUserName)){ throw new Exception("Dupilicate User: UserName '"+sUserName+"' Already Exists");
}else{ userMap.put(sUserName,userBean); } return userBean; }
public boolean checkUser(String sUserName){ return(userMap.containsKey(sUserName)?false:true); } } The saveUser method takes UserDetailBean as an argument. It checks for the existence of the specified UserName in the HashMap, if found it throws an Exception else it adds an entry to the HashMap with the specified UserName as the key. The checkUser Method checks for the existence of the specified UserName in the HashMap. If found it returns true, else it returns false. Implementing Presentation Layer Now since we have completed DAO implementation, let us take a step further and implement the presentation layer components. To keep things simple lets have only two Jsp pages one to accept input and the other to display the processed input. Detailed Code for UserRegistrationForm.jsp & Success.jsp is given under Appendix A & B respectively Implementing AjaxDemoComponent AjaxDemoComponent is a subclass of AbstractPortalComponent which is used to wire the entire application. AjaxDemoComponent process the input from UserRegistrationForm.jsp and forwards to Success.Jsp. Detailed Code for AjaxDemoComponent is given under Appendix C Managing Configuration Files In order to make the application work a few changes needs to be done in portalapp.xml. First of all we should make the servlet visible in the portal environment. Detailed code for portalapp.xml is given under Appendix G.
Inducting AJAX techniques into our Application

Implementing AjaxServlet to Process Ajax Request Now since we have the base application ready, lets focus on introducing AJAX for implementing check UserName functionality. For this lets start from the servlet implementation. Servlet implementation here is quite straight forward. The servlet takes user name as the input parameter; it invokes DAO to verify the existence of the user name and prints the result into the response stream. The code below is the base functional implementation of the AjaxServlet class. It is a simple and very generic implementation. The code also shows the processCheckUser method for this class, which will be discussed shortly. public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { doProcessRequest(request,response); }
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { doProcessRequest(request,response); }
private void doProcessRequest(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { String action = request.getParameter("action");
if(action==null){ return; }else if(action.equalsIgnoreCase("CheckUser")){ processCheckUser(request,response); } } private void processCheckUser(HttpServletRequest request,HttpServletResponse response)throws IOException{ String sUserName = request.getParameter("username"); PrintWriter writer = response.getWriter(); DBAccessor accessor =DBAccessor.getInstance(); String status = (accessor.checkUser(sUserName)?"A":"NA"); writer.print(status); } } All Ajax requests will be handled by the AjaxServlet. AjaxServlet delegates the processing of request to doProcessRequest which based on the type of action invokes the actual processor method. In our case the processing is done by processCheckUser method. The implementation of this method is so simple and hardly needs any explanation. Implementing JavaScript Functions for AJAX In order to communicate with the Server side components using AJAX, we need to implement few JavaScript functions. All these functions are consolidated under demo.js which is detailed in Appendix H.
Lets start the JavaScript Implementation by defining XMLHttpFactory class. The main functionality of this class is to churn out the browser specific XMLHttpRequest Object. This is maintained as a class because browser specific changes can be incorporated very easily. Below mentioned code depicts the same. function XMLHttpFactory() { } XMLHttpFactory.createXMLHttp = function () { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof window.ActiveXObject != "undefined") { return new ActiveXObject("MSXML2.XMLHttp"); }else{ return null; } } Now since we have created an XMLHttpRequest Object provider, lets start on setting up the connection with the Server side components. Connection with the server side components can be accomplished using the XMLHttpRequest as mentioned below
Get the URL reference for the Server Side component: In our case we have accomplished this using the following var ajaxUrl = document.getElementById('ajax_url').value;
Configure the XMLHttpRequest Object: We need to configure our XMLHttpRequest Object, so as to communicate with server. In our case we have accomplished this as mentioned below oXMLHttp.onreadystatechange = function (){ processChkUNameReq(oXMLHttp); }
Issue Request to Server : we have accomplished this as mentioned below oXMLHttp.open("GET",ajaxUrl,true); oXMLHttp.send();
It is worth enough to elaborate on processChkUNameReq function. This function actually does the trick of updating the screen once the Server side responds. This is a listener function which the browser calls once the server side component commits the response.
The Application in Action

Depicted below are some screenshots of our application, running in EP 6.0 Fig 1 User Registration View
Fig 2 Check User name View
Appendix
Appendix A UserRegistrationForm.jsp <%@ taglib uri= "tagLib" prefix="hbj"%> <%@ page import="com.hclt.ep.demos.util.ApplicationUtil;"%> <% String servletUrl=ApplicationUtil.encodeURL(componentRequest,"AjaxDemo_EP.AjaxServl et"); ApplicationUtil.includeCSS(pageContext,"css/styles.css",componentRequest); ApplicationUtil.includeJS(pageContext,"scripts/demo.js",componentRequest);
%>
<hbj:content id="myContext" > <hbj:page title="PageTitle"> <hbj:form id="myFormId" action="" > <input type="hidden" id="ajax_url" value="<%=servletUrl%>"> <div id='available' style='display:none'> <hbj:messageBar id="mBar_1" messageType="INFO" messageText="Selected User Name is Available" /> </div> <div id='na' style='display:none'> <hbj:messageBar id="mBar_2" messageType="INFO" messageText="Selected User Name is Not Available." /> </div> <div class="content"> <div class="fields"> <div class="field"> <hbj:label id="label_input_name" text="User Name" design="LABEL" required="TRUE" labelFor="user_id_input" /> <hbj:inputField id="userId" maxlength="100" value="" jsObjectNeeded ="true"/> type="string"
<hbj:button id="chkavail" text="Check Availability" width="125px" disabled="false" tooltip="Click here to Check UserName Availability" design="STANDARD" jsObjectNeeded="TRUE" onClientClick="checkAvail()"/> </div>
<div class="field"> <hbj:label id="label_input_pwd" text="Password" design="LABEL" required="TRUE" labelFor="user_pwd_input" /> <hbj:inputField maxlength="30" value="" password="true" /> </div> <div class="field"> <hbj:label id="label_input_pwd1" text="Confirm Password" design="LABEL" required="TRUE" labelFor="user_pwd1_input" /> <hbj:inputField maxlength="30" value="" password="true" /> </div> <div class="field"> <hbj:label id="label_input_fName" text="First Name" design="LABEL" required="TRUE" labelFor="user_fName_input" /> <hbj:inputField maxlength="100" value="" /> </div> <div class="field"> <hbj:label id="label_input_lName" text="Last Name" design="LABEL" labelFor="user_lName_input" /> <hbj:inputField maxlength="100" value="" /> </div> <div class="field"> <hbj:label id="label_input_phone" text="Phone" design="LABEL" labelFor="user_phone_input" /> <hbj:inputField maxlength="100" value="" /> </div> <div class="field"> <hbj:label id="label_input_address" text="Address" design="LABEL" labelFor="user_address_input" /> <hbj:textEdit id="address" rows="5" cols="30" /> </div> <div class="field"> <hbj:label id="label_input_country" text="Country" design="LABEL" labelFor="user_country_input" /> <hbj:dropdownListBox id="country" tooltip="Select Country" selection="India"> wrapping="SOFT" id="phone" type="string" id="lName" type="string" id="fName" type="string" id="pwd1" type="string" id="pwd" type="string"
<hbj:listBoxItem key="Algeria" value="Algeria"/> <hbj:listBoxItem key="Albania" value="Albania"/> <hbj:listBoxItem key="Angola" value="Angola"/> <hbj:listBoxItem key="Anguilla" value="Anguilla"/> <hbj:listBoxItem key="American Samoa" value="American Samoa"/> <hbj:listBoxItem key="Antarctica" value="Antarctica"/> <hbj:listBoxItem key="Antigua And Barbuda" value="Antigua And Barbuda"/> <hbj:listBoxItem key="Armenia" value="Armenia"/> <hbj:listBoxItem key="Australia" value="Australia"/> <hbj:listBoxItem key="India" value="India"/> </hbj:dropdownListBox> </div> <div class='submitbar'> <hbj:button id="register" text="Register" width="125px" tooltip="Click here to Register" onClick="Register" disabled="false" design="STANDARD" /> <hbj:button id="cancel" text="Cancel" width="125px" tooltip="Click here to Discard Changes" onClick="cancel" disabled="false" design="STANDARD"/>
</div> </div> </div> </hbj:form> </hbj:page> </hbj:content>
Appendix B Success.jsp <%@ page import="com.hclt.ep.demos.util.ApplicationUtil;"%>
<% ApplicationUtil.includeCSS(pageContext,"css/styles.css",componentRequest); %>
<%if(componentRequest.getNode().getValue("Message")!=null){ <div class="subheading">
%>
User '<%=componentRequest.getNode().getValue("Message")%>' Registered Successfully .. </div> <%}%> <%if(componentRequest.getNode().getValue("Exception")!=null){ <div class="error"> Exception Occured While Registering User. <br> Exception details <br> <%=componentRequest.getNode().getValue("Exception")%> </div> <%}%> %>
Appendix C AjaxDemoComponent public class AjaxDemoComponent extends AbstractPortalComponent { public void doContent(IPortalComponentRequest request, IPortalComponentResponse response){ String welcomePage = processRequest(request,response); IResource jspPage=request.getResource(IResource.JSP, welcomePage); request.dispatchRequest(jspPage,response); }
private String processRequest(IPortalComponentRequest request, IPortalComponentResponse response){ String sForwardPage="jsp/UserRegistrationForm.jsp"; IPageContext context = PageContextFactory.createPageContext(request, response); Event event = context.getCurrentEvent(); if(event!=null){ if (event.getAction().equalsIgnoreCase("Register")){ sForwardPage ="jsp/Success.jsp" ; processSaveUser(request, response); } } return sForwardPage; }
private void processSaveUser(IPortalComponentRequest request, IPortalComponentResponse response){ IPortalComponentProfile profile = request.getComponentContext().getProfile(); try{ UserDetailBean model = new UserDetailBean(); DBAccessor accessor = DBAccessor.getInstance(); IPageContext context = PageContextFactory.createPageContext(request, response); model.setUserName(context.getDataForComponentId("userId").getValueAsString() );
model.setPasswd(context.getDataForComponentId("pwd").getValueAsString()); model.setFirstName(context.getDataForComponentId("fName").getValueAsString() ); model.setLastName(context.getDataForComponentId("lName").getValueAsString()) ; model.setPhone(context.getDataForComponentId("phone").getValueAsString()); model.setAddress(context.getDataForComponentId("address").getValueAsString() ); model.setCountry(context.getDataForComponentId("country").getValueAsString() ); accessor.saveUser(model); request.getNode().putValue("Message",model.getUserName()); }catch(Exception ex){ request.getNode().putValue("Exception",ex.getMessage()); } } }
Appendix D UserDetailBean public class UserDetailBean { private String userName; private String passwd; private String firstName; private String lastName; private String address; private String email; private String country; private String phone; public String getAddress() { return address; } public String getCountry() { return country; } public String getEmail() { return email; } public String getFirstName() { return firstName; } public String getLastName() { return lastName; } public String getPasswd() { return passwd; } public String getUserName() { return userName; } public void setAddress(String string) { address = string; } public void setCountry(String string) { country = string; }
public void setEmail(String string) { email = string; } public void setFirstName(String string) { firstName = string; } public void setLastName(String string) { lastName = string; } public void setPasswd(String string) { passwd = string; } public void setUserName(String string) { userName = string; } public String getPhone() { return phone; } public void setPhone(String string) { phone = string; }
Appendix E ApplicationUtil Class public class ApplicationUtil {
public static String encodeURL(IPortalComponentRequest request,String component){ IUrlGeneratorService service = (IUrlGeneratorService) PortalRuntime.getRuntimeResources().getService(IUrlGeneratorService.KEY); IPortalUrlGenerator generator = (IPortalUrlGenerator) service.getSpecializedUrlGenerator(IPortalUrlGenerator.KEY); String urlString =generator.generatePortalComponentUrl(request,component );//"ServletTest.ServletTest" return urlString; }
public static void includeResource(PageContext pageContext,IResource resourceFile,IPortalComponentRequest componentRequest){ IPortalComponentResponse componentResponse = (IPortalComponentResponse)pageContext.getAttribute(javax.servlet.jsp.PageCon text.RESPONSE); componentResponse.include(componentRequest, resourceFile);
public static void includeCSS(PageContext pageContext,String sResource,IPortalComponentRequest componentRequest){ IResource cssFile = componentRequest.getResource(IResource.CSS, sResource); includeResource(pageContext,cssFile,componentRequest); }
public static void includeJS(PageContext pageContext,String sResource,IPortalComponentRequest componentRequest){ IResource jsFile = componentRequest.getResource(IResource.SCRIPT, sResource); includeResource(pageContext,jsFile,componentRequest); }
public static String getResourceURL(String sResource,IPortalComponentRequest componentRequest){ return componentRequest.getResource(IResource.SCRIPT, sResource).getResourceInformation().getURL(componentRequest);

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 20
} Appendix F Styles.css div.fields { margin-top: 10px; }
div.field { border-width: 0px; margin-top: 2px; vertical-align: top; padding: 5px; background-color: #ebf6fd; width: 600px; }
div.submitbar{ border-width: 0px; margin-top: 2px; vertical-align: top; padding-left: 15px; padding-top: 15px;
label { width: 147px; height: 22px; padding-left: 2px; padding-top: 5px; font-weight: bold; font-size: 12px; }
input.field {
width: 95px; height: 22px; border-color: #000000; border-style: solid; border-width: 1px; background-color: #ffffff; margin-right: 22px; padding-top: 5px; padding-left: 2px;
} span.requiredFlag { font-size: 12px; color: #cc3333; margin-left: 5px; text-align: super; }
select{ width: 130px; height: 22px; }
label.confirmation { font-weight: bold; border-bottom-width: 0px; } div.heading { width: 100%; height: 18px; font-size: 14px; font-weight: bold; color: #000000; padding-left: 0px; background-color: #d0e7f4 ; vertical-align: top; cursor: default; }
div.subheading { width: 84.5%; height: 16px; font-size: 12px; font-weight: bold; color: #0000; padding-left: 5px; background-color:#a9c5d5 ; vertical-align: top; cursor: default; } div.error { width: 84.5%; height: 16px; font-size: 14px; font-weight: bold; color: #cc3333; padding-left: 5px; vertical-align: top; cursor: default; } div.content { margin: 10px; color: #000000; background-color: #FFFF; padding: 5px; height: 1px; } textarea.field { border-width: 1px; margin: 0px; padding: 3px; border-color: #000000; }
Appendix G Portalapp.xml <?xml version="1.0" encoding="utf-8"?> <application> <application-config> <property name="SharingReference" value="urlgenerator,com.sap.portal.htmlb"/> </application-config> <components> <component name="AjaxDemoComponent"> <component-config> <property name="ClassName" value="com.hclt.ep.demos.portlets.AjaxDemoComponent"/> <property name="SecurityZone" value="com.hclt.ep.demos.portlets/high_safety"/> </component-config> <component-profile> <property name="tagLib" value="/SERVICE/htmlb/taglib/htmlb.tld"/> </component-profile> </component> <component name="AjaxServlet"> <component-config> <property name="ClassName" value="com.hclt.ep.demos.servlets.AjaxServlet"/> <property name="ComponentType" value="servlet"/> </component-config> </component> </components> <services/> </application>
Appendix H demo.js function checkAvail(){ var ajaxUrl = document.getElementById('ajax_url').value; var funcName = htmlb_formid + "_getHtmlbElementId"; func = window[funcName]; var inputField = eval(func("userId")); var userID = inputField.getValue();
if(userID==null||userID.length<=0){ alert('Please Specify UserName '); return; } ajaxUrl +="?username="+userID+"&action=CheckUser"; var oXMLHttp = XMLHttpFactory.createXMLHttp(); if(oXMLHttp==null){ alert('Your Browser Does not Support XMLHTTP'); }else{ oXMLHttp.onreadystatechange = function (){ processChkUNameReq(oXMLHttp); } oXMLHttp.open("GET",ajaxUrl,true); oXMLHttp.send(); } }
function processChkUNameReq(req){ if(req.readyState==4){ var resp= req.responseText; if(resp=='A'){ document.getElementById('available').style.display='block'; document.getElementById('na').style.display='none'; }else if(resp=='NA'){ document.getElementById('na').style.display='block'; document.getElementById('available').style.display='none'; } } }
/**********
XMLHttpFactory Class
**************/
function XMLHttpFactory() { }
XMLHttpFactory.createXMLHttp = function () { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof window.ActiveXObject != "undefined") { return new ActiveXObject("MSXML2.XMLHttp"); }else{ return null; } } /********** End of XMLHttpFactory Class **************/
Related Content
https://media.sdn.sap.com/javadocs/NW04/SP9/runtime/index.html http://help.sap.com/saphelp_nw04/helpdata/en/35/f38f414141a709e10000000a155106/frameset.htm http://www.w3schools.com/ajax/default.asp
Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

Registration Form

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Registration Form

Enviado por

Direitos autorais:

Formatos disponíveis

Using AJAX Techniques in EP

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 1

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2

Using AJAX Techniques in EP

Deep hierarchical Navigation Connected Dropdown Boxes Auto Completion of Textboxes

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 3

Using AJAX Techniques in EP

The Problem to Solve

PDK basics Using Servlets in EP: JavaScript basics.

Setting up the Application

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 5

Using AJAX Techniques in EP

Save User Details Query User Details

private DBAccessor(){ userMap = new HashMap(); }

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 6

Using AJAX Techniques in EP

}else{ userMap.put(sUserName,userBean); } return userBean; }

Inducting AJAX techniques into our Application

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 7

Using AJAX Techniques in EP

public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { doProcessRequest(request,response); }

public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { doProcessRequest(request,response); }

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 8

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 9

Using AJAX Techniques in EP

The Application in Action

Fig 2 Check User name View

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 10

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 11

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 12

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 13

Using AJAX Techniques in EP

</div> </div> </div> </hbj:form> </hbj:page> </hbj:content>

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 14

Using AJAX Techniques in EP

Appendix B Success.jsp <%@ page import="com.hclt.ep.demos.util.ApplicationUtil;"%>

<% ApplicationUtil.includeCSS(pageContext,"css/styles.css",componentRequest); %>

<%if(componentRequest.getNode().getValue("Message")!=null){ <div class="subheading">

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 15

Using AJAX Techniques in EP

SAP DEVELOPER NETWORK | sdn.sap.com 2006 SAP AG