Skip to Content

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.

To report this post you need to login first.

39 Comments

You must be Logged on to comment or reply to a post.

    1. Durairaj Athavan Raja Post author
      Thanks Guillaume, for the comments.

      The planned next steps are
      1. Flex intergration into SAPGUI (already created the flex player control for sapgui)

      2.Flex web Widgets, the idea is some thing like yahoo widgets for desktop.

      Regards
      Raja

      (0) 
      1. Former Member
        Hi Raja,

        Do you intend to use Appollo for the Flex web Widgets idea ?

        I attended to a Flex training session yesterday and I have been told that – due to security restructions – it was forbidden to directly access Web Services or simply XML from remote servers (i.e. not the one that had provided the Flex app. in the first place). To override this behaviour, one can use:
        – crossdomain.xml file, but you have to have access to the remote server
        – proxy (a bit cumbersome)

        Is this a plege for FABridge ?  ๐Ÿ™‚

        I guess Visual Composer is a workaround solution for this because it – somehow – provides proxies to other systems.

        Best regards,


        Guillaume

        (0) 
        1. Durairaj Athavan Raja Post author
          Apollo – i have already made couple of samples consuming data from SAP systems, thru webservice and http service.

          about where to place crossdomain.xml check this thread
          Re: crossdomain.xml on WAS

          Yes its the same for FABridge as well. FABrdige will be good for small amounts of data, if the data to be passed is large, its not a good idea to use FABridge.

          I have started playing around with VC, its very early stage & i cant make much comment about it.

          Regards
          Raja

          (0) 
          1. Former Member
            Hi Raj,

            The blog is very useful and I tried implementing the same, it worked perfectly.

            I am trying to use Flex Ajax bridge to render a Flex component(like a pop up box) on top of the BSP view. Can we embed flex components inside a htmlb page using the bridge? ?
                                 (OR)
            Do we need to completely eliminate the BSP view page and should use flex as the front end?

            when I try to embed code into the BSP, the code is not being executed and is giving errors.

            Thanks for your time and consideration!!

            (0) 
  1. Former Member
    Raja,

    Great job on this example. I look forward to playing around more with Flex builder and integrating it with SAP. I would love to start seeing more examples of real scenarios of this from the community.

    Cheers,
    ewH

    (0) 
  2. Former Member
    Interesting post, but…

    Flex Ajax Bridge is kind of a joke from Adobe. Probably they need Ajax buzzword to attract developers to Flex technology, who knows…

    Did you try scenario where your BSP just hosts SWF and all data access is done in Flex itself via WebServices? This is just “one-liner” code, i.e. almost no ActionScript, only MXML markup ๐Ÿ™‚

    VS

    (0) 
    1. Durairaj Athavan Raja Post author
      Thanks for the comments VS.

      My flex programming knowledge is only two weeks old, so may not be the right person to comment, but as you said when i first heard Flex-Ajax i was thinking of something else, not expected what it is doing. But whats there in the name. But the claim of building flex things purely with javascript is a overshot as one still needs to know/understand the flex classes and its behaviour. By the way i did try accessing data using webservice and http service and the reason to choose FABridge was the flexibility to push data.

      Thanks again

      Regards
      Raja

      (0) 
  3. Former Member
    Hallo Raja,

    Sometimes one has a quiet moment on a Sunday morning, and finds an email in the inbox stored for later reading. (It was the email about your new blog.) Yes, spot on. You have found exactly the one small ellegant solution and approach to make a quantum jump in HTML applications. One can take existing applications, and with the few steps you showed, immediately have nice interactive charts working in the applications (something we have also just started with inhouse:). So definitely, you are leading the way! The total world of Flex is very interesting for richness, although I am at the moment not sure how it will pan out on the long run. But it will be an interesting ride!

    bye, brian (who comes here way to seldomly)

    (0) 
    1. Former Member
      Hi Brian,

      I do not understand where you see a quantum leap for HTML applications.

      For me the example shown, although a very nice realization of a useful functionality, has nothing to do with an HTML application. To use a web browser to transport a flex application filling 100% of the window is kind of a misconception or a deliberately used chimera to fool those expecting a browser based application.

      It’s a bit like if someone created a SAPGUI application made up of one large HTML container running a web application.

      just my 2 sunday morning cents,
      anton

      (0) 
  4. Former Member
    Great way of dealing with Flex…

    I’m not a big fan of FABridge (On a security level, I don’t like the idea of creating elements with javascript could me be somewhat dangerous).

    Anyhow good work ๐Ÿ™‚

    next time, i can work with you on showing Flex and JSON, ABAP are working toogether.

    good day

    quentin

    (0) 
  5. Former Member
    Hi Raja,
       First of all i am really appreciating your blog. it’s awesome.
        i just copied your application and tried it’s worked very well, with your blog inspiration i tried the same thing in SAP GUI also by using cl_dd_document even though i am very poor in flex . 
         The objects DVIEWER.SWF, FABRIDGE.JS and SWFOBJECT.JS were put in Web Repository  and exactly filled the same code  .  
        but getting the javascript error saying ‘buildm’ is undefined.this variables is used in the function FABridge.addInitializationCallback(“dviewer”,buildm);. where as i think this variable is not defined in any javascript files that are being used and in main html page also. but this is being accepted in  BSP where as it’s giving the error in GDV.
        so can we solve this Raja for getting this flex display in Gui.  i am able to see just player inside sap gui with out movie loded.

    Regards,
    shiva.
     

    (0) 
    1. Durairaj Athavan Raja Post author
      you cannot use it as its in SAPGUI environment either with cl_dd_document or with html_viewer control.

      ‘buildm’ is a javascript function defined within the bsp page.

      you need those js object within your page. in normal bsp , we just reference those files but in SAPGUI enviornment you cannot use the same logic. I am trying to come up similar stuff for sapgui, if i succeed i will post the same here as another weblog.

      Regards
      Raja

      (0) 
  6. Former Member
    Hi Raja:

    Sorry for my late comment…My connection at home is really damaged and I have a lot to deal at work…

    Your blog is great, mixing Flash and BSP is somethinf really nice -:)

    Sadly…I’m not into BSP or AJAX…At least not yet -:P As soon as I get to learn them I’m going to practice with your blog example -;)

    Greetings,

    Blag.

    (0) 
    1. Durairaj Athavan Raja Post author
      Thanks Blag.

      AJAX – you understand javascript, you understand HTTP request / response – thats it, you know AJAX

      BSP – with your php skills and ABAP skills , it will be really easy to pick up.

      Raja

      (0) 
  7. Former Member
    Nice one.
    I tried it myself and it worked perfectly.

    Just one question, because I’m quite new to this flex topic. Why do you use the FABridge? Can these things also be done without Ajax (Flex and SAP only)?
    I’m looking forward to see more things from you. ๐Ÿ˜€

    (0) 
    1. Durairaj Athavan Raja Post author
      thanks.

      this can be done without using FABridge. This was done to demonstrate on how to push data to flex movie rather than flex pulling data from ABAP. If you are interesed in flex pulling data from ABAP let me know, i can replicate this same sample in that approach.

      Regards
      Raja

      (0) 
  8. Hi Raja ,
    Amazing job done …I tried your tutorial and working cool ..Expecting more …Keep it up
    (0) 
  9. Former Member
    Please help me out,
    When i run the application i get the following error:
    “deconcept” is undefined.

    Do I need to import a class or something. Am I missing out something.

    Please let me know.

    Thank you,

    Gita

    (0) 
      1. Former Member
        Hi,
        Thanks, got the problem, i had imported the entire zip insteam of the js file. The application is now running without any error, but there still is some problem.

        The data is 0 and no graphs is displayed. I get empty graphs only the scales are visible.

        Is there a problem with my R/3 system? Do any configurations need to be done in my R/3?

        Thanks
        Gita

        (0) 
  10. Dear Raja,

    I really wondered by looking this…

    I want to use this type of layouts for my application too… I will send you a mail in details…

    Thanks in advance.

    (0) 
    1. Former Member
      Hi Raja,
      You blog is just mindblowing. Great stuff….
      I have couple of question.
      1. Did you code for “swfobject.js” file or its a standard file. when i opened it i could see that code was very clustered.
      2.If the code for “swfobject.js” is a generated code how did you get the code?
      Please reply to my question. Ill be waiting for the reply.
      Once again…
      Fantastic work 
      (0) 
        1. Former Member
          Hi Raja,
          Thanks for replying……

          Can you please tell us how did you code in FABridge.js . What I understand is FABridge.js is mapping data from BSP to the Flex. Can you please give tell us the steps how we can also do it in your method.
          I have learnt how to write the mxml tags and get the UI. but I need to know how to pass the data from BSP to flex.
          This will be a really big help for us from you.

          (0) 
          1. Durairaj Athavan Raja Post author

            i didn’t code FABridge.js as well, this is from adobe. (read about FABridge in adobe site)<br/><br/>for passing parameters, while embedding the swf in your bsp, (using swfobjects) you can pass like below<br/> so.addVariable(“cmqueryname”, “<%= queryname%>”);<br/><br/>and in the flex code you can receive it using syntax<br/><br/>Application.application.parameters.cmqueryname

            (0) 
  11. Former Member
    Hi Raja,

    Thanks for the fantastic example. I am a Flex developer and know nothing about SAP. Currently, our company would like to use Flex to replace SAP UI. The module of SAP I am involved is BSP.

    According to your blog, on the Flex side(for this example) did not have to do much except importing the Flex-AJAX Bridge. The reason I am asking is that I need to know if there is any other tricks.

    I notice that in your MXML, you have put all the components in an ArrayCollection(refs). what is the purpose of that?

    If that is the intension of referencing between Flex and SAP, is it possible to assign IDs to each component? Because in the later stage, each component can be a custom component.

    Once again, really appreciate you sample.

    Thank you.

    Michael

    (0) 
    1. Durairaj Athavan Raja Post author
      Yes you dont have to do anything on the flex side, except importing flex-ajax bridge and reference of components in an arraycollection. This limits the swf of what objects are used in the app.

      >If that is the intension of referencing between Flex and SAP, is it possible to assign IDs to each component? Because in the later stage, each component can be a custom component.<<br/>
      yes its possible and i assume thats how the flash Islands in ABAP/JAVA webdynpro works.

      Regards
      Raja
      (PS: sorry about the delay in replying, i was on holiday)

      (0) 
  12. Former Member
    Hi Raja,
    I just tried to implement this in our system, have got 2 questions for you:
    1) Download link “http://www.geocities.com/athavan_raja/dviewer.swf” is not valid any more, can you provide dviewer.swf again?
    2) Is it necessary to use the code provided with “the flex’s MXML code which generated the above movie” anywhere or is this just for information purpose?

    Many thanks & kind regards
    Wolfgang

    (0) 
    1. Durairaj Athavan Raja Post author
      Hi,
      Sorry about the delay, i was travelling.
      1. Send me an email(you can find it in my Business Card). I will send you the swf file. Will also work with the SDN content team to load it on SDN server.
      2. Its just for information purpose.

      Regards
      Raja

      (0) 

Leave a Reply