SAP BusinessObjects Dashboards Component SDK Tutorial 1 - Creating a basic horizontal slider ■ SAP BusinessObjects 4.

1

2013-03-16

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only.sap. 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. All rights reserved.Copyright © 2013 SAP AG or an SAP affiliate company. 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.com/corporate-en/legal/copyright/index. 2013-03-16 . Please see http://www.epx#trademark for additional trademark information and notices. The information contained herein may be changed without prior notice.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. National product specifications may vary. and SAP Group shall not be liable for errors or omissions with respect to the materials. without representation or warranty of any kind.

............................................................11 3 2013-03-16 ................................7 Chapter 3 Task 2: Calling the component in the MXML application file.................................5 Chapter 2 Task 1: Writing the component class definition in ActionScript.....................Contents Chapter 1 Introduction.........................................................................

Contents 4 2013-03-16 .

ActionScript 3. • Adding the Dashboards Component Developer SDK framework.0. 5 2013-03-16 .Introduction Introduction Tutorial 1 will walk through how to create a basic horizontal slider component in Adobe Flash Builder 4. 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). When an empty Flex project and the component file are created. Refer to the Dashboards Component Developer SDK Guide in the Create a visual component section for the initial necessary steps for: • Creating a project. and MXML. • Creating a component file. the XML-based markup language introduced by Adobe Flex.

Introduction 6 2013-03-16 .

Add the following line before the component class definition in addition to import mx. The file name is BasicHorizontalSlider. private var _titleText:String = "Title". In this example. type="String")] public function get title():String { return _titleText.businessobjects. Also add these lines inside the class definition and above the class constructor: private var _title:Label. } } } 2. the default value for _titleText is the string "Title".text.con trols. It is a good programming practice to initialize the component's properties with default values.styles. } public function set title(value:String):void 7 2013-03-16 . 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. I specifically chose those options for the following sample.CSSStyle Declaration. private var _titlesChanged:Boolean = true. import mx.HSlider. 4. Don't forget to save the source files often.TextFieldAutoSize.text. there are options to include a super class and to specify that the wizard should automatically generate the constructor. private var _showTitle:Boolean = true.StyleManager.styles. import mx. 3. Implement get and set functions for each property of the component BasicHorizontalSlider: //---------------------------------// titleText Property //---------------------------------[Inspectable(defaultValue="Title".samples { import mx.controls. Variable _titlesChanged is the flag indicating when the Label's text changes. When creating an ActionScript (AS) class using Flex wizard.controls.HSlider: import flash.xcelsius. import flash. public class BasicHorizontalSlider extends HSlider { public function BasicHorizontalSlider() { super().sdk.TextFormatAlign.as.Label.Task 1: Writing the component class definition in ActionScript Task 1: Writing the component class definition in ActionScript 1. package com. 5. import mx.

text = _titleText. this. } _title.minHeight = 0.minWidth = 0. unscaledHeight)._titlesChanged) { _title.setActualSize(152. _titlesChanged = false. } } //---------------------------------// showTitle Property //---------------------------------[Inspectable(defaultValue="true". _title.selectable = false. _title.20.y = _title. Next override two functions createChildren and commitProperties from the super class since we are adding a new subclass Label and two properties. _title.Task 1: Writing the component class definition in ActionScript { if (value == null) value ="". } } 6. invalidateDisplayList().minWidth = 0. type="Boolean")] public function get showTitle():Boolean { return _showTitle. if (this.snapInterval = 0. //Title _title = new Label(). _title. } override protected function updateDisplayList(unscaledWidth:Number. } 8 2013-03-16 . override protected function createChildren():void { super.commitProperties().truncateToFit = true.visible = _showTitle.includeInLayout = true. unscaledHeight:Number):void { super. _titlesChanged = true. _title. if (_titleText != value) { _titlesChanged = true.percentWidth = 100. 20). invalidateProperties(). _title. _title.addChild(_title).createChildren(). _titleText = value. _title.setActualSize(unscaledWidth.updateDisplayList(unscaledWidth.y . _title. TextFormatAlign.setStyle("textAlign".01. // Check if we need to update the title. //set snapInterval this. } override protected function commitProperties():void { super.LEFT). 20). invalidateProperties(). _title.minHeight = 0. } public function set showTitle(value:Boolean):void { if (_showTitle != value) { _showTitle = value. this. //Allow the user to make this component very small this.

the title Label size needs to be updated with the current text length. See Default Property Sheet for more details. "showTitle")] to display only title and showTitle properties. add [CxInspectableList ("title". using the addChild function is to add the subclass Label to the HSlider instance. 8. 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. Lastly. In updateDisplayList. Save and build the project. It is also possible to change any built-in properties of the Label component before adding it to the parent component.Task 1: Writing the component class definition in ActionScript In createChildren(). Invalidation is a useful mechanism for eliminating duplicate work by delaying processing of changes to the component until a later screen update. we change the text of the title Label to the current text and change the visibility of the Label based on the _showTitle property. 9 2013-03-16 . 7. In this example. Function commitProperties() is where modifications to the component properties are coordinated.

Task 1: Writing the component class definition in ActionScript 10 2013-03-16 .

samples. 2. Inside the <mx:Application> and </mx:Application> tags.mxml. It is to create a custom XML tag for the component.businessobjects.com/2006/mxml" layout="ab solute"> with <mx:Application xmlns:mx="http://www.sdk.adobe.adobe.sdk.xcelsius.Task 2: Calling the component in the MXML application file Task 2: Calling the component in the MXML application file 1. add the following code: <ns:BasicHorizontalSlider width="100%" height="100%"/> 4.xcelsius. This file should already contain the Application declaration for the project.samples.businessobjects.*"> Notice the addition of xmlns:ns="com. Open BasicHorizontalSliderSource. Replace <mx:Application xmlns:mx="http://www. Save and build the project.*" . 3. 11 2013-03-16 .com/2006/mxml" layout="absolute" xmlns:ns="com.

Task 2: Calling the component in the MXML application file 12 2013-03-16 .

Sign up to vote on this title
UsefulNot useful