Sas Theme Designer User Manual

SAS® Theme Designer 2.4
for Flex

User’s Guide

SAS® Documentation

The correct bibliographic citation for this manual is as follows: SAS Institute Inc. 2010. SAS® Theme Designer for Flex 2.4: User’s Guide. Cary,
NC: SAS Institute Inc.

SAS® Theme Designer 2.4 for Flex: User’s Guide

Copyright © 2010, SAS Institute Inc., Cary, NC, USA

All rights reserved. Produced in the United States of America.

For a hardcopy book: No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means,
electronic, mechanical, photocopying, or otherwise, without the prior written permission of the publisher, SAS Institute Inc.

For a Web download or e-book: Your use of this publication shall be governed by the terms established by the vendor at the time you acquire this
publication.

U.S. Government Restricted Rights Notice: Use, duplication, or disclosure of this software and related documentation by the U.S. government is
subject to the Agreement with SAS Institute and the restrictions set forth in FAR 52.227–19, Commercial Computer Software-Restricted Rights
(June 1987).

SAS Institute Inc., SAS Campus Drive, Cary, North Carolina 27513.

1st electronic book, December 2010

SAS® Publishing provides a complete selection of books and electronic products to help customers use SAS software to its fullest potential. For
more information about our e-books, e-learning products, CDs, and hard-copy books, visit the SAS Publishing Web site at

support.sas.com/publishing or call 1-800-727-3228.

SAS® and all other SAS Institute Inc. product or service names are registered trademarks or trademarks of SAS Institute Inc. in the USA and other
countries. ® indicates USA registration.

Other brand and product names are registered trademarks or trademarks of their respective companies.

Contents

About This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v

Chapter 1 • Overview of the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . . . . 1

What Is the SAS Theme Designer 2.4 for Flex? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Benefits of Using the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . . . 2

How to Access the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Who Can Use the SAS Theme Designer 2.4 for Flex? . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Chapter 2 • Selected Tasks in the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . 3

About this Chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Create and Deploy a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Replace the Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Deploy a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Delete a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Undeploy a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Disable All Custom Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Change the Default Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chapter 3 • Reference for the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . . . 9

About SAS Application Themes for Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

About the Predefined Base Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Limitations of the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Where to Find More Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

iv Contents

About This Book

Audience

The intended audience for this document is an administrator or visual designer who
wants to change the appearance of their site’s SAS Web applications that are deployed
with the Adobe Flash player.

This product has not been tested for compliance with U.S. Section 508 standards. For
information about the accessibility of SAS products, please send e-mail to
[e-mail].

v

vi About This Book

Chapter 1

Overview of the SAS Theme Designer 2.4 for Flex

What Is the SAS Theme Designer 2.4 for Flex? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Benefits of Using the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . 2

How to Access the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . . . 2

Who Can Use the SAS Theme Designer 2.4 for Flex? . . . . . . . . . . . . . . . . . . . . . . . . . 2

1

What Is the SAS Theme Designer 2.4 for Flex?

The SAS Theme Designer 2.4 for Flex is a small utility application that enables you to
easily customize the appearance of SAS Web applications that are displayed with the
Adobe Flash player. The SAS Theme Designer 2.4 for Flex is, itself, a Flex Web
application. You use the SAS Theme Designer 2.4 for Flex to create and deploy simple,
visually appealing, customized themes.

A theme defines the overall look and feel of an application. It is designed using colors
and graphics that are applied to common user interface components and layout
containers. A well-designed theme can create a strong visual identity across a product or
set of products. SAS recognizes that you might not want to view your SAS applications
in the default corporate theme. You might instead want to apply your own branding and
customizations, to help the SAS applications fit in with the rest of your software
environment. SAS also recognizes that users at your site often use more than one SAS
application in their daily work. Having a consistent look and feel ensures that the user’s
transition from one application to the next is as seamless as possible.

The SAS Theme Designer 2.4 for Flex affects only those applications that use version

2.4 (or later) of SAS Application Themes for Flex. The work that you do in the SAS
Theme Designer 2.4 for Flex has no effect on the following types of applications:

• Web applications that are not Flex applications (for example, SAS Web Report
Studio 4.3)

• earlier Flex applications from SAS (for example, SAS BI Dashboard 4.3)

Note: See the SAS Intelligence Platform: Web Application Administration Guide for

information about themes for other types of applications.

2 Chapter 1 • Overview of the SAS Theme Designer 2.4 for Flex

Benefits of Using the SAS Theme Designer 2.4 for Flex

The SAS Theme Designer 2.4 for Flex enables you to customize the SAS product line to
meet your branding needs and to ensure a unified look across all eligible applications.

SAS Theme Designer 2.4 for Flex includes the following key features:

• A complete graphical user interface (GUI). All tasks can be done with simple point­and-click actions. You do not have to modify configuration files manually or edit the
XML content.

• The implementation and deployment of custom themes are entirely within the
designer’s control. You do not need to redeploy applications or restart Web
application servers. With a single click, you can make a new or updated custom
theme available to all users in all eligible applications.

• A site can implement multiple custom themes. All deployed themes are available to
all end users in all eligible applications.

• You can change the default theme. This is a single setting that applies to all eligible
applications and affects all users (except those users who have specified a personal
default theme).

• Custom themes that you create in the SAS Theme Designer 2.4 for Flex survive
deployment-related activities such as software upgrades.

How to Access the SAS Theme Designer 2.4 for Flex

The SAS Theme Designer 2.4 for Flex is a Web application, so you access it from within
a Web browser. The address for the SAS Theme Designer 2.4 for Flex is: http://

machine:port/SASThemeDesignerForFlex.

Note: If your site has configured Web authentication, you cannot log on using a SAS

internal account (such as sasadm@saspw). If your site is using SAS authentication,
you can log on with an internal account.

Who Can Use the SAS Theme Designer 2.4 for Flex?

Anyone who can log on to SAS Theme Designer 2.4 for Flex can perform all of the tasks
that this application offers. However, creating custom themes is a highly specialized and
infrequent task that should be performed only by an experienced administrator or
designated visual designer.

Chapter 2

Selected Tasks in the SAS Theme Designer 2.4 for Flex

About this Chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Create and Deploy a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Replace the Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Deploy a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Delete a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3

Undeploy a Custom Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Disable All Custom Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Change the Default Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

About this Chapter

The first task topic in this chapter provides a complete procedure for implementing a
custom theme.

The simple user interface and instant preview feature offered by the facilitates an
iterative and exploratory design process. For this reason, this document does not provide
step-by-step instructions for individual design modifications.

This chapter does provide detailed instructions for selected tasks, to help avoid
confusion, optimize your work flow, and minimize the risk of inadvertent disruption of
your end users.

Create and Deploy a Custom Theme

1. From the main menu of the SAS Theme Designer 2.4 for Flex, select File ð New.

2. In the New Theme window, enter a name for your custom theme and select Base
theme. Click OK.

Note: Spaces and most of the special characters are not allowed in the theme name.

The theme name can include alphabetic letters, digits, an underscore ( _), and a
dollar sign ($).

Note: Initially, three base themes are available (SAS Light, SAS Dark, and SAS

Corporate). You cannot modify these predefined base themes. The SAS

4 Chapter 2 • Selected Tasks in the SAS Theme Designer 2.4 for Flex

Corporate theme enables you to replace the Banner logo. No other custom
changes are supported for the SAS Corporate theme. After you create and save a
custom theme, you can use that theme as a basis for future themes. Such
dependent relationships among themes are dynamic. For example, if you change
ThemeA, that change affects all themes that are based on ThemeA (except for
any design elements that are explicitly specified in the dependent themes).

In the right pane, notice that a sample application that uses the selected base theme is
displayed. The right pane provides an automatic, instant preview as you work.

3. In the upper left portion of the User Interface Components pane, select a
component. Use the controls in the lower left pane to make changes to the selected
interface component. The impact of each change is instantly shown in the sample
application in the right pane.

Note: All of the customizable design elements are listed in the User Interface

Components pane. The sample application on the right contains examples of all

of the available components.

Note: Changes that you make to certain user interface components affect other

components. For example, if you change the color for button, the colors for tabs
and accordion will change. You can also customize the colors for the tabs and
accordion, and override the inherited colors for those items.

4. Repeat step 4 for each interface component whose appearance you want to alter. To
save you work at any time, select File ð Save from the main menu.

T I P To revert the settings for a particular interface component (undoing all of your

unsaved changes to that component in the current session), select the component
in the User Interface Components pane and then click Reset to Defaults in the
lower left pane.

5. When you are ready to deploy the new theme, select File ð Save and deploy from
the main menu. In the confirmation message box, click OK.

Note: At run time, both the target theme and its base theme must be available. Each

custom theme contains only information about how it differs from its base theme.
The base theme is deployed simultaneously with the custom theme; both themes
must be available to the consuming applications. If you have additional layers of
nesting (for example, a custom theme that depends on another custom theme that
in turn depends on a base theme), then all dependent themes must be available. If
you deploy a theme whose base theme is not deployed, the application auto­deploy the base theme.

Note: You can’t deploy a theme for only a particular application, or for only a

particular set of users. All deployed themes are available to all eligible
applications, and to all users.

6. To verify the results:

a. In a separate browser, launch an eligible application.

b. Access the application’s preferences settings (for example, select File ð

Preferences from the application’s main menu).

c. On the All SAS Applications page in the Preferences window, select the new

custom theme from the Themes drop-down list. Click OK.

d. If the appearance of the consuming application does not change immediately, log

out and log in to the application to view the application with the new theme.

T I P You can work iteratively and view results in the consuming application. In

the SAS Theme Designer 2.4 for Flex, make changes to the custom theme,

Replace the Logo

To replace the SAS logo (on the right edge of the application banner) with a different
image:

1. In the list for the User Interface Components panel, select Application banner.

2. Below the list of components, in the Logo group box, click Browse. Locate and
select the image that you want to use.

3. Save and deploy the custom theme.

Delete a Custom Theme 5

and then save and deploy the theme. On your desktop, switch to the browser
window where a consuming application is running and simply refresh the
page. It is not necessary to relaunch the consuming application.

T I P It is a good practice to thoroughly review the effects of the custom theme

on each consuming application.

Deploy a Custom Theme

As an alternative to the one-step save-and-deploy feature, you can deploy a custom
theme that has already been saved. The result is identical to the one-step approach.

1. From the main menu of the SAS Theme Designer 2.4 for Flex, select Tools ð
Deploy.

2. In the Deploy Theme window, select the theme. Note that the predefined themes are
not listed because they are always deployed.

Click OK. A new theme becomes available when an end user relaunches an eligible
application. Modifications to an existing theme become available when an end-user
relaunches or refreshes and eligible application.

T I P Deploying a theme makes the most-recently saved version of the theme

available to end users. If you modify a custom theme, be sure to save the changes
before deploying the theme.

Delete a Custom Theme

To permanently delete a custom theme from the system:

1. From the main menu of the SAS Theme Designer 2.4 for Flex, select Tools ð
Delete.

2. In the Delete Themes window, select the theme.

T I P The predefined themes are not listed because you cannot delete those themes.

To avoid unintended results, use caution in deleting themes. Consider theme
dependencies. If you delete a theme that serves as a default theme (either

6 Chapter 2 • Selected Tasks in the SAS Theme Designer 2.4 for Flex

globally or for an individual user), the SAS Corporate theme is used as the
default.

Click OK .The change takes effect when a user refreshes or relaunches an eligible
application.

Note: If you want to make a theme unavailable for selection by an end user in the

application preferences area, you don’t have to delete the theme. You can instead
undeploy the theme.

Undeploy a Custom Theme

If you want to remove a custom theme from the list of themes that is offered to end users
in the application preferences area, undeploy that theme.

1. From the main menu of the SAS Theme Designer 2.4 for Flex, select Tools ð
Undeploy.

2. In the Undeploy Theme window, select the theme.

T I P The predefined themes are not listed because you cannnot undeploy those

themes. To avoid unintended results, use caution in undeploying themes.
Consider theme dependencies. If you undeploy a theme that serves as a default
theme (either globally or for an individual user), the SAS corporate theme is used
as the default.

Click OK. The change takes effect when a user relaunches an eligible application.
Note that undeploying a theme does not delete the theme. It just makes the theme
unavailable for selection by a user in the application preferences area.

Disable All Custom Themes

In the initial configuration, custom themes are disabled (because no custom themes
exist). When you create your first custom theme, custom themes are automatically
enabled.

In the unusual circumstance in which you need to disable all custom themes, globally,
complete the following steps:

1. From the main menu of the SAS Theme Designer 2.4 for Flex, select Tools ð
Disable Custom Themes.

2. In the confirmation message box, click OK.

When custom themes are disabled, no custom theme information is loaded into
eligible applications. The change takes effect when a user relaunches or refreshes an
eligible application.

Change the Default Theme

In the initial configuration, the SAS corporate theme is the default theme. A user can
select a different, personal default theme from the preferences area in any eligible
application. For that user, the personal default theme selection overrides the default
theme. For that user, all applications are displayed using the selected personal default
theme.

An administrator can set a theme other than the SAS corporate theme as the default
theme. This change affects only those users who have not already selected a personal
default theme. This change does not make other themes unavailable or prevent a user
from selecting a different, personal default theme.

To change the default theme:

1. From the main menu of the SAS Theme Designer 2.4 for Flex, select Tools ð Set
Default Theme.

2. Select the theme that you want to be the default theme. Click OK.

The change takes effect when a user relaunches or refreshes an eligible application.
The change does not affect users who have already specified a personal default
theme.

Change the Default Theme 7

8 Chapter 2 • Selected Tasks in the SAS Theme Designer 2.4 for Flex

Chapter 3

Reference for the SAS Theme Designer 2.4 for Flex

About SAS Application Themes for Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Introduction to SAS Application Themes for Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Benefits of SAS Application Themes for Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

About the Predefined Base Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Limitations of the SAS Theme Designer 2.4 for Flex . . . . . . . . . . . . . . . . . . . . . . . . 10

Where to Find More Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

9

About SAS Application Themes for Flex

Introduction to SAS Application Themes for Flex

SAS applications display with the Flex interface that is provided by a particular version
of SAS Application Themes for Flex. At start-up time, Flex applications load Flex
themes automatically. A theme consists of SWF files that include cascading style sheets
(CSS) files. The theme content is downloaded to the client, and is cached by the user's
Web browser. As a result, during subsequent uses of the Web application, the theme
content loads quicker than when it is initially loaded. The SAS Corporate theme is the
default theme for all Flex applications.

Benefits of SAS Application Themes for Flex

Flex applications require SAS Application Themes for Flex, and the themes are
downloaded as SWF files to the client's Web browser. Flex theme content runs within
the Adobe Flash player and offers the following benefits:

• SAS Application Themes for Flex coexist with SAS Web Application Themes. For
example, SAS Information Delivery Portal 4.3 uses the default Web theme, but it
displays SAS BI Portlets with SAS Application Themes for Flex.

• Applications that use SAS Application Themes for Flex offer more visual impact,
interactivity, and responsiveness.

• Improved visual impact and greater perceived depth are achieved through the use of
skins. Skins are graphics that are applied to common user interface components in
order to change their appearance. For example, the Corporate theme provides skins
with a color palette that reflects the SAS visual identity. Skins also include some
stylized graphics in the user interface.

10 Chapter 3 • Reference for the SAS Theme Designer 2.4 for Flex

About the Predefined Base Themes

The predefined base themes, SAS Light and SAS Dark, were created simply by
overriding the Flex standard (Halo theme) styles. The SAS Light and SAS Dark themes
are implemented in a minimal way, without custom graphical skins. The SAS Light
theme uses shades of light gray, beige, and white for its color palette. The SAS Dark
theme is based on darker, charcoal gray tones.

When you choose a base theme, select the theme that is most similar to your desired
color palette. For example, if your dominant corporate color is a rich orange, you might
begin with the SAS Light theme as your base. The SAS Light theme uses a warmer
palette, with yellows and neutral colors that complement the color orange.

Limitations of the SAS Theme Designer 2.4 for Flex

When you use the SAS Theme Designer 2.4 for Flex, it is important to understand the
following points:

• Not all aspects of an application’s appearance are customizable. The SAS Theme
Designer 2.4 for Flex enables you to modify a rich, carefully selected subset of
design elements. The intent is to offer maximum visual impact with minimal effort
and minimal risk of unintended results.

• You cannot use the SAS Theme Designer 2.4 for Flex to affect the appearance of
graphs.

• This application is not optimized for large numbers of themes or deeply nested
hierarchies. It is intended for occasional, highly targeted use.

• This application does not offer manual editing of a theme or direct interaction with
configuration files. For SAS Application Themes for Flex, SAS does not support
direct interaction with source files. All work should be performed from within the
SAS Theme Designer 2.4 for Flex.

• This application does not offer a step-by-step "undo" function.

• This application does not offer history or versioning of files.

• You cannot alter, delete, or undeploy any of the predefined themes provided by SAS.

• You cannot hide a deployed theme from anyone. All deployed themes are available
to all end users in all eligible applications.

• You cannot preload a custom color palette into the SAS Theme Designer 2.4 for
Flex.

Where to Find More Information

The most recent version of this document is available from the SAS BI Server product
documentation page on the SAS support site (http://support.sas.com/

documentation/onlinedoc/biserver/).

Where to Find More Information 11

12 Chapter 3 • Reference for the SAS Theme Designer 2.4 for Flex

Glossary

13

SAS authentication

a form of authentication in which the target SAS server is responsible for requesting
or performing the authentication check. SAS servers usually meet this responsibility
by asking another component (such as the server's host operating system, an LDAP
provider, or the SAS Metadata Server) to perform the check. In a few cases (such as
SAS internal authentication to the metadata server), the SAS server performs the
check for itself. A configuration in which a SAS server trusts that another component
has pre-authenticated users (for example, Web authentication) is not part of SAS
authentication.

theme

a collection of specifications (for example, colors, fonts, and font styles) and
graphics that control the appearance of an application.

Web authentication

a configuration in which users of Web applications and Web services are verified at
the Web perimeter and the metadata server trusts that verification.

14 Glossary

Your Turn

We welcome your feedback.

• If you have comments about this book, please send them to [e-mail].
Include the full title and page numbers (if applicable).

• If you have comments about the software, please send them to [e-mail].