            Coding With Fun

Home Docker Django Node.js Articles Python pip guide FAQ Policy

Flex Style and CSS

May 25, 2021 Flex

Table of contents

1. Method s1: Use an external style sheet file

2. Method s2: Use styles in UI container components

3. Class-level selector

4. Id-level selector

5. Type-level selector

6. Flex style and CSS example

Flex supports the use of CSS syntax and styles to apply styles to its UI controls in the same way as CSS to HTML components.

Method s1: Use an external style sheet file

You can refer to the style sheets provided in the class path of your application. For example, copy a style .css and HelloWorld.mxml files to the com/tutorialspoint/client folder.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

The css file can then be referenced by the following snippet

<fx:Style source="/com/tutorialspoint/client/Style.css"/>

Use the styleName property to specify the style to the UI component

<s:BorderContainer width="500" height="500" id="mainContainer" 
      styleName="container"> 
...
</s:BorderContainer>

Method s2: Use styles in UI container components

You can define styles in the UI container components using the . Label

Class-level selector

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

/* class level selector  */
.errorLabel {
   color: red;
}		
</fx:Style>

Use the styleName property to specify the style to the UI component.

<s:Label id="errorMsg" text="This is an error message" styleName="errorLabel"/>

Id-level selector

Use the style UI component of the id selector.

<fx:Style>
/* id level selector  */
#msgLabel {
   color: gray;
}
</fx:Style>

<s:Label id="msgLabel" text="This is a normal message" />

Type-level selector

Style a type of UI component in a style.

<fx:Style>
/* style applied on all buttons  */
s|Button { 
   fontSize: 15;
   color: #9933FF;
}
</fx:Style>

<s:Button label="Click Me!" id="btnClickMe" 
click="btnClickMe_clickHandler(event)"  />

Flex style and CSS example

Let's check the css style of the Flex application by creating a test application by following these steps:

Step	Describe
1	As described in the Flex - Create Applications section, create a project called HelloWorld under package com.tutorialspoint.client.
2	Modify style .css, HelloWorld.mxml, as described below. /b10> Keep the rest of the file unchanged.
3	Compile and run the application to ensure that the business logic works as required.

The following is the contents of the modified css file src / com.tutorialspoint / style .css content.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading
{
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

The following is the contents of the modified mxml file src / com.tutorialspoint / HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%" minWidth="500" minHeight="500"
   initialize="application_initializeHandler(event)">
   <!--Add reference to style sheet -->
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>

   <!--Using styles within mxml file -->
   <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";

      /* class level selector  */
      .errorLabel {
         color: red;
      }		

      /* id level selector  */
      #msgLabel {
         color: gray;
      }   

      /* style applied on all buttons  */
      s|Button { 
         fontSize: 15;
         color: #9933FF;
      }
   </fx:Style>
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent)
         :void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent)
         :void {
            lblHeader.text = "CSS Demonstrating Application";				
         }
      ]]>
   </fx:Script>
   <s:BorderContainer width="560" height="500" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label width="100%" id="lblHeader" fontSize="40"
            color="0x777777" styleName="heading"/>
         <s:Button label="Click Me!" id="btnClickMe" 
            click="btnClickMe_clickHandler(event)"  />	
         <s:Label id="errorMsg" 
            text="This is an error message" styleName="errorLabel" />			
         <s:Label id="msgLabel" text="This is a normal message" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

When all the changes are ready, let's compile and run the application in normal mode, as in the Flex - Create Application chapter.
If all goes well with your application, this will result in the following results: ]

Flex Style and CSS