In my previous blog (click here (The power of Flex in dashboarding (Xcelsius 2008)-Part 1)), I explained about Flex and its use in dashboarding. Here I am going to present you with an example of creating a check box component using Xcelsius 2008 SDK. Before starting with the development, please make sure that you have Flex Builder 3 (with Flex 2.0.1 SDK) and Xcelsius SDK installed in your system. Below are the properties and style that I am going to create for the check box. All the properties will be displayed in the General tab of the properties sheet. The Appearance tab will hold the style settings. Label Text (property): The label that needs to be shown for the check box. Default Value (property): The value that needs to be assigned as an initialization for the check box (e.g.: Checked or unchecked). Destination (property): The spreadsheet cell to which the selected value of the check box should be written. Color (style): The color that needs to be displayed for label text. h3. *Component creation* 1) *Action Script file:* Use the code snippet provided below for creating the Action Script file *CheckBx.as* package com.businessobjects.xcelsius.sdn.blog { import flash.text.TextFormatAlign; import mx.controls.CheckBox; import mx.styles.CSSStyleDeclaration; import mx.styles.StyleManager; import mx.controls.Label; import mx.binding.utils.ChangeWatcher; [Style (name="colors", type="uint", format="Color")] public class CheckBx extends CheckBox { private var _dfltValue:int=1; private var _label:String=""; private var _select:int=0; private var _labelChanged:Boolean=true; private var _dfltValueChanged:Boolean=true; private var _colorsChanged:Boolean=true; private static var classConstructed:Boolean = classConstruct(); // Method for creating the default style sheet private static function classConstruct():Boolean { var styleDeclaration:CSSStyleDeclaration = StyleManager.getStyleDeclaration("CustomPropSheetCheckBox"); // If there is no CSS definition for Checkbox // then create one and set default values if (!styleDeclaration){ styleDeclaration = new CSSStyleDeclaration(); styleDeclaration.setStyle("colors", 0xFF0000); StyleManager.setStyleDeclaration("CustomPropSheetCheckBox", styleDeclaration, true); } return true; } /** * Constructor. */ public function CheckBx() { super(); } /*setter and getter for selected property*/ (Bindable) public function set select(value:int):void { if (_select != value) { _select = value; invalidateProperties(); } } public function get select():int { return _select; } /*setter and getter for defaultValue property*/ (Bindable) [Inspectable(type="int")] public function set dfltValue(value:int):void { if (_dfltValue != value) { _dfltValue = value; _dfltValueChanged=true; invalidateProperties(); } } public function get dfltValue():int { return _dfltValue; } /*setter and getter for label text property*/ (Bindable) [Inspectable(defaultValue="Title", type="String")] public function get labelt():String { return _label; } public function set labelt(v:String):void { if (_label != v) { _label= v; _labelChanged = true; invalidateProperties(); } } /* Override the createChildren function of the super class to set the default styles for Check box and to define the event for selected property*/ override protected function createChildren():void { super.createChildren(); this.setStyle( "fillColors" ,[0x0000cc, 0xcccccc, 0xffffff, 0xeeeeee]); this.setStyle("borderColor", 0x0000cc); ChangeWatcher.watch(this, "selected", vBoxSelectedIndexChangeHandler, false); } /* This function will be called each time, when the user changes the selected property*/ private function vBoxSelectedIndexChangeHandler(event:Event):void { if (this.selected!=true){ this.select=0; } else{ this.select=1; } } /* Override this function to commit the properties that are passed from the property sheet*/ override protected function commitProperties():void { super.commitProperties(); if (this._labelChanged){ this.label = _label; invalidateDisplayList(); this._labelChanged = false; } if (this._dfltValueChanged){ if (this._dfltValue!=1) { this.selected = true; } else{ this.selected = false; } invalidateDisplayList(); this._dfltValueChanged = false; } } /* Override this function to notify the style change(color) */ override public function styleChanged(styleProp:String):void{ super.styleChanged(styleProp); if (styleProp == "colors"){ _colorsChanged = true; invalidateDisplayList(); return; } } /* Override this function to update the style(color)*/ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ super.updateDisplayList(unscaledWidth, unscaledHeight); if (_colorsChanged == true){ this.setStyle("color", getStyle("colors")); _colorsChanged = false; } invalidateDisplayList(); } } } 2) *MXML file:* Use the below code snippet to create the MXML file. *CheckBx.mxml*3) *Compilation:* Compile using Flex 2.0.1 SDK to get the SWF file. * * h3. *Property sheet creation* 1) *MXML file:* Use the code snippet provided below to create the MXML file. *Testprop.mxml* 2) *CSS file:* Use the code snippet provided below to create the CSS file. *Stylesheet.css* Panel {borderColor} ComboBox {borderColor} TextInput {borderColor} 3) *Compilation:* Compile using Flex Builder 3 to get the SWF file. * * h3. *Xcelsius Add-On Manager* Use the release version of SWF files for XLX creation. Below is the screen shot showing the parameter information for creating an XLX file. 
*Defining parameters for component creation* After compilation, XLX file will be created and can be further included as an add-on component in Xcelsius. 
*Build the XLX file* 
*Adding component in Xcelsius-Step 1* 
*Adding component in Xcelsius-Step 2* The installed component will be appearing under the respective category defined. See the screen shot below. 
*Component placed under respective category* Below image shows the component after adding it to the Xcelsius designer. 
*Component displayed in Xcelsius designer* Finally, test the component data flow using an +input text+ control. You can do this by binding the +Destination+ of the +check box+ and +input text+ to the same cell. 
*Defining parameters for component creation* After compilation, XLX file will be created and can be further included as an add-on component in Xcelsius. *Build the XLX file* *Adding component in Xcelsius-Step 1* *Adding component in Xcelsius-Step 2* The installed component will be appearing under the respective category defined. See the screen shot below. *Component placed under respective category* Below image shows the component after adding it to the Xcelsius designer. *Component displayed in Xcelsius designer* Finally, test the component data flow using an +input text+ control. You can do this by binding the +Destination+ of the +check box+ and +input text+ to the same cell. 
