SAP BusinessObjects Dashboard Design Component SDK Tutorial 1

SAP BusinessObjects Dashboard Design Component SDK Tutorial 1 Creating a basic horizontal slider ■ SAP BusinessObjects Dashboard Design Component SDK Tutorial 1 - Creating a basic horizontal slider

2011-08-17

Copyright

© 2011 SAP AG. All rights reserved.SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, 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 Software Ltd. Business Objects is an SAP company.Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase, Inc. Sybase 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. 2011-08-17

Contents

3

Chapter 1

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

Chapter 2

Task 1: Writing the component class definition in ActionScript.............................................7

Chapter 3

Task 2: Calling the component in the MXML application file................................................11

2011-08-17

Contents

4

2011-08-17

Introduction

Introduction

Tutorial 1 will walk through how to create a basic horizontal slider component in Adobe Flex Builder 3. Refer to the Dashboard Design Component Developer SDK Guide in the Create a visual component section for the initial necessary steps for: • Creating a project. • Adding the Dashboard Design Component Developer SDK framework. • Creating a component file. When an empty Flex project and the component file are created, the next step is to write the code for the component class file. 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.

5

2011-08-17

Introduction

6

2011-08-17

Task 1: Writing the component class definition in ActionScript

Task 1: Writing the component class definition in ActionScript

1. When creating an ActionScript (AS) class using Flex wizard, there are options to include a super class and to specify that the wizard should automatically generate the constructor. I specifically chose those options for the following sample. The file name is BasicHorizontalSlider.as. package com.businessobjects.xcelsius.sdk.samples { import mx.controls.HSlider; public class BasicHorizontalSlider extends HSlider { public function BasicHorizontalSlider() { super(); } } }

2. The slider then can be more sophisticated by adding a Label to it as a subclass with the property _titleText and a property _showTitle to display or hide the title. Don't forget to save the source files often. 3. Add the following line before the component class definition in addition to import mx.con trols.HSlider: import flash.text.TextFieldAutoSize; import flash.text.TextFormatAlign; import mx.controls.Label; import mx.styles.CSSStyle Declaration; import mx.styles.StyleManager;

4. Also add these lines inside the class definition and above the class constructor: private var _title:Label; private var _titlesChanged:Boolean = true; private var _titleText:String = "Title"; private var _showTitle:Boolean = true;

It is a good programming practice to initialize the component's properties with default values. In this example, the default value for _titleText is the string "Title". Variable _titlesChanged is the flag indicating when the Label's text changes. 5. Implement get and set functions for each property of the component BasicHorizontalSlider: //---------------------------------// titleText Property //---------------------------------[Inspectable(defaultValue="Title", type="String")] public function get title():String { return _titleText; } public function set title(value:String):void

7

2011-08-17

Task 1: Writing the component class definition in ActionScript

{ if (value == null) value =""; if (_titleText != value) { _titlesChanged = true; _titleText = value; invalidateProperties(); } } //---------------------------------// showTitle Property //---------------------------------[Inspectable(defaultValue="true", type="Boolean")] public function get showTitle():Boolean { return _showTitle; } public function set showTitle(value:Boolean):void { if (_showTitle != value) { _showTitle = value; _titlesChanged = true; invalidateProperties(); } }

6. Next override two functions createChildren and commitProperties from the super class since we are adding a new subclass Label and two properties. override protected function createChildren():void { super.createChildren(); //Allow the user to make this component very small this.minWidth = 0; this.minHeight = 0; //set snapInterval this.snapInterval = 0.01; //Title _title = new Label(); _title.setActualSize(152, 20); _title.y = _title.y - 20; _title.setStyle("textAlign", TextFormatAlign.LEFT); _title.minWidth = 0; _title.minHeight = 0; _title.selectable = false; _title.truncateToFit = true; _title.percentWidth = 100; this.addChild(_title); } override protected function commitProperties():void { super.commitProperties(); // Check if we need to update the title. if (this._titlesChanged) { _title.text = _titleText; _title.includeInLayout = true; invalidateDisplayList(); _titlesChanged = false; } _title.visible = _showTitle; } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); _title.setActualSize(unscaledWidth, 20); }

8

2011-08-17

Task 1: Writing the component class definition in ActionScript

In createChildren(), using the addChild function is to add the subclass Label to the HSlider instance. It is also possible to change any built-in properties of the Label component before adding it to the parent component. Function commitProperties() is where modifications to the component properties are coordinated. In this example, we change the text of the title Label to the current text and change the visibility of the Label based on the _showTitle property. According to livedocs on Adobe site, making a call to invalidateDisplayList() marks the component so that its updateDisplayList method gets called during a later screen update. Invalidation is a useful mechanism for eliminating duplicate work by delaying processing of changes to the component until a later screen update. In updateDisplayList, the title Label size needs to be updated with the current text length. 7. Lastly, add [CxInspectableList ("title", "showTitle")] to display only title and showTitle properties. See Default Property Sheet for more details. 8. Save and build the project.

9

2011-08-17

Task 1: Writing the component class definition in ActionScript

10

2011-08-17

Task 2: Calling the component in the MXML application file

Task 2: Calling the component in the MXML application file

1. Open BasicHorizontalSliderSource.mxml. This file should already contain the Application declaration for the project. 2. Replace with Notice the addition of xmlns:ns="com.businessobjects.xcelsius.sdk.samples.*" . It is to create a custom XML tag for the component. 3. Inside the and tags, add the following code: 4. Save and build the project.

11

2011-08-17

Task 2: Calling the component in the MXML application file

12

2011-08-17