Tutorial 1 - Creating a basic

horizontal slider
Copyright © 2009 SAP AG. All rights reserved.SAP, R/3, SAP NetWeaver, Duet, PartnerEdge,
ByDesign, SAP Business ByDesign, 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. Business Objects and the
Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web
Intelligence, Xcelsius, and other Business Objects products and services mentioned
herein as well as their respective logos are trademarks or registered trademarks
of Business Objects S.A. in the United States and in other countries. Business
Objects is an SAP company.All other product and service names mentioned are
the trademarks of their respective companies. Data contained in this document
serves informational purposes only. National product specifications may vary.These
materials are subject to change without notice. These materials are provided by
SAP AG and its affiliated companies ("SAP Group") for informational purposes
only, without representation or warranty of any kind, and SAP Group shall not be
liable for errors or omissions with respect to the materials. 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, if any. Nothing
herein should be construed as constituting an additional warranty.

2009-11-03
 Tutorial 1 - Creating a basic horizontal slider
Introduction

Introduction
Tutorial 1 will walk through how to create a basic horizontal slider component
in Adobe Flex Builder 3.
Refer to the Xcelsius 2008 Component Developer SDK Guide in the Create
a 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 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), ActionScript 3.0, and MXML, the XML-based markup
language introduced by Adobe Flex.

Task 1: Writing the component class

definition in ActionScript
1. When creating an ActionScript (AS) class using Flex wizard, there are
options to include a super class and to specify that the wizard should
automatically generate the constructor. I specifically chose those options
for 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 3

Tutorial 1 - Creating a basic horizontal slider
Task 1: Writing the component class definition in ActionScript

2. 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. Don't forget to save the source files often.
3. Add the following line before the component class definition in addition
to 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 class
constructor:

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 properties
with default values. In this example, the default value for _titleText
is the string "Title". Variable _titlesChanged is the flag indicating when
the Label's text changes.
5. Implement get and set functions for each property of the component
BasicHorizontalSlider:

//----------------------------------
// 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 slider

 Tutorial 1 - Creating a basic horizontal slider
Task 1: Writing the component class definition in ActionScript

invalidateProperties();
}
}

//----------------------------------
// showTitle Property
//----------------------------------

[Inspectable(defaultValue="true",
type="Boolean")]
public function get showTitle():Boolean
{
return _showTitle;
}

public function set showTitle(val

ue:Boolean):void
{
if (_showTitle != value)
{
_showTitle = value;
_titlesChanged = true;
invalidateProperties();
}
}

6. Next override two functions createChildren and commitProperties from

the super class since we are adding a new subclass Label and two
properties.

override protected function createChil

dren():void
{
super.createChildren();

//Allow the user to make this component

very small
this.minWidth = 0;
this.minHeight = 0;

//set snapInterval
this.snapInterval = 0.01;

//Title
_title = new Label();
_title.setActualSize(152, 20);
_title.y = _title.y - 20;
_title.setStyle("textAlign", TextFormatAl
ign.LEFT);

Tutorial 1 - Creating a basic horizontal slider 5

Tutorial 1 - Creating a basic horizontal slider
Task 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 commitProper

ties():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 updateDis

playList(unscaledWidth:Number, unscaledHeight:Num
ber):void
{
super.updateDisplayList(unscaledWidth,
unscaledHeight);
_title.setActualSize(unscaledWidth, 20);
}
In createChildren(), using the addChild function is to add the
subclass Label to the HSlider instance. It is also possible to change any
built-in properties of the Label component before adding it to the parent
component.
Function commitProperties() is where modifications to the component
properties are coordinated. In this example, we change the text of the
title Label to the current text and change the visibility of the Label based
on the _showTitle property.
According to livedocs on Adobe site, making a call to invalidateDis
playList() marks the component so that its updateDisplayList
method gets called during a later screen update. Invalidation is a useful
mechanism for eliminating duplicate work by delaying processing of
changes to the component until a later screen update. In updateDis

6 Tutorial 1 - Creating a basic horizontal slider

 Tutorial 1 - Creating a basic horizontal slider
Task 2: Calling the component in the MXML application file

playList, the title Label size needs to be updated with the current text
length.
7. Lastly, add [CxInspectableList ("title", "showTitle")] to display only title
and showTitle properties. See Default Property Sheet for more details.
8. Save and build the project.

Task 2: Calling the component in the

MXML application file
1. Open BasicHorizontalSliderSource.mxml. This file should already
contain the Application declaration for the project.
2. Replace <mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="ab
solute"> with <mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="ab
solute" xmlns:ns="com.businessobjects.xcelsius.sdk.sam
ples.*">

Notice the addition of xmlns:ns="com.businessobjects.xcel

sius.sdk.samples.*" . It is to create a custom XML tag for the
component.
3. Inside the <mx:Application> and </mx:Application> tags, add
the following code: <ns:BasicHorizontalSlider width="100%"
height="100%"/>
4. Save and build the project.

Tutorial 1 - Creating a basic horizontal slider 7

Tutorial 1 - Creating a basic horizontal slider
Task 2: Calling the component in the MXML application file

8 Tutorial 1 - Creating a basic horizontal slider