Skip to end of metadata
Go to start of metadata
BI
Upgrade Series

This page is part of the...

Introduction

This article explains how to upgrade Dashboards (Xcelsius) add-ons from Adobe Flex 2.0 to Adobe Flex 4.0 for use with Dashboards 4.0 SP04 or later.

Table of contents

Notes

  • Xcelsius 2008 and Dashboards 4.0 (SP01 and SP02) both use Adobe Flex SDK 2.0.
  • Dashboards 4.0 SP04 (and FP3) or later use Adobe Flex SDK 4.0.
  • Add-ons must be upgraded to Flex 4 before they can be used in Dashboards 4.0 SP04 (or later).

Dashboards 4.0 SP04 add-on warnings

If you see any of these warnings, then you should follow the steps outlined in this article in order to upgrade your add-ons.

While installing an older add-on using the Dashboards 4.0 SP04 Add-On Manager you will get the following warning:

While running Dashboards 4.0 SP04 with an older add-on installed you will get the following warning:

Upgrading an add-on or property sheet to Flex SDK 4.0

Prerequisites:

  • Microsoft Windows 7
  • Microsoft Office 2007 or Microsoft Office 2010 32-bit
  • Flash Player 10.3 or higher
  • SAP BusinessObjects Dashboards 4.0 SP04
  • Adobe Flash Builder 4.0 or 4.0.1
    (Flash Builder 4.5 or later does not work with Adobe Flex SDK 4.0 in MXML design mode, so we recommend using Flash Builder 4.0.x with Adobe Flex SDK 4.0.0 build 14159)

 Overview of the steps involved (detailed instructions can be found later in this article):

  1. Make a copy of your Adobe Flex projects  
  2. Import your Adobe Flex projects
  3. Use Flex SDK 4.0 compiler (SDK 4.0.0 build 14159)
  4. Add the libs folder
  5. Apply the Flex 2 halo theme
  6. Define Flex 4 class level styles
  7. Add namespaces to CSS styles in Flex 4
  8. Package and test with Dashboards 4.0 SP04

We are going to be using the custom horizontal slider Dashboards Component SDK sample as an example. This is what is looks like in Flex SDK 2:

   

Step 1: Make a copy of your Adobe Flex projects

Ensure that you copy your Flex projects to a new folder because Flash Builder will do an in-place upgrade of your projects.

e.g., Copy the Flex projects into your Adobe Flash Builder 4 user folder:

Step 2: Import your Adobe Flex projects

In Adobe Flash Builder 4.0.x:

  1. Click on File > Import > Flash Builder Project...
  2. Select Project folder
  3. Select the folder with your add-on or property sheet and click OK
  4. Click Finish
    There will be an error because Adobe Flex SDK 2.0.1 Hotfix 3 cannot be found. This error is to be expected.

Step 3: Use Flex SDK 4.0 compiler (SDK 4.0.0 build 14159)

In Adobe Flash Builder 4.0.x:

  1. Highlight your project in the Package Explorer
  2. Right-click the project and select Properties
  3. Select Flex Compiler
  4. Change the Flex SDK version dropdown to Flex 4.0
  5. Click OK
  6. Click OK to any warnings
    The project now compiles with Flex SDK 4.0.

Step 4: Add the libs folder

If you get an Unable to open '...\libs' error, you need to create the libs folder in your project:

  1. Highlight your project in the Package Explorer
  2. Right-click the project and select New > Folder
  3. Name the folder libs and click Finish
  4. Build your Flex project again and the libs folder error will go away

Step 5: Apply the Flex 2 halo theme

By default the Flex 4 theme is very different from the Flex 2 theme. The custom horizontal slider compiled with Flex 4 will look like this:

 
We will now change the theme to Halo in order to match Flex 2 and to better match Dashboards and Xcelsius 2008.
 
In Flash Builder 4.0.x:

  1. Highlight your project in the Package Explorer
  2. Right-click the project and select Properties
  3. Add the following compiler arguments:

    -theme=${flexlib}/themes/Halo/halo.swc -isolate-styles=false
    

    Note: The isolate styles setting is because Dashboards 4.0 SP04 does not load modules.

  4. Set any dependent SWCs to be merged into your project, you can do this in the build settings or with the compiler options: 

    -static-link-runtime-shared-libraries=true
    
  5. Click OK and then run your project. The Halo theme has now been applied. The add-on now looks like it did in Flex 2 except that the custom class level styles we used in Flex 2 are not being applied. We will fix that next.

Step 6: Define Flex 4 class level styles

One of the big changes between Flex 2 and Flex 4 is the way you define class level styles.

CustomPropSheetHorizontalSlider (in Flex 2) must be changed to com.businessobjects.xcelsius.sdk.samples.CustomPropSheetHorizontalSlider (in Flex 4).

Here is the updated code for the custom horizontal slider; the changes for Flex 4 are marked with START and END comments.

// A static variable private static
var classConstructed:Boolean = classConstruct();
 
// A static method
private static function classConstruct():Boolean
{
    //----------------------------------------------------------------
    // START: Flex 4 way to get class level styles.
    //----------------------------------------------------------------
    var styleDeclaration:CSSStyleDeclaration =
        StyleManager.getStyleManager(null).getStyleDeclaration
            ("com.businessobjects.xcelsius.sdk.samples.CustomPropSheetHorizontalSlider");
    //----------------------------------------------------------------
    // END: Flex 4 way to get class level styles.
    //----------------------------------------------------------------

    // If there is no CSS definition for this class create one and set default values.
    if (!styleDeclaration)
    {
        styleDeclaration = new CSSStyleDeclaration();
        styleDeclaration.setStyle("thumbColors", [0x000FF, 0xFFFFFF, 0xFFFFFF, 0xFFFFFF]);
        // ...
        styleDeclaration.setStyle("trackColors", [ 0xFFFFFF, 0x0000FF ]);
 
        //----------------------------------------------------------------
        // START: Flex 4 way to set default values for class level styles.
        //----------------------------------------------------------------
        StyleManager.getStyleManager(null).setStyleDeclaration
            ("com.businessobjects.xcelsius.sdk.samples.CustomPropSheetHorizontalSlider",
                styleDeclaration, true);
        //----------------------------------------------------------------
        // END: Flex 4 way to set default values for class level styles.
        //----------------------------------------------------------------
    }
 
    return true;
}

Step 7: Add namespaces to CSS styles in Flex 4

Update your CSS styles so they also use fully qualified namespaces:

For example, in the custom horizontal slider PSStyle.css file:

  1. Define s (Flex 4 Spark fully qualified namespace) and mx (Flex 2 fully qualified namespace, also use mx as the default namespace for Flex 2 backwards compatability):

    /* CSS file */
     
    /* Add spark (Flex 4) and MX (Flex 2) namespaces */
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
     
    /* Add mx as the default namespace to adapt flex4 style framework */
    @namespace "library://ns.adobe.com/flex/mx";
    
  2. Now you can use the s and mx specific prefixes on your styles in your CSS:

    s|Label
    mx|Label
    
  3. Once you have done this and recompiled your project it should now look as it did in Flex 2:

Step 8: Package and test with Dashboards 4.0 SP04

After you have upgraded your add-on and property sheet to Flex 4, export a release build for your add-on and property sheet in Flash Builder 4 go to:

  1. File > Export > Release Build...
  2. Pick the project to export
  3. For Application select All Applications
  4. Take note of the release folder
  5. Click Finish

Once you have created a release build of your add-on and property sheet:

  1. Use the Dashboards 4.0 SP04 Add-On Packager to update the XLX add-on package for use with Dashboards 4.0 SP04
  2. Install the add-on (XLX) into Dashboards 4.0 SP04 using File > Manage Add-Ons...
  3. Test your add-on with Dashboards 4.0 SP04

Related Topics

Using Direct Binding