Java and flex Study Notes (12) -- use CSS to control page styles

In the past, I was not very clear about the flex web page layout, and there was basically no modification. However, after finishing a page like "115 online storage", I have a basic understanding of page control. Here is a summary.

I first came into contact with flex4. It is said that the CSS layout of flex3 is very spine and I don't know if it is like this. However, the web page layout of flex4 is awesome. Coupled with various events, you can achieve the effect that requires writing a lot of JavaScript/ajax code.

Now, let's get down to the truth.

In flex4, you can use CSS to control styles. You can either write styles directly in the mxml file or create a new CSS file to write styles in this file. More importantly, this is easier to manage.

If you write styles directly in mxml, you can directly write CSS elements, such as left, right, and top, in the control you want to control. If you want to control a lot of elements, we recommend that you write them in a CSS file.

Now let's talk about the use of CSS file control styles.

First, create a CSS file. This is very simple.

After creating a new CSS file, you need to reference the file to the controlled mxml file, as shown below:

 

<FX: style source = "CSS file path"/>

 

You can set the ID of the object to be controlled in the CSS file. To control the canvas, you need to set the ID:

 

<Mx: canvas width = "98" width = "110" id = "disk_canvas"/>

 

In the CSS file, obtain it through "#", for example:

# Disk_canvas {

Focuscolor: # d6e0ed;

Top: 89;

}

We can also set the stylename attribute in the HTML setting class, for example:

<Mx: canvas width = "98" Height = "110" stylename = "disk_canvas"/>

In the CSS file,."To set:

. Disk_canvas {

Focuscolor: # d6e0ed;

Top: 89;

}

Then, when the same style is used in the mxml file, you only need to write this stylename.

In general, this is the case, but the above is not very suitable for designing styles in the "dynamic" state. We can use "setstyle" to set styles:

 

Id. setstyle ("CSS attribute", "CSS value ");

For example, when you move the mouse over the "Network Disk" on the left, the image switching in the middle is as follows:

When the mouse goes through the "message", the picture in the middle is switched as follows:

Don't take a closer look, it's still quite like it! This is the switch through the event, (* ^__ ^ *)...

The above method is suitable for dynamically setting styles in events.

Setting styles is that simple. On the HTML page, we control the style through "Div + CSS", but in flex, we can control the style through "canvas + CSS. Using too many hbox and vbox will affect the performance, but canvas is a small container that can meet most of the requirements.

Okay, that's all.

Original article, reproduced please indicate the source: http://www.dianfusoft.com/