Jul
8

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.

Tags: , , , , , , ,

14 Responses to “Custom Component Style Preservation”

  1. [...] 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 [...]

  2. Matt Hawkins says:

    Evan,

    Excellent post, very useful. A++++ Will read again!

    Matt

  3. Thanks, Matt! Glad you found it useful.

    -Evan

  4. CD says:

    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

  5. Evan DeLodder says:

    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

  6. Faisal says:

    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

  7. Evan DeLodder says:

    Hi Faisal,

    Sorry for the late response, I didn’t get notified of your comment somehow.

    Are you still having this problem?

    Thanks,
    Evan

  8. Sekhar says:

    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

  9. Piyush says:

    Hi Evan,

    I am building a custom tree component which would read data from an xml file at runtime to populate the tree. The xml connection is in built the component.

    I came across this post and I am encountering the same problem you mention i.e. the component appears fine and the tree changes in Design mode, when when I run it the dashboard comes back empty. Even if I include any other component along with this custom component, the dashboard is empty in runtime.

    As specified by you, I applied the haloclassic theme and incorporated the stylesheet. But still it does not resolve the issue.

    Appreciate if you can provide further directions.

    Thanks,
    Piyush

  10. Piyush says:

    BTW I forgot to mention… I am using Dashboard Design 4.0 SP5… and have built the component using Flex SDK 4.0.0

    Thanks,
    Piyush

  11. Evan DeLodder says:

    Hi Piyush,

    I remember testing out trees a long time ago (in Flex 2 Xcelsius) and had the same sort of issues you are having and though I can’t recall the exact style solution, it was definitely related to styles and skins. I’d suggest setting every available style/skin on the tree to its default and if that still doesn’t work, create a test so that at runtime you can manually trigger (through the click of a button or something similar) the application of the styles to rule out the timing of style application as an issue (it could be getting called too early in the component lifecycle). You can always remove unnecessary styles down the line in your debugging if you find they are not needed to render properly. Let me know what happens and good luck.

    Thanks,
    Evan

  12. Piyush says:

    Thanks Evan! I will try this and let you know.

    Thanks,
    Piyush

  13. Piyush says:

    Hi Evan,

    I tried setting styles to its defaults but it didn’t work. I saw the xtree from the xcomponents and see that it has a transparent background. Not sure if that is what is missing. But I tried setting all the different alpha settings available. It didn’t work. Can you guide how can I achieve that,

    Thanks,
    Piyush

  14. Evan DeLodder says:

    Sorry to hear that, this is one of those areas where developing and debugging can become a serious time drain in Xcelsius. If you’d like, feel free to share the list of styles you’re applying and I could take a quick look and see if anything stands out.

    Best,
    Evan

Leave a Reply