Tutorial 2 - Styling a basic horizontal sliderIntroductionTask 1: Creating custom properties and stylesTask 2: Implementing a static initializerTask 3: Overriding styleChanged and updateDisplayList functionsTutorial 2 - Styling 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-03IntroductionThis 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.In tutorial 1, you created a basic horizontal slider using a Flex out-of-the-boxcomponent. With it, you can add styles and expose them through the propertysheet in Xcelsius for the users to modify. Please have a basic horizontalslider 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 getStyleare used instead. Second, you will need to override styleChanged andupdateDisplayList functions to detect changes to the styles andincorporate the new style into the component display. Finally, to include adefault 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 arementioned: "Show Track Highlight", "Data Tip Placement", "Title Font Color","Title Font Family", and "Title Font Size". Please refer to the source code forthe rest of the styles.Note: if you want to create a custom style that is an array of colors, the bestway is to create a custom property sheet to handle it. The default propertysheet currently does not support styles that are of array type.Create a basic Flex project and add a new AS component class. I namedthe class BasicHorizontalSliderwithStyling. Repeat the steps inTutorial 1 to create another basic horizontal slider.Task 1: Creating custom properties andstyles1. Add the following code above the class definition to define the styles withnames, types and other information:[Style (name="dataTipPlacement", defaultValue="top", enumeration="top,left,right,bottom")][Style (name="showTrackHighlight", defaultValTutorial 2 - Styling a basic horizontal slider 3Tutorial 2 - Styling a basic horizontal sliderIntroductionue="false", type="Boolean")][Style (name="titleFontColor", defaultValue="0x0000FF", type="uint", format="Color")][Style (name="titleFontFamily", defaultValue="Verdana", type="String", format="fontFamily")][Style (name="titleFontSize", defaultValue="11",type="Number")]2. For each style that is not of type Boolean, a variable is added to signalwhen the style changes:private var _showTicks:Boolean = true;private var _titleFontsChanged:Boolean=true;private var _titleFontSizesChanged:Boolean=true;private var _titleFontColorsChanged:Boolean=true;private var _dataTipPlacementsChanged:Boolean=true;Task 2: Implementing a static initializer1. Add the following line before the component class definition to import theStyleManager:Import mx.styles.StyleManager;2. Implement a static initializer in the component class to set default valuesfor the new styles that are defined:// A static variableprivate static var classConstructed:Boolean =classConstruct();// A static methodprivate static function classConstruct():Boolean{var styleDeclaration:CSSStyleDeclaration= StyleManager.getStyleDeclaration("BasicHorizontalSliderwithStyling");// If there is no CSS definition for BasicHorizontalSlidewithStyling// then create one and set default valuesif (!styleDeclaration){4 Tutorial 2 - Styling a basic horizontal sliderTutorial 2 - Styling a basic horizontal sliderTask 2: Implementing a static initializerstyleDeclaration = 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;}Task 3: Overriding styleChanged andupdateDisplayList functions1. Copy the following code and paste inside of the component classdefinition:override public functionstyleChanged(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();}Tutorial 2 - Styling a basic horizontal slider 5Tutorial 2 - Styling a basic horizontal sliderTask 3: Overriding styleChanged and updateDisplayList functionsif (allStyles || styleProp == "titleFontFamily"){_titleFontsChanged = true;invalidateDisplayList();}if (allStyles || styleProp == "titleFontSize"){_titleFontSizesChanged = true;invalidateDisplayList();}}2. Copy the following code and paste below styleChanged functiondefinition:override protected function updateDisplayList(unscaledWidth:Number,
View Full Document
Unlocking...