Lesson 16. Customizing the Look and Feel of a Flex Application

What You Will Learn

In this lesson, you will:

• Learn how Flex applications are styled

• Set styles via tag attributes

• Learn about inheritable style properties

• Set styles via the <mx:Style> tag

• Set styles via CSS files

• Create a custom skin for components

Approximate Time

This lesson takes approximately 1 hour and 30 minutes to complete.

Lesson Files

Media Files:

Lesson16/assets/flexGrocer.css

Starting Files:

Lesson16/start/EComm.mxml

Lesson16/start/views/ecomm/BillingInfo.mxml

Lesson16/start/views/ecomm/Cart.mxml

Lesson16/start/views/ecomm/CCInfo.mxml

Lesson16/start/views/ecomm/GroceryDetail.mxml

Lesson16/start/views/ecomm/Homepage.mxml

Lesson16/start/views/ecomm/OrderConf.mxml

Lesson16/start/views/ecomm/TextAndPic.mxml

Completed Files:

Lesson16/complete/EComm.mxml

Lesson16/complete/flexGrocer.css

Lesson16/complete/skins/OrangeOval.as

Lesson16/complete/views/ecomm/BillingInfo.mxml

Lesson16/complete/views/ecomm/Cart.mxml

Lesson16/complete/views/ecomm/CCInfo.mxml

Lesson16/complete/views/ecomm/GroceryDetail.mxml

Lesson16/complete/views/ecomm/Homepage.mxml

Lesson16/complete/views/ecomm/OrderConf.mxml

Lesson16/complete/views/ecomm/TextAndPic.mxml

Out of the box, Flex provides a lot of functionality, but a rather generic look to applications. In this lesson, you will explore how to apply a design to a Flex application, both through the use of styles and by creating entirely new looks with skins.

The FlexGrocer e-commerce application you have been building all along gets a face-lift with styles and skins.