Tutorial 3 - Skinning a basic

horizontal slider
Copyright © 2009 SAP AG. All rights reserved.SAP, R/3, SAP NetWeaver, Duet, PartnerEdge,
ByDesign, SAP Business ByDesign, and other SAP products and services
mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP AG in Germany and other countries. Business Objects and the
Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web
Intelligence, Xcelsius, and other Business Objects products and services mentioned
herein as well as their respective logos are trademarks or registered trademarks
of Business Objects S.A. in the United States and in other countries. Business
Objects is an SAP company.All other product and service names mentioned are
the trademarks of their respective companies. Data contained in this document
serves informational purposes only. National product specifications may vary.These
materials are subject to change without notice. These materials are provided by
SAP AG and its affiliated companies ("SAP Group") for informational purposes
only, without representation or warranty of any kind, and SAP Group shall not be
liable for errors or omissions with respect to the materials. The only warranties for
SAP Group products and services are those that are set forth in the express
warranty statements accompanying such products and services, if any. Nothing
herein should be construed as constituting an additional warranty.

2009-11-03
 Tutorial 3 - Skinning a basic horizontal slider
Introduction

Introduction
If you don't like how Flex components look, Flex provides a way to embed
skins created from other software for your component. This allows you to
change its appearance by replacing its visual elements. These elements can
be made up of bitmap images, SWF files, or class files.

We will use three graphical skins, which are Protable Network Graphic (PNG)
images, and apply them to the basic horizontal slider created in Tutorial 1.

The source code for this tutorial includes more styles for the Label title than
what will be mentioned. Also, the tutorial assumes that you have at least
some knowledge of Cascading Style Sheet (CSS), ActionScript 3.0, and
MXML, the XML-based markup language introduced by Adobe Flex.

Create a basic Flex project and add a new AS component class. I named
the class BasicHorizontalSliderwithSkinning. Repeat the steps in
Tutorial 1 to create another basic horizontal slider.

Task 1: Importing and embedding skins

in the project
Locate and copy the skins images into your Adobe Flex project (the skins
are installed as part of the Xcelsius 2008 Component SDK SP1 installation).
The three skins are a thumb skin, a track skin, and a track with highlight skin.

The skin files are under the SDK install folder, the default location is:
C:\Program Files\Business Objects\Xcelsius\SDK\samples\Ba
sicHorizontalSliderwithSkinning\BasicHorizontalSliderwith
SkinningSource\com\businessobjects\xcelsius\sdk\samples.
1. Import the three skins into the same package where your custom
component AS class is located.
2. Add the following code inside the class definition:

[Embed(source="thumb.PNG")]
private var _thumbSkin:Class;

[Embed(source="trackSkin.PNG")]
private var _trackSkin:Class;

Tutorial 3 - Skinning a basic horizontal slider 3

Tutorial 3 - Skinning a basic horizontal slider
Task 2: Changing skins of the component

[Embed(source="trackSkinHighlight.PNG")]
private var _trackHighlightSkin:Class;
Make sure the sources are referenced correctly. For this tutorial, since
the images are now in the same folder as the component class, you will
not need to go up or down the folder hierarchy.

Task 2: Changing skins of the component

1. Inside of the component constructor, add the following code:

setStyle("thumbOverSkin", _thumbSkin);
setStyle("thumbDownSkin", _thumbSkin);
setStyle("thumbUpSkin", _thumbSkin);
setStyle("trackSkin", _trackSkin);
setStyle("trackHighlightSkin", _trackHighlight
Skin);

// turn on ticks
tickInterval = maximum/2;
// set snapInterval
snapInterval = 0.01;
Here, the three states of the thumb element, Over, Down, and Up are set
to the same skin. You can use different skins for each state. tickInter
val and snapInterval properties are also set inside of the constructor.
2. Save and build your project.

Task 3 (optional): Creating a custom style

• Add a custom style called showTrackHighlight to toggle the highlight
skin of the track on and off. See Tutorial 2 for details.

4 Tutorial 3 - Skinning a basic horizontal slider