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.

       

      http://img.skitch.com/20090701-1etb5wp48nf83xqnngdup4b8et.jpg

       

      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" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/halo" 
                 width="300" height="200" 
                 creationComplete="init()" styleName="responseBox">
      

      Then its CSS:

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

      Gives me:

       

      http://img.skitch.com/20090701-ekeg38t4qyp7k2bnid6x9ctq7a.jpg

       

      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"/>

      http://img.skitch.com/20090701-x4e1p4r6pkkcncxsc635s466ke.jpg

      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:fill>
                     <s:LinearGradient rotation="90">
                          <s:GradientEntry color="red"
                                               color.selectedUpStates="haloOrange"
                                               color.overStates="yellow"
                                               color.downStates="haloGreen"
                                               alpha="0.85"
                                               alpha.selectedOver="1" />
                          <s:GradientEntry color="red"
                                               color.selectedUpStates="haloOrange"
                                               color.over="yellow"
                                               color.selectedOver="purple"
                                               color.downStates="haloGreen"
                                               alpha="0.85"
                                               alpha.selectedOver="1" />
                     </s:LinearGradient>
                </s:fill>
           </s:Rect>
      

      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?

       

      Thanks.