Professional Documents
Culture Documents
Tutorial 1 - Creating A Basic Horizontal Slider
Tutorial 1 - Creating A Basic Horizontal Slider
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
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.
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);
_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
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.