During my time as a custom UI component developer for Xcelsius, I have encountered user interface styling and skinning loss at Xcelsius runtime and recently spoke to several developers who have experienced this issue as well. Fortunately, the workaround to preserve styles is fairly easy to apply.

The problem:

You may develop a button, canvas, list box, tree viewer or other UI component in Flex, apply inline styling directives, package it up for use in Xcelsius and view it in the Xcelsius designer without issue.  However, when you enter runtime mode in Xcelsius, your component may lose some or all of its inline styles, rendering it partially unusable or invisible. This is due to the parent Flex Xcelsius application inadvertently stripping away styles at runtime.

The solution:

For a generic solution to skinning and styling reapplication, you’ll need to reference in your project library path, the haloclassic.swc swc in the Flex SDK directory (a path similar to this C:\Program Files (x86)\Adobe\Flex Builder 3\sdks\2.0.1\frameworks\themes\haloclassic.swc). Once you have referenced the swc, create a CSS file for your component(s) that specifies all of the default skins and styles to their halo default or desired style as shown in the sample code below (full code here). This set of steps will need to be implemented as needed on a per-component basis if your components are experiencing style loss. Once you have defined your CSS file, the next step is to reference it in your component file as you would any other CSS asset.

.myButton {
backgroundAlpha: 1.0;
backgroundSize: “auto”;
bevel: true;
borderAlpha: 1.0;
borderCapColor: #919999;
borderColor: #B7BABC;
borderSides: “left top right bottom”;
borderSkin: ClassReference(“mx.skins.halo.HaloBorder”);
borderStyle: “inset”;
borderThickness: 1;

…..

<mx:Style source=”myButtonStyle.css” />
<mx:Button label=”My Button” styleName=”myButton”/>

There is an alternate to this approach, which would be to reapply styles with ActionScript code. However, this approach is more compact and has little to no impact on your actual component files. As a best practice for visual Xcelsius components, define your styles in CSS as opposed to inline to prevent the build up of redundant style specifications.

Evan DeLodder is a Senior Software Engineer focused on the development and application of cutting edge Rich Internet Application technologies in the Business Intelligence space. To learn more about him, please visit our new FleXcelsius page.