Runtime components : Channels components : AJAX channel : Tasks : Configuring an AJAX request on the browser side
  
Configuring an AJAX request on the browser side
This section describes how to configure an AJAX request on the browser side.
To configure an AJAX request on the browser side, do the following steps:
1 Create an XUI project.
▪ Open the Eclipse IDE, and then click File > New > Other.
▪ In the New window, expand the BTT folder, and then click XUI Web Project. Click Next.
▪ On the BTT XUI Web Project page, enter detailed information for the XUI project. Click Finish. An XUI project is created for a processor that consists of one start page and one final page.
2 Create a self-defined AJAX request operation.
For more information on how to create a self-defined operation, refer to Defining self-defined operations.
Example self-defined AJAX request operation
<?xml version="1.0" encoding="UTF-8"?>
<testAjaxOp>
<operation id="testAjaxOp"
context="testAjaxCtx" implClass="com.ibm.btt.application.op.testAjaxOp">
</operation>
<context id="testAjaxCtx" type="op">
<refKColl refId="testAjaxKColl" />
</context>
<kColl id="testAjaxKColl" dynamic="false">
<field id="accNumber"/>
<field id="accBalance"/>
</kColl>
</testAjaxOp>
Note In this example, the self-defined AJAX operation retrieves the accountNumber from an outer-scope context at run time.
public class testAjaxOp extends BTTServerOperation {

@Override
public void execute() throws Exception {
String accNumber = (String)this.getValueAt("accountNumber");
float balance = getBalance(accNumber);
this.setValueAt("accNumber", accNumber);
this.setValueAt("accBalance", balance);
super.execute();
}
private float getBalance(String accNumber) {
return 1922.99f ;
}
}
3 Create a page that contains a button that can be used to initiate and submit an AJAX request.
▪ Expand your project folder in the Enterprise Explorer pane, and then right-click the xui folder.
▪ Click New > Other.
▪ In the New window, expand the BTT folder, and then click New XUI File. Click Next.
▪ In the File name field of the Create XUI File page, enter a name for the XUI file. Click Finish. The XUI file is created in the xui folder of your project.
▪ In the Enterprise Explorer pane, double-click the XUI file you have just created. The XUI file opens in the XUI editor.
▪ In the XUI editor, drag a Form container from the Palette to the white editing area, and then drag the Button widget and all other widgets that you require from the Palette into the Form container that is in the XUI editor space.
4 Configure the Button widget in the Form container as an ajax request button.
▪ Click the Button widget that is in the Form container that will be used to submit an AJAX request.
The properties of the Button displays in the Properties tab. If the Properties tab is not open, click Window > Show View > Properties to open the Properties tab.
▪ In the Properties tab of the Button view, click the Value column of the buttonType property.
▪ In the drop-down list in the Value column of the buttonType property, select button.
5 Bind the AJAX request to the operation.
▪ Click the Button widget that will be used to submit an AJAX request.
▪ Select the Rules tab in the Button view of the Properties tab.
Selectthe Rules tab in the Button view.
▪ In the Rules List panel of the Rules tab, click the Add icon This graphic is described in the surrounding text. to add an event to the Button widget.
The "Add a rule" window opens.
▪ In the Name field of the "Add a rule" window, enter a name for the rule, and then click the Add icon This graphic is described in the surrounding text..
The "Please select an event" window opens.
▪ In the left panel, select the Button widget that will be used to submit an AJAX request; in the right panel, select onClick. Click OK.
Selectthe Button widget and on Click.
▪ In the Actions panel of the Rules tab, click the Add icon This graphic is described in the surrounding text..
The "Please select a value" window opens.
▪ In the drop-down list, select Invoke Widget Function.
▪ In the left panel, select the Form widget that contains the Button widget that will be used to submit an AJAX request; in the right panel, select the self-defined operation to which you want to bind the AJAX request. Click OK.
Selectthe Form widget and the self-defined operation in the Please selecta value window.
The self-defined operation is bound to the Button widget and is called when an AJAX request is submitted through the Button widget.
This graphic is described in the surrounding text.
6 Generate a JSP page.
▪ Right-click the XUI file that contains the Button widget you have just configured that will be used to submit an AJAX request.
▪ Click XUI Editor > Generate Dojo Page.
A new page under the Web Content folder of your project is generated that contains JSP and JavaScript code. The example below shows the .js and .jsp files that are generated under the Web Content folder of your project.
The .js and .jsp files are generated under the Web Content folder
This graphic is described in the surrounding text.
7 Deploy the project and check the AJAX request.
▪ In a browser, enter http://localhost:8080/TestAjax/EstablishSession to deploy the XUI project. Press Enter. The page that you created in the XUI editor displays.
This graphic is described in the surrounding text.
▪ On the page, click the button that is used to submit an AJAX request. An AJAX request is sent to the server and the data that is required to process the request is then retrieved from the processor context.
Go up to
Tasks