Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.

Requirements

Prerequisite knowledge

You should be familiar with developing Creative Suite extensions and using Creative Suite Extension Builder. It is also beneficial to have some understanding of the current skinning capabilities in Flex.

Additional required product

At least one Creative Suite 5 (or later) product

User level

Beginning

Required products

If you have an extension that runs in a number of Creative Suite applications and works cross-platform, you might notice that the appearance of the application UI differs and the extension can seem a little out of place in different products and platforms. This article outlines some of the ways that you can apply skinning to your extension using data returned by the host application.

Creative Suite extension theme

CS Extension Builder includes a CS theme that you can apply to your extension. The theme uses some of the common Creative Suite UI properties and helps provide a consistent look for the extension in each CS application, regardless of platform.

Retrieving host application skinning information

The AppSkinInfo class in the CSXSLibrary provides UI information about a Creative Suite application. When you call this class, the information returned can vary between applications and platforms. By retrieving the AppSkinInfo object, you can adjust the UI properties at run time.

Loading style sheets at run time

In Flex, you can apply style sheets, which Flex refers to as skins, to a Flash panel. This section outlines how to apply a Flex skin to a Creative Suite extension.

Flex allows you to load style sheets at run time and apply the styles dynamically to your UI; see Loading style sheets at run time in Flex documentation for further information. Each style sheet is a compiled Flash file (SWF).

To apply a style sheet as a skin to an extension's panel, first you have to load it into your extension. Here is a loadStyleSheet() function that retrieves a given style-sheet SWF:

Each skin is represented by a different style-sheet SWF. For example, you might have a skin to use in Windows and another to use in Mac OS; or you might have different skins for different target products. You can load the style sheet you need based on the product and platform.

For example, here's a code snippet that loads platform-specific versions of a style sheet for Photoshop, and a third version for any other target product:

Figure 4 shows different skins applied to the same extension. The image on the left shows the genericStyles.swf. In the center is an example of the extension running in Photoshop CS5 in Mac OS. The image on the right shows the extension running in Photoshop CS5 in Windows.

Figure 4. Different skins applied to the same extension

Where to go from here

This article shows how you can apply skinning to your Creative Suite extension for a consistent look and feel across platforms and applications. Using a combination of the AppSkinInfo data and Flex skins, you can dynamically change the UI of the extension to support the different CS applications and platforms.