Create a Blinking Label Add-On for SAP BusinessObj...

arijit_das · ‎01-22-2013

Here, I shall describe how to create a Blinking Label custom component for SAP BusinessObjects Dashboards 4.0 SP3 or higher.

Component Details

This is a custom Label component which can blink if a given condition is true. It is also possible to change the blinking frequency. We can set different text colors for blinking and non-blinking states.

The property sheet for this component has three tabs : General, Behavior and Appearance.

General

In this tab, we can mention the text of the label. We can either enter the value manually, or we can bind it to a cell in the excel model.

Behavior

In this section, we can set the blink condition and the dynamic visibility for the label.

The slider to set a Blink Interval is enabled only when we bind the blink Status to a cell in the excel model.

Appearance

In this tab, we can change various formatting options for the label text. Also, we can specify a different text color when the blink condition is true.

How to Create this add-on ?

To create this add-on, I have used Adobe Flash Builder 4.0.1 with Adobe Flex SDK 4.0.0 build 14159.

The steps are described below :

Create the component in Flash Builder.
Create the property sheet in Flash Builder.
Create the add-on file using Dashboards Add-On Packager.

Create the component

1. Create a new project selecting File > New > Flex Project.

2. Give the project name as BlinkingText. Under Flex SDK version, select Flex 4.0. Click Finish.

3. Select the new project. Go to Project > Properties.

4. Under Flex Compiler section, apply the following command in Additional compiler arguments:

-locale=en_US -isolate-styles=false

5. Expand the project. Right click on src folder and create new Package with name com.yahoo.ari007_cse. This is the package I have used. You can give your own package name, but then you have to modify the codes accordingly.

6. Right click on the new package and create a new Actionscript File with name BlinkingText.

7. Open the newly created actionscript file and paste the code below :

BlinkingText.as

/*

------------------------------------------------------------------

ActionScript file: BlinkingText.as

Author: Arijit Das

Date Created: Jan 17, 2013

------------------------------------------------------------------

*/

package com.yahoo.ari007_cse

{

import flash.events.Event;

import flash.events.TimerEvent;

import flash.utils.Timer;

import mx.containers.HBox;

import mx.controls.Label;

import mx.events.FlexEvent;

import mx.styles.CSSStyleDeclaration;

import mx.styles.StyleManager;

public class BlinkingText extends HBox{

/*

------------------------------------------------------------------

Properties

------------------------------------------------------------------

*/

private var _label:Label=new Label();

private var _timer:Timer=new Timer(1000,0);

private var _text:String="Label";

private var _textChanged:Boolean=true;

private var _timerInterval:uint=1000;

private var _timerIntervalChanged:Boolean=true;

private var _dynamicVisibility:Boolean=false;

private var _visibleStatus:String=null;

private var _visibleKey:String=null;

private var _visibleKeyChanged:Boolean=false;

private var _visibleStatusChanged:Boolean=true;

private var _blinkStatus:String=null;

private var _blinkStatusChanged:Boolean=true;

private var _blinkKey:String=null;

private var _blinkKeyChanged:Boolean=true;

private var _blinkFlag:Boolean=false;

private var _textColor:uint=0x000000;

private var _fontFamily:String="Verdana";

private var _fontFamilyChanged:Boolean=true;

private var _fontSize:int=10;

private var _fontSizeChanged:Boolean=true;

private var _fontWeight:String="normal";

private var _fontWeightChanged:Boolean=true;

private var _fontStyle:String="normal";

private var _fontStyleChanged:Boolean=true;

private var _textDecoration:String="none";

private var _textDecorationChanged:Boolean=true;

private var _textAlign:String="left";

private var _textAlignChanged:Boolean=true;

private var _blinkColor:uint=0xFF0000;

/*

------------------------------------------------------------------

Constructor

------------------------------------------------------------------

*/

public function BlinkingText():void{

super();

}

/*

------------------------------------------------------------------

Static Function to determine if the component is being

used at design time

------------------------------------------------------------------

*/

public static function isInCanvas():Boolean{

var globalStyle:CSSStyleDeclaration=StyleManager.getStyleManager(null).getStyleDeclaration("global");

if (Boolean(globalStyle.getStyle("inCanvas"))==true){

return true;

}

return false;

}

/*

------------------------------------------------------------------

Blink the Label

------------------------------------------------------------------

*/

public function toggleText(event:TimerEvent):void{

if(this._label.visible) this._label.visible=false;

else this._label.visible=true;

}

/*

------------------------------------------------------------------

When component is created, set visibility depending on

property values

------------------------------------------------------------------

*/

public function cretionCompleteHandler(event:Event):void{

if(!(_dynamicVisibility) || _visibleStatus==visibleKey || (_visibleStatus==null && visibleKey=="")){

this.visible=true;

}

else this.visible=false;

}

/*

------------------------------------------------------------------

labelText Property

------------------------------------------------------------------

*/

public function get labelText():String{

return _text;

}

public function set labelText(labelText:String):void{

_text=labelText;

_textChanged=true;

invalidateProperties();

}

/*

------------------------------------------------------------------

timerInterval Property

------------------------------------------------------------------

*/

public function get timerInterval():uint{

return _timerInterval;

}

public function set timerInterval(interval:uint):void{

_timerInterval=interval;

_timerIntervalChanged=true;

invalidateProperties();

}

/*

------------------------------------------------------------------

visibleKey Property

------------------------------------------------------------------

*/

public function set visibleKey(key:String):void{

_visibleKey=key;

_visibleKeyChanged=true;

invalidateProperties();

}

public function get visibleKey():String{

return _visibleKey;

}

/*

------------------------------------------------------------------

visibleStatus Property

------------------------------------------------------------------

*/

public function set visibleStatus(status:String):void{

_visibleStatus=status;

_visibleStatusChanged=true;

invalidateProperties();

}

public function get visibleStatus():String{

return _visibleStatus;

}

/*

------------------------------------------------------------------

dynamicVisibility Property

------------------------------------------------------------------

*/

public function set dynamicVisibility(flag:Boolean):void{

_dynamicVisibility=flag;

}

public function get dynamicVisibility():Boolean{

return _dynamicVisibility;

}

/*

------------------------------------------------------------------

blinkKey Property

------------------------------------------------------------------

*/

public function set blinkKey(key:String):void{

_blinkKey=key;

_blinkKeyChanged=true;

invalidateProperties();

}

public function get blinkKey():String{

return _blinkKey;

}

/*

------------------------------------------------------------------

blinkStatus Property

------------------------------------------------------------------

*/

public function set blinkStatus(status:String):void{

_blinkStatus=status;

_blinkStatusChanged=true;

invalidateProperties();

}

public function get blinkStatus():String{

return _blinkStatus;

}

/*

------------------------------------------------------------------

blink Property

------------------------------------------------------------------

*/

public function set blink(flag:Boolean):void{

_blinkFlag=flag;

}

public function get blink():Boolean{

return _blinkFlag;

}

/*

------------------------------------------------------------------

textColor Property

------------------------------------------------------------------

*/

public function set textColor(color:uint):void{

_textColor=color;

}

public function get textColor():uint{

return _textColor;

}

/*

------------------------------------------------------------------

blinkColor Property

------------------------------------------------------------------

*/

public function set blinkColor(bcolor:uint):void{

_blinkColor=bcolor;

}

public function get blinkColor():uint{

return _blinkColor;

}

/*

------------------------------------------------------------------

fontFamily Property

------------------------------------------------------------------

*/

public function set fontFamily(font:String):void{

_fontFamily=font;

_fontFamilyChanged=true;

invalidateProperties();

}

public function get fontFamily():String{

return _fontFamily;

}

/*

------------------------------------------------------------------

fontSize Property

------------------------------------------------------------------

*/

public function set fontSize(size:int):void{

_fontSize=size;

_fontSizeChanged=true;

invalidateProperties();

}

public function get fontSize():int{

return _fontSize;

}

/*

------------------------------------------------------------------

fontWeight Property

------------------------------------------------------------------

*/

public function set fontWeight(weight:String):void{

_fontWeight=weight;

_fontWeightChanged=true;

invalidateProperties();

}

public function get fontWeight():String{

return _fontWeight;

}

/*

------------------------------------------------------------------

fontStyle Property

------------------------------------------------------------------

*/

public function set fontStyle(style:String):void{

_fontStyle=style;

_fontStyleChanged=true;

invalidateProperties();

}

public function get fontStyle():String{

return _fontStyle;

}

/*

------------------------------------------------------------------

textDecoration Property

------------------------------------------------------------------

*/

public function set textDecoration(decor:String):void{

_textDecoration=decor;

_textDecorationChanged=true;

invalidateProperties();

}

public function get textDecoration():String{

return _textDecoration;

}

/*

------------------------------------------------------------------

textAlign Property

------------------------------------------------------------------

*/

public function set textAlign(align:String):void{

_textAlign=align;

_textAlignChanged=true;

invalidateProperties();

}

public function get textAlign():String{

return _textAlign;

}

/*

------------------------------------------------------------------

Build composite component

------------------------------------------------------------------

*/

override protected function createChildren():void{

super.createChildren();

this._label.text="Label";

this.addChild(_label);

this._timer=new Timer(1000,0);

this._timer.addEventListener(TimerEvent.TIMER,toggleText);

this.minWidth=10;

this.minHeight=10;

this.addEventListener(FlexEvent.CREATION_COMPLETE,cretionCompleteHandler);

}

/*

------------------------------------------------------------------

Action taken after change in any property

------------------------------------------------------------------

*/

override protected function commitProperties():void{

super.commitProperties();

/*

-------------------------------------------------------------------

Check whether to update the label text

-------------------------------------------------------------------

*/

if (this._textChanged)

{

this._label.text=_text;

invalidateDisplayList();

_textChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to update the blink frequency

-------------------------------------------------------------------

*/

if (this._timerIntervalChanged)

{

this._timer.delay=_timerInterval;

invalidateDisplayList();

_timerIntervalChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to show/hide the component

-------------------------------------------------------------------

*/

if(this._visibleKeyChanged || this._visibleStatusChanged){

if(!isInCanvas()){

if(!(_dynamicVisibility) || _visibleStatus==_visibleKey || (_visibleStatus==null && _visibleKey=="")){

this.visible=true;

}

else this.visible=false;

invalidateDisplayList();

}

_visibleKeyChanged=false;

_visibleStatusChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to start/stop blinking the component

-------------------------------------------------------------------

*/

if(this._blinkKeyChanged || this._blinkStatusChanged){

if(_blinkFlag && ((_blinkStatus==_blinkKey) || (_blinkStatus==null && _blinkKey==""))){

this._timer.reset();

this._label.setStyle("color",_blinkColor);

this._timer.start();

}

else{

this._timer.reset();

this._label.visible=true;

this._label.setStyle("color",_textColor);

}

invalidateDisplayList();

_blinkKeyChanged=false;

_blinkStatusChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to update the label font

-------------------------------------------------------------------

*/

if (this._fontFamilyChanged)

{

this._label.setStyle("fontFamily",_fontFamily);

invalidateDisplayList();

_fontFamilyChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to update the font size

-------------------------------------------------------------------

*/

if (this._fontSizeChanged)

{

this._label.setStyle("fontSize",_fontSize);

invalidateDisplayList();

_fontSizeChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to update the font weight

-------------------------------------------------------------------

*/

if (this._fontWeightChanged)

{

this._label.setStyle("fontWeight",_fontWeight);

invalidateDisplayList();

_fontWeightChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to update the font style

-------------------------------------------------------------------

*/

if (this._fontStyleChanged)

{

this._label.setStyle("fontStyle",_fontStyle);

invalidateDisplayList();

_fontStyleChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to update the text decoration

-------------------------------------------------------------------

*/

if (this._textDecorationChanged)

{

this._label.setStyle("textDecoration",_textDecoration);

invalidateDisplayList();

_textDecorationChanged=false;

}

/*

-------------------------------------------------------------------

Check whether to update the text alignment

-------------------------------------------------------------------

*/

if (this._textAlignChanged)

{

this.setStyle("horizontalAlign",_textAlign);

invalidateDisplayList();

_textAlignChanged=false;

}

8. Open BlinkingText.mxml file under the default package and paste the code below :

BlinkingText.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:ns="com.yahoo.ari007_cse.*">

<ns:BlinkingText height="100%" width="100%"/>

</s:Application>

9. Save the files and click on Export Release Build button. The same can also be done from File > Export > Release Build.

10. In the next screen, click Finish.

Create the property sheet

1. Create a new Flex Project as earlier with name BlinkingTextPropertySheet.

2. Go to project properties. Under Flex Build path, click on Add SWC... and browse to the file xcelsiusframework.swc located in <Dashboards_Installation_Dir>\Xcelsius 4.0\SDK\bin.

3. Under Flex Compiler section, apply the following command in Additional compiler arguments:

-locale=en_US -isolate-styles=false

4. Under src folder, create a new folder and name it resources. Locate the image file bind to cell.png in the location <Dashboards_Installation_Dir>\Xcelsius 4.0\SDK\samples\CustomPropSheetHorizontalSlider\CustomPropSheetHorizontalSliderPropertySheet\src\resources and copy it inside newly created resources folder.

5. Open the file BlinkingTextPropertySheet.mxml under default package and paste the code below :

BlinkingTextPropertySheet.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--

File Name: BlinkingTextPropertySheet.mxml

Author: Arijit Das

Date Created: Jan 17, 2013

-->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

applicationComplete="init();" backgroundColor="#F7F9FC" backgroundAlpha="1.0" preloaderChromeColor="#FEFEFF">

<mx:Script>

<![CDATA[

import mx.containers.*;

import mx.controls.*;

import mx.core.Container;

import mx.events.FlexEvent;

import xcelsius.binding.BindingDirection;

import xcelsius.binding.tableMaps.input.InputBindings;

import xcelsius.binding.tableMaps.output.OutputBindings;

import xcelsius.propertySheets.impl.PropertySheetExternalProxy;

import xcelsius.propertySheets.interfaces.IPropertySheetProxy;

import xcelsius.propertySheets.interfaces.PropertySheetFunctionNamesSDK;

/*

-----------------------------------------------------------------------------

The Xcelsius proxy between this Property Sheet and its Xcelsius

custom component.

-----------------------------------------------------------------------------

*/

protected var proxy:IPropertySheetProxy = new PropertySheetExternalProxy();

/*

-----------------------------------------------------------------------------

The name of the property that the user is (re-)binding.

-----------------------------------------------------------------------------

*/

protected var propertyToBind:String;

/*

-----------------------------------------------------------------------------

The current binding id (may be null if there is no binding) for

the property the user is (re)-binding.

-----------------------------------------------------------------------------

*/

protected var currentBindingID:String;

/*

-----------------------------------------------------------------------------

The system fonts that the user can choose from.

-----------------------------------------------------------------------------

*/

[Bindable]

private var _fontNames:Array = [];

/*

-----------------------------------------------------------------------------

The list of selectable font sizes.

-----------------------------------------------------------------------------

*/

[Bindable]

protected var _fontSizes:Array = new Array("8", "9", "10", "11", "12", "14", "16", "18", "20", "22");

/*

-----------------------------------------------------------------------------

Initialises this Property Sheet on load.

-----------------------------------------------------------------------------

*/

protected function init():void

{

proxy.addCallback(PropertySheetFunctionNamesSDK.GET_PROPERTIES_FUNCTION, getProperties);

proxy.addCallback(PropertySheetFunctionNamesSDK.RESPONSE_BINDING_ID, this.continueBind);

proxy.callContainer(PropertySheetFunctionNamesSDK.INIT_COMPLETE_FUNCTION);

// Fill-in the list of system fonts.

var allFonts:Array = Font.enumerateFonts(true);

// retrieve the list of fonts on the current machine

allFonts.sortOn("fontName", Array.CASEINSENSITIVE);

var numFonts:int = allFonts.length;

for (var i:int=0; i<numFonts; i++)

{

var font:Font = allFonts[i];

// copy fonts into dataProvider for ComboBox

_fontNames.push(font.fontName);

}

loadProperties();

initValues();

}

protected function getProperties():Array

{

var persist:Array = new Array();

var persistObject:Object = new Object();

persistObject.name = "selectedTab";

persistObject.value = viewstack1.selectedIndex;

persist.push(persistObject);

return persist;

}

/*

-----------------------------------------------------------------------------

Load the selected tab

-----------------------------------------------------------------------------

*/

protected function loadProperties():void

{

var persistProperties:Array = proxy.getPersist(["selectedTab"]);

if (persistProperties != null && persistProperties.length != 0)

{

var propertyObject:Object = persistProperties[0];

var propertyValue:* = propertyObject.value;

viewstack1.selectedIndex = propertyValue as int;

}

/*

-----------------------------------------------------------------------------

Initialises this Property Sheet on load to show the current

Xcelsius custom component property/style value

-----------------------------------------------------------------------------

*/

protected function initValues():void

{

var propertyValues:Array = proxy.getProperties([

"labelText",

"timerInterval",

"visibleKey",

"visibleStatus",

"blinkKey",

"blinkStatus",

"textColor",

"blinkColor",

"fontFamily",

"fontSize",

"fontWeight",

"fontStyle",

"textDecoration",

"textAlign"

]);

var propertyValuesLength:int = (propertyValues != null ? propertyValues.length : 0);

for (var i:int=0; i < propertyValuesLength; i++)

{

var propertyObject:Object = propertyValues[i];

var propertyName:String = propertyObject.name;

var propertyValue:* = propertyObject.value;

var bindingText:String = "";

switch (propertyName)

{

case "labelText":

bindingText = getPropertyBindDisplayName(propertyName);

if (bindingText != null){

textEditor.text = bindingText;

}

else textEditor.text = propertyValue;

break;

case "timerInterval":

blinkinterval.value=propertyValue;

break;

case "visibleStatus":

bindingText = getPropertyBindDisplayName(propertyName);

if (bindingText != null){

statustext.text = bindingText;

visiblelabel.enabled=true;

keylabel.enabled=true;

keytext.enabled=true;

keybind.enabled=true;

}

else {

visiblelabel.enabled=false;

keylabel.enabled=false;

keytext.enabled=false;

keybind.enabled=false;

}

break;

case "visibleKey":

bindingText = getPropertyBindDisplayName(propertyName);

if (bindingText != null){

keytext.text = bindingText;

}

else keytext.text = propertyValue;

break;

case "blinkStatus":

bindingText = getPropertyBindDisplayName(propertyName);

if (bindingText != null){

blinkstatustext.text = bindingText;

blinkconditionlabel.enabled=true;

blinkkeylabel.enabled=true;

blinkkeytext.enabled=true;

blinkkeybind.enabled=true;

blinkintervallabel.enabled=true;

blinkinterval.enabled=true;

}

else {

blinkconditionlabel.enabled=false;

blinkkeylabel.enabled=false;

blinkkeytext.enabled=false;

blinkkeybind.enabled=false;

blinkintervallabel.enabled=false;

blinkinterval.enabled=false;

}

break;

case "blinkKey":

bindingText = getPropertyBindDisplayName(propertyName);

if (bindingText != null){

blinkkeytext.text = bindingText;

}

else blinkkeytext.text = propertyValue;

break;

case "textColor":

color.selectedColor=propertyValue;

break;

case "blinkColor":

blinkcolor.selectedColor=propertyValue;

break;

case "fontFamily":

fontfamily.selectedIndex=_fontNames.indexOf(propertyValue);

break;

case "fontSize":

fontsize.selectedIndex=_fontSizes.indexOf(String(propertyValue));

break;

case "fontWeight":

bold.selected=(propertyValue=="bold");

break;

case "fontStyle":

italic.selected=(propertyValue=="italic");

break;

case "textDecoration":

underline.selected=(propertyValue=="underline");

break;

case "textAlign":

if(propertyValue=="left")left.selected=true;

else if(propertyValue=="right")right.selected=true;

else center.selected=true;

break;

default:

break;

}

/*

-----------------------------------------------------------------------------

Returns the bind display name or null if not bound

-----------------------------------------------------------------------------

*/

protected function getPropertyBindDisplayName(propertyName:String):String

{

// Get the array of bindings for this property.

var propertyBindings:Array = proxy.getBindings([propertyName]);

if ((propertyBindings != null) && (propertyBindings.length > 0) && (propertyBindings[0].length > 0))

{

// We have at least one binding for this property so pick the 1st one.

// Note: [0][0] is 1st property in the array, then 1st binding for that property.

var bindingID:String = propertyBindings[0][0];

return proxy.getBindingDisplayName(bindingID);

}

return null;

}

/*

-----------------------------------------------------------------------------

Allows the user to select the Excel spreadsheet cell to bind to

an Xcelsius custom component property

-----------------------------------------------------------------------------

*/

protected function initiateBind(propertyName:String):void

{

// If there is an existing binding for this property show

// that in the Excel binding selection window.

// Store the currentBindingID (null if there is no current

// binding), we need this when we "continueBinding".

currentBindingID = null;

var propertyBindings:Array = proxy.getBindings([propertyName]);

if ((propertyBindings != null) && (propertyBindings.length > 0))

{

// Use the 1st binding address for the property.

currentBindingID = propertyBindings[0];

}

// Store the name of the property that we are binding,

// we need this when we "continueBinding".

propertyToBind = propertyName;

// Let the user choose where to bind to in the Excel spreadsheet.

proxy.requestUserSelection(currentBindingID);

}

/*

-----------------------------------------------------------------------------

Completes the binding when the user has finished selecting the

cell to bind to or cleared the binding

-----------------------------------------------------------------------------

*/

protected function continueBind(bindingID:String):void

{

// Define common variables here.

var propertyName:String = propertyToBind;

var propertyValues:Array;

var propertyObject:Object;

var bindingAddresses:Array;

// Clear any existing bindings - so we can re-bind.

if (currentBindingID != null)

{

proxy.unbind(currentBindingID);

currentBindingID = null;

}

// Process the property binding.

switch (propertyName)

{

case "labelText":

if ((bindingID == null) || (bindingID == "")){

propertyValues = proxy.getProperties([propertyName]);

propertyObject = propertyValues[0];

textEditor.text = String(propertyObject.value);

proxy.setProperty(propertyName, propertyObject.value);

return;

}

textEditor.text = proxy.getBindingDisplayName(bindingID);

proxy.bind("labelText", null, bindingID, BindingDirection.OUTPUT, "", OutputBindings.SINGLETON);

break;

case "visibleStatus":

if ((bindingID == null) || (bindingID == "")){

statustext.text = null;

proxy.setProperty(propertyName, null);

proxy.setProperty("dynamicVisibility", false);

visiblelabel.enabled=false;

keylabel.enabled=false;

keytext.enabled=false;

keybind.enabled=false;

return;

}

statustext.text = proxy.getBindingDisplayName(bindingID);

if(statustext.text!=null){

visiblelabel.enabled=true;

keylabel.enabled=true;

keytext.enabled=true;

keybind.enabled=true;

}

else{

visiblelabel.enabled=false;

keylabel.enabled=false;

keytext.enabled=false;

keybind.enabled=false;

}

proxy.bind("visibleStatus", null, bindingID, BindingDirection.OUTPUT, "", OutputBindings.SINGLETON);

proxy.setProperty("dynamicVisibility", true);

break;

case "visibleKey":

if ((bindingID == null) || (bindingID == "")){

keytext.text = null;

proxy.setProperty(propertyName, null);

return;

}

keytext.text = proxy.getBindingDisplayName(bindingID);

proxy.bind("visibleKey", null, bindingID, BindingDirection.OUTPUT, "", OutputBindings.SINGLETON);

break;

case "blinkStatus":

if ((bindingID == null) || (bindingID == "")){

blinkstatustext.text = null;

proxy.setProperty(propertyName, null);

proxy.setProperty("blink", false);

blinkconditionlabel.enabled=false;

blinkkeylabel.enabled=false;

blinkkeytext.enabled=false;

blinkkeybind.enabled=false;

blinkintervallabel.enabled=false;

blinkinterval.enabled=false;

return;

}

blinkstatustext.text = proxy.getBindingDisplayName(bindingID);

if(blinkstatustext.text!=null){

blinkconditionlabel.enabled=true;

blinkkeylabel.enabled=true;

blinkkeytext.enabled=true;

blinkkeybind.enabled=true;

blinkintervallabel.enabled=true;

blinkinterval.enabled=true;

}

else{

blinkconditionlabel.enabled=false;

blinkkeylabel.enabled=false;

blinkkeytext.enabled=false;

blinkkeybind.enabled=false;

blinkintervallabel.enabled=false;

blinkinterval.enabled=false;

}

proxy.bind("blinkStatus", null, bindingID, BindingDirection.OUTPUT, "", OutputBindings.SINGLETON);

proxy.setProperty("blink", true);

break;

case "blinkKey":

if ((bindingID == null) || (bindingID == "")){

blinkkeytext.text = null;

proxy.setProperty(propertyName, null);

return;

}

blinkkeytext.text = proxy.getBindingDisplayName(bindingID);

proxy.bind("blinkKey", null, bindingID, BindingDirection.OUTPUT, "", OutputBindings.SINGLETON);

break;

default:

break;

}

]]>

</mx:Script>

<mx:ViewStack id="viewstack1" creationPolicy="all" left="0" right="0" y="51" height="100%" minWidth="268" minHeight="350">

<mx:Canvas id="general" label="General" minWidth="268" minHeight="350" width="100%" height="100%">

<!--

~~~~~~~~~~~~Label Text section~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-->

<mx:Label y="8" text="Text" width="40" left="23" fontWeight="bold"/>

<mx:HRule y="17" right="56" left="55"/>

<mx:TextInput id="textEditor" y="36" right="83" left="35"

change="{

proxy.setProperty('labelText',textEditor.text);

var propertyBindings:Array = proxy.getBindings(['labelText']);

var bId:String=propertyBindings[0];

proxy.unbind(bId);

}"/>

<mx:Button y="35" right="56" width="24"

click="initiateBind('labelText');"

icon="@Embed('resources/bind to cell.png')" height="24"/>

</mx:Canvas>

<mx:Canvas id="behavior" label="Behavior" minWidth="268" minHeight="350" width="100%" height="100%">

<!--

~~~~~~~~~~~~Blinking Condition section~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-->

<mx:Label y="8" text="Blink" width="119" left="23" fontWeight="bold"/>

<mx:HRule y="17" right="56" left="55"/>

<mx:Label y="35" text="Blink component only if status matches key:"

width="297" id="blinkconditionlabel" enabled="false" left="50"/>

<mx:Label x="69" y="64" text="Status:"/>

<mx:TextInput id="blinkstatustext" x="126" y="64" width="77" enabled="false" change="{

proxy.setProperty('blinkStatus',blinkstatustext.text);

if(blinkstatustext.text!=null){

blinkconditionlabel.enabled=true;

blinkkeylabel.enabled=true;

blinkkeytext.enabled=true;

blinkkeybind.enabled=true;

blinkintervallabel.enabled=true;

blinkinterval.enabled=true;

}

else{

blinkconditionlabel.enabled=false;

blinkkeylabel.enabled=false;

blinkkeytext.enabled=false;

blinkkeybind.enabled=false;

blinkintervallabel.enabled=false;

blinkinterval.enabled=false;

}

}"/>

<mx:Button id="blinkstatusbind" y="63" width="24"

click="initiateBind('blinkStatus');"

icon="@Embed('resources/bind to cell.png')" x="206" height="22"/>

<mx:Label id="blinkkeylabel" enabled="false" x="69" y="94" text="Key:"/>

<mx:TextInput id="blinkkeytext" x="126" y="94" width="77" enabled="false" change="{

proxy.setProperty('blinkKey',blinkkeytext.text);

var propertyBindings:Array = proxy.getBindings(['blinkKey']);

var bId:String=propertyBindings[0];

proxy.unbind(bId);

}"/>

<mx:Button id="blinkkeybind" enabled="false" y="94" width="24"

click="initiateBind('blinkKey');"

icon="@Embed('resources/bind to cell.png')" x="206"/>

<!--

~~~~~~~~~~~~Blinking Frequency section~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-->

<mx:Label y="137" text="Blink Interval (in ms)"

width="229" left="50" id="blinkintervallabel" enabled="false"/>

<mx:HSlider y="164" left="50" right="83" id="blinkinterval" enabled="false"

labels="[500,1000,1500,2000]" tickInterval="100" snapInterval="50"

value="1000" maximum="2000" minimum="500" showDataTip="true"

change="{

proxy.setProperty('timerInterval',blinkinterval.value);

}" />

<!--

~~~~~~~~~~~~Dynamic Visibility section~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-->

<mx:Label y="234" text="Dynamic Visibility" width="145" left="23" fontWeight="bold"/>

<mx:HRule y="243" right="56" left="128"/>

<mx:Label y="261" text="Show component only if status matches key:"

width="290" id="visiblelabel" enabled="false" left="50"/>

<mx:Label x="69" y="290" text="Status:"/>

<mx:TextInput id="statustext" x="126" y="290" width="77" enabled="false" change="{

proxy.setProperty('visibleStatus',statustext.text);

if(statustext.text!=null){

visiblelabel.enabled=true;

keylabel.enabled=true;

keytext.enabled=true;

keybind.enabled=true;

}

else{

visiblelabel.enabled=false;

keylabel.enabled=false;

keytext.enabled=false;

keybind.enabled=false;

}

}"/>

<mx:Button id="statusbind" y="290" width="24"

click="initiateBind('visibleStatus');"

icon="@Embed('resources/bind to cell.png')" x="206"/>

<mx:Label id="keylabel" enabled="false" x="69" y="320" text="Key:"/>

<mx:TextInput id="keytext" x="126" y="320" width="77" enabled="false" change="{

proxy.setProperty('visibleKey',keytext.text);

var propertyBindings:Array = proxy.getBindings(['visibleKey']);

var bId:String=propertyBindings[0];

proxy.unbind(bId);

}"/>

<mx:Button id="keybind" enabled="false" y="320" width="24"

click="initiateBind('visibleKey');"

icon="@Embed('resources/bind to cell.png')" x="206" height="23"/>

</mx:Canvas>

<mx:Canvas label="Appearance" width="100%" height="100%">

<!--

~~~~~~~~~~~~Text Formating section~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-->

<mx:Label y="10" text="Format Selected Text" left="23" fontWeight="bold"/>

<mx:HRule y="18" left="148" right="56"/>

<mx:ComboBox id="fontfamily" dataProvider="{_fontNames}" y="37" width="247" left="50" change="{

proxy.setProperty('fontFamily',fontfamily.selectedLabel);

}"/>

<mx:ComboBox id="fontsize" dataProvider="{_fontSizes}" x="317" y="37" width="72" change="{

proxy.setProperty('fontSize',int(fontsize.value));

}"/>

<mx:Button id="bold" y="77" label="B" width="25" left="50" toggle="true" change="{

proxy.setProperty('fontWeight',(bold.selected ? 'bold' : 'normal'));

}"/>

<mx:Button id="italic" x="83" y="77" label="I" width="25" fontStyle="italic" toggle="true" change="{

proxy.setProperty('fontStyle',(italic.selected ? 'italic' : 'normal'));

}"/>

<mx:Button id="underline" x="116" y="77" label="U" width="25" textDecoration="underline" toggle="true" change="{

proxy.setProperty('textDecoration',(underline.selected ? 'underline' : 'none'));

}"/>

<mx:RadioButtonGroup id="textalign"/>

<mx:RadioButton id="left" x="170" y="81" label="Left" groupName="textalign" selected="true" change="{

if(left.selected)proxy.setProperty('textAlign','left');

}"/>

<mx:RadioButton id="center" x="222" y="81" label="Center" groupName="textalign" change="{

if(center.selected)proxy.setProperty('textAlign','center');

}"/>

<mx:RadioButton id="right" x="287" y="81" label="Right" groupName="textalign" change="{

if(right.selected)proxy.setProperty('textAlign','right');

}"/>

<mx:ColorPicker id="color" x="367" y="77" change="{

proxy.setProperty('textColor',color.selectedColor);

}"/>

<mx:Label y="120" text="Blink Color" left="50"/>

<mx:ColorPicker id="blinkcolor" x="119" y="117" color="0xFF0000" change="{

proxy.setProperty('blinkColor',blinkcolor.selectedColor);

}"/>

</mx:Canvas>

</mx:ViewStack>

<mx:TabBar x="0" y="0" dataProvider="viewstack1" height="51" width="295" fontWeight="bold" chromeColor="#1977CE" color="#FFFFFF">

</mx:TabBar>

</mx:Application>

6. Save the file and click on File > Export > Release Build. Click Finish in the next screen.

Package and test

We have already created the component and the property sheet. Now, this is our final step to create the add-on file.

1. Launch Dashboards Add-On Packager.

2. Give the name as BlinkingText.

3. Under Visual Components, Click Add Component.

4. Under Class Name, provide com.yahoo.ari007_cse.BlinkingText. Give the Display Name as BlinkingText. Browse Component SWF from <BlinkingText_Project_Location>\bin-release\BlinkingText.swf. Browse Property Sheet SWF from <BlinkingTextPropertySheet_Project_Location>\bin-release\BlinkingText.swf. Select a Category. The add-on will be available under this specified category in Dashboards Designer. Optionally, you can specify icons and version of the add-on.

** To find the project location, go to the project properties and under resource section, you can find the location.

5. Go to Build tab and Click Build Package button. Save the add-on as BlinkingText.xlx.

6. We have successfully created the add-on. Now it is time to test this in Dashboards.

Install the add-on from File > Manage Add-Ons... option in dashboards Designer. Find the newly installed component under the category we selected during packaging the add-on and drag it into the canvas. Now test the features and enjoy :smile: .