In WCS we can do AJAX programming in 3 ways,
1. Refresh Area
2. Service
3. General Dojo Ajax
Following tutorial will aware you Refresh Area in WCS
First of all we need two pages one which runs at client side and fires the event
for refresh area and another is the at server side which takes the
request parameters from the client and process the data, prints the
content for the refresh area.
The
whole story is simple, we going to have a context, a controller with
unique id, and a widget. All this are linked while writing the widget
in the client page. We are going a take event like whenever text is
entered in the text box then i am going to update the context, rest
all things are handled by dojo only.
In
addition to above i wrote a script file which handles the KeyUp event
for a text box in the client page, as this event will be the root for
the RefreshArea.
We
have to make few changes in the predefined files.
For
each and every new RefreshArea, we have to add a context in
CommonContextDeclarations.js
as
follows
- It should have a unique context name, here its "RefreshArea_Context".
- And it contains the varible names that we are going to pass during the request as in the JSON format and with default values, here its "{searchTerm: ""}".
- The last one is the updateContextUrl, this will fire after successful updation of context.
wc.render.declareContext("RefreshArea_Context",{searchTerm:
""},"")
We
have to declare a controller for the RefreshArea as follows
- it should have a controllerid, here its "RefreshAreaController"
- A render context declared in the CommonContextDeclarations.js file
- A default url to be called, here i kept null because i will update this when i am loading the client page.
- Next is renderContextChangedHandler function, this will be called when the change in the context occurs.
- In this function we are going to refresh the renderContext of the widget.
- PostRefreshHandler is fired after the above function execution.
wc.render.declareRefreshController(
{
id
: "RefreshAreaController",
renderContext
: wc.render.getContextById("RefreshArea_Context"),
url
: "",
formId
: "",
renderContextChangedHandler
: function(message, widget) {
var
controller = this;
var
renderContext = this.renderContext;
widget.refresh(renderContext.properties);
//alert("renderContextChangedHandler");
},
postRefreshHandler
: function(widget) {
//document.getElementById('RefreshAreaContent').value
= "Hai";
//alert("postRefreshHandler");
}
})
Preparing
Client Page (RefreshClient.jsp)
Simple
Jsp Page as follows,
<%@
page language="java" contentType="text/html"%>
<%--
include all tag libs which are needed for our page --%>
<%@
taglib uri="http://java.sun.com/jsp/jstl/fmt"
prefix="fmt"%>
<%@
taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@
taglib uri="http://commerce.ibm.com/base" prefix="wcbase"%>
<%@
taglib uri="http://commerce.ibm.com/foundation"
prefix="wcf"%>
<%@
taglib uri="flow.tld" prefix="flow"%>
<%@
taglib uri="http://commerce.ibm.com/coremetrics"
prefix="cm"%>
<%--
include the neede jsp files--%>
<%@
include file="./include/JSTLEnvironmentSetup.jspf"%>
<%@
include file="./include/nocache.jspf"%>
<!DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Refresh
Area Client</title>
<%--
include the script file dojo --%>
<script
type="text/javascript" src="<c:out
value="${dojoFile}"/>" djConfig="${dojoConfigParams}"></script>
<%--
this will include all the javascripts that are needed for --%>
<%@
include file="./include/CommonJSToInclude.jspf"%>
<%--
this is the script file that i wrote to update the context --%>
<script
type="text/javascript" src="<c:out
value="${jsAssetsDir}javascript/RefreshAreaJS.js"/>"></script>
</head>
<body>
<%--
This will be used as the URL which will call server Page--%>
<wcf:url
var="refreshAreaLink" value="RefreshAreaPageView"
type="Ajax">
<wcf:param
name="storeId" value="${WCParam.storeId}" />
<wcf:param
name="catalogId" value="${WCParam.catalogId}" />
<wcf:param
name="langId" value="${WCParam.langId}" />
</wcf:url>
<%--
Common utilities which includes all the wc.widgets files etc.., --%>
<%@
include file="./include/StoreCommonUtilities.jspf"%>
<%--
Widget --%>
<div
dojoType="wc.widget.RefreshArea"
widgetId="RefreshAreaDisplay"
id="RefreshAreaDisplay"
controllerId="RefreshAreaController"
role="wairole:region"
waistate:live="polite" waistate:atomic="false"
waistate:relevant="all">
</div>
<%--
this will parse the widget --%>
<%--
Sets the url for controller to refresh the area --%>
<script
type="text/javascript">
dojo.addOnLoad(function()
{
parseWidget("RefreshAreaDisplay");
CommonControllersDeclarationJS.setControllerURL('RefreshAreaController','<c:out
value='${refreshAreaLink}'/>');
});
</script>
<%--
Text box which will fire the event in the RefreshAreaJS.js file--%>
<input
id="WC_QuickOrderForm_input_1"
type="text" value="" tabindex="-1"
onKeyUp="javascript:refreshAreaJS.refreshData();"
/>
</body>
</html>
RefreshServer.jsp
<%@
page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%--
picks up the request parameter --%>
${WCParam.searchTerm}
RefreshAreaJS.js
//
import all common required files.
dojo.require("wc.service.common");
refreshAreaJS={
//
this function called as soon as the text in the textbox entered
refreshData:function(){
//alert("refreshData");
wc.render.updateContext('RefreshArea_Context',{'searchTerm':document.getElementById('WC_QuickOrderForm_input_1').value});
}
}
Thanks for this post, very helpful! I finalliy made somthing work thanks to this example
ReplyDelete