SAP BusinessObjects Dashboards Component SDK Tutorial 3 ...

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

2013-03-16

Copyright

© 2013 SAP AG or an SAP affiliate company. All rights reserved.No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. National product specifications may vary. 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. 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. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices. 2013-03-16

Contents

3

Chapter 1

Introduction.............................................................................................................................5

Chapter 2

Task 1: Importing and embedding skins in the project............................................................7

Chapter 3

Task 2: Changing skins of the component..............................................................................9

Chapter 4

Task 3 (optional): Creating a custom style............................................................................11

2013-03-16

Contents

4

2013-03-16

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 Portable 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 BasicHorizon talSliderwithSkinning. Repeat the steps in Tutorial 1 to create another basic horizontal slider.

5

2013-03-16

Introduction

6

2013-03-16

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 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 (x86)\SAP BusinessObjects\Xcelsius 4.0\SDK\samples\BasicHorizontalSliderwithSkinning\Ba sicHorizontalSliderwithSkinningSource\com\businessobjects\xcelsius\sdk\sam ples. 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; [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.

7

2013-03-16

Task 1: Importing and embedding skins in the project

8

2013-03-16

Task 2: Changing skins of the component

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", _trackHighlightSkin); // 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. tickInterval and snapInterval properties are also set inside of the constructor. 2. Save and build your project.

9

2013-03-16

Task 2: Changing skins of the component

10

2013-03-16

Task 3 (optional): Creating a custom style

Task 3 (optional): Creating a custom style

•

11

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

2013-03-16

Task 3 (optional): Creating a custom style

12

2013-03-16