SAP BusinessObjects Dashboards Component SDK Tutorial 3 - Skinning a basic horizontal slider ■ SAP BusinessObjects 4.

1

2013-03-16

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. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only. The information contained herein may be changed without prior notice.Copyright © 2013 SAP AG or an SAP affiliate company.sap. All rights reserved. National product specifications may vary.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices. SAP 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. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Please see http://www. 2013-03-16 .No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. if any. Nothing herein should be construed as constituting an additional warranty.

................................................................7 Chapter 3 Task 2: Changing skins of the component....................................................................................................................................9 Chapter 4 Task 3 (optional): Creating a custom style............................................Contents Chapter 1 Introduction...........................................................5 Chapter 2 Task 1: Importing and embedding skins in the project...11 3 2013-03-16 ......................................

Contents 4 2013-03-16 .

ActionScript 3. The source code for this tutorial includes more styles for the Label title than what will be mentioned. Flex provides a way to embed skins created from other software for your component. SWF files.Introduction Introduction If you don't like how Flex components look. Also. or class files. Repeat the steps in Tutorial 1 to create another basic horizontal slider. which are Portable Network Graphic (PNG) images. 5 2013-03-16 . I named the class BasicHorizon talSliderwithSkinning. and MXML. and apply them to the basic horizontal slider created in Tutorial 1. This allows you to change its appearance by replacing its visual elements.0. the tutorial assumes that you have at least some knowledge of Cascading Style Sheet (CSS). Create a basic Flex project and add a new AS component class. We will use three graphical skins. the XML-based markup language introduced by Adobe Flex. These elements can be made up of bitmap images.

Introduction 6 2013-03-16 .

Make sure the sources are referenced correctly. The skin files are under the SDK install folder. [Embed(source="trackSkinHighlight. Import the three skins into the same package where your custom component AS class is located.0\SDK\samples\BasicHorizontalSliderwithSkinning\Ba sicHorizontalSliderwithSkinningSource\com\businessobjects\xcelsius\sdk\sam ples. a track skin.PNG")] private var _thumbSkin:Class. 2. 1.Task 1: Importing and embedding skins in the project 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 Dashboards Component SDK SP1 installation). the default location is: C:\Program Files (x86)\SAP BusinessObjects\Xcelsius 4. The three skins are a thumb skin.PNG")] private var _trackSkin:Class. [Embed(source="trackSkin. For this tutorial.PNG")] private var _trackHighlightSkin:Class. you will not need to go up or down the folder hierarchy. 7 2013-03-16 . and a track with highlight skin. Add the following code inside the class definition: [Embed(source="thumb. since the images are now in the same folder as the component class.

Task 1: Importing and embedding skins in the project 8 2013-03-16 .

add the following code: setStyle("thumbOverSkin". setStyle("trackSkin". _thumbSkin). tickInterval and snapInterval properties are also set inside of the constructor. setStyle("trackHighlightSkin". _thumbSkin). _trackHighlightSkin). You can use different skins for each state. Save and build your project. setStyle("thumbDownSkin". Over. Inside of the component constructor. _thumbSkin). 2.Task 2: Changing skins of the component Task 2: Changing skins of the component 1.01. 9 2013-03-16 . // turn on ticks tickInterval = maximum/2. setStyle("thumbUpSkin". and Up are set to the same skin. // set snapInterval snapInterval = 0. Down. _trackSkin). Here. the three states of the thumb element.

Task 2: Changing skins of the component 10 2013-03-16 .

See Tutorial 2 for details.Task 3 (optional): Creating a custom style Task 3 (optional): Creating a custom style • Add a custom style called showTrackHighlight to toggle the highlight skin of the track on and off. 11 2013-03-16 .

Task 3 (optional): Creating a custom style 12 2013-03-16 .

Sign up to vote on this title
UsefulNot useful