Skinning Creative Suite extensions
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
- Flash Builder 4.5 Standard (Download trial)
- CS Extension Builder (Download trial)
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.
To apply this theme to your extension, select the project in CS Extension Builder, and choose Project > Properties > Flex Theme > Adobe Themes – Creative Suite Extension Builder > Creative_Suite_CS5. Here's an example of how the CS theme looks.
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.
To add the CSXSLibrary to your project in CS Extension Builder select Project > Properties > CS Extension Builder Libraries > and select Adobe CSXS SWC.
For example, this code allows you to apply a different font family to text, depending on whether the extension is running in Mac OS or in Windows:
The sample CSExtBasics further demonstrates how to apply style properties to your extension using the data returned from AppSkinInfo. To access this sample in CS Extension Builder, choose File > Import > Adobe Creative Suite Extension Builder > Remote Creative Suite SDK Examples.
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:
private function loadStyleSheet(stylesheet:String):void
{
var path:String = CSXSInterface.getInstance().
getSystemPath(SystemPath.APPLICATION).data + stylesheet;
var f:File = new File(path);
StyleManager.loadStyleDeclarations("app://" + f.nativePath);
}
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:
if (hostName.indexOf('photoshop') > -1)
{
var os:String = Capabilities.os.toLowerCase();
if (os.indexOf("windows") > -1)
loadStyleSheet("/assets/windowPSStyles.swf");
else
loadStyleSheet("/assets/macPSStyles.swf");
}
else
{
loadStyleSheet("/assets/genericStyles.swf");
}
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.
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.
For more information about skinning, refer to the Flex Documentation.
For the Flex skins used in this article, see http://fleksray.org/Flex_skin.html
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Introducing CS Extension Builder 1.5
- Developing extensions for multiple versions of the Creative Suite
- Adobe Creative Suite image conversion utility
- So you want to sell your Creative Suite extensions?
- Handling XMP Metadata with Creative Suite Extension Builder
- Debugging Workflows in Creative Suite Extension Builder
- Overview of Adobe Creative Suite Extensibility
- Developing multiple Creative Suite extensions
- Developing hybrid extensions with Creative Suite Extension Builder
