2 Replies Latest reply on Jul 1, 2009 10:30 AM by Handycam

    Applications from Flex 3 lose all their styling

    Handycam Level 1

      I have an application that works great in Flex 3.  Here it is in action.


      Ok, I open it in FB4 and it loses all its appearance, since the appearance was defined mostly in a CSS file.




      So I have been trying to replicate the appearance using the newer "skinning" methodology, and I have to say it is beyond torture. It is largely unclear how to skin what, and a great deal of items I am trying to apply appear to be ignored.  People have helped me with some concepts in the past few weeks, and I am trying to apply these to this project.  However, many things don't seem to work, or I am not doing them correctly.


      This application is a main app with a Panel component for the "welcome" screen, called with PopUpManager.  The questions are another panel that are instantiated with Actionscript as children of a ViewStack.  Lastly, there is a third panel that is called by PopUpManager by the Question panel when you answer a question.


      I need all three panels, and the base application, to be skinned differently.  Further, I need to skin the buttons in each panel differently.


      I have had some progress with doing global skinning of components in the CSS file, as in mx|Panel and mx|Button.  But assigning class names to the panel components (in their main tag) doesn't seem to do anything.  To take just one, the "response panel" that appears when you answer a question:

      <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 width="300" height="200" 
                 creationComplete="init()" styleName="responseBox">

      Then its CSS:

      .responseBox {
           modalTransparencyColor: #fff;
           titleStyleName: "myAlertTitle";
      .myAlertTitle {
           color: #ffffff;
           fontSize: 14;
           fontWeight: bold;
           textAlign: center;

      Gives me:




      So the title is neither white nor centered.


      Now, if I add a skin to my button, as in

      <s:Button id="continueBtn" label="continue" click="closeAlert(event)" skinClass="skins.ButtonSkin"/>


      Where did the button label go?  I am using the default Spark skin class for the Halo Button component with the layer 2 changed to:

           <!-- layer 2: fill -->
           <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
                     <s:LinearGradient rotation="90">
                          <s:GradientEntry color="red"
                                               alpha.selectedOver="1" />
                          <s:GradientEntry color="red"
                                               alpha.selectedOver="1" />

      Any help on sorting this out would be appreciated.


      Also, where would i put a background image for the Application itself... or is this done differently now?