SAP BusinessObjects Dashboards Component SDK Tutorial 2 ...

SAP BusinessObjects Dashboards Component SDK Tutorial 2 - Styling 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: Creating custom properties and styles.......................................................................7

Chapter 3

Task 2: Implementing a static initializer..................................................................................9

Chapter 4

Task 3: Overriding styleChanged and updateDisplayList functions.....................................11

2013-03-16

Contents

4

2013-03-16

Introduction

Introduction

This 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. In tutorial 1, you created a basic horizontal slider using a Flex out-of-the-box component. With it, you can add styles and expose them through the property sheet in Dashboards for the users to modify. Please have a basic horizontal slider created in tutorial 1 ready prior to starting this tutorial. Styles are handled differently from the custom properties of the component. First, styles do not have get and set functions; setStyle and getStyle are used instead. Second, you will need to override styleChanged and updateDisplayList functions to detect changes to the styles and incorporate the new style into the component display. Finally, to include a default CSS definition for the component, I choose to implement classConstruct function to define a static initializer. In this tutorial, for demonstration purposes, only the following styles are mentioned: "Show Track Highlight", "Data Tip Placement", "Title Font Color", "Title Font Family", and "Title Font Size". Please refer to the source code for the rest of the styles. Note: if you want to create a custom style that is an array of colors, the best way is to create a custom property sheet to handle it. The default property sheet currently does not support styles that are of array type. Create a basic Flex project and add a new AS component class. I named the class BasicHorizon talSliderwithStyling. Repeat the steps in Tutorial 1 to create another basic horizontal slider.

5

2013-03-16

Introduction

6

2013-03-16

Task 1: Creating custom properties and styles

Task 1: Creating custom properties and styles

1. Add the following code above the class definition to define the styles with names, types and other information: [Style [Style [Style [Style [Style

(name="dataTipPlacement", defaultValue="top", enumeration="top,left,right,bottom")] (name="showTrackHighlight", defaultValue="false", type="Boolean")] (name="titleFontColor", defaultValue="0x0000FF", type="uint", format="Color")] (name="titleFontFamily", defaultValue="Verdana", type="String", format="fontFamily")] (name="titleFontSize", defaultValue="11", type="Number")]

2. For each style that is not of type Boolean, a variable is added to signal when the style changes: private private private private private

7

var var var var var

_showTicks:Boolean = true; _titleFontsChanged:Boolean=true; _titleFontSizesChanged:Boolean=true; _titleFontColorsChanged:Boolean=true; _dataTipPlacementsChanged:Boolean=true;

2013-03-16

Task 1: Creating custom properties and styles

8

2013-03-16

Task 2: Implementing a static initializer

Task 2: Implementing a static initializer

1. Add the following line before the component class definition to import the StyleManager: Import mx.styles.StyleManager;

2. Implement a static initializer in the component class to set default values for the new styles that are defined: // A static variable private static var classConstructed:Boolean = classConstruct(); // A static method private static function classConstruct():Boolean { var styleDeclaration:CSSStyleDeclaration = StyleManager.getStyleDeclaration("BasicHorizon talSliderwithStyling"); // If there is no CSS definition for BasicHorizontalSlidewithStyling // then create one and set default values if (!styleDeclaration) { styleDeclaration = new CSSStyleDeclaration(); styleDeclaration.setStyle("dataTipPlacement", "top"); styleDeclaration.setStyle("showTrackHighlight", false); styleDeclaration.setStyle("titleFontColor", 0x0000FF); styleDeclaration.setStyle("titleFontSize", 11); styleDeclaration.setStyle("titleFontFamily", "Verdana"); StyleManager.setStyleDeclaration("BasicHorizontalSliderwithStyling", styleDeclaration, true); } return true; }

9

2013-03-16

Task 2: Implementing a static initializer

10

2013-03-16

Task 3: Overriding styleChanged and updateDisplayList functions

Task 3: Overriding styleChanged and updateDisplayList functions

1. Copy the following code and paste inside of the component class definition: override public function styleChanged(styleProp:String):void { var allStyles:Boolean = styleProp == null || styleProp == "styleName"; super.styleChanged(styleProp); if (allStyles || styleProp == "dataTipPlacement") { _dataTipPlacementsChanged = true; invalidateDisplayList(); } if (allStyles || styleProp == "titleFontColor") { _titleFontColorsChanged = true; invalidateDisplayList(); } if (allStyles || styleProp == "titleFontFamily") { _titleFontsChanged = true; invalidateDisplayList(); } if (allStyles || styleProp == "titleFontSize") { _titleFontSizesChanged = true; invalidateDisplayList(); } }

2. Copy the following code and paste below styleChanged function definition: override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); _title.setActualSize(unscaledWidth, unscaledHeight); if (_dataTipPlacementsChanged == true) { this.setStyle("dataTipPlacement", getStyle("dataTipPlacement")); _dataTipPlacementsChanged = false; } this.setStyle("showTrackHighlight", getStyle("showTrackHighlight")); if (_titleFontColorsChanged == true) { _title.setStyle("color", getStyle("titleFontColor")); _titleFontColorsChanged = false; } if (_titleFontsChanged == true) { _title.setStyle("fontFamily", getStyle("titleFontFamily")); _titleFontsChanged = false; } if (_titleFontSizesChanged == true) { _title.setStyle("fontSize", getStyle("titleFontSize")); _titleFontSizesChanged = false; } }

11

2013-03-16

Task 3: Overriding styleChanged and updateDisplayList functions

Notice the difference between setting styles to the Slider and the Label, making a call to the correct component is necessary. Also, the first parameter of the setStyle function must be the style names coming from Flex and not custom style names that were defined for the component. 3. Lastly, use [CxInspectableList] metadata to specifically display those custom properties (not styles) in the default property sheet and hide the rest. Please see section "Default Property Sheet" for more details. Before the style definitions, add this code: [CxInspectableList("title", "showTitle"]. 4. Save and build.

12

2013-03-16