Flex Skin Preparation (2): Custom Skin in flex

In the previous article, we introduced the simple and basic usage of skin in flex, that is, to apply skin styles in external programs before loading these Skin Resources in flex, such as PNG images, or SWF files. These methods are straightforward and convenient.

However, flexibility is still not good. Another way to explain this article is to write the skin from the program as, which is common in Flash website production. You can control skin styles and expressions more flexibly and freely without relying on external images or SwF resources. Lucky design team-
Flash website production reminds me that this method still has some disadvantages, that is, it is not too flexible to expand or change, if it is better than the skin of a piece of resources, you can easily change the path resources of different images to modify different skin patterns. If you use the skin written by as graphics, You need to modify the code. Of course, you can also write in the as code to dynamically load other image resources or make some more advanced effects.

To customize a skin using code, you need to write a skin subclass to inherit the class programmaticskin, which is the base class for all custom skin compiling, this class also derives two other classes: rectangularborder and border classes, both of which are similar. If you are writing small skins such as icons, for example, a skin such as checkbox or radiobutton does not need to be too complex in drawing logic, and the size is fixed. It is like a small icon, but there are only a few States. For such a small skin, inherit the programmaticskin, and write some composite controls, the background size can be adjusted and the like skin (in fact, most skin), and use the border or rectangularborder class. But they all share the same point, that is, after inheriting those classes, they must be overwritten.
Updatedisplaylist: This method is automatically called by the program. This method is called when the control needs to be used and the skin of the control needs to behave, so you must overwrite it, and write your drawing logic code in that method.

It should also be noted that this skin class will share with the style settings of the control that you apply this skin, that is, you can use getstyle () in the compiling of this skin class code () obtain the style attribute set in the target control, for example, <mx: panel backgroundcolor = "0 xffffff" borderskin = "myskin"> you can obtain the color value in the myskin code to draw an image of the color or perform other operations, writing the color value directly into the code is not standard, as shown in the following code:

This code is written to the skin of a panel:

1 package com. jiangzone
2 {
3
Import MX. Skins. Border
4
Import MX. Core. edgemetrics;
5
Import MX. Core. container;
6
Import MX. Graphics. rectangulardropshadow;
7
8
Public class mypanelborderskin
Extends border {
9
10
Public Function mypanelborderskin (): void {
11}
12
13
/**
14 * This method must be overwritten. If you want to customize your own skin,
15 * This method will be automatically called when the control updates its appearance.
16 * two parameters will be input, the first is width, and the second is height, that is, the width and height of the control.
17 *
*/
18 override
Protected function updatedisplaylist (W: Number, H: Number): void {
19
Super. updatedisplaylist (W, H );
20

21 var BA: uint
= 1;
// Backgroundalpha background transparency
22 var BG: uint
= 0 xffffff;
// Backgroundcolor background color
23 graphics. Clear ();
// The graphics attribute is provided by the parent class.
24 var P: Container
= Parent as container;
// Obtain the parent container to which the skin is applied. Here it is panel
25
26
// Note that you must determine whether the parent container has been set.
27
If (p ){
28
// Obtain the region boundary information object defined by the container

29 var VM: edgemetrics
= P. viewmetrics;

30
// Set the roundness of the four corners
31 var radiuscontent: Object
= {TL: VM. Top, TR: 0, BL: 0, BR: VM. Top };

32
// Title Bar roundness

33 var radiustitle: Object
= {TL: VM. Top, TR: 0, BL: 0, BR: 0 };

34
// Draw a rounded rectangle with the entire background
35
This. drawroundrect (0, 0, W, H, radiuscontent, BG, BA );
36
// Draw a rounded rectangle, title bar

37
This. drawroundrect (0, 0, W, VM. Top, radiustitle, 0xff0000,. 7 );
38
// Draw a rounded rectangle with the highlighted crystal bar in the title bar
39
This. drawroundrect (0, 0, W, VM. Top
/2, radiustitle, 0 xffffff,. 3 );
40

41
// The following is a shadow.
42 var dropshadow: rectangulardropshadow
= New rectangulardropshadow ();
43 dropshadow. Distance
= 8;
44 dropshadow. Angle
= 60;
45 dropshadow. Color
= 0x000000;
46 dropshadow. Alpha
= 0.4;
47
48 dropshadow. tlradius
= Radiuscontent. TL;
49 dropshadow. trradius
= Radiuscontent. tr;
50 dropshadow. blradius
= Radiuscontent. Bl;
51 dropshadow. brradius
= Radiuscontent.br;
52
53 dropshadow. drawshadow (graphics,
0, 0, W, H );
54}
55}
56}
57}

The above code is the skin code. What you need to do later is to apply the skin to the Panel container:

1 <mx: Application
2 xmlns: MX = "http://www.adobe.com/2006/mxml" creationcomplete = "Init ()"
3 layout = "absolute">
4
5
<Mx: style>
6. mypanelskin {
7 borderskin: classreference ("com. jiangzone. mypanelborderskin ");
8}
9
</MX: style>
10
11
<Mx: Panel borderskin = "com. jiangzone. mypanelborderskin"
12 width = "200" Height = "150" x = "24"
Y = "23"/>
13
14 </MX: Application>

The code is simple. The following describes the Code:
Viewmetrics is a unique attribute of the iner control. It is a read-only attribute that must be overwritten when writing the iner subclass. It is used to define the container body area and boundary value, for example, the canvas is surrounded by 0, so there is no title bar or edge bar, and the Panel has a surrounding boundary, while the top boundary is large and used to display the title, so if you want to make the container skin, pay attention to this value.
Also, why do I have to judge whether the control reference (parent) of the skin application is empty after obtaining it? When the program loads the control, it loads the skin first, so the parent value is not set and is empty. If you do not make a judgment, A null reference error (parent. viewmetrics), after loading the skin, load the control and set the properties of the control and set the skin, then the updatedisplaylist method will be called again, then the parent has a value, is the reference of the control. When the style or attributes are changed, the updatedisplaylist method is automatically called.

Let's take a look at the final running effect.

Add:
In the previous article, I said that I would load the skin in the SWF file. I thought that I could make the skin an animated MC, not just a single screen, you can make some animations as the skin, and then reference the SWF symbol in flex, so that the skin will have an animation effect, not just a simple floor plan!

As mentioned in the flex skin tutorial, there are still a lot of skin to explore. As long as you have a thirst for knowledge, read more English documents and look at other people's sample code. Now, Flex is also open-source, you can also look at the flex source code to get a lot of knowledge!

// Others

Http://www.blogjava.net/cph8066/archive/2009/08/09/218419.html

Http://blog.csdn.net/dream8062/archive/2009/08/06/4417583.aspx

Http://waitingsnow.javaeye.com/blog/443156

Http://blog.flexexamples.com/2007/07/25/embedding-assets-from-swf-files/

Draw a skin in flash, convert it to symbol to a name such as bulletcheck, and copy the generated a.swf file to the same path of flex and CSS file after being exported using command-> convert symbol to component, file-> publish, create a CSS file, such:
Button
{
Upskin: embed('a.swf ', symbol = 'bulletcheck ');
}
Right-click CSS file, compile CSS to SwF, and a SWF file with the same name as CSS will be generated. The former SWF will also be edited in it.
<Mx: style source = "abc.css"/>

Lucky design team-
Flash website production reminds everyone: every time you change CSS, you need to re-compile and generate SWF!

[Chengdu flash production and website construction-Lucky design network copyright and Disclaimer: This site reposts other media articles to spread more information. Such articles do not represent the point of view on this site, this site shall not be jointly and severally liable for such content infringement. If you need to contact this site due to copyright issues, please contact 280812133@qq.com. ] Zhuan Zi:

Previous Article: Skin in flex4 (3): Using component data

Next article: flex4.5 Component Library usage: Custom iconitemrenderer