0 Replies Latest reply on Dec 3, 2009 4:22 AM by PeteSmithTyco

    Flex 4 Beta 2 and Halo Panels

    PeteSmithTyco

      Hi all.

       

      I'm banging my head against a wall here, and wondered if someone else could help me out!

       

      I'm working on a project which utilises a 3rd party open source control based on Halo Panels. It would take quite a bit of time to re-write this control to be Spark based.

       

      As part of the project spec, the application must be dynamically skinnable to allow easy customisation. This means the look and feel has been done mostly using embedded images within a CSS file, setting background images and other styles that support images. These can be loaded at runtime, and everyone was happy.

       

      Attached is a screenshot called Flex3Screenshot. This shows the look that was desired in the app : "Glossy" panel headers and a light border around the panel.

       

      Then, it was decided that we should be using Flex 4 Beta 2, not the previous 3.4 SDK. (The version I'm using is the standard vanilla 4.0.0.10485)

       

      Mostly, the transition has been OK. I've changed many controls from Halo to Spark as appropriate, but this wasn't possible with the Goozo controls, so we've had to stick with Halo panels as the containers.

       

      I'm now trying to bring back the old "dark" look and feel, and this is where I'm having trouble!

       

      I've attached a massively cut-down FlexBuilder project with a simple style sheet, a single glossy title bar image, and an MXML app with a panel in it.

       

      No matter what I do, I can't get the CSS to work in the same way, because the panel always has a 2 pixel wide border underneath its header. This border is made up of the panels base header colour which has the bitmap put over the top, leaving a small gap.

       

      I can "remove" this, by setting the baseColor property to black, but the baseColor property seems to override the borderColor property, so I don't have borders any more, which "Isn't What We Want"(tm).

       

      Setting the headerColors doesn't seem to work in Flex 4 (I've checked, and it works fine in Flex 3, and if it worked, I could spoof the glossy look by just setting a white to black gradient in the header colours), or set the header colour to black and overlay the image.

       

      I can use the nasty kludge of -theme=${flexlib}/themes/Halo/halo.swc in the command line properties, but that's like admitting defeat! (and I can't guarantee that it will always work!)

       

      Does anyone have any ideas? As far as I'm aware, I should be able to create an MXML skin component (as per http://blog.flexexamples.com/2009/05/02/changing-the-title-bar-background-fill-on-a-spark- panel-container-in-flex-gumbo/), but as far as I know, I won't then be able to dynamically skin it with a CSS file.

       

      Many thanks.

       

      Pete