IBM WebSphere Multichannel Bank Transformation Toolkit, Version 7.1

Getting started with Web 2.0

Overview

This document is aimed to guide you into the world of BTT Web2.0 On Demand Workplace step by step. It contains different stages, each of which corresponds to different level of the understanding of BTT Web2.0. If you are new to BTT Web2.0, you can read it in sequence. If you are experienced in this area, you can skip the first few stages.

Preliminary stage

This stage is about setting up the environment and running the BTT Web2.0 internet bank sample which serves as the platform for the new application development. It also demonstrates the whole structure and main features of the BTT Web2.0 on demand workplace.

  1. Deploy BTT Web2.0 internet bank sample. Get the sample file BTT_InternetBankingAppl.ear from BTT7.1 installation directory\samples, import it to your RAD workspace, then deploy and publish it in WAS.
  2. Input the following address in web browser: http://ipaddress:port/BTT_InternetBankingWeb/EstablishSession. In this page, input user ID and password: user01/user01. This page provides the following styles:
    1. Web1.0: the traditional HTML internet bank sample.
    2. Web2.0 iPanel: BTT Web2.0 first generation style internet bank Sample.
    3. Web2.0 iWindow: Web2.0 desktop style internet bank Sample.
    Take BTT2.0 iWindow style for example.
  3. Select Web2.0 iWindow and click Sign-In button to sign in. In the following page, there are some elements:
    • Fixed Board. It is a fixed display window to display the message/fix /hot ac service provided by default. It locates in the right of the browser, web user can not change the size and position, or close the fixed window.
    • Start Menu. Start menu is accessed by a start button at the left of task bar. It contains service list and commands that can access service and settings. Users can switch between the start menu items with up/down/left/right arrow key. After clicking the Start button, a menu is displayed:
    • All Programs: This menu is for user customization
    • My Service: This menu provides service list for web users.
    • Service Setting: It provides the function to add service into desktop for quick launch.
    • Desktop Setting. This page is used to change the theme, icon size, and wall paper of the desktop.
    • Default. It's provided by default for user customization.
    • Save. It provides the save function to save the iWindow UI and service content. There are two save modes: save to file and save to database.
    • Exit. It provides the logoff function for user to exit the Web2.0 internet banking sample.
  4. Finally, try opening some service to experience the operation in Web2.0 internet banking sample. You can launch them from Start ->My Service, or directly double click the services icon on the desktop.
    • Launch from Start menu:
    • Launch from desktop by double clicking service icon:
    • Experience the Web2.0 internet banking sample service:
  5. Also you can select Web2.0 iPanel and login:
  6. The Web2.0 iPanel has the following components:
    1. Basic tab: basic tab is the default service for web users. It cannot be closed or changed.
    2. Add new tab: Web user can click this item to add a new tab in the workplace, then customize the service in this new tab.
    3. Add new column: Web user can click this item to add a new column to the tab, the maximum column number in one tab is three.
    4. Save page: Web user can click this item to save the layout and service customized in this workspace. When web user login again, the previous workplace settings is displayed.
    5. My Service: It contains all the services provided for web user. Web user can expand the service category and click the service to launch it. Note that before web user launch the service, there should be additional tab and column in the workspace besides the basic tab.

Primary stage

This stage focus on the integration with the legacy applications based on the BTT Web2.0 On Demand Workplace.

  1. Import file BTT_InternetBankingAppl.ear from BTT7.0 installation directory\samples to your RAD7.5 workspace.
  2. Click on the web project BTT_InternetBankingWeb->WebContent->bttweb2. It contains following folders and files:
    1. bttweb2.js. It contains BTT web2.0 product code for application runtime. You can customize the functions by editing this file. For more detailed information, refer to Web2 JS Document.
    2. Theme. It contains theme style for iPanel and iWindow. You can develop your own theme in this package. For more detailed information, refer to Theme
    3. Widget. It contains widgets definition and content for Web2.0 sample. These widgets can be reused both in iWinodw and iPanel style Web2.0 application.
    4. xmlrepository. It contains service and layout XML definition for iPanel and iWindow. For detailed information about these definitions, read the Reference sector for widget and service.
    5. Config.js. It defines configuration files for UI and service, web developer can customize this file to build up their own Web2.0 application.
  3. Add a widget base on pre-defined Simple HTML widget for user01.
    1. Open BTT_InternetBankingWeb-> WebContent-> bttweb2-> xmlrepository-> user01-> Service.xml, in service category basic_widget, insert a service to try:
      <Service id="0.3" name="BTTInfoCenter"
      desc="html_service1"
      logo="bttweb2/theme/ipanel/shared/servicelogo/navlogo.gif">
      		<Widget name="simpleHTMLWgt">
      	          <attribute name="url"
      value="http://publib.boulder.ibm.com/infocenter/btt/v6r1m2/index.jsp "/>
      		</Widget>
      </Service>
      These codes insert a simple HTML widget, which locates to the HTML page http://publib.boulder.ibm.com/infocenter/btt/v6r1m2/index.jsp. This change will take effect in both iPanel and iWindow. For more detailed information about service and widget definition, read the chapter Reference for Widget.
    2. Save the change and republish the application.
    3. Login the Web2.0 sample: http://ipaddress:port/BTT_InternetBankingWeb/EstablishSession. The Id is user01, and the password is user01.
      1. In iWindow, you will find:
      2. In iPanel, you will find:

Intermediate stage

This stage is about how to define a widget and how to integrate different widgets (including composition and communication).

  1. First, create a service from scratch.
    1. Create a widget .xml file:
      1. Create a folder named test in BTT_InternetBankWeb-> WebContent-> bttweb2-> widget.
      2. Create a null.xml file in the folder test named testWidget.xml.
      3. Copy following script to file testWidget.xml and save the change.
        <iw:iwidget name="testWidget" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget/btt" iScope="testWidget"  supportedModes="collapse close" mode="view">
            <iw:resource uri="testWidget.js" /> 
            <iw:content mode="view">    
        	<![CDATA[
        		<div>
        			<form > 
        			 <br><b><label>Please select:</label></b><br>			 
        			 <input type="button" name="test_button" value="     Reminder     " onclick="iContext.iScope(event).test_button()"/>
        			 <br>
        			 <input type="button" name="sale_button" value="Sale Promotion" onclick="iContext.iScope(event).sale_button()"/> 			 
        			 </form>			 
        		</div>			
            ]]>
            </iw:content>
        </iw:iwidget>
        
        In this widget definition file, two buttons were created: test_button and sale_button. It also defined the event for the buttons. For more detail about the parameters of this widget definition file, study the “Reference” in Section “Widget”.
    2. Implement the method for these two buttons by createing a JavaScript file for the widget:
      1. Create a JavaScript file named testWidget.js in the same folder with file testWidget.xml.
      2. Copy following code script to testWidget.js and save the changes. It defines the event for the two buttons which defined in testWidget.xml file.
        function testWidget (){		
        	this.onLoad = function(){
        		alert ("Loading!");
        	}
        	this.test_button =function(){ 
        		alert ("This is reminder!");
        	}	
        	this.sale_button =function(){ 
        		alert ("This is sale promotion!");
        	}	
        }
    3. Create widget definition for this service.
      1. Register the widget. Open BTT_InternetBankWeb-> WebContent-> bttweb2-> xmlrepository-> basic-> WidgetCatalog.xml, add following definition between <entries></entries>. It registers the widget as testWidget.
        <entry id='testWidget' 
        definition='../../widget/test/testWidget.xml'></entry>
      2. Add widget testWidget to user01 as its service. Open BTT_InternetBankWeb-> WebContent-> bttweb2-> xmlrepository-> user01 ->Service.xml. Add following code snippet in <ServiceCategory id="0" name="basic_widget" desc="basic_widget”…></ ServiceCategory >, then save the change.
        <Service id="0.4" name="testWidget"
        desc="test_widget"
        logo="bttweb2/theme/ipanel/shared/servicelogo/navlogo.gif">
        		<Widget name="testWidget" title="testWidget">	   		</Widget>
        </Service>
    4. Deploy the application. Rebuild the project and republish the application. Login the application at http://ipaddress:port/BTT_InternetBankingWeb/EstablishSession, select iWindow and login with user ID user01, and password user01, Click Start ->My service->Basic Widgets->testWidget to lunch the widget which created in previous steps.

      Following widget window opens when clicking button Reminder, there is an alert information This is reminder!. When clicking button Sale Promotion, there is an alert information This is sale promotion!.

  2. Then integrate several widgets in one widget container. Create a new widget named BorderContainer to user01 as its service. Open BTT_InternetBankWeb-> WebContent-> bttweb2-> xmlrepository-> user01 ->Service.xml. Add following code snippet in <ServiceCategory id="0" name="basic_widget" desc="basic_widget”…></ ServiceCategory > Then save the change.
    <Service id="0.5"
    name="BorderContainer" desc="BorderContainer"
    logo="bttweb2/theme/ipanel/shared/servicelogo/navlogo.gif">	 		<Widget
    name="BTTContainer" type="Border" persist="false" gutters="true"
    region="top" splitter="true" xheight="50%">
    			<children>
    			  <Widget name="testWidget" title="testWidget" region="left"
    splitter="true" xwidth="30%"></Widget>	 			  <Widget
    name="simpleBTTHTMLWgt" region="center" splitter="true" xwidth="70%">
    				<attribute name="displayPageName" value="accountinquiry.jsp"/>
    				<attribute name="height" value="100%"/>
    		      </Widget>				 			</children>
    		</Widget>
    </Service>

    This widget is a widget container, which integrates two widgets testWidget and simpleBTTHTMLWgt into one widget container. testWidget is the widget which created in last steps. simpleBTTHTMLWgt is the widget which is reused in Web1.0 transactions. For the detailed information and parameters reference, refer tosection “Widget”.

    Now save the change and publish the application and launch http://ipaddress:port/BTT_InternetBankingWeb/EstablishSession, select iWindow, and login with user ID user01 and password user01, Click Start ->My service->Basic Widgets->BorderContainer to launch the widget:

  3. Use BTT web2.0 event mechanism to communicate in different widgets:
    1. Fire event in testWidget. Open file testWidget.js, and insert this.iContext.fireEvent('addReminder', true, 'test'); in function for button test_button. In the same way, insert this.iContext.fireEvent('SalePromotion', true, 'sale'); in function for button sale_buton.
      this.test_button =function(){ 
      		alert ("This is reminder!");
      		this.iContext.fireEvent('addReminder', true, 'sale');	
      	}		
      	this.sale_button =function(){ 
      		alert ("This is sale promotion!");
      		this.iContext.fireEvent('SalePromotion', true, 'sale');	
      	}	
    2. Add a status banner in the .jsp file which is capsulated by widget simpleBTTHTMLWgt. Add listener for this status banner. Open \BTT_InternetBankingWeb-> WebContent-> btt-> html> accountinquiry.jsp, add following HTML element in the last part between <form></form>

      <p id="status" style="background-color:#FFFF00;padding:5px;">

    3. Listen the event in widget simpleBTTHTMLWgt which is fired by widget testWidget. Open BTT_InternetBankingWeb-> WebContent-> bttweb2-> widget-> web1.0 ->BTTHTMLWgt.js,
      1. Add following event listener in function this.onload():
        this.iContext.addEventListener('addReminder', true, this.testListener,this);
        this.iContext.addEventListener('SalePromotion',true, this.saleListener,this);
      2. Add following functions to implement the event listener:
        this.testListener = function() {	
        		 var alertString='It is time to pay bill!';
        		 this.iContext.getElementById("status").innerHTML= alertString;	
        	}	
        	this.saleListener = function() {	
        		 var alertString='Many products are in discount, welcome!';
        		 this.iContext.getElementById("status").innerHTML= alertString;		
        	}	
    4. Now publish the application and launch http://ipaddress:port/BTT_InternetBankingWeb/EstablishSession, select iWindow, and login with user ID user01 and password user01, Click Start ->My service->Basic Widgets->BorderContainerto launch the widget . Click the button Reminder, a reminder information displays in status bar: It is time to pay bill!

      Click the button Sale Promotion, a information displays in status bar: Many products are in discount, welcome!

      The two widgets can communicate with each other with BTT Web2.0 event mechanism. For the more detailed parameter and information for event mechanism, refer to“Event”.

    5. Also we can find this widget in iPanel application, launch http://ipaddress:port/BTT_InternetBankingWeb/EstablishSession, select iPanel, and login with user ID user01 and password user01.
      1. Add a net tab in the panel:
      2. Click My service->Basic Widgets->BorderContainerto launch the widget:


Feedback