2 Replies Latest reply on Dec 10, 2009 12:17 PM by PanicT

    Flex CSS

    RosieGp Level 1

      I'm trying to use CSS style sheet in flex and having some issues with it need some help...

      In my /src/styles/styles.css for now I just have the following:

      body

       

       

      {

       

      background-color:#ffffcc

      }

       

      In my /src/Test.mxml I have the following:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=http://www.adobe.com/2006/mxml width="1000" height="700">


          <mx:VBox width="800" height="800">
              <mx:HBox borderStyle="solid">
                  <mx:Button id="searchButton"
                      label="Search Screen"
                      click="myViewStack.selectedChild=search;"/>

       

                  <mx:Button id="cInfoButton"
                      label="Customer Info Screen"
                      click="myViewStack.selectedChild=custInfo;"/>

       

                  <mx:Button id="aInfoButton"
                      label="Account Info Screen"
                      click="myViewStack.selectedChild=accountInfo;"/>
              </mx:HBox>

       

              <mx:ViewStack id="myViewStack"
                  borderStyle="solid" width="100%">

       

                  <mx:Canvas id="search" label="Search">
                      <mx:Label text="Search Screen"/>
                  </mx:Canvas>

       

                  <mx:Canvas id="custInfo" label="Customer Info">
                      <mx:Label text="Customer Info"/>
                  </mx:Canvas>

       

                  <mx:Canvas id="accountInfo" label="Account Info">
                      <mx:Label text="Account Info"/>
                  </mx:Canvas>
              </mx:ViewStack>
          </mx:VBox>
      </mx:Application>

      How to Implement Styles.css in here...

      Like If it has to be

      1. Yellow background color for the application and components

      2. fontFamily="Arial", fontSize="16" height="30" for the buttons

      3. fontFamily="Arial", fontSize="16" for the text (in view stack)

      4. Top Bottom left right are set to 10 from each side...

      Any help is appreciated...

        • 1. Re: Flex CSS
          RosieGp Level 1

          Is it easy to get to and that I have to figure it out myself or too lengthy to get into...

          • 2. Re: Flex CSS
            PanicT

            Here is an example of importing from within flex the styles you want. You can also have it in a separate CSS file.

             

            <fx:Style>
                    @namespace s "library://ns.adobe.com/flex/spark";
                    @namespace mx "library://ns.adobe.com/flex/halo";
                    @namespace el "components.elements.*";
                    @namespace ui "components.*";
                   
                    mx|BarChart {
                        **Styles here**
                    }

            </fx:Style>

            1 person found this helpful