by Evan DeLodder | 
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.
Current Highest Rated Post
- Video: Show Chart Values without Hovering
(5.00 out of 5) - Pictures from the Xcelsius Community Event at GBN 2009 (5.00 out of 5)
Tags: Evan Delodder, Flex, Flex Components, FleXcelsius, Xcelsius, Xcelsius 2008, Xcelsius Gurus, Xcelsius SDK
Interested in hiring one of our Gurus? Need help training your staff? Not sure where to start building your dashboard? We can help. Contact us to find out more!
Categories
Tags
About Us
Subscribe
English
[...] This post was mentioned on Twitter by The Xcelsius Gurus, The Xcelsius Gurus. The Xcelsius Gurus said: New Blog Post: Custom Component Style Preservation http://goo.gl/fb/TwtwG [...]
Evan,
Excellent post, very useful. A++++ Will read again!
Matt
Thanks, Matt! Glad you found it useful.
-Evan
Hi Evan,
First of all thanks for putting out such a helpful blog.
I am constantly facing this issue and haven’t been able to get rid of it, so I was wondering if you can give me some pointers.
My component comes out as invisible both in design and run-time (I think because alpha is getting set to 0.0 by default formatting). And most of formatting which I do in Flex do not come over to Xcelsius.
These are the things I have tried so far but no success:
1. Tried setting formatting properties using ActionScript setStyle() method on creationComplete of the component. I also tried calling this same methods again on button click still no luck. Here is an example of what I have tried:
private function init():void
{
custbutton.setStyle(“borderColor”,”red”);
}
2. Then after reading your blog I tried your suggestions but that didn’t help. I add the external swc (haloclassic) to my project. Then I added following piece of code in the custom component:
.custButtonStyle
{
borderColor: red;
}
This also don’t seem to work. Am I missing something, can you please provide some guidance.
Thanks in advance,
CD
Hi CD,
My pleasure, glad you’re finding the information useful.
From the style names, it looks like you’re trying to style a button, is that correct? If so, let me know and I can share a generic button with you that maintains its styles at runtime. Also, if you have any other style code related to this component that you can share, please feel free to post it here.
Thanks,
Evan
Hi Evan,
I have created 3 components ( Modified Radio Button, Modified Toggle Button and Modified Tab Bar).
They all have a different stylesheet, and I added the swc as you recommended.
My problem is:
If i drag any single component on canvas it is fine. The preview is also fine. But if I add any other component along with that the new component takes some styling from the first one. (I am not able to attach the snapshot here).
I mean the images that were used for the first component are shown in the second and third componet.
I am stuck
….& need some help..
Thanks Faisal
Hi Faisal,
Sorry for the late response, I didn’t get notified of your comment somehow.
Are you still having this problem?
Thanks,
Evan
Hi Evan,
I have created a simple button function in flex. But when I tried to install this component in xcelsius the functionality of button remains intact but visibility is missing . means only button labels are present . I tried the method You gave above but no luck till now…. please help me its urgent…
Thanks
Sekhar