This weblog is about creating Rich Internet Application using BSP and Adobe Flex. BSP is great but it misses the richness of Adobe Flex applications. To leverage flex capabilities within BSP applications we have to create flex applications using flex tools (Flex Builder), which can get data from SAP systems using WebServices or HTTP services and we just embed the compiled (from Flex Builder) flash movie into or BSP application. This results in much lesser control (runtime) over flash movie contents from BSP application. Flex now also provides a nice tool called Flex - Ajax bridge (FABridge), which can be used to dynamically create flash objects and push data to it using simple JavaScript. In this weblog i am going to show about creating a small BSP application utilizing FABridge.
If you are new to Flex, check out the following links to learn more about Adobe Flex and Flex-Ajax Bridge.
Adobe Flex
Flex-Ajax Bridge
How this is done.
1. A blank (just with containers) Flash movie is generated using the following code and the finished movie will look like below.
| blank flash movie: ![fabblank.JPG]()
|
| the flex's MXML code which generated the above movie: <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.Alert;
import mx.controls.*;
import mx.charts.*;
import mx.charts.series.*;
import mx.charts.effects.*;
import mx.graphics.LinearGradient;
import mx.graphics.GradientEntry;
import mx.graphics.IFill;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.Legend;
//utils
import flash.utils.Timer;
import flash.utils.clearInterval;
//effects
import mx.effects.*;
import mx.effects.easing.*;
import mx.effects.effectClasses.*;
// these just force datagrid to be linked into the application
public var refs:Array = [DataGrid, Legend, DataGridColumn, ColumnChart, ColumnSeries, LineSeries, CategoryAxis, LinearAxis, AxisRenderer, SeriesInterpolate, SeriesSlide, SeriesZoom, LinearGradient, GradientEntry, Label ];
]]>
</mx:Script>
<mx:VDividedBox horizontalAlign="center" width="100%" height="100%" id="vdbox">
<mx:Panel width="70%" roundedBottomCorners="true" height="50%" id="gpanel"paddingLeft="0" paddingTop="0" title="">
</mx:Panel>
<mx:HDividedBox height="50%" width="100%" id="hdbox">
<mx:Panel width="50%" roundedBottomCorners="true" height="100%" id="cpanela" paddingLeft="0" paddingTop="0" title="">
</mx:Panel>
<mx:Panel width="50%" roundedBottomCorners="true" height="100%" id="cpanelb" paddingLeft="0" paddingTop="0" title="">
</mx:Panel>
</mx:HDividedBox>
</mx:VDividedBox>
<fab:FABridge xmlns:fab="bridge.*" />
</mx:Application> |
2. This blank movie is used in bsp and its contents (datagrid, chart) are \ dynamically created from BSP.
What do you need to develop/run this demo BSP application.
1. FABridge.js from \ \ FABridge B4 013007.zip
2. Adobe \ \ Flash Player 9 .
3. swfobject.js from \ \ Download SWFObject 1.5
4. blank flash movie \ dviewer.swf (to download \ right click and \ save target as).
Demo BSP Application
Lets get started and create the demo BSP application.
1. Create a BSP application and set it as stateful \ application.
2. Import FABridge.js , swfobject.js and dviewer.swf into \ the MIME folder of this application. (do not change their names)
3. Create a page with following details.
| Type Definition: ![ftd.JPG]()
|
| Page Attributes: ![pa1.JPG]()
|
| OnInitialization code: * event handler for data retrieval
REFRESH flights .
REFRESH: sumflights .
CLEAR : wa_flights , sumflights, wa_sumflights .
REFRESH: fields .
SELECT
carrid
seatsmax
seatsocc
seatsmax_b
seatsocc_b
seatsmax_f
seatsocc_f UP TO 200 ROWS FROM sflight INTO TABLE sumflights .
LOOP AT sumflights INTO wa_sumflights .
COLLECT wa_sumflights INTO flights .
ENDLOOP .
CLEAR wa_fields .
wa_fields-name = 'CARRID' .
wa_fields-value = 'Carrier' .
APPEND wa_fields TO fields .
CLEAR wa_fields .
wa_fields-name = 'SEATSMAX' .
wa_fields-value = 'Eco. Max Capacity' .
APPEND wa_fields TO fields .
CLEAR wa_fields .
wa_fields-name = 'SEATSOCC' .
wa_fields-value = 'Eco. Occupied' .
APPEND wa_fields TO fields .
CLEAR wa_fields .
wa_fields-name = 'SEATSMAX_B' .
wa_fields-value = 'Buss. Max Capacity' .
APPEND wa_fields TO fields .
CLEAR wa_fields .
wa_fields-name = 'SEATSOCC_B' .
wa_fields-value = 'Buss. Occupied' .
APPEND wa_fields TO fields . CLEAR wa_fields .
wa_fields-name = 'SEATSMAX_F' .
wa_fields-value = 'First Max Capacity' .
APPEND wa_fields TO fields . CLEAR wa_fields .
wa_fields-name = 'SEATSOCC_F' .
wa_fields-value = 'First Occupied' .
APPEND wa_fields TO fields . |
| Layout code: <%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design = "design2003"
controlRendering = "sap" >
<htmlb:document>
<htmlb:documentHead title="Flex-BSP Flex-Ajax Bridge Sample" >
<script type="text/javascript" src="swfobject.js"></script>
<script src="FABridge.js" ></script>
<script>
<!--
function buildm()
{
var flexApp = FABridge.dviewer.root();
var grid = FABridge.dviewer.create("mx.controls.DataGrid");
grid.setStyle("headerColors", [0x277DC6,0x50ABF7]);
grid.setId("gd");
<%
clear wa_fields .
field-symbols: <l_line> type any,
<l_field> type any.
data: fieldsstring type string ,
rowstring type string ,
fval type string ,
rownum type i ,
colnum type i ,
srnum type string ,
scnum type string .
clear fieldsstring .
loop at fields into wa_fields .
if fieldsstring is initial .
concatenate fieldsstring 'col' wa_fields-name into fieldsstring .
else .
concatenate fieldsstring `, ` 'col' wa_fields-name into fieldsstring .
endif .
%>
var col<%= wa_fields-name %> = FABridge.dviewer.create("mx.controls.dataGridClasses.DataGridColumn");
col<%= wa_fields-name %>.setDataField("<%= wa_fields-name %>");
col<%= wa_fields-name %>.setHeaderText("<%= wa_fields-value %>");
<%
endloop .
%>
grid.setColumns( [<%= fieldsstring %>] );
grid.setHeight(250);
var gddp = FABridge.dviewer.create("mx.collections.ArrayCollection");
<%
clear: wa_flights, wa_fields , rownum, colnum, srnum, scnum.
loop at flights into wa_flights .
clear srnum .
move: rownum to srnum .
condense srnum no-gaps .
%>
<%
clear rowstring .
loop at fields into wa_fields .
clear fval .
assign component wa_fields-name of structure wa_flights to <l_field> .
if <l_field> is assigned.
fval = <l_field> .
condense fval no-gaps .
clear: scnum .
move: colnum to scnum .
condense scnum no-gaps .
if rowstring is initial .
concatenate rowstring '{' wa_fields-name ':' '"' fval '"' into rowstring .
else .
concatenate rowstring ',' wa_fields-name ':' '"' fval '"' into rowstring .
endif .
%>
<%
endif .
clear wa_fields .
colnum = colnum + 1 .
endloop .
concatenate rowstring '}' into rowstring .
%>
var a<%= srnum %> = <%= rowstring %> ;
gddp.addItem(a<%= srnum %>);
<%
clear rowstring .
clear : colnum, wa_flights .
rownum = rownum + 1 .
endloop .
%>
grid.setDataProvider(gddp);
var pan = flexApp.getGpanel();
pan.setTitle("Flex - BSP FA Bridge Sample - Flights Grid");
pan.setWidth(725) ;
flexApp.getGpanel().addChild(grid);
var genchar = function(event)
{
var abc = event.getTarget().getSelectedItem() ;
var nnchart = flexApp.getCpanelb().getChildByName("nchart");
nnchart.setDataProvider(abc);
}
grid.addEventListener("change", genchar);
var chart = FABridge.dviewer.create("mx.charts.ColumnChart");
chart.setName("chart");
chart.setShowDataTips("true");
chart.setWidth(475);
chart.setHeight(264);
chart.setId("cc1");
var nchart = FABridge.dviewer.create("mx.charts.ColumnChart");
nchart.setName("nchart");
nchart.setShowDataTips("true");
nchart.setWidth(475);
nchart.setHeight(264);
nchart.setId("ncc1");
var neffect = FABridge.dviewer.create("mx.charts.effects.SeriesInterpolate");
neffect.setMinimumElementDuration(300);
var effect = FABridge.dviewer.create("mx.charts.effects.SeriesZoom");
effect.setMinimumElementDuration(300);
<%
clear : fieldsstring, rowstring, wa_fields .
loop at fields into wa_fields .
if wa_fields-name = 'CARRID' .
%>
var catXAxis = FABridge.dviewer.create("mx.charts.CategoryAxis");
catXAxis.setDisplayName("<%= wa_fields-value %>");
catXAxis.setDataProvider(gddp);
catXAxis.setCategoryField("<%= wa_fields-name %>");
chart.setHorizontalAxis(catXAxis);
var ncatXAxis = FABridge.dviewer.create("mx.charts.CategoryAxis");
ncatXAxis.setDisplayName("<%= wa_fields-value %>");
ncatXAxis.setCategoryField("<%= wa_fields-name %>");
nchart.setHorizontalAxis(ncatXAxis);
<%
else .
clear fval .
move: sy-tabix to fval .
if rowstring is initial .
concatenate rowstring 's' fval into rowstring .
else.
concatenate rowstring ',' 's' fval into rowstring .
endif .
if fieldsstring is initial .
concatenate fieldsstring 'ns' fval into fieldsstring .
else.
concatenate fieldsstring ',' 'ns' fval into fieldsstring .
endif .
%>
var s<%= sy-tabix %> = \ \ \ FABridge.dviewer.create("mx.charts.series.ColumnSeries");
s<%= sy-tabix %>.setYField("<%= wa_fields-name %>");
s<%= sy-tabix %>.setDisplayName("<%= wa_fields-value %>");
s<%= sy-tabix %>.setStyle("hideDataEffect", effect);
s<%= sy-tabix %>.setStyle("showDataEffect", effect);
var ns<%= sy-tabix %> = \ \ \ FABridge.dviewer.create("mx.charts.series.ColumnSeries");
ns<%= sy-tabix %>.setYField("<%= wa_fields-name %>");
ns<%= sy-tabix %>.setDisplayName("<%= wa_fields-value %>");
ns<%= sy-tabix %>.setStyle("hideDataEffect", null);
ns<%= sy-tabix %>.setStyle("showDataEffect", effect);
<%
endif .
endloop .
%>
chart.setSeries( [<%= rowstring %>] );
chart.setDataProvider(gddp);
var cpa = flexApp.getCpanela();
cpa.setTitle("Flex - BSP FA Bridge Sample - Flights Chart");
flexApp.getCpanela().addChild(chart);
nchart.setSeries( [<%= fieldsstring %>] );
var cpb = flexApp.getCpanelb();
cpb.setTitle("Flex - BSP FA Bridge Sample - Carrier Details");
flexApp.getCpanelb().addChild(nchart);
}
-->
</script>
</htmlb:documentHead>
<htmlb:documentBody>
<div id="flashoutput"> </div>
<script language="javascript" >
var so;
var version = deconcept.SWFObjectUtil.getPlayerVersion();
if (version['major'] >= 9 ){
so = new SWFObject("dviewer.swf", "myflash", "100%", "100%", "8", "#B3D2D7"); so.addParam("FlashVars", "bridgeName=dviewer");
so.addParam("vmode", "opaque");
so.addParam("allowScriptAccess", "always");
so.write("flashoutput");
FABridge.addInitializationCallback("dviewer",buildm);
}
</script>
</htmlb:documentBody>
</htmlb:document>
</htmlb:content> |
4. Save and activate the BSP application/page and test the page. Try clicking on the grid column header to sort the grid and see how it affects the chart and also click on a record in the grid and see new chart getting generated you can also drag drop columns in the grid to rearrange the column order.
Do you like what you see?
The finished BSP page will look like below
![fab.JPG]()
Hope you like the look and feel of this application. If you run into problems running this or creating this bsp application, you can post your questions either here in comment section or in the bsp forum.
