Shulou(Shulou.com)06/03 Report--

This article mainly introduces "the application of CSS cascading style sheets in Flex". In the daily operation, I believe that many people have doubts about the application of CSS cascading style sheets in Flex. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about the application of CSS cascading style sheets in Flex. Next, please follow the editor to study!

Application method of CSS cascading style sheet in Flex

In the first two articles, jackson has introduced to you the simple process of building the Flex3.0 development environment and the layout of the Flex login interface. I believe you should start to have ideas from the moment the sketch comes out. ^-^ because this Flex landing box really does not have much operation experience and aesthetic presentation, we need to further design and optimize it. Jackson will share the source code this time, but you still need to learn how to apply CSS cascading stylesheets in Flex before sharing.

Figure 1Flex login interface sketch code

Example 1Flex login frame sketch example FLASH demonstration address

◆ Jackson's first thought is to make the landing box adaptively centered according to the scalability of the browsing window, because the visual focus on the landing page of the system should be in the center of the page. We can add several layout attributes, layout= "vertical" and verticalAlign= "middle", directly to the Application tag pair. The former property acts as a vertical layout, which centers the Panel of the landing box by default, while the latter acts as a horizontal layout, which centers the Panel of the landing box horizontally. Now it seems that the Panel of the login box can be adaptively centered. Press (Alt+Shift+x,f) to test the code. Now no matter how you resize the IE window, the Panel of the login box is always centered relative to the IE window. In addition, even if you add coordinates (x or y) to the Panel now, it won't work, and the Panel of the login box will still be centered. The code is shown in figure 2 (the Flex login interface automatically centers the code).

Figure 2Flex login interface automatically centers the code

Now let's move on to the code content, and the layout attributes in these tags are basically the same as our layout properties in traditional web pages. At this point, we will think that web pages can use CSS cascading style sheets, so can Flex's MXML pages use CSS cascading style sheets? The answer is yes, CSS cascading stylesheets can also be used in Flex pages. Now Jackson has created a new folder "css" in the src directory of the Flex project. You can right-click → New → CssFile on the src folder, as shown in figure 3 (CSS directory creation illustration), and then OK with a CSS file name (named Jackson_css here).

Figure 3CSS directory creation diagram

All right, let's first add the relevant attributes of adaptive centering in Flex's application to CSS. If you want to style the components in the main scene (here is mainly the Panel of the Flex landing box), you can add the reserved keyword Application to the CSS stylesheet, as shown in figure 4 (CSS code content and code link). When the CSS file is complete, link the CSS cascading style sheet to the application main scene code on the home scene page, and you can link the CSS cascading style sheet in with just "". Now remove the layout attributes that were originally in the Application tag pair. Press (Alt+Shift+x,f) to test the code, the CSS style has already worked in the Flex compilation file, hehe.

Figure 4CSS code content and code link method

The main scene of ◆ looks monotonous and ugly. Let's change the background first. Jackson used to use loop backgrounds in some web designs, but as long as you choose a good loop background, it will still have a good effect. So Jackson wants to try a circular background, which here is a twill background image. However, after many attempts by Jackson, it is found that in Flex's CSS cascading stylesheet, it is not possible to use simple property settings to tile the twill background loop throughout the Application scene. Later found a solution in a foreign friend's blog, this foreign friend shared his solution source code, you can go to his blog (www.degrafa.org) to have a look. For the foreign friend's as code will not do in-depth research, interested friends can download their own research. The experience here is only shared on how to use the code. Just put the as file in the source code into the root directory, change the background image path in the file, and add two attribute values to the CSS cascading stylesheet and OK. Image path changes and CSS cascading stylesheet properties are added in As documents as shown in figure 5 (picture path changes and CSS properties are added).

Figure 5As document picture path change and CSS property added

At this point, the study on "the application of CSS cascading stylesheets in Flex" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.