Posts Tagged ‘FleXcelsius’


Custom Component Style Preservation

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.


The Future of Flash in the BI Space

With the recent back and forth battle between HTML5 and Flash and their place in the future gaining even more extensive tech-media coverage, we’ve been keeping a close ear to the arguments and have attentively followed both sides of the story since our core products and supporting technology rely heavily on Flash and Flex.

As the marketing and PR battle rages on between Apple and Adobe, blanket statements are being tossed around regarding the viability of both HTML5 and Flash technologies as if they’re competitors. So far, this debate has only served as a disservice the community in general as the misinformation train continues to board people in high places who don’t completely understand the technologies and begin to make decisions for their organizations that are driven by the general influence of external, biased companies promoting their own product interests, as opposed to properly assessing project technology needs based on other factors that have more, real world substance.

Many people have voiced their opinions on this topic and it’s certainly not breaking news though we thought it beneficial to speak directly on the future viability of Flash and Flex for enterprise Rich Internet Applications, specifically in the Business Intelligence space.