ActionScript 3.0 step by step series (9): paint makeup on the application interface using styles and skin.

Styles and themes are frequently used in traditional WEB development (such as ASP. NET). I will not talk much about the benefits. In flexdevelopment, there are examples and themes, and the extension name of the sample file is also .css. Its main function is to beautify the program interface.

This article is the last article in the "Corner 3.0 Step By Step series". Style and theme skin are actually nothing to talk about. I believe that as long as you are a friend who has been engaged in Web development, no stranger to it. Therefore, this article does not focus on the detailed development of styles, we will introduce the development and application methods of styles in Flex development, as well as the style generators provided by the powerful development environment such as Adobe Flex Builder to generate styles and other related knowledge points. Finally, we will introduce an external skin into the project.

In order to design the source image of the interface, we can find that the font is too small and the color is black. OK. Let's take a step-by-step look at the style application under Flex through this simple example.

 

1. Use the <mx: Style> label to define a local Style

1 <mx: Style>
2 Panel
3 {
4 font-size: 12;
5 color: red;
6}
7 </mx: Style>

 

As shown above, a Style Panel is defined using the <mx: Style> label and is directly embedded in mxml. For all Panel labels in current mxml, set the font size to 12, the color is red.

 

Ii. Use the <mx: Style> label to introduce an external Style sheet

<Mx: Style> labels), as follows:

1/* CSS file: default.css */
2 Panel
3 {
4 font-size: 12;
5 color: red;
6}

 

Now we can use the <mx: Style> label to introduce this external Style table file to the current application (mxml. As follows:

1 <mx: Style source = "CSS/default.css"/>

The User Logon interface after the style is set as follows. The font of the page is 12 and the color is red:

 

Iii. Use the Flex style designer

Adobe Flex Builder provides a very good style designer that can be used directly to design very beautiful results.

 

Below I will beautify the user name and password text input components, of course, not the writing style sheet, I am very lazy. I want to use the style designer provided by Flex to generate the desired effect. The code shown in the text input group after my design is as follows:

1 <mx: textinput x = "90" Y = "21" id = "username" color = "# ffffff" fontfamily = "Arial"
2 borderstyle = "Inset" borderthickness = "1" cornerradius = "0"
3 backgroundcolor = "#000000" bordercolor = "# ffffff"
4 textalign = "center" fontsize = "14"/>
5 <mx: textinput x = "89" Y = "59" displayaspassword = "true" id = "userpasswrod"
6 color = "# ffffff" fontfamily = "Arial" backgroundcolor = "#000000"
7 textAlign = "center" fontSize = "14"/>

 

The above uses the style designer to design the style of the two TextInput components as the background black, the font is Arial, the font color is white, the text is displayed in the center, the font size is 14, and the running effect is shown as follows:

 

4. Set styles programmatically

It is very easy to set the style in programming mode. We can do it directly through the setStyle () method of the component, as shown in the following code:

1 btnLogin. setStyle ("font-size", "20 ");

 

In addition, the Flex SDK provides corresponding classes for us to dynamically process styles in programming mode. They are StyleManager and CSSStyleDeclaration, which are located under the mx. styles package. We can also set the font size as follows:

1 var cs: CSSStyleDeclaration = new CSSStyleDeclaration ("mystyle ");
2 cs. setStyle ("fontSize", "20 ");
3 StyleManager. setStyleDeclaration ("btnButton", cs, true );

 

This is equivalent to defining a style named mystyle, which is equivalent to the following style definition:

1. mystyle
2 {
3 font-size: 20px
4}
5

 

5. introduce external Skin (Skin) beautification applications

Here I downloaded a set of skin called "elegant sky and blue" on the Internet. Let's see how to introduce external skin into the project to beautify the application. The skin program consists of three parts: skin file (.swc?, ((.css) and image. Next, Copy the files related to the skin file to your application.

How should we place these files? The skin file ending with ". swc" is stored in the flexproject libs directory, and the style sheet of" .css "is placed in the src directory. If there are image images, they should also be placed in the src directory (including sub-Directories ). The interface effect after the external skin is applied:

 

 

 

 

 

From: http://www.cnblogs.com/beniao/archive/2009/01/10/1364869.html