Skip to Content

Introduction

In this blog I would like to introduce you to a new community project called – FLOB (Flex on BSP). The purpose of this project is to make it incredibly easy for BSP and ABAP developers to create Adobe Flex based web applications from within SE80 without having to know anything about Flex Builder, ActionScript, or MXML.  

The concept of FLOB is to build a series of BSP Extension Elements (like the SAP delivered HTMLB, XHTMLB, and PHTMLB libraries), except that this new extension will output Adobe Flex instead of HTML and JavaScript. This approach hides any of the differences between Flex and normal BSP development.  This also makes the Flex rendering technology accessible to BSP on WebAS 6.20, NetWeaver 6.40 and NetWeaver 7.0.

Flob Example

Figure 1: FLOB in action

Disclaimer

Before I jump into the detailed description of what FLOB is and what technologies it contains, I have to get one big disclaimer out of the way.  FLOB is NOT an official SAP Product or Project!  It is a community driven Open Source project and not supported or delivered by SAP – in other words don’t even think about opening an OSS problem ticket for question about it :).

Although I am an SAP employee, I have been working on FLOB in my own personal time just because I enjoy tinkering with technology.  The source code that I have built has all been done in the customer name range and is now given to the community.  Although I started the project (just out of curiosity around RIAs in general), my hope is that others in the community will participate.

My work on this project also has nothing to do with SAP’s strategy for the use of Flex in Web Dynpro.  SAP has a very strong strategy around Web Dynpro as their primary UI technology moving forward.  Web Dynpro is designed to be very flexible in its channel delivery mechanisms.  Already SAP has demonstrated how they are going to offer a full Flex Client and the concept of Flex Islands for Web Dynpro in the near future (actually the flex client for NetWeaver CE 1.0 Visual Composer built Web Dynpro applications is already available).

SAP is correctly putting its resources around its future UI technology.  My experimentation with BSP and Flex is in no way meant to be contradictory to the overall SAP UI strategy of moving to Web Dynpro.  With that said, there are still many customers who are getting value from their existing BSP applications and who may not upgrade to the latest NetWeaver release for some time (in order to have access to Web Dynpro).  This is where a community project like FLOB can help fill this gap and provide a little more value to those existing applications.

Architecture

The whole idea of FLOB was to map the concepts of FLEX development right into BSP.  We start by taking each of the FLEX UI elements and exposing them as BSP Extension Elements.  The UI attributes are mapped to BSP Extension Element attributes. 

Flob at Design Time

Figure 2: FLOB at Design Time inside the BSP Editor

This mapping of concepts doesn’t stop with the basics, however.  FLOB also supports BSP Model Binding and Server Side Events. This makes converting an existing BSP application to render Flex almost as easy as doing a find and replace on the Extension Name.

If you have experience with Flex development already, you might be wondering how this is possible from BSP.  Normally in Flex you design applications using a combination of ActionScript and MXML.  These objects are compiled into a binary SWF file and this is what is consumed by the Flash Player in the browser at runtime.

But with FLOB there is no need to work with ActionScript, MXML or to have to compile your development to a SWF.  FLOB uses a small library provided by Adobe called the Flex Ajax Bridge (or FABridge for short). The FABridge makes it possible to interact with a SWF file running in a browser via JavaScript.  Normally people would use the FABridge to adjust the properties of an already rendered Flex application.  For FLOB however we needed to take the FABridge in a little different direction.

You see with FLOB we wanted to control all the UI rendering from BSP Extensions (and within those extensions JavaScript Code).  What we did for FLOB was to build a single SWF file that is actually empty.  It only contains the forward declaration for all libraries that might be referenced by FLOB, but doesn’t contain any UI layout or logic. This single, empty SWF (called ABAP_Bridge) is then shared by all BSP applications using FLOB.  It is loaded as a MIME file and then cached by all BSP applications referencing it.  This works just fine because the SWF’s contents never really need to change.

With the empty SWF file loaded, all the UI elements are then added according to their description within BSP via JavaScript Code and the FABridge Library.  All of this may sound rather overwhelming.  You have ABAP code that generates JavaScript Code which in turn generates ActionScript which then renders Flex UI elements.  The good news is that I provide this information here mostly as background.  When you work with FLOB and the FLOB BSP Extensions all of this work is done for you and rarely have to see anything of it.  Even if you want to extend the rendering by interacting with the Flex UI elements in your own code, you can do this with simple JavaScript thanks to the FABridge.

Where can you get it

If you have read the blog this far, then you might be wondering where you can get FLOB.  The first Beta of FLOB has been released as an Open Source (MIT Licensing) project on Google Code. You can download the ABAP Transport Files and the first few patches (which added a few critical UI elements and fix a bug specific to FireFox support) from the Google Code Project Page.

Right now we only have transport files, but hopefully with the next Beta release in a few weeks we will had SAPLink Nuggets.  There hit a small problem when we tried to export some of the classes via SAPLink and that is being worked on as we speak.

The Google Code Project site has a place where you can document bugs (remember no OSS problem tickets) and report suggestions.  I would also encourage people to discuss FLOB in the User Interface Technology.

The first release that is available now is an early Beta.  There are still plenty of things that need to be implemented as well as some of the error handling is lacking. Here is a list of the UI elements that are currently supported:

  • Accordion
  • Alert
  • ApplicationControlBar
  • Blur
  • Box
  • Button
  • Canvas
  • CheckBox
  • ColorPicker
  • ComboBox
  • ControlBar
  • DataGrid
  • DataGridColumn
  • DataGridColumns
  • Dissolve
  • Fade
  • FileUpload
  • Form
  • FormHeading
  • FormItem
  • Glow
  • HBox
  • HDividedBox
  • Image
  • Iris
  • Label
  • LinkButton
  • Move
  • NumericStepper
  • Panel
  • PopupWindow
  • RadioButton
  • RadioButtonGroup
  • Reflection
  • Resize
  • RichTextEditor
  • Rotate
  • Slider
  • Spacer
  • StringValidator
  • TabNavigator
  • Text
  • TextArea
  • TextInput
  • VBox
  • VDividedBox
  • Wipe
  • Zoom

Also delivered with the FLOB Extensions are a series of example applications. The main one, zbspext_flex, provides a sample solution for each UI element.  These examples will hopefully help people get started using FLOB right away.

The Future

So what does the future of FLOB hold?  First of all I would really like to release an updated Beta during TechEd Bangalore.  The current plans for this new release are some critical fixes as well as Flex 3.0 Beta 2 support.

Looking farther out I would like to focus on more “pattern elements”.  For instance I would like to take some of the popular Custom BSP Extensions (like Value Help and F1 help) and port them over to FLOB.  I would also like to add more functionality to the Data Grid (built in AJAX scrolling) and look at using the Advanced Data Grid.  Also I haven’t touched the Graphing and Charting capabilities yet.

To report this post you need to login first.

25 Comments

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

    1. Thomas Jung Post author
      Everything releases in beta these days right?  Just trying to stay trendy. ๐Ÿ™‚

      Actually I released what I had done, knowing that there were some issues. For instance when I released there was no Firefox support. There is also an issue with Panel percent sizing (which I just fixed last night).

      Even with issues, I wanted to put the framework out so that I could get feedback as well as start getting other community members working on the project as well.

      (0) 
  1. Former Member
    Hi Thomas,

    In some of the BSP sample applications you provide ZFLEX_MVC*, there is a reference to a ZAJS BSP extension but it seems it is missing (BSP does not compile).

    I guess this only contains a reference to the Flex Ajax bridge Javascript file ? Or is this something else (a new marvelous future feature ?)  ๐Ÿ˜‰

    Thanks.

    Best regards,
    Guillaume

    (0) 
    1. Thomas Jung Post author
      >a new marvelous future feature
      It does point to a marvelous feature – just not one from me nor is it a future feature.  AJS or ABAP JavaScript is a project released by Dan McWeeney some time back.
      http://code.google.com/p/abapjs/

      BSP Meet your AJAX Framework: AJS

      It is great little library that does lots of things, but most important to FLOB it makes AJAX calls really easy. 

      I did reference and use it directly in some of the FLOB examples.  You may also find references to the ZAJS extension. This is just an Extension wrapper that I wrote around the AJS project.  It can be downloaded here:
      http://code.google.com/p/abapjs-extensions/
      You can read about it here:
      Trying out AJS

      However you will find that most of the examples don’t need the ZAJS extesion (only the early examples).  That is because Dan was kind of enough to change the licensing on AJS so that I could reference it directly within FLOB (the header element of FLOB loads AJS as well).  I will be using AJS within some of the elements.  For instance I am working on converting the BSP Download Extension to FLOB and I am going to AJS to make AJAX calls instead of Server Side Events within this new element.

      (0) 
  2. Thomas Alexander Ritter
    Hi Thomas,
    we already talked about the project at the community day but I am really impressed by the fact that you can completely replace the BSP layer just by renaming extensions, wow. I am glad that developers who sticked to a clean approach of writing their BSP apps (aka MVC) will now get a lot of stuff for free. Seems like it pays of if you are on the light side of the force ๐Ÿ˜‰
    cheers Thomas
    (0) 
  3. Sergio Ferrari
    OK, now I’m sure that, via ABAP, you are also able to produce a movie like “Ratatouille”.

    Only now I had time to study FLOB; it’s fantastic.
    The bandwidth requirement is really low, I can see that thanks to FABridge only data (in form of js) is transferred.
    The browser (IE or FF) uses a lot of CPU to render some UI elements but it takes a while…

    You know that I always think to Elegant Search Helps…and I’m sure you are already working on a FLOB based Search Help engine

    Sergio

    (0) 
    1. Thomas Jung Post author
      >and I’m sure you are already working on a FLOB based Search Help engine

      Yes I am working on that right now.  I am taking the core of what I wrote for regular BSP some years ago and converting it to Flex and using AJAX (via AJS) for all the eventing. 

      (0) 
  4. Hi Thomas , I have attended your session in SDN community day and seen entire thing live .I was very pleased with BSP application .
    Same thing ,I am trying .I have downloaded zip from your google code link but still I am not getting help how I can Import those two .NSP files in my SAP server .I need your help .
    (0) 
    1. Thomas Jung Post author
      The download files are ABAP Transport files.  Most Basis admins will be familiar with the process to import these files.  You can also import these into the Trial Version of the ABAP system available for download here from SDN. Here is a blog that discusses how to setup the transport system on the NSP:

      ABAP Trial Version for Newbies: Part 9 ‘ Importing a transport into SP11/12 ‘

      There was a little bug in SAPlink that kept us from being able to release FLOB in that format. However that bug is being worked on and hopefully the next release will be available in that format as well.

      (0) 
  5. Former Member
    Hi,

    it looks great! May I suggest you to provide your project as a SAPLINK import (nugg or snlk) instead of a transport file? Transport file is quite annoying to perform…

    Thank you!
    Guillaume

    (0) 
    1. Thomas Jung Post author
      There was a bit of a problem with the SAPLink and the element handler classes leading to a short dump when trying to import.  We should eventually work the problem out and provide a saplink version, but at the moment all the necessary parties are a little tied up with other projects.  My plans to get the next version of FLOB out have been pushed to the side a little, but it is some pretty good stuff that is taking up my time. ๐Ÿ™‚
      (0) 
  6. Hi
    recently I got interested with flex control.
    and think FLOB is very welcome to bsp developer.

    but in your disclaimer ‘FLOB is no way meant to be contradictory to the overall SAP UI strategy of moving to Web Dynpro’ and ‘This is where a community project like FLOB can help fill this gap and provide a little more value to those existing applications.’

    is that means SAP doesn’t have plan or support to built up flex compatible BSP application?
    does webdynpro islands pack which is going to be release later this year has control of flex to normal BSP application?
    is it just work on webDynpro only?.

    the fact is here in korea most company developping bsp application from beginning to end to match up users needs.
    if SAP UI strategy is strongly forward dynpro
    think more flexible to built up views like allow including coding.

    maybe I’m thinking too much further ๐Ÿ™‚
    how do you think?

    (0) 
    1. Thomas Jung Post author
      >is that means SAP doesn’t have plan or support to built up flex compatible BSP application?

      SAP’s primary UI strategy is to use Web Dynpro moving forward.  The one exception to this is within CRM.  CRM continues to use BSP.  However the UI additions to BSP done for CRM are specific to CRM and are not delivered as part of NetWeaver (core ABAP development).

      So to answer your question – does NetWeaver plan to deliver general Flex functionality in BSP – no.  However there are already Flex components used within the latest version of CRM.  We also have prototype development within BSP based upon the same Islands funtionality that Web Dynpro has. So technically the functionality is quite possible.  CRM might well adopt it in the future.  However NetWeaver’s resources are focused on Web Dynpro right now. This is part of the reason why I released this project as open source so others are welcome to use it/enhance it – but SAP NetWeaver doesn’t have the resources to do so.

      >does webdynpro islands pack which is going to be release later this year has control of flex to normal BSP application
      Currently the Islands functionality is only targeted for Web Dynpro.  As I said, a prototype exists for BSP and could be delivered – but if so it would only be part of CRM.

      >if SAP UI strategy is strongly forward dynpro
      think more flexible to built up views like allow including coding.
      For Business Transactions you should strongly consider using Web Dynpro.  The framework provides value help, personalization, client abstration, a common look and feel, Floorplans, etc.  Do you really need a unique look for each Business Transaction?

      There are still applications (external facing for example) where you would need a unique look and feel – the kind that Flex or Silverlight might be useful for.  For these applications you can certainly still use BSP.  Just because SAP isn’t going to deliver a flex framework for BSP doesn’t mean that you can’t use Flex within BSP.  That is the core purpose of this project – to show that anyone within the customer name space can use Flex, Silverlight, AJAX, etc within BSP today.  In fact you can do any of these things on release all the way back to WebAS 6.20.  The beauty of BSP is that it is an open canvas and innovations can come from the community or from outside the SAP world alltogether.  I recently did a blog on jQuery in BSP.  This is stuff that is ready to use right now.

      (0) 
  7. Former Member
    Hi Thomas,

       Can you please tell me how do i upload the tags you have provided to WebAS. These are in “.nsp” format. A quick reply will be of great help to me.

    Thanks and Regards
    Ashis

    (0) 
    1. Thomas Jung Post author
      The .NSP files are transport files.  The same way you move development through your system landscape.  Give them to your basis admins – they will know what to do with them.  Ask them to import them into your system/how to import them. 
      (0) 
  8. Former Member
    Hi Thomas

    any success in persuading SAP management to drop WDY and push FLOB? ;-))

    Great work and approach ๐Ÿ™‚ Do you think, FLOB will one day also support charting and editable tables?

    Regards
    Gerald

    (0) 
    1. Thomas Jung Post author
      >Do you think, FLOB will one day also support charting and editable tables?
      It is certainly possible that anyone could add those tags.  The project is open source so the community doesn’t have to wait on me to do it. 

      I’m afraid that I have been distracted by other projects involving BSP and Flex of late and haven’t gotten back around to FLOB in a while. I always say that I will make it back but then get caught up in something.  I think you will like some of the cool new things in Web Dynpro and Flex that we have coming out soon.

      (0) 
    1. Thomas Jung Post author

      As an SAP employee I’m no longer allowed to host open source projects on Google Code. Given the age of this project and the fact that I would no longer recommend the usage of Flex/Flash, I don’t maintain this project any longer.

      (0) 
      1. Former Member

        I am developing one BSP application, in that for better interaction i am planing to use flash/flex. why are you not recommending this. is there any replacement for this. ? if not can u provide any sample application to implement this FLOB concept.

        Regards,

        Praveen

        (0) 
        1. Thomas Jung Post author

          No I wouldn’t recommend the usage of Flash/Flex at all any longer.  I would recommend you use HTML5 instead. 

          No I can provide a sample application for FLOB as I no longer maintain the source code.

          (0) 

Leave a Reply