Tutorial 1 - Creating a basic horizontal sliderIntroductionTask 1: Writing the component class definition in ActionScriptTask 2: Calling the component in the MXML application fileTutorial 1 - Creating a basichorizontal slider© 2009 SAP AG. All rights reserved.SAP, R/3, SAP NetWeaver, Duet, PartnerEdge,ByDesign, SAP Business ByDesign, and other SAP products and servicesCopyrightmentioned herein as well as their respective logos are trademarks or registeredtrademarks of SAP AG in Germany and other countries. Business Objects and theBusiness Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, WebIntelligence, Xcelsius, and other Business Objects products and services mentionedherein as well as their respective logos are trademarks or registered trademarksof Business Objects S.A. in the United States and in other countries. BusinessObjects is an SAP company.All other product and service names mentioned arethe trademarks of their respective companies. Data contained in this documentserves informational purposes only. National product specifications may vary.Thesematerials are subject to change without notice. These materials are provided bySAP AG and its affiliated companies ("SAP Group") for informational purposesonly, without representation or warranty of any kind, and SAP Group shall not beliable for errors or omissions with respect to the materials. The only warranties forSAP Group products and services are those that are set forth in the expresswarranty statements accompanying such products and services, if any. Nothingherein should be construed as constituting an additional warranty.2009-11-03IntroductionTutorial 1 will walk through how to create a basic horizontal slider componentin Adobe Flex Builder 3.Refer to the Xcelsius 2008 Component Developer SDK Guide in the Createa visual component section for the initial necessary steps for:• Creating a project.• Adding the Xcelsius 2008 Component Developer SDK framework.• Creating a component file.When an empty Flex project and the component file are created, the nextstep is to write the code for the component class file.This tutorial assumes that you have at least some knowledge of CascadingStyle Sheet (CSS), ActionScript 3.0, and MXML, the XML-based markuplanguage introduced by Adobe Flex.Task 1: Writing the component classdefinition in ActionScript1. When creating an ActionScript (AS) class using Flex wizard, there areoptions to include a super class and to specify that the wizard shouldautomatically generate the constructor. I specifically chose those optionsfor 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();}}}Tutorial 1 - Creating a basic horizontal slider 3Tutorial 1 - Creating a basic horizontal sliderIntroduction2. The slider then can be more sophisticated by adding a Label to it as asubclass with the property _titleText and a property _showTitle todisplay or hide the title. Don't forget to save the source files often.3. Add the following line before the component class definition in additionto import mx.controls.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 classconstructor: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 propertieswith default values. In this example, the default value for _titleTextis the string "Title". Variable _titlesChanged is the flag indicating whenthe Label's text changes.5. Implement get and set functions for each property of the componentBasicHorizontalSlider://----------------------------------// titleText Property//----------------------------------[Inspectable(defaultValue="Title",type="String")]public function get title():String{return _titleText;}public function set title(value:String):void{if (value == null) value ="";if (_titleText != value){_titlesChanged = true;_titleText = value;4 Tutorial 1 - Creating a basic horizontal sliderTutorial 1 - Creating a basic horizontal sliderTask 1: Writing the component class definition in ActionScriptinvalidateProperties();}}//----------------------------------// 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 fromthe super class since we are adding a new subclass Label and twoproperties.override protected function createChildren():void{super.createChildren();//Allow the user to make this componentvery smallthis.minWidth = 0;this.minHeight = 0;//set snapIntervalthis.snapInterval = 0.01;//Title_title = new Label();_title.setActualSize(152, 20);_title.y = _title.y - 20;_title.setStyle("textAlign", TextFormatAlign.LEFT);Tutorial 1 - Creating a basic horizontal slider 5Tutorial 1 - Creating a basic horizontal sliderTask 1: Writing the component class definition in ActionScript_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);}In createChildren(), using the addChild function is to add thesubclass Label to the HSlider instance. It is also possible to change anybuilt-in properties of the Label component before adding it to the parentcomponent.Function commitProperties() is where modifications to the componentproperties are coordinated. In this example, we change the text of thetitle Label to the current text and change the visibility of the
View Full Document
Unlocking...