为Flex添加皮肤和样式的例子

My Presentation On Skinning & Styling

Hello again! Here's my content and examples from Wednesday night's Flex User Group presentation, for those of you who couldn't be there. <joke>You had better be there next time</joke> I spoke about creating your own css styles, derived styles, image based skinning, scale9 grids, drawing API and programmatic skinning...

Here's my presentation: (although the fun stuff is really in the code examples)

• Skinning & Styling Flex Applications

1. Here is my example for creating and using custom styles. It is very similar to an older blog post, but takes the concept a bit further. It shows you how to use css styles to define styles within subcomponents of your Flex components. It also shows how you can use custom css style definitions to set properties on your application, such as item height, button labels, etc...
   
   
   
   
   • View Application
   • View Source
   • Download Source
   
   
   
2. Here is my example for understanding scale9. This really just shows how to use scale9 when embedding assets as skins, and the effects that scale9 has on the skins of you applications.
   
   
   
   
   • View Application
   • View Source
   • Download Source
   
   
   
3. Here is my example for skinning with images. This shows you a few cool things that you can do using images to define buttons and backgrounds within your application. Of all my demos, I think this one is my favorite. Be sure to open a window using "The Trice Theme". :)
   
   
   
   
   • View Video (flv) Demo
   • View Application
   • View Source
   • Download Source
   
   
   
4. Here is my example for the drawing API. It consists of 2 tabs: The first shows simply how to draw lines and curves. The second is a very basic paint-drawing application.
   
   
   
   
   • View Application
   • View Source
   • Download Source
     
     
   
   
5. My fifth example shows you how to draw a VERY basic programmatic skin. All this does is draw a colored rectangle for a button skin. It is meant to be ugly, but does a good job of showing you how to create a programmatic skin.
   
   
   
   
   • View Application
   • View Source
   • Download Source
   
   
   
6. My last example shows you how to draw an advanced programmatic skin. These skins are also based off of an earlier blog post and are modifications of the Flex halo skin theme. Examining the halo theme is a great place to learn the in's and out's of programmatic skinning. This example also shows you the effects of changing styles at runtime (which is an advantage to programmatic skinning).
   
   
   
   
   • View Application
   • View Source