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.
- Deploy BTT Web2.0 internet bank sample. Get the sample file BTT_InternetBankingAppl.ear from
BTT7.0 installation directory\samples, import it to your RAD workspace,
then deploy and publish it in WAS.
- 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:
- Web1.0: the traditional HTML internet bank sample.
- Web2.0 iPanel: BTT Web2.0 first generation style internet bank
Sample.
- Web2.0 iWindow: Web2.0 desktop style internet bank Sample.
Take BTT2.0 iWindow style for example.
- 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. For more detailed information about
save function, refer to Web2.0 persistence.
- Exit. It provides the logoff function for
user to exit the Web2.0 internet banking sample.
- 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:
- Also you can select Web2.0 iPanel and login:
- The Web2.0 iPanel has the following components:
- Basic tab: basic tab is the default service for web users. It
cannot be closed or changed.
- 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.
- 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.
- 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.
- 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.
- Import file BTT_InternetBankingAppl.ear from
BTT7.0 installation directory\samples to your RAD7.5 workspace.
- Click on the web project BTT_InternetBankingWeb->WebContent->bttweb2.
It contains following folders and files:
- 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.
- 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
- 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.
- 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.
- Config.js. It defines configuration files
for UI and service, web developer can customize this file to build
up their own Web2.0 application.
- Add a widget base on pre-defined Simple HTML widget for user01.
- 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.
- Save the change and republish the application.
- Login the Web2.0 sample: http://ipaddress:port/BTT_InternetBankingWeb/EstablishSession.
The Id is user01, and the password is user01.
- In iWindow, you will find:
- 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).
- First, create a service from scratch.
- Create a widget .xml file:
- Create a folder named test in BTT_InternetBankWeb->
WebContent-> bttweb2-> widget.
- Create a null.xml file in the folder test named testWidget.xml.
- 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”.
- Implement the method for these two buttons by createing a JavaScript file for the widget:
- Create a JavaScript file named testWidget.js in
the same folder with file testWidget.xml.
- 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!");
}
}
- Create widget definition for this service.
- 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>
- 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>
- 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!.
- 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:
- Use BTT web2.0 event mechanism to communicate
in different widgets:
- 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');
}
- 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;">
- Listen the event in widget simpleBTTHTMLWgt which
is fired by widget testWidget. Open BTT_InternetBankingWeb->
WebContent-> bttweb2-> widget-> web1.0 ->BTTHTMLWgt.js,
- Add following event listener in function this.onload():
this.iContext.addEventListener('addReminder', true, this.testListener,this);
this.iContext.addEventListener('SalePromotion',true, this.saleListener,this);
- 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;
}
- 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”.
- 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.
- Add a net tab in the panel:
- Click My service->Basic Widgets->BorderContainerto launch the widget: