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.
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.
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.
25 Comments