flash lite ui components help - sony mobile · pdf fileflash lite ui components help . 5. sony...

125
Flash Lite UI Components Help 1 Flash Lite UI Components Help

Upload: phungdan

Post on 06-Mar-2018

220 views

Category:

Documents


1 download

TRANSCRIPT

Flash Lite UI Components Help

1

Flash Lite UI Components Help

Flash Lite UI Components Help

2

Table of contents SONY ERICSSON UI COMPONENTS - 2.0 BETA ......................................................................................................... 5

ABOUT .......................................................................................................................................................................... 5 GETTING STARTED WITH SONY ERICSSON UI COMPONENTS ..................................................................................................... 6 TIPS AND TRICKS ON USING SONY ERICSSON UI COMPONENTS ................................................................................................. 9

ACTION LIST DIALOGUE COMPONENT .................................................................................................................. 12

ABOUT ........................................................................................................................................................................ 12 USING ......................................................................................................................................................................... 13 CUSTOMIZING .............................................................................................................................................................. 14

CHECK BOX COMPONENT ..................................................................................................................................... 16

ABOUT ........................................................................................................................................................................ 16 USING ......................................................................................................................................................................... 16 CUSTOMIZING .............................................................................................................................................................. 18

DIALOGUE COMPONENT ...................................................................................................................................... 20

ABOUT ........................................................................................................................................................................ 20 USING ......................................................................................................................................................................... 21 CUSTOMIZING .............................................................................................................................................................. 23

IMAGE COMPONENT ............................................................................................................................................ 26

ABOUT ........................................................................................................................................................................ 26 USING ......................................................................................................................................................................... 26 CUSTOMIZING .............................................................................................................................................................. 28

INFOTIP COMPONENT .......................................................................................................................................... 30

ABOUT ........................................................................................................................................................................ 30 USING ......................................................................................................................................................................... 30 CUSTOMIZING THE INFOTIP COMPONENT ........................................................................................................................... 33

LIST COMPONENT ................................................................................................................................................. 35

ABOUT ........................................................................................................................................................................ 35 USING - CHECK BOX LIST COMPONENT .............................................................................................................................. 37 CUSTOMIZING - CHECK BOX LIST COMPONENT .................................................................................................................... 38 USING - RADIO BUTTON LIST COMPONENT ......................................................................................................................... 41 CUSTOMIZING - RADIO BUTTON LIST COMPONENT .............................................................................................................. 42 USING - SINGLE-ROW LIST COMPONENT ............................................................................................................................ 44 CUSTOMIZING - SINGLE-ROW LIST COMPONENT .................................................................................................................. 46 USING - SINGLE-ROW LIST WITH ICON COMPONENT ............................................................................................................. 48 CUSTOMIZING - SINGLE-ROW LIST WITH ICON COMPONENT ................................................................................................... 50 USING - TWO-ROW LIST WITH ICON COMPONENT ................................................................................................................ 52 CUSTOMIZING - TWO-ROW LIST WITH ICON COMPONENT ..................................................................................................... 54

NOTIFICATION COMPONENT ................................................................................................................................ 58

ABOUT ........................................................................................................................................................................ 58 USING ......................................................................................................................................................................... 58 CUSTOMIZING .............................................................................................................................................................. 60

OPTIONS MENU COMPONENT .............................................................................................................................. 62

Flash Lite UI Components Help

3

ABOUT ........................................................................................................................................................................ 62 USING - OPTIONS MENU (TOP LEVEL) COMPONENT ............................................................................................................. 63 CUSTOMIZING - OPTIONS MENU (TOP LEVEL) COMPONENT ................................................................................................... 66 USING - OPTIONS MENU SUB LEVEL COMPONENT ............................................................................................................... 69 CUSTOMIZING - OPTIONS MENU SUB LEVEL COMPONENT ..................................................................................................... 72

PROGRESS INDICATOR COMPONENT .................................................................................................................... 76

ABOUT ........................................................................................................................................................................ 76 USING ......................................................................................................................................................................... 76 CUSTOMIZING .............................................................................................................................................................. 78

PUSH BUTTON COMPONENT ................................................................................................................................ 81

ABOUT ........................................................................................................................................................................ 81 USING ......................................................................................................................................................................... 81 CUSTOMIZING .............................................................................................................................................................. 83

RADIO BUTTON COMPONENT .............................................................................................................................. 85

ABOUT ........................................................................................................................................................................ 85 USING ......................................................................................................................................................................... 85 CUSTOMIZING .............................................................................................................................................................. 87

SCROLLABLE AREA COMPONENT .......................................................................................................................... 90

ABOUT ........................................................................................................................................................................ 90 USING ......................................................................................................................................................................... 91 CUSTOMIZING .............................................................................................................................................................. 92

SCROLLABLE TEXT COMPONENT ........................................................................................................................... 94

ABOUT ........................................................................................................................................................................ 94 USING ......................................................................................................................................................................... 94 CUSTOMIZING .............................................................................................................................................................. 96

SLIDER COMPONENT ............................................................................................................................................ 98

ABOUT ........................................................................................................................................................................ 98 USING ......................................................................................................................................................................... 98 CUSTOMIZING ............................................................................................................................................................ 100

SOFT KEYS COMPONENT .................................................................................................................................... 102

ABOUT ...................................................................................................................................................................... 102 USING ....................................................................................................................................................................... 102 CUSTOMIZING ............................................................................................................................................................ 104

STATUS BAR COMPONENT ................................................................................................................................. 107

ABOUT ...................................................................................................................................................................... 107 USING ....................................................................................................................................................................... 107 CUSTOMIZING ............................................................................................................................................................ 108

TEXT COMPONENT ............................................................................................................................................. 110

ABOUT ...................................................................................................................................................................... 110 USING ....................................................................................................................................................................... 110 CUSTOMIZING ............................................................................................................................................................ 112

TITLE COMPONENT ............................................................................................................................................. 113

ABOUT ...................................................................................................................................................................... 113 USING ....................................................................................................................................................................... 113

Flash Lite UI Components Help

4

CUSTOMIZING ............................................................................................................................................................ 114

TOOLBAR COMPONENT ...................................................................................................................................... 116

ABOUT ...................................................................................................................................................................... 116 USING ....................................................................................................................................................................... 116 CUSTOMIZING ............................................................................................................................................................ 120

WAIT INDICATOR COMPONENT .......................................................................................................................... 123

ABOUT ...................................................................................................................................................................... 123 USING ....................................................................................................................................................................... 123 CUSTOMIZING ............................................................................................................................................................ 125

Flash Lite UI Components Help

5

Sony Ericsson UI components - 2.0 beta

About Sony Ericsson UI components package provides User Interface (UI) components to help you develop energizing Flash Lite and Project Capuchin applications for Sony Ericsson mobile phones.

For information on Sony Ericsson UI components catalog and style guide, refer to this link: Sony Ericsson Developer World - UI Component Catalog.

For information on Project Capuchin, refer to this link: Sony Ericsson Developer World – Project Capuchin.

Available components

• Action List Dialogue • Check Box • Dialogue - Warning, Error, General question, Confirmation and Information • Image • Infotip • Notification • Options Menu Top Level Sub level

• Progress Indicator • Push Button • Radio Button • Lists Single-row List Single-row List with Icon Two-row List with Icon Check Box List Radio Button List

• Slider • Scrollable Area • Scrollable Text • Soft Keys • Status Bar • Text • Title • Toolbar • Wait Indicator

What is a component? A component is a compiled movie clip with exposed parameters that are adjustable during authoring time within Flash IDE, or from ActionScript through component methods, properties and events manipulation, allowing components customization during authoring time or runtime. Components are designed to allow developers to reuse and share code, and to encapsulate complex functionalities which designers can use and customize in an easy way.

Note: If you want to update your application with newly upgraded and installed components, just drag and drop the new ones you want to use from the components panel to the stage or double

Flash Lite UI Components Help

6

click on them so they can be added to the library. The "Resolve Library Conflict" window pops up if there are conflicts between component versions. Select the "Replace existing items" option and press OK.

Remark A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your UI components package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Getting started with Sony Ericsson UI components Sony Ericsson UI components are meant to be used by Flash Lite and Project Capuchin designers and developers. By using Sony Ericsson UI components you will be able to easily create compelling mobile applications GUI (Graphical User Interface) with the Sony Ericsson look and feel.

Sony Ericsson UI components compatibility:

• Adobe Flash CS3 and CS4 • Flash Lite 2.x and 3.x • Action Script 2.0

It is recommended that some rules are followed in order to take full advantage of all the components functionalities and design. These basic rules should enable you to create quality GUIs for mobile applications in Flash Lite or Project Capuchin.

Components depths and levels Sony Ericsson UI Components should be placed on three separate GUI levels:

• The top level depth: designated for soft keys and status bar. • The popup level depth: designated for dialogue, action list dialogue, notification, infotip,

options menu and toolbar components. • The composite level or bottom depth: used for check box, radio button, push button, lists,

title, slider, progress indicator, wait indicator, scrollable area, scrollable text, text and image UI components.

Following the depth priority levels to arrange UI components in your application assures that all components are correctly placed and will be visible on the screen. For instance, a popup will appear in front of a list and the soft keys will always be visible to the user since they are placed on the top most level. If the popup appears behind the list, you should rearrange the layers in your timeline or via ActionScript.

Note: UI components must either be added to the stage while authoring the content in Flash IDE or by using ActionScript code. Mixing both approaches will cause the UI components to duplicate themselves automatically especially if you loop through the frames, something which will lead to unnecessary memory leaks, or in some cases causing the application to crash. Also when attaching UI components dynamically to the stage, avoid using getNextDepth() but rather your own

Flash Lite UI Components Help

7

implementation of depth manager, like a variable that increments and keeps track of the last count of your depths.

Flash player image rendering in mobile phone screens Consider the rendering quality of images in the Flash Lite player since it does not support bitmap smoothing. Here are some tips to consider if some icons or bitmaps look pixelised or distorted in the UI components:

• Avoid rescaling images and components in your GUI. • Try using integer values for X and Y coordinates as much as possible. • When developing an application to be published as a Browser Content Type, make sure you

avoid screen rescaling by using the Stage class property as in:

Stage.scaleMode = "noScale";

• The current release of Sony Ericsson UI components can work with different screen sizes. However, they are designed to work perfectly with screen sizes of 240 x 320 pixels.

• To ensure a better result in terms of visual experience, try to publish your applications as Standalone Content Type or use the Sony Ericsson packaging tool SWF2JAR available on Sony Ericsson Project Capuchin page.

• For Project Capuchin developers, using Sony Ericsson Capuchin Kit component enables you to publish your application as a Standalone Content Type (In Flash IDE, go to Commands – Create Capuchin Application).

Development environment - Drawing and testing applications using the Sony Ericsson UI components Through the process of creating your applications and GUIs you get to work with and test Sony Ericsson UI components in at least 4 different environments: Adobe Flash IDE, Adobe Flash Actions Panel, Adobe Device Central and Sony Ericsson Mobile Phone. Each environment has its own advantages and disadvantages and the visual result may vary accordingly, which is something to consider when testing your applications.

1. Flash IDE or Stage (design time mode):

In this mode you interact with Sony Ericsson UI components using Properties > Parameters panel.

Fonts rendered in design time do not always reflect the final result as it appears on the mobile phone. Font sizes and families may differ; Sony Ericsson UI components always use device fonts.

Components with externally loaded icon images will not render these images in design time unless you provide their absolute path in the local file system.

Note: When publishing your application, remember to change absolute paths to relative paths.

Only JPEG bitmaps are shown in design time.

Note: When publishing your application to mobile phones, both JPEG and PNG bitmap are supported.

Flash Lite UI Components Help

8

2. ActionScript Panel (programming mode): see Tips and Tricks on using Sony Ericsson UI components

3. Device Central (debugging and simulation mode):

Device Central gives you a result closest to what you would get on a target device. You can select different Sony Ericsson phones to emulate your application on. However, there are some differences which require the final testing to be done on a target device.

Points to consider when testing your application:

Sony Ericsson UI components were designed to run in full screen mode. In Device Central, you do not find many 240x320 pixel screen Sony Ericsson mobile phones

that run Stand Alone Content Type. Use a Sample Device Set to emulate your application in Stand Alone Content Type. If you intend to create standalone applications with full screen support, use Sony Ericsson Project Capuchin technology or the Sony Ericsson packaging tool swf2jar available on Sony Ericsson Project Capuchin page.

Sony Ericsson Project Capuchin allows developers to combine the richness of both Java ME and Flash Lite by encapsulating Flash Lite content in Java ME applications making content created by Adobe Flash technology appear as Java ME applications.

Swf2Jar 2.1 tool automatically packages a jar containing a Java MIDlet class together with your Flash file (.swf).

Calibrate Device Central – Memory Panel to properly simulate a Sony Ericsson mobile phone memory usage. For phones released during 2008 and earlier, set static heap to 256 KB and dynamic heap to 2000 KB.

Device Central has a security measure that does not allow ActionScript to load more than 5 images per frame without any user key interaction. Consequently, components that load more than 5 images per frame do not render the remaining images at emulation time.

4. Sony Ericsson mobile phone (test and runtime mode):

Occasionally, if you try to load the same image file more than once in your component, the image may take time to load and sometimes will not load at all.

The frame rate you set on *.fla file may vary during runtime depending on the complexity of your application.

For latest information, visit online documents and forum at Sony Ericsson Developer World - Flash Lite Docs & Tools.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Related topics Sony Ericsson Developer World - Developers' Guidelines - Flash Lite

Sony Ericsson Developer World – Project Capuchin

Flash Lite UI Components Help

9

Tips and Tricks on using Sony Ericsson UI components One of the challenging issues developers may face when creating applications for mobile phones is the memory optimization and CPU usage. It is important to maintain an optimized application without compromising a lot on the functionalities, look and feel and the general aesthetic of your application.

Developers are recommended to benchmark memory and fps (frames per second) values during the testing phase. More details on this subject can be found at Sony Ericsson Developer World - Flash Lite Docs & Tools.

Considerations on application architecture

• Instead of packing all of the UI assets in one *.swf file, try splitting them into separate *.swf files. For example, it is assumed that some components like Soft keys are always shared among different views, thus it is possible to give the Soft keys component a permanent presence inside the main .swf file. Other components like the List and Scrollable Text may be view-specific and most likely they come together in the same view, hence it is possible to store the List and Scrollable Text components in a separate *.swf file and then load this *.swf when necessary. Embedding all UI components at once in one single file makes the final .swf file considerably larger and consumes more of the mobile phone memory.

• When working with your project in Flash IDE, prioritize attaching the components (using attachMovie()) from the library via ActionScript instead of dragging them directly to the stage. This allows you to remove instances from the stage easily during runtime and optimize memory usage when necessary.

When one instance is dragged to the stage, Flash places this instance on a negative depth (such as -16820). This is implemented by Flash to separate instances that are initially created in the Flash IDE from the ones instantiated using ActionScript. The removeMovieClip() method works only with positive depth instances.

Handling key events Key presses and releases are one of the most important GUI navigation events to manage in an application.

Flash Lite UI Components Help

10

When working with key interaction in Flash Lite on a Sony Ericsson mobile phone you should be aware of event behaviors in different content types.

Key press and key release are the most important events to manage in an application. Some interactions will change depending on which content type you publish your Flash Lite application in.

For example, if you are working with the Browser content type, the press and release events are dispatched at the same time. To avoid confusing the interactions between components, try to always use the Stand Alone content type and then package the final .swf file using the Sony Ericsson packaging tool SWF2JAR available on Sony Ericsson Project Capuchin page. This tool is optional in case developers or designers want to take advantage of the full screen mode rather than the file system browser mode.

How to manage focus in applications using Sony Ericsson UI components To start working with focus management in your applications, you must first familiarize yourself with how the Adobe Flash Lite navigation models work: two-way navigation, four-way navigation and four-way navigation with wraparound.

In Device Central you can see which navigation model is used in the targeted phone. Select the Device Profiles tab and the Flash section. Under “Input” you find that the used Navigation model is (“4 way wrap”, see image bellow for more details).

Tips on four-way navigation wraparound model using Sony Ericsson UI components Flash Lite four-way navigation wraparound can be tricky even in a simple layout, like the one below with 5 buttons:

Flash Lite UI Components Help

11

In this example we have five left aligned Sony Ericsson push buttons. If you press RIGHT or LEFT navigation keys the focus will follow the left-right top-bottom reading flow. However, when pressing UP or DOWN navigation keys, Focus will not move line by line, but follows the numeric sequence shown on each button in the picture below.

At first, it may seem that the focus behavior is acting randomly. But, assuming that there is a grid on top of the buttons, you will notice that the navigation follows left-right top-bottom reading flow. Flash Lite default focus manager uses the component center coordinates (width/2 and height/2) to define focus ordering. For instance, the center of Btn 1 is in the third column while the center of Btn 2 is in the first column and so on.

To fix this issue in this particular case, all components should be center aligned, and then the navigation would go from top to bottom component.

Note: If you want to manage the focus manager in a different way, try to implement your own navigation using the tabIndex property for two-way navigation and the Selection class, and also onSetFocus and onKillFocus Movie Clip events for four-way navigation models.

Related topics Getting started with Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Flash Lite UI Components Help

12

Action List Dialogue component

About The Action List Dialogue component is an alternative for style General question dialogue. It is mainly used for questions to the user where the options are not only Yes and No. The Action List Dialogue component is a modal pop-up and requires user input to be dismissed. The pop-up does not use the whole screen and the background is dimmed as it appears.

The component may have at least 2 options and a maximum of 5 options. The options should be formulated as actions. Each option can have a text and an icon. Also, it is possible to have a title in the dialogue with text and icon, if desired.

Middle soft key (MSK) should be labeled Select to take an action and dismiss the dialogue. Right soft key (RSK) should be labeled Back to return to previous screen.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Flash Lite UI Components Help

13

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Action List Dialogue component to an application while authoring.

To create an application with the Action List Dialogue component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the ActionListDialogue component to the stage. (Note: Try to place UI

components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired. Add at least two options in the Options texts property. Give an instance name: myActionListDialogue_ald.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

myActionListDialogue_ald.show(); // Shows the component

myActionListDialogue_ald.onSelect = function(index:Number, label:String) {

trace("Option Index = " + index + " Option Label = " + label );

}

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create the Action List Dialogue component.

To create the Action List Dialogue component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the ActionListDialogue component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

Flash Lite UI Components Help

14

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ActionListDialogue", "myActionListDialogue_ald", this.getNextHighestDepth());

myActionListDialogue_ald._optionTexts = ["Option 1","Option 2","Option 3", "Option 4"];

myActionListDialogue_ald._titleText = "Title Text";

myActionListDialogue_ald._placement = "center";

myActionListDialogue_ald.show();

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Action List Dialogue component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Title text <instance>._titleText String The title description text shown before the options of the Action List Dialogue.

Option texts <instance>._optionTexts Array The text array for the options in the Action List Dialogue. There shall be a minimum of 2 options and a maximum of 5 options defined.

Placement <instance>._placement String The position of the action list dialogue on the screen: either "bottom" or "center". The default value is "bottom".

Dim background <instance>._isDimBackground Boolean Indicates if background dim is enabled (true) or not (false). The default value is true.

Icon (44x44) <instance>._icon String The main icon to be displayed in the

Flash Lite UI Components Help

15

Action List Dialogue (44x44 px bitmap image). The full path for the file must be informed.

Option icons <instance>._optionIcons Array The array containing all the paths for the icons in the options (20x20 px bitmap images). The number of items in this array must be the same as in Option texts array. If an item does not have icon, then "" should be informed.

Text color <instance>._textColor Number The color of texts. The default value is 0x282828.

Highlight text color <instance>._hightlightTextColor Number The color of an option text when it has focus. The default value is 0xFFFFFF.

Background color <instance>._backgroundColor Number The background color of the Action List Dialogue. The default value is 0xFAFAFA.

Highlight color <instance>._highlightColor Number The highlight color of an option item when it has focus. The default value is 0x8DDC48.

Separator color <instance>._separatorColor Number The title separator color. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The title separator shadow color. The default value is 0xFFFFFF.

Dim color <instance>._dimColor Number The background dim color of the Action List Dialogue. The default value is 0x3D4242.

Methods summary

Name Syntax Description

show <instance>.show():Void Shows the action list dialogue starting the entrance animation.

hide <instance>.hide():Void Removes the action list dialogue from the screen.

Events summary

Name Syntax Description

onOpen <instance>.onOpen = function(sender:MovieClip) {}

Dispatched whenever the action list dialogue is opened and has already appeared on screen.

onClose <instance>.onClose = function(sender:MovieClip) {}

Dispatched whenever the action list dialogue is closed and has already disappeared from screen.

onSelect <instance>.onSelect = function(index:Number, label:String){}

Dispatched whenever the user presses the Middle soft key and the action list dialogue is with focus.

Flash Lite UI Components Help

16

Check Box component

About The Check Boxes component is used when there is a list of options or items from which the user may select any number of choices.

Each Check Box is independent of all other Check Boxes in the list, so checking one box does not uncheck the others.

The Check Boxes component can indicate choices made by the user, for example, which languages to use when typing.

Check Boxes can also be used to toggle an option on or off, to make decisions about different alternatives where selecting the Check Box component has the opposite meaning of unselecting it.

Middle soft key (MSK) is usually labeled Mark for an enabled, unselected Check Box, and Unmark for an enabled, selected Check Box.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Check Box component to an application while authoring.

To create an application with the Check Box component:

Flash Lite UI Components Help

17

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop, for instance, two CheckBox components to the stage. (Note: Try to place UI

components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give different instance names for the two components: myCheckBox1_chk and myCheckBox2_chk.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

function selectHandler(sender:MovieClip, select:Boolean, label:String) {

trace("Check Box: " + sender._name + ", label: \"" + label + "\", selected: " + select);

}

function focusInHandler(sender:MovieClip) {

trace("Check Box: " + sender._name + " received focus.");

}

function focusOutHandler(sender:MovieClip) {

trace("Check Box: " + sender._name + " lost focus.");

}

myCheckBox1_chk.onSelect = selectHandler;

myCheckBox2_chk.onSelect = selectHandler;

myCheckBox1_chk.onFocusIn = focusInHandler;

myCheckBox2_chk.onFocusIn = focusInHandler;

myCheckBox1_chk.onFocusOut = focusOutHandler;

myCheckBox2_chk.onFocusOut = focusOutHandler;

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Check Box component.

To create a Check Box component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

18

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a CheckBox component to the library or double click on it. When you double

click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("CheckBox","myCheckBox_chk",this.getNextHighestDepth());

myCheckBox_chk._labelText = "Sony Ericsson";

myCheckBox_chk._textPlacement = "left";

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Check Box component on Flash IDE using the properties available on Properties Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameters Name

Syntax Type Description

Text <instance>._labelText String The label of the Check Box.

Text placement <instance>._textPlacement String The placement of the text in relation to the Check Box: "above", "below", "right" or "left". The default value is "right".

Box visible <instance>._isBoxVisible Boolean Indicates whether the box of the Check Box is visible (true) or invisible (false). The default value is true.

Flash Lite UI Components Help

19

Enabled <instance>._isEnabled Boolean Indicates whether the Check Box is enabled (true) or disabled (false). The default value is true.

Selected <instance>._isSelected Boolean Indicates if the Check Box will be loaded marked (true) or unmarked (false). The default value is false.

Text color <instance>._textColor Number The text color of the Check Box. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color when the Check Box is disabled. The default value is 0x8D8D8D.

Highlight text color

<instance>._highlightTextColor Number The text color when the Check Box has focus. The default value is 0x282828.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the Check Box is disabled and has focus. The default value is 0x8D8D8D.

Background color

<instance>._backgroundColor Number The background color of the highlight when the Check Box has focus. The default value is 0xFAFAFA.

Highlight color <instance>._highlightColor Number The color of the highlight border when the Check Box has focus. The default value is 0x8DDC48.

Selected color <instance>._selectedColor Number The color of the check mark when the Check Box is selected. The default value is 0xEEEEEE.

Highlight selected color

<instance>._highlightSelectedColor Number The color of the check mark when the Check Box is selected and has focus. The default value is 0x8DDC48.

Events summary

Name Syntax Description

onFocusIn <instance>.onFocusIn = function(sender:MovieClip) {}

Dispatched whenever the user highlights the Check Box.

onFocusOut <instance>.onFocusOut = function(sender:MovieClip) {}

Dispatched whenever the Check Box looses focus.

onSelect <instance>.onSelect = function(sender:MovieClip, isSelected:Boolean, label:String) {}

Dispatched whenever presses the Middle soft key and the Check Box is with focus. IsSelected is "true" for selected and "false" for not selected.

Flash Lite UI Components Help

20

Dialogue component

About Dialogues are used for providing feedback or information to the user. They are also used for asking questions.

Dialogues are modal pop-ups and require user input to be dismissed. A Dialogue is an overlay component and does not use the whole screen. The background is dimmed as a Dialogue appears.

Dialog component comes with 5 different styles: Warning, Error, General question, Confirmation and Information.

Each style determines the default icon to be shown (or instead a badge icon is displayed when a custom icon is set). The table bellow illustrates the different styles, their default icons and the Soft Key values that should go with each style:

Style Soft key default value Default icons

Main Badge

Warning Middle OK

Error Middle OK

General question Middle Yes

Right No

Flash Lite UI Components Help

21

Confirmation Middle OK

Information Middle OK

Note: When showing a question to the user, not only General question style applies. There are situations where you need to show both a warning message and ask a question or show an error message and ask a question in the same dialogue. Therefore, you can use Warning style or Error style respectively and instead of having only Middle soft key (MSK) as Ok, the soft keys should then be: Middle soft key (MSK) = Yes and Right soft key (RSK) = No.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Dialogue component to an application while authoring.

To create an application with the Dialogue component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the Dialogue component to the stage. (Note: Try to place UI components on

integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

Flash Lite UI Components Help

22

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give it an instance name: myDialogue_dlg.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

myDialogue_dlg.show(); // Shows the Dialogue

function closedDialogue () {

trace("Dialogue Closed");

}

myDialogue_dlg.onClose = closedDialogue;

Key.addListener(this);

function onKeyDown() {

if (Key.isDown(Key.ENTER)) {

myDialogue_dlg.hide(); // Hides the Dialogue

}

}

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Dialogue component.

To create the Dialogue component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the Dialogue component and the Soft Keys components (this component is

necessary to dismiss the Dialogue component when the application is compiled) to the library or double click on them. When you double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

Flash Lite UI Components Help

23

this.attachMovie("Dialogue","myDialogue_dlg", this.getNextHighestDepth());

myDialogue_dlg._titleText = "Title Text";

myDialogue_dlg._bodyText = "This is the body text";

myDialogue_dlg._placement = "center";

myDialogue_dlg.show();

// Creates the Soft Keys component to be able to dismiss the Dialogue

this.attachMovie("SoftKeys","mySoftKeys_sks", this.getNextHighestDepth());

mySoftKeys_sks._LSKType = "none"; // Removes Left soft key

mySoftKeys_sks._RSKType = "none"; // Removes Right soft key

mySoftKeys_sks._MSK = "OK"; // Always use capital letter on first letter

mySoftKeys_sks.onSoftKeyDown = function(keyPressed:String) {

myDialogue_dlg.hide();

}

mySoftKeys_sks.onSoftKeyUp = function(keyReleased:String) {

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Dialogue component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Title text <instance>._titleText String The title text of the Dialogue. Visually, it will be more emphasized.

Flash Lite UI Components Help

24

Body text <instance>._bodyText String The body text of the Dialogue. It can be a question, an information text or a simple message.

Placement <instance>._placement String The vertical placement of the Dialogue on the screen: either "center" or "bottom". The default value is "bottom".

Main icon <instance>._icon String The main icon to be displayed in the Dialogue: "error", "information", "question", "warning", "confirmation", "none", "custom". The default icons will be displayed automatically when a style is selected.

Custom main icon path (75x65)

<instance>._customIcon String The custom main icon to be displayed in the Dialogue when "custom" is selected for "Main icon" parameter. The full path for the image file must be informed and its size should be 75x65 pixels.

Badge icon <instance>._badge String The badge icon to be displayed along with the custom main icon in the Dialogue according to the style selected: "error", "information", "question", "warning" or "confirmation". If no badge should be displayed, then use: "none".

Inline picture (187x44, 187x68,187x92,187x116)

<instance>._inlinePicture String The inline picture that can be shown in the body of the Information Dialogue. The full path for the image file must be informed.

Text color <instance>._textColor Number The text color of the Dialogue. The default value is 0x282828.

Background color <instance>._backgroundColor Number The background color of the Dialogue. The default value is 0xFAFAFA.

Scroll track color <instance>._scrollTrackColor Number The track color of the scroll bar of the Dialogue. The default value is 0xFFFFFF.

Scroll track outline color <instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the Dialogue. The default value is 0xA8A4A4.

Scroll slider color <instance>._scrollSliderColor Number The slider color of the scroll bar of the Dialogue. The default value is 0x8DDC48.

Flash Lite UI Components Help

25

Dim color <instance>._dimColor Number The dim color is the color behind the Dialogue when it appears. The default value is 0x3D4242.

Methods summary

Name Syntax Description

show <instance>.show() : Void Shows the Dialogue at run time. When calling this method the entrance animation of the Dialogue starts.

hide <instance>.hide() : Void Removes the Dialogue from the screen.

unloadImages <instance>.unloadImages() : Void Unloads all images loaded by the Dialogue from the phone memory.

Events summary

Name Syntax Description

onOpen <instance>.onOpen = function(sender:MovieClip) {}

Dispatched whenever the Dialogue is opened and has already appeared on screen.

onClose <instance>.onClose = function(sender:MovieClip) {}

Dispatched whenever the Dialogue is closed and has already disappeared from screen.

Flash Lite UI Components Help

26

Image component

About The image component is a place holder or a container used for holding images or other bitmap type content.

The Image component is a display only component with no interaction; therefore it cannot be selected or highlighted, but it is possible to have a frame around the image.

An example of using the image component: in a Music player, for displaying album covers.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Image component to an application while authoring.

To create an application with the Image component:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

27

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the Image component to the stage. (Note: Try to place UI components on integer

XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. In the Parameters inspector provide the path of the content (Movie Clip linked at the library or external *.jpg, *.png or *.swf files) you want to display and also customize the component as desired.

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create an Image component.

To create an Image component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop an Image component to the library or double click on it. When you double click,

the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("Image", "myImage_img", this.getNextHighestDepth());

myImage_img._x = 0;

myImage_img._y = 0;

myImage_img._content = "fullpath/photo.jpg"; // Full path of the image.

myImage_img.setHeight(100);

myImage_img.setWidth(100);

myImage_img._scaleToFit = true;

myImage_img._isFrame = true;

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Flash Lite UI Components Help

28

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Image component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Content <instance>._content String The content to be displayed in the Image container. The default value is "". Note: The maximum size for the content image should be 2MB.

Alpha <instance>._alpha Number Indicates the amount of alpha to be applied in the Image. The default value is 100.

Frame alpha <instance>._frameAlpha Number Indicates the amount of alpha to be applied in the Image frame. The default value is 100.

Frame <instance>._frame Number Indicates whether the container should have a frame or not. If frame = 0, then there is no frame. The default value is 0.

Radius <instance>._radius Number Indicates whether the container should have rounded corner or not. If radius = 0, then there is no rounded corner. The default value is 0. The maximum value is 3.

Scale to fit <instance>._scaleToFit Boolean Indicates whether the content should scale to fit container (true) or not (false). The default value is true.

Frame color <instance>._frameColor Number The frame color of the Image. The default value is 0xB3B3B3.

Methods summary

Name Syntax Description

getHeight <instance>.getHeight() : Number Gets the height (in pixels) of the Image container.

getWidth <instance>.getWidth() : Number Gets the width (in pixels) of the Image container.

Flash Lite UI Components Help

29

setHeight <instance>.setHeight(newHeight:Number) : Void

Sets a new height to the Image container. The maximum size allowed is 266 pixels.

setWidth <instance>.setWidth(newWidth:Number) : Void

Sets a new width to the Image container. The maximum size allowed is 240 pixels.

Events summary

Name Syntax Description

onContentLoad <instance>.onContentLoad = function(content:String){}

Dispatched whenever an image is completely loaded from file. The parameter content identifies the name of the image file for which this call is being made.

onContentLoadInit <instance>.onContentLoadInit = function(content:String){}

Dispatched whenever the actions on the first frame of the MovieClip that holds the loaded image are executed.

onContentLoadStart <instance>.onContentLoadStart = function(content:String){}

Dispatched whenever the image file has successfully started loading.

Flash Lite UI Components Help

30

Infotip component

About The Infotip component is used to provide more information about a highlighted item in the view.

For example, an Infotip can display a picture of a person when browsing through the contacts list. The infotip can also show dates or locations for when or where a picture was taken.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

Flash Lite UI Components Help

31

The following steps explain how to add the Infotip component to an application while authoring.

To create an application with the Infotip component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the ListSingleRow component to the stage. (Note: Try to place UI components

on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the ListSingleRow component as desired, add to it some items, and give it an instance name: myListSingleRow_lst.

8. Drag and drop the Infotip component to the stage, place it on top of the List. This way, the parameter _targetInstanceName is automatically set for you with the List instance name.

9. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

10. From the Parameters inspector customize the component as desired and give it an instance name: myInfotip_ift.

11. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

myInfotip_ift.onBeforeShow = beforeShow;

function beforeShow(sender:MovieClip, list:MovieClip) {

sender._text = "Infotip for item: " + list.getFocusIndex(); // Sets the Infotip text before shows it.

}

12. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create an Infotip component.

To create an Infotip component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L.

Flash Lite UI Components Help

32

6. Drag and drop the Infotip and the List components (this example uses the ListSingleRow) to the library or double click on them. When you double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

var infotipTexts:Array = new Array("5", "4", "", "2", "2", "4", "1"); // Stores the texts that will be shown in the Infotip

this.attachMovie("ListSingleRow","myListSingleRow_lst",this.getNextHighestDepth());

myListSingleRow_lst._y = 24;

myListSingleRow_lst._text = ["Alexandra Smith", "Angelina Dawson", "Brenda Watson", "Christine Stewart", "Daisy Martin", "Linda Banks", "Michelle Addams"]; // Adds text items in the list

this.attachMovie("Infotip", "myInfotip_ift", this.getNextHighestDepth());

myInfotip_ift._targetInstanceName = "myListSingleRow_lst";

myInfotip_ift.onBeforeShow = beforeShow;

function beforeShow(sender:MovieClip, list:MovieClip) {

var infotipText:String = infotipTexts[list.getFocusIndex()];

if (infotipText != "") {

sender._text = infotipText + " new message(s)!"; // Sets the Infotip text before show it

} else {

sender._text = ""; // Setting the Infotip text to "" it will not be shown.

}

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Flash Lite UI Components Help

33

Customizing the Infotip component You can customize the Infotip component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text String The text of the Infotip. The default value is "Infotip".

Icon size <instance>._iconSize String The size of the icon: either "small" (18x18) or "large" (35x35). The default value is "small".

Size <instance>._size String The size of the Infotip: "oneRow", "twoRows" or "dynamic". The default value is "dynamic".

Icon <instance>._icon String The icon to be displayed near the text. The full path for the file must be informed.

Duration type <instance>._durationType String The type of duration: either "automatic" or "custom". If automatic, the timeout will be calculated according to the amount of text to be displayed. The default value is "automatic".

Duration (milliseconds)

<instance>._duration Number The duration in milliseconds the Infotip will be displayed. This parameter must be informed if Duration type is set to "custom".

Target instance name

<instance>._targetInstanceName String It is the instance name of the target object (List) that the Infotip will be related to. The default value is undefined.

Text color <instance>._textColor Number The text color of the Infotip. The default value is 0xFFFFFF.

Background color <instance>._backgroundColor Number The background color of the Infotip. The default value is 0x8DDC48.

- <instance>._rowTimeout Number The timeout interval between each row scroll (in milliseconds). The default value is 1000.

- <instance>._scrollSpeed Number The number of pixels moved at each horizontal scroll step. The default value is 1.

- <instance>._scrollTimeout Number The timeout interval between each pixel scroll (in milliseconds). The default value is 20.

- <instance>._startTimeout Number The timeout interval before the Infotip text starts to scroll (in milliseconds). The default value is 4000.

Flash Lite UI Components Help

34

- <instance>._wrapTimeout Number The timeout interval at the end of the scroll before starting again (in milliseconds). The default value is 1000.

Note: The properties that do not have a Parameter Name can only be accessed via ActionScript code.

Methods summary

Name Syntax Description

show <instance>.show() : Void Shows the Infotip at run time. When calling this method the entrance animation of the Infotip starts.

hide <instance>.hide() : Void Removes the Infotip from the screen.

unloadImages <instance>.unloadImages() : Void Unloads all images loaded by the Infotip from the phone memory.

getWidth <instance>.getWidth() : Number

Gets the width (in pixels) of the Infotip instance.

setWidth <instance>.setWidth(newWidth:Number) : Void Sets a new width to the Infotip instance. The

minimum size allowed is 32 pixels for small icons and 49 pixels for large icons and the maximum size is 152 pixels.

Events summary

Name Syntax Description

onBeforeShow <instance>.onBeforeShow = function(sender:MovieClip, list:MovieClip) {}

Dispatched whenever the Infotip is about to be displayed.

onClose <instance>.onClose = function(sender:MovieClip) {}

Dispatched whenever the Infotip is closed and has already disappeared from screen.

Flash Lite UI Components Help

35

List component

Single-row Single-row with icon Two-row with icon

Check box Radio button

About List is a component for displaying items or options that belong to the same category. List offers several layout possibilities for different types of content.

Lists offer an intuitive, scalable and efficient way to present non-hierarchical items and objects to the user.

Depending on the context, Lists can be used to allow the user to browse, select, add and delete items in a list of objects.

A List can be used for options in a menu or for displaying items by category, such as messages, contacts, etc.

The List component takes the full width of the screen, and the list items have a fixed height. It is not possible to manually resize the width and height of the list items.

Flash Lite UI Components Help

36

The highlighted list item is indicated with a solid filled highlight. Any items in the list that cannot be selected should be disabled.

The user navigates in the list using navigation keys. If the list has more items than can be displayed on a screen, a scroll bar automatically appears, and the user can scroll down to see more content. When the user reaches the end of the list and continues to scroll, the list is wrapped and the highlight moves back to the beginning of the list.

By default, the scrollbar fades away when the highlight is not moved, in order to display more of the list content. As soon as the user starts to interact with the list the scroll bar becomes visible. However, it is possible to set the scrollbar to be visible at all times.

There are several list layout styles to select from:

• Single-row List: each list item consists of one row of text only. • Single-row List with Icon: each list item consists of one row text followed by a small or a

large icon. It's possible to add icons to the rows: small or large. The small icon can be placed on the first or on the second row, while the large icon covers both rows. Icons are left-aligned, unless the text direction is right-to-left. If no icon is set for a specific list item, the text is left-aligned.

• Two-row List with Icon: each list item consists of two rows of text that are displayed on different rows. The text on the first row will have a larger font than the text on the second row. It is possible to add icons to the rows: small or large. The small icon can be placed on the first or on the second row, while the large icon covers both rows. Icons are left-aligned, unless the text direction is right-to-left. If no icon is set for a specific list item, the text is left-aligned.

• Check Box List: a check box is added before each list items. A Check Box List is typically used to mark many alternatives in a list, for example, to select recurrent weekdays for an alarm.

• Radio Button List: a radio button is added before each list items. Radio buttons are typically used to select a single alternative in a list, for example to select one language among several languages. A Radio Button List must contain at least two items.

The selected layout style applies to all list items, which means that it is not possible to mix different list item types, such as single row items and two-row items, within the same list.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Flash Lite UI Components Help

37

Using - Check Box List component Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Check Box List component to an application while authoring.

To create an application with the Check Box List component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the ListCheckBox component to the stage. (Note: Try to place UI components

on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and add some texts. 8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Check Box List component.

To create a Check Box List component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the ListCheckBox component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ListCheckBox", "myListCheckBox_lst", this.getNextHighestDepth());

myListCheckBox_lst._text = ["Alexandra Smith", "Angelina Dawson", "Brenda Watson", "Christine Stewart", "Daisy Martin", "Linda Banks", "Michelle Addams"]; // Adds text items in the list

Flash Lite UI Components Help

38

myListCheckBox_lst._isSelected = [false, false, true, false, true, false, true];

myListCheckBox_lst.onSelect = function(sender:MovieClip, label:String, position:Number, selectedItem:Boolean) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

trace("Selected item: " + selectedItem);

}

myListCheckBox_lst.onFocusChange = function(sender:MovieClip, label:String, position:Number, selectedItem:Boolean) {

trace("Currently highlighted item: " + label);

trace("Item index: " + position);

trace("Selected item: " + selectedItem);

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Customizing - Check Box List component You can customize Sony Ericsson Check Box List component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text Array The label of the items. It is an array that sets a text for each item in the list. All items in the array must have a value set.

Empty list text <instance>._emptyListText String The text to be displayed when the list is empty. The default value is "Empty list".

Highlight position

<instance>._highlightPosition Number The position of the highlight in the list when it is loaded. The default value is 0.

Flash Lite UI Components Help

39

Selected <instance>._isSelected Array Indicates if the check box will be loaded marked (true) or unmarked (false). The default value is false. All items in the array must have a value set.

Enabled <instance>._isEnabled Array Indicates whether the list item is enabled (true) or disabled (false). The default value is true. All items in the array must have a value set.

Scroll bar visibility

<instance>._scrollbarVisibility String The visibility of the scroll bar: either "when scrolling" or "always". If "when scrolling" is set it will automatically auto hide after 3 seconds and will only be shown again when another scroll happens. The default value is "when scrolling".

Scrolling text <instance>._isScrollingText Boolean Indicates whether the text label will scroll(true) or not (false). The default value is true. If true is set, text will scroll when item is in focus. Items not in focus will be cut off.

Text color <instance>._textColor Number The text color for all list items. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color for a disabled item in the list. The default value is 0x8D8D8D.

Highlight text color

<instance>._highlightTextColor Number The text color when the list item has focus. The default value is 0xFFFFFF.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the list item is disabled and has focus. The default value is 0xA9D285.

Background color

<instance>._backgroundColor Number The background color of the list. The default value is 0xFFFFFF.

Separator color <instance>._separatorColor Number The color of the list separator item. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The shadow color of the list separator item. The default value is 0xFFFFFF.

Highlight color <instance>._highlightColor Number The highlight color when the list item has focus. The default value is 0x8DDC48.

Scroll track color

<instance>._scrollTrackColor Number The track color of the scroll bar of the list. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the list. The default value is 0xA8A4A4.

Flash Lite UI Components Help

40

Scroll slider color

<instance>._scrollSliderColor Number The slider color of the scroll bar of the list. The default value is 0x8DDC48.

Selected color <instance>._selectedColor Number The color of the check mark when the Check Box is selected. The default value is 0xEEEEEE.

Highlight selected color

<instance>._highlightSelectedColor Number The color of the check mark when the Check Box is selected and has focus. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

addItems <instance>.addItems(item:String, selected:Boolean, enabled:Boolean) : Void

Adds items to the list. The first set of parameters is the text label, the second indicates if the item is selected and the third indicates if the item will be enabled or not.

remove <instance>.remove(index:Number) : Void

Removes an item from the list. The parameter indicates which index of the list you want removed.

removeAll <instance>.removeAll() : Void Clears all values in the list.

getListLength <instance>.getListLength() : Number Gets the size of the list. Returns a number.

getFocusIndex <instance>.getFocusIndex() : Number Gets which option on the list is currently highlighted. Returns a number: zero-relative index of the focused item or -1 if no item has focus.

getSelected <instance>.getSelected() : Array Gets the value of the selected items on the list. Returns an array.

select <instance>.select(index:Number) : Void

Selects an item in the list. The parameter indicates which index of the list will be marked as selected.

Events summary

Name Syntax Description

onFocusChange <instance>.onFocusChange = function(sender:MovieClip, label:String, position:Number, selectedItem:Boolean) {}

Dispatched whenever user navigates in the list.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String, position:Number, selectedItem:Boolean) {}

Dispatched whenever user selects an item in the list.

Flash Lite UI Components Help

41

Using - Radio Button List component Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Radio Button List component to an application while authoring.

To create an application with the Radio Button List component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop a ListRadioButton component to the stage. (Note: Try to place UI components

on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and add some texts. 8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Radio Button List component.

To create a Radio Button List component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a ListRadioButton component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ListRadioButton", "myListRadioButton_lst", this.getNextHighestDepth());

myListRadioButton_lst._text = ["Alexandra Smith", "Angelina Dawson", "Brenda Watson", "Christine Stewart", "Daisy Martin", "Linda Banks", "Michelle Addams"]; // Adds text items in the list

Flash Lite UI Components Help

42

myListRadioButton_lst._selected = 2;

myListRadioButton_lst.onSelect = function(sender:MovieClip, label:String, position:Number) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

}

myListRadioButton_lst.onFocusChange = function(sender:MovieClip, label:String, position:Number) {

trace("Currently highlighted item: " + label);

trace("Item index: " + position);

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Customizing - Radio Button List component You can customize Sony Ericsson Radio Button List component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text Array The label of the items. It is an array that sets a text for each item in the list. All items in the array must have a value set.

Empty list text <instance>._emptyListText String The text to be displayed when the list is empty. The default value is "Empty list".

Highlight position

<instance>._highlightPosition Number The position of the highlight in the list when it is loaded. The default value is 0.

Selected <instance>._isSelected Array Indicates if the Radio Button will be loaded selected (true) or unselected (false). The default value is false. Note: only ONE selected option is

Flash Lite UI Components Help

43

accepted per list. All items in the array must have a value set.

Enabled <instance>._isEnabled Array Indicates whether the list item is enabled (true) or disabled (false). The default value is true. All items in the array must have a value set.

Scroll bar visibility

<instance>._scrollbarVisibility String The visibility of the scroll bar: either "when scrolling" or "always". If "when scrolling" is set it will automatically auto hide after 3 seconds and will only be shown again when another scroll happens. The default value is "when scrolling".

Scrolling text <instance>._isScrollingText Boolean Indicates whether the text label will scroll (true) or not (false). The default value is true. If true is set, text will scroll when item is in focus. Items not in focus will be cut off.

Text color <instance>._textColor Number The text color for all list items. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color for a disabled item in the list. The default value is 0x8D8D8D.

Highlight text color

<instance>._highlightTextColor Number The text color when the list item has focus. The default value is 0xFFFFFF.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the list item is disabled and has focus. The default value is 0xA9D285.

Background color

<instance>._backgroundColor Number The background color of the list. The default value is 0xFFFFFF.

Separator color <instance>._separatorColor Number The color of the list separator item. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The shadow color of the list separator item. The default value is 0xFFFFFF.

Highlight color <instance>._highlightColor Number The highlight color when the list item has focus. The default value is 0x8DDC48.

Scroll track color

<instance>._scrollTrackColor Number The track color of the scroll bar of the list. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the list. The default value is 0xA8A4A4.

Scroll slider color

<instance>._scrollSliderColor Number The slider color of the scroll bar of the list. The default value is 0x8DDC48.

Flash Lite UI Components Help

44

Selected color <instance>._selectedColor Number The color of the inner dot when the Radio Button is selected. The default value is 0xEEEEEE.

Highlight selected color

<instance>._highlightSelectedColor Number The color of the inner dot when the Radio Button is selected and has focus. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

addItems <instance>.addItems(item:String, enabled:Boolean) : Void

Adds items to the list. The first set of parameters is the text label and the second indicates if the item will be enabled or not.

remove <instance>.remove(index:Number) : Void

Removes an item from the list. The parameter indicates which index of the list you want removed.

removeAll <instance>.removeAll() : Void Clears all values in the list.

getListLength <instance>.getListLength() : Number Gets the size of the list. Returns a number.

getFocusIndex <instance>.getFocusIndex() : Number Gets which option on the list is currently highlighted. Returns a number: zero-relative index of the focused item or -1 if no item has focus.

getSelected <instance>.getSelected(): Number Gets the value of the currently selected item on the list. Returns a number.

select <instance>.select(index:Number) : Void

Selects an item in the list. The parameter indicates which index of the list will be marked as selected.

Events summary

Name Syntax Description

onFocusChange <instance>.onFocusChange = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user navigates in the list.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user selects an item in the list.

Using - Single-row List component Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

Flash Lite UI Components Help

45

The following steps explain how to add a Single-row List component to an application while authoring.

To create an application with the Single-row List component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop a ListSingleRow component to the stage. (Note: Try to place UI components on

integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and add some texts. 8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Single-row List component.

To create a Single-row List component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a ListSingleRow component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ListSingleRow", "myListSingleRow_lst", this.getNextHighestDepth());

myListSingleRow_lst._text = ["Alexandra Smith", "Angelina Dawson", "Brenda Watson", "Christine Stewart", "Daisy Martin", "Linda Banks", "Michelle Addams"]; // Adds text items in the list

myListSingleRow_lst._isEnabled = [true, false, true, true, false, true, true]; // Sets which items in the list are enabled or not

Flash Lite UI Components Help

46

myListSingleRow_lst.onSelect = function(sender:MovieClip, label:String, position:Number) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

trace("List Single-row instance: " + sender);

}

myListSingleRow_lst.onFocusChange = function(sender:MovieClip, label:String, position:Number) {

trace("Currently highlighted item: " + label);

trace("Item index: " + position);

trace("List Single-row instance: " + sender);

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Customizing - Single-row List component You can customize the Single-row List component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text Array The label of the items. It is an array that sets a text for each item in the list. All items in the array must have a value set.

Empty list text <instance>._emptyListText String The text to be displayed when the list is empty. The default value is "Empty list".

Highlight position

<instance>._highlightPosition Number The position of the highlight in the list when it is loaded. The default value is 0.

Enabled <instance>._isEnabled Array Indicates whether the list item is enabled (true) or disabled (false). The default value is true. All items in the array must have a value set.

Flash Lite UI Components Help

47

Scroll bar visibility

<instance>._scrollbarVisibility String The visibility of the scroll bar: either "when scrolling" or "always". If "when scrolling" is set it will automatically auto hide after 3 seconds and will only be shown again when another scroll happens. The default value is "when scrolling".

Scrolling text <instance>._isScrollingText Boolean Indicates whether the text label will scroll (true) or not (false). The default value is true. If true is set, text will scroll when item is in focus. Items not in focus will be cut off.

Text color <instance>._textColor Number The text color for all list items. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color for a disabled item in the list. The default value is 0x8D8D8D.

Highlight text color

<instance>._highlightTextColor Number The text color when the list item has focus. The default value is 0xFFFFFF.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the list item is disabled and has focus. The default value is 0xA9D285.

Background color

<instance>._backgroundColor Number The background color of the list. The default value is 0xFFFFFF.

Separator color <instance>._separatorColor Number The color of the list separator item. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The shadow color of the list separator item. The default value is 0xFFFFFF.

Highlight color <instance>._highlightColor Number The highlight color when the list item has focus. The default value is 0x8DDC48.

Scroll track color

<instance>._scrollTrackColor Number The track color of the scroll bar of the list. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the list. The default value is 0xA8A4A4.

Scroll slider color

<instance>._scrollSliderColor Number The slider color of the scroll bar of the list. The default value is 0x8DDC48.

Flash Lite UI Components Help

48

Methods summary

Name Syntax Description

addItems <instance>.addItems(item:String, enabled:Boolean) : Void

Adds items to the list. The first set of parameters is the text label and the second indicates if the item will be enabled or not.

remove <instance>.remove(index:Number) : Void

Removes an item from the list. The parameter indicates which index of the list you want removed.

removeAll <instance>.removeAll() : Void Clears all values in the list.

getListLength <instance>.getListLength() : Number Gets the size of the list. Returns a number.

getFocusIndex <instance>.getFocusIndex() : Number Gets which option on the list is currently highlighted. Returns a number: zero-relative index of the focused item or -1 if no item has focus.

getSelected <instance>.getSelected() : Number Gets the value of the currently selected item on the list. Returns a number.

select <instance>.select(index:Number) : Void

Selects an item in the list. The parameter indicates which index of the list will be marked as selected.

Events summary

Name Syntax Description

onFocusChange <instance>.onFocusChange = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user navigates in the list.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user selects an item in the list.

Using - Single-row List with Icon component Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Single-row List with Icon component to an application while authoring.

To create an application with the Single-row List component:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

49

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop a ListSingleRowWithIcon component to the stage. (Note: Try to place UI

components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and add some texts. 8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Single-row List with Icon component.

To create a Single-row List component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a ListSingleRowWithIcon component to the library or double click on it. When

you double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ListSingleRowWithIcon", "myListSingleRowWithIcon_lst", this.getNextHighestDepth());

myListSingleRowWithIcon_lst._text = ["Alexandra Smith", "Angelina Dawson", "Brenda Watson", "Christine Stewart", "Daisy Martin", "Linda Banks", "Michelle Addams"]; // Adds text items in the list

// fullpath is the path of the image that will be loaded. Recommended image sizes: 24x24 px for small icons, 47x47 px for large icons

myListSingleRowWithIcon_lst._icon = ["fullpath/icon1.png", "fullpath/icon2.png", "fullpath/icon3.png", "fullpath/icon4.png", "fullpath/icon5.png", "fullpath/icon6.png", "fullpath/icon7.png", "fullpath/icon8.png"];

myListSingleRowWithIcon_lst._isEnabled = [true, false, true, true, false, true, true, true];

myListSingleRowWithIcon_lst._iconSize = "large";

Flash Lite UI Components Help

50

myListSingleRowWithIcon_lst.onSelect = function(sender:MovieClip, label:String, position:Number) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

trace("Single-row List with Icon instance: " + sender);

}

myListSingleRowWithIcon_lst.onFocusChange = function(sender:MovieClip, label:String, position:Number) {

trace("Currently highlighted item: " + label);

trace("Item index: " + position);

trace("Single-row List with Icon instance: " + sender);

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Customizing - Single-row List with Icon component You can customize the Single-row List with Icon component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text Array The label of the items. It is an array that sets a text for each item in the list. All items in the array must have a value set.

Empty list text <instance>._emptyListText String The text to be displayed when the list is empty. The default value is "Empty list".

Highlight position

<instance>._highlightPosition Number The position of the highlight in the list when it is loaded. The default value is 0.

Icon size <instance>._iconSize String The size of the icon: either "small" (24x24 px) or "large" (47x47 px). The default value is "small".

Flash Lite UI Components Help

51

Icon <instance>._icon Array The array containing all the paths for the icons for each list item. The number of items in this array must be the same as in Text array. If an item does not have icon, then "" should be informed.

Enabled <instance>._isEnabled Array Indicates whether the list item is enabled (true) or disabled (false). All items in the array must have a value set. The default value is true.

Scroll bar visibility

<instance>._scrollbarVisibility String The visibility of the scroll bar: either "when scrolling" or "always". If "when scrolling" is set it will automatically auto hide after 3 seconds and will only be shown again when another scroll happens. The default value is "when scrolling".

Scrolling text <instance>._isScrollingText Boolean Indicates whether the text label will scroll (true) or not (false). The default value is true. If true is set, text will scroll when item is in focus. Items not in focus will be cut off.

Text color <instance>._textColor Number The text color for all list items. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color for a disabled item in the list. The default value is 0x8D8D8D.

Highlight text color

<instance>._highlightTextColor Number The text color when the list item has focus. The default value is 0xFFFFFF.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the list item is disabled and has focus. The default value is 0xA9D285.

Background color

<instance>._backgroundColor Number The background color of the list. The default value is 0xFFFFFF.

Separator color <instance>._separatorColor Number The color of the list separator item. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The shadow color of the list separator item. The default value is 0xFFFFFF.

Highlight color <instance>._highlightColor Number The highlight color when the list item has focus. The default value is 0x8DDC48.

Scroll track color

<instance>._scrollTrackColor Number The track color of the scroll bar of the list. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the list. The default value is 0xA8A4A4.

Flash Lite UI Components Help

52

Scroll slider color

<instance>._scrollSliderColor Number The slider color of the scroll bar of the list. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

addItems <instance>.addItems(item:String, icon:String, enabled:Boolean) : Void

Adds items to the list. The first set of parameters is the text label, the second is the image path and the third indicates if the item will be enabled or not.

remove <instance>.remove(index:Number) : Void

Removes an item from the list. The parameter indicates which index of the list you want removed.

removeAll <instance>.removeAll() : Void Clears all values in the list.

getListLength <instance>.getListLength() : Number Gets the size of the list. Returns a number.

getFocusIndex <instance>.getFocusIndex() : Number Gets which option on the list is currently highlighted. Returns a number: zero-relative index of the focused item or -1 if no item has focus.

getSelected <instance>.getSelected() : Number Gets the value of the currently selected item on the list. Returns a number.

select <instance>.select(index:Number) : Void

Selects an item in the list. The parameter indicates which index of the list will be marked as selected.

Events summary

Name Syntax Description

onFocusChange <instance>.onFocusChange = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user navigates in the list.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user selects an item in the list.

Using - Two-row List with Icon component Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Two-row List with Icon component to an application while authoring.

Flash Lite UI Components Help

53

To create an application with the Two-row List with Icon component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop a ListTwoRowWithIcon component to the stage. (Note: Try to place UI

components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and add some texts. 8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Two-row List with Icon component.

To create a Two-row List with Icon component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a ListTwoRowWithIcon component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ListTwoRowWithIcon", "myListTwoRowWithIcon_lst", this.getNextHighestDepth());

myListTwoRowWithIcon_lst._text1 = ["Alexandra Smith", "Angelina Dawson", "Brenda Watson", "Christine Stewart", "Daisy Martin", "Linda Banks", "Michelle Addams"]; // Adds text items in the list

myListTwoRowWithIcon_lst._text2 = ["33445566", "33668822", "44556688", "44887755", "55886655", "22114455", "33556677"]; // Adds text items to the second row of the list

// fullpath is the path of the image that will be loaded. Recommended image sizes: 24x24 px for small icons, 47x47 px for large icons

Flash Lite UI Components Help

54

myListTwoRowWithIcon_lst._icon = ["fullpath/image1.png", "fullpath/image2.png", "fullpath/image3.png", "fullpath/image4.png", "fullpath/image5.png", "fullpath/image6.png", "fullpath/image7"];

myListTwoRowWithIcon_lst._isEnabled = [true, false, true, true, false, true, true, true];

myListTwoRowWithIcon_lst._iconSize = "small";

myListTwoRowWithIcon_lst._iconPlacement = "row1";

myListTwoRowWithIcon_lst._isScrollingText = true;

myListTwoRowWithIcon_lst._scrollingTextRow = 1;

myListTwoRowWithIcon_lst.onSelect = function(sender:MovieClip, label:String, position:Number) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

trace("Two-row List with Icon instance: " + sender);

}

myListTwoRowWithIcon_lst.onFocusChange = function(sender:MovieClip, label:String, position:Number) {

trace("Currently highlighted item: " + label);

trace("Item index: " + position);

trace("Two-row List with Icon instance: " + sender);

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Customizing - Two-row List with Icon component You can customize the Two-row List with Icon component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text 1 <instance>._text1 Array The text of the first row of the items. It is an array that sets a text for each item in the list. All items in the array

Flash Lite UI Components Help

55

must have a value set.

Text 2 <instance>._text2 Array The text of the second row of the items. It is an array that sets a text for each item in the list.

Empty list text <instance>._emptyListText String The text to be displayed when the list is empty. The default value is "Empty list".

Highlight position

<instance>._highlightPosition Number The position of the highlight in the list when it is loaded. The default value is 0.

Icon placement <instance>._iconPlacement String The row the icon will be placed: either "row1" or "row2".

Icon size <instance>._iconSize String The size of the icon: either "small" or "large" (47x47 px). The default value is "small". The size of the small icon depends on the icon placement: in Row 1: 24x24 px; in Row 2: 22x22 px.

Icon <instance>._icon Array The array containing all the paths for the icons for each list item. The number of items in this array must be the same as in Text array. If an item does not have icon, then "" should be informed.

Enabled <instance>._isEnabled Array Indicates whether the list item is enabled (true) or disabled (false). All items in the array must have a value set. The default value is true.

Scroll bar visibility

<instance>._scrollbarVisibility String The visibility of the scroll bar: either "when scrolling" or "always". If "when scrolling" is set it will automatically auto hide after 3 seconds and will only be shown again when another scroll happens. The default value is "when scrolling".

Scrolling text <instance>._isScrollingText Boolean Indicates whether the text label will scroll (true) or not (false). The default value is true. If true is set, text will scroll when item is in focus. Items not in focus will be cut off.

Scrolling text row

<instance>._scrollingTextRow Number Indicates which text row will scroll: either 1 (first row) or 2 (second row). The default value is 1.

Text color <instance>._textColor Number The text color for all list items. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color for a disabled item in the list. The default value is 0x8D8D8D.

Flash Lite UI Components Help

56

Highlight text color

<instance>._highlightTextColor Number The text color when the list item has focus. The default value is 0xFFFFFF.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the list item is disabled and has focus. The default value is 0xA9D285.

Background color

<instance>._backgroundColor Number The background color of the list. The default value is 0xFFFFFF.

Separator color <instance>._separatorColor Number The color of the list separator item. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The shadow color of the list separator item. The default value is 0xFFFFFF.

Highlight color <instance>._highlightColor Number The highlight color when the list item has focus. The default value is 0x8DDC48.

Scroll track color

<instance>._scrollTrackColor Number The track color of the scroll bar of the list. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the list. The default value is 0xA8A4A4.

Scroll slider color

<instance>._scrollSliderColor Number The slider color of the scroll bar of the list. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

addItems <instance>.addItems(item:String, icon:String, enabled:Boolean) : Void

Adds items to the list. The first set of parameters is the text label, the second is the image path and the third indicates if the item will be enabled or not.

remove <instance>.remove(index:Number) : Void Removes an item from the list. The parameter indicates which index of the list you want removed.

removeAll <instance>.removeAll() : Void Clears all values in a list.

getListLength <instance>.getListLength() : Number Gets the size of the list. Returns a number.

getFocusIndex <instance>.getFocusIndex() : Number Gets which option on the list is currently highlighted. Returns a number: zero-relative index of the focused item or -1 if no item has focus.

getSelected <instance>.getSelected() : Number Gets the value of the currently selected item on the list. Returns a number.

select <instance>.select() : Void Selects an item in the list. The parameter

Flash Lite UI Components Help

57

indicates which index of the list will be marked as selected.

Events summary

Name Syntax Description

onFocusChange <instance>.onFocusChange = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever the highlight changes to another item in the list.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever an item in the list is selected.

Flash Lite UI Components Help

58

Notification component

About Notifications are used to give users subtle feedbacks without interrupting the use of the phone.

Notifications can be used when informing the user about successful operations which do not require separate confirmation, operations such as "Download complete" and "Message sent".

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

Flash Lite UI Components Help

59

The following steps explain how to add the Notification component to an application while authoring.

To create an application with the Notification component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the Notification component to the stage. (Note: Try to place UI components on

integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give it an instance name: myNotification_ntf.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

myNotification_ntf.show(); // Shows the Notification

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Notification component.

To create a Notification component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the Notification component to the library or double click on it. When you double

click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("Notification","myNotification_ntf",this.getNextHighestDepth());

myNotification_ntf._text = "New message arrived"; //Sets the text to be displayed

Flash Lite UI Components Help

60

myNotification_ntf._placement = "center"; //Places the Notification at the center of the screen

myNotification_ntf._durationType = "custom";

myNotification_ntf._duration = 3000; //Sets duration in milliseconds

myNotification_ntf.show();

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Notification component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text String The text of the Notification. The default value is "Notification".

Icon size <instance>._iconSize String The size of the icon: either "small" (18x18) or "large" (35x35). The default value is "small".

Placement <instance>._placement String The vertical placement of the Notification on the screen: either "top", "center", "bottom" or "custom". The default value is "center".

Size <instance>._size String The size of the Notification: "oneRow", "twoRows" or "dynamic". The default value is "dynamic".

Icon <instance>._icon String The icon to be displayed near the text. The full path for the file must be informed.

Duration type <instance>._durationType String The type of duration: either "automatic" or "custom". If automatic, the timeout will be calculated according to the amount of text to be displayed. The default value is "automatic".

Duration (milliseconds)

<instance>._duration Number The duration in milliseconds the Notification will be displayed. This parameter must be informed if Duration type is set to "custom".

Flash Lite UI Components Help

61

Text color <instance>._textColor Number The text color of the Notification. The default value is 0x282828.

Background color <instance>._backgrounColor Number The background color of the Notification. The default value is 0xFAFAFA.

- <instance>._rowTimeout Number The timeout interval between each row scroll (in milliseconds). The default value is 1000.

- <instance>._scrollSpeed Number The number of pixels moved at each horizontal scroll step. The default value is 1.

- <instance>._scrollTimeout Number The timeout interval between each pixel scroll (in milliseconds). The default value is 20.

- <instance>._startTimeout Number The timeout interval before the Notification text starts to scroll (in milliseconds). The default value is 4000.

- <instance>._wrapTimeout Number The timeout interval at the end of the scroll before starting again (in milliseconds). The default value is 1000.

Note: The properties that do not have a Parameter Name can only be accessed via ActionScript code.

Methods summary

Name Syntax Description

show <instance>.show() : Void Shows the Notification at run time. When calling this method the entrance animation of the Notification starts.

hide <instance>.hide() : Void Removes the Notification from the screen.

unloadImages <instance>.unloadImages() : Void Unloads all images loaded by the Notification from the phone memory.

getWidth <instance>.getWidth() : Number

Gets the width (in pixels) of the Notification instance.

setWidth <instance>.setWidth(newWidth:Number) : Void

Sets a new width to the Notification instance. The minimum size allowed is 32 pixels for small icons and 49 pixels for large icons and the maximum size is 220 pixels.

Events summary

Name Syntax Description

onClose <instance>.onClose = function(sender:MovieClip) {}

Dispatched whenever the Notification is closed and has already disappeared from screen.

Flash Lite UI Components Help

62

Options Menu component

Top level Sub level

About The Options menu provides a list of choices or actions that are usually accessible via the Left soft key (LSK), labeled as Options. Once the Left soft key Options is pressed, the Options menu appears and displays a list of choices with the most probable action or choice being selected by default. The user then presses the Middle soft key (MSK) to either invoke an event or view the sub-menu (when there are two or more sub-options associated with the selected option from the Options menu).

When the Options menu is opened, the MSK should be labeled as Select. The Right soft key (RSK) should be labeled as Back (to indicate that the user can return to the previous view). When an item with more than one choice is selected and the MSK Select is pressed, a sub-menu appears while MSK and RSK retain their labels as Select and Back respectively. If any item in the list requires help information, then LSK should be labeled as Info each time an item is highlighted.

It is recommended not to have more than six items in the top level of the Options menu. If there are more than six items in the list, the scrollbar will be displayed on the right edge of the Options menu.

An Options menu has a maximum of two levels of hierarchy. There is the top and sub level. Sub levels or sub menus are indicated to with an arrow pointing to the right.

For items holding sub menus, pressing the MSK, labeled as Select or the right navigation key will open the sub-menus. Pressing the left navigation key or pressing the RSK labeled as Back will close the sub menus.

Selecting an item in the sub level or the top level (without sub levels) closes the entire Options menu, this includes both the top and sub menus, and finally the action is performed.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Flash Lite UI Components Help

63

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using - Options Menu (Top level) component Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Options Menu (Top level) component to an application while authoring.

To create an application with the Options Menu component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the OptionsMenu and the SoftKeys components to the stage. (Note: Try to

place UI components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu. 7. Select the OptionsMenu component in the stage and give it an instance name:

myOptionsMenu_opt. Customize it as desired and add at least two items to the Text property array, otherwise it will not be loaded.

8. Select the SoftKeys component in the stage and give it an instance name: mySoftKeys_sks. Customize it as desired and label Left soft key as "Options".

9. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale"; mySoftKeys_sks.onSoftKeyDown = function(keyPressed:String) { trace("The key " + keyPressed + " was pressed."); if (keyPressed == "LSK") { myOptionsMenu_opt.show(); } }

10. Select Control > Test Movie or press Ctrl + Enter.

Flash Lite UI Components Help

64

11. Press the Left soft key labeled "Options" to see the result.

The following example uses ActionScript to create an Options Menu (Top level) component.

To create the Options Menu component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the OptionsMenu and SoftKeys components to the library or double click on

them. When you double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("OptionsMenu", "myOptionsMenu_opt", this.getNextHighestDepth());

myOptionsMenu_opt._text = ["Send message", "Edit contact", "Send contact", "Delete contact", "Mark several", "More..."]; // Adds text items in the menu

//fullpath is the path of the image that will be loaded.Recommended image size: 20x20 px.

myOptionsMenu_opt._iconOn = ["fullpath/send_message.png", "fullpath/edit_contact.png", "fullpath/send_contact.png", "fullpath/delete_contact.png", "fullpath/mark_several.png", "fullpath/more.png"]; // Adds icons to items

myOptionsMenu_opt._isEnabled = [true, true, true, false, true, true]; //Sets which items in the menu are enabled or not

myOptionsMenu_opt._highlightPosition = 4; //Sets the initial highlight position.

//Creates the Soft Keys to interact with the Options Menu*

this.attachMovie("SoftKeys", "mySoftKeys_sks", this.getNextHighestDepth());

mySoftKeys_sks._LSK = "Options"; //Removes Left soft key

mySoftKeys_sks._RSK = "Back"; //Removes Right soft key

mySoftKeys_sks._MSK = "Select"; //Always use capital letter on first letter

Flash Lite UI Components Help

65

mySoftKeys_sks.onSoftKeyDown = function(keyPressed:String) {

trace("The key " + keyPressed + " was pressed.");

if (keyPressed == "LSK") {

myOptionsMenu_opt.show();

mySoftKeys_sks._LSK = "";

} else if (keyPressed == "RSK") {

mySoftKeys_sks._LSK = "Options";

}

}

mySoftKeys_sks.onSoftKeyUp = function(keyReleased:String) {

trace("The key " + keyReleased + " was released.");

}

myOptionsMenu_opt.onSelect = function(target:MovieClip, label:String, position:Number) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

trace("Options Menu instance: " + target);

mySoftKeys_sks._LSK = "Options";

}

myOptionsMenu_opt.onFocusChange = function(target:MovieClip, label:String, position:Number) {

trace("Currently highlighted item: " + label);

trace("Item index: " + position);

trace("Options Menu instance: " + target);

}

myOptionsMenu_opt.onOpen = function(target:MovieClip) {

trace("The menu " + target + " has opened.");

}

myOptionsMenu_opt.onClose = function(target:MovieClip) {

trace("The menu " + target + " has closed.");

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result. 9. When creating your application, the OptionsMenu must be used together with the SoftKeys

component, since the show() method will be called by the Left soft key (LSK) . The Right soft key (RSK) should be labeled as "Back". The RSK will close the OptionsMenu when pressed.

Note: The OptionsMenu component is modal, to avoid undesired interactions with other Sony Ericsson UI components in the background. Do not use the removeMovieClip() method with OptionsMenu when it is opened, otherwise the interaction with components in the screen will freeze. The component can be removed using removeMovieClip() only when it is hidden, for example, after the user has pressed middle or right soft key.

Flash Lite UI Components Help

66

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing - Options Menu (Top level) component You can customize Options Menu (top level) component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text Array The label of the items. It is an array that sets a text for each item in the list.

Highlight position

<instance>._highlightPosition Number The position of the highlight in the menu. The initial position of the highlight can be set to any item inside the Options Menu. The default position is the first item.

Icon on (20x20) <instance>._iconOn Array The icon path of the images of the items. It is an array that sets the icon path for each item in the Options Menu. The number of items in this array must be the same as in Text array. If an item does not have icon, then "" should be informed. These icons represent the ON state of a setting when there is another icon set in Icon off array. The size of the icon is 20x20 pixels.

Icon off (20x20) <instance>._iconOff Array The icon path of the secondary images of the Options Menu items. These icons represent the OFF state of a setting when there is primary icon set in Icon on array. This parameter is optional, but if informed, the number of items in this array must be the same as in Text array. If an item does not have icon, then "" should be informed. If nothing is informed, it means that there is no ON/OFF state for the menu items. The size of the icon is 20x20 pixels.

Flash Lite UI Components Help

67

Active item <instance>._isActive Array Indicates whether the menu item state is set to ON (true) or OFF (false). If set to ON, the icon from Icon on array will be displayed for the item, and if set to OFF, it will be the icon from Icon off. The default value for all items is true. This parameter is optional and needs to be informed only if Icon off is also informed.

Enabled <instance>._isEnabled Array Indicates whether the menu item is enabled (true) or disabled (false). All items in the array must have a value set. The default value is true.

Sub-level instance

<instance>._sublevel Array Assigns a sublevel object instance to a menu item. If left blank, no sublevels will be available for the related the item.

Text color <instance>._textColor Number The text color for all menu items. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color when the menu item is disabled. The default value is 0x8D8D8D.

Highlight text color

<instance>._highlightTextColor Number The text color when the menu item has focus. The default value is 0xFFFFFF.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the menu item is disabled and has focus. The default value is 0xA9D285.

Background color

<instance>._backgroundColor Number The background color of the Options Menu. The default value is 0xFAFAFA.

Highlight color <instance>._highlightColor Number The highlight color when the menu item has focus. The default value is 0x8DDC48.

Separator color <instance>._separatorColor Number The color of the list separator item. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The shadow color of the list separator item. The default value is 0xFFFFFF.

Frame color <instance>._frameColor Number The frame color of the Options Menu. The default value is 0xB3B3B3.

Dim color <instance>._dimColor Number The background dim color of the Options Menu. The default value is 0x3D4242.

Scroll track color

<instance>._scrollTrackColor Number The track color of the scroll bar of the Options Menu. The default value is 0xFFFFFF.

Flash Lite UI Components Help

68

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the Options Menu. The default value is 0xA8A4A4.

Scroll slider color

<instance>._scrollSliderColor Number The slider color of the scroll bar of the Options Menu. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

addItems <instance>.addItems(text:Array, iconOn:Array, iconOff:Array, sublevel:Array, enabled:Array, active:Array) : Void

Adds items to the Options Menu. The parameters are: the text label array, the image path of icon on array, the image path of icon off array, the sublevel instance name array, the availability array (enabled or disabled) and the state array (initial selected image - either from icon on or from icon off arrays).

remove <instance>.remove(index:Number) : Void

Removes an item from the Options Menu. The parameter indicates which index of the menu you want removed.

removeAll <instance>.removeAll() : Void Clears all values in the Options Menu.

getListLength <instance>.getListLength() : Number Gets the size of the Options Menu. Returns a number.

getFocusIndex <instance>.getFocusIndex() : Number Gets which option on the Options Menu is currently highlighted. Returns a number: zero-relative index of the focused item or -1 if no item has focus.

getSelected <instance>.getSelected() : Number Gets the value of the currently selected item on the Options Menu. Returns a number.

select <instance>.select(index:Number) : Void

Selects an item in the Options Menu. The parameter indicates which index of the menu will be marked as selected.

show <instance>.show() : Void Shows the Options Menu starting the entrance animation.

Events summary

Name Syntax Description

onFocusChange <instance>.onFocusChange = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user navigates in the Options Menu.

onOpen <instance>.onOpen = function(sender:MovieClip) {}

Dispatched whenever the Options Menu is opened and has already appeared on screen.

Flash Lite UI Components Help

69

onClose <instance>.onClose = function(sender:MovieClip) {}

Dispatched whenever the Options Menu is closed and has already disappeared from screen.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user selects an item in the Options Menu.

Using - Options Menu Sub Level component Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Options Menu Sub Level component to an application while authoring.

To create an application with the Options Menu Sub Level component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the OptionsMenu, the OptionsMenuSublevel and the SoftKeys components to

the stage. (Note: Try to place UI components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties. 7. Select the OptionsMenuSublevel component in the stage and give it an instance name:

myOptionsMenuSublevel_opt. Customize it as desired and add at least two items to the Text property array, otherwise it will not be loaded.

8. Select the OptionsMenu component in the stage and give it an instance name: myOptionsMenu_opt. Customize it as desired and add two items to the Text property array.

9. Add two items to the Sub-level instance property array. Leave the first item (zero index) blank and add myOptionsMenuSublevel_opt to the second item (index 1). This step will create a Sub Level in the second item of the OptionsMenu.

10. Select the SoftKeys component in the stage and give it an instance name: mySoftKeys_sks. Customize it as desired and label Left soft key as "Options"

11. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code: Stage.scaleMode = "noScale"; mySoftKeys_sks.onSoftKeyDown = function(keyPressed:String) { trace("The key " + keyPressed + " was pressed."); if (keyPressed == "LSK") { myOptionsMenu_opt.show(); } }

12. Select Control > Test Movie or press Ctrl + Enter.

Flash Lite UI Components Help

70

13. Press the right softkey labeled "Options" to see the result.

The following example uses ActionScript to create a Options Menu Sub level component.

To create an Options Menu Sub Level component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the OptionsMenuSublevel, the OptionsMenu and the SoftKeys components to

the library or double click on them. When you double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

// Attaches a Top Level instance of the Options Menu

this.attachMovie("OptionsMenu", "myOptionsMenu_opt", this.getNextHighestDepth());

myOptionsMenu_opt._text = ["Send message", "Edit contact", "Send contact", "Delete contact", "Mark several", "More..."]; // Add text items in the menu

// fullpath is the path of the image that will be loaded.Recommended image size: 20x20 px.

myOptionsMenu_opt._iconOn = ["fullpath/send_message.png", "fullpath/edit_contact.png", "fullpath/send_contact.png", "fullpath/delete_contact.png", "fullpath/mark_several.png", "fullpath/more.png"]; // Add icons to items.

myOptionsMenu_opt._sublevel = ["", "", "sendContact_opt"]; // Indicates sublevels instance names to the top menu.

myOptionsMenu_opt._isEnabled = [true, true, true, false, true, true]; // Sets which items in the menu are enabled or not.

myOptionsMenu_opt._highlightPosition = 4; // Sets the initial highlight position.

// Attaches an instance of the sublevel

this.attachMovie("OptionsMenuSublevel", "sendContact_opt", this.getNextHighestDepth());

Flash Lite UI Components Help

71

sendContact_opt._text = ["As SMS", "As MMS", "As email", "Via Bluetooth"]; //Add text items in the sublevel

sendContact_opt._isEnabled = [true, true, true, true]; // Set which items in the menu are enabled or not.

sendContact_opt._highlightPosition = 0; // Sets the initial highlight position.

// Creates a Soft Key to interact with the Options Menu Top Level*

this.attachMovie("SoftKeys", "mySoftKeys_sks", this.getNextHighestDepth());

mySoftKeys_sks._LSK = "Options"; //Remove Left soft key

mySoftKeys_sks._RSK = "Back"; //Remove Right soft key

mySoftKeys_sks._MSK = "Select"; //Always use capital letter on first letter

mySoftKeys_sks.onSoftKeyDown = function(keyPressed:String) {

trace("The key " + keyPressed + " was pressed."); if (keyPressed == "LSK") {

myOptionsMenu_opt.show();

mySoftKeys_sks._LSK = "";

} else if (keyPressed == "RSK") {

mySoftKeys_sks._LSK = "Options";

}

}

myOptionsMenu_opt.onSelect = function(target:MovieClip, label:String, position:Number) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

trace("Options Menu instance: " + target);

mySoftKeys_sks._LSK = "Options";

}

sendContact_opt.onSelect = function(target:MovieClip, label:String, position:Number) {

trace("Currently selected item: " + label);

trace("Item index: " + position);

trace("Options Menu Sublevel instance: " + target);

mySoftKeys_sks._LSK = "Options";

}

sendContact_opt.onFocusChange = function(target:MovieClip, label:String, position:Number) {

trace("Currently highlighted item: " + label);

Flash Lite UI Components Help

72

trace("Item index: " + position);

trace("Options Menu Sublevel instance: " + target);

}

sendContact_opt.onOpen = function(target:MovieClip) {

trace("The sublevel " + target + " has opened.");

}

sendContact_opt.onClose = function(target:MovieClip) {

trace("The sublevel " + target + " has closed.");

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result. 9. When creating your application, the OptionsMenuSublevel must be used together with the

SoftKeys component, since the show() method will be called by the Left Soft Key (LSK) . The Right soft key (RSK) should be labeled as "Back". The RSK will close the OptionsMenu when pressed.

Note: The OptionsMenuSublevel component is modal, to avoid undesired interactions with other Sony Ericsson UI components in the background. Do not use the removeMovieClip() method with OptionsMenuSublevel when it is opened, otherwise the interaction with components in the screen will freeze. The component can be removed using removeMovieClip() only when it is hidden, for example, after the user has pressed middle or right soft key.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing - Options Menu Sub Level component You can customize the Options Menu Sub Level component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text Array The label of the Options Menu Sub Level items. It is an array that sets a text for each item in the list. All items in the array must have a value set.

Flash Lite UI Components Help

73

Highlight position

<instance>._highlightPosition Number The position of the highlight in the Options Menu Sub Level. The initial position of the highlight can be set to any item inside the sub level. The default value is the first item.

Icon on (20x20) <instance>._iconOn Array The icon path of the images of the Options Menu Sub Level. It is an array that sets the icon path for each item in the sub level. The number of items in this array must be the same as in Text array. If an item does not have icon, then "" should be informed. These icons represent the ON state of a setting when there is another icon set in Icon off array. The size of the icon is 20x20 pixels.

Icon off (20x20) <instance>._iconOff Array The icon path of the secondary images of the Options Menu Sub Level items. These icons represent the OFF state of a setting when there is primary icon set in Icon on array. This parameter is optional, but if informed, the number of items in this array must be the same as in Text array. If an item does not have icon, then "" should be informed. If nothing is informed, it means that there is no ON/OFF state for the menu items. The size of the icon is 20x20 pixels.

Active item <instance>._isActive Array Indicates whether the Options Menu Sub Level item state is set to ON (true) or OFF (false). If set to ON, the icon from Icon on array will be displayed for the item, and if set to OFF, it will be the icon from Icon off. The default value for all items is true. This parameter is optional and needs to be informed only if Icon off is also informed.

Enabled <instance>._isEnabled Array Indicates whether the Options Menu Sub Level item is enabled (true) or disabled (false). All items in the array must have a value set. The default value is true.

Text color <instance>._textColor Number The text color for all Options Menu Sub Level items. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color when the Options Menu Sub Level item is disabled. The default value is 0x8D8D8D.

Highlight text color

<instance>._highlightTextColor Number The text color when the Options Menu Sub Level item has focus. The default value is 0xFFFFFF.

Flash Lite UI Components Help

74

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the Options Menu Sub Level item is disabled and has focus. The default value is 0xA9D285.

Background color

<instance>._backgroundColor Number The background color of the Options Menu Sub Level. The default value is 0xFAFAFA.

Highlight color <instance>._highlightColor Number The highlight color when the Options Menu Sub Level item has focus. The default value is 0x8DDC48.

Separator color <instance>._separatorColor Number The color of the list separator item. The default value is 0xB3B3B3.

Separator shadow color

<instance>._separatorShadowColor Number The shadow color of the list separator item. The default value is 0xFFFFFF.

Frame color <instance>._frameColor Number The frame color of the Options Menu Sub Level. The default value is 0xB3B3B3.

Dim color <instance>._dimColor Number The background dim color of the Options Menu Sub Level. The default value is 0x3D4242.

Scroll track color

<instance>._scrollTrackColor Number The track color of the scroll bar of the Options Menu Sub Level. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the Options Menu Sub Level. The default value is 0xA8A4A4.

Scroll slider color

<instance>._scrollSliderColor Number The slider color of the scroll bar of the Options Menu Sub Level. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

addItems <instance>.addItems(text:Array, iconOn:Array, iconOff:Array, enabled:Array, active:Array) : Void

Adds items to the Options Menu Sub Level. The parameters are: the text label array, the image path of icon on array, the image path of icon off array, the availability array (enabled or disabled) and the state array (initial selected image - either from icon ON or from icon OFF arrays).

remove <instance>.remove(index:Number) : Void

Removes an item from the Options Menu Sub Level. The parameter indicates which index of the menu you want removed.

removeAll <instance>.removeAll() : Void Clears all values in the Options Menu Sub Level.

getListLength <instance>.getListLength() : Number Gets the size of the Sub Level. Returns a number.

Flash Lite UI Components Help

75

getFocusIndex <instance>.getFocusIndex() : Number Gets which option on the Options Menu Sub Level is currently highlighted. Returns a number: zero-relative index of the focused item or -1 if no item has focus.

getSelected <instance>.getSelected() : Number Gets the value of the currently selected item on the Options Menu Sub Level. Returns a number.

select <instance>.select(index:Number) : Void

Selects an item in the Options Menu Sub Level. The parameter indicates which index of the menu will be marked as selected.

Events summary

Name Syntax Description

onFocusChange <instance>.onFocusChange = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user navigates in the Options Menu Sub Level.

onOpen <instance>.onOpen = function(sender:MovieClip) {}

Dispatched whenever the Options Menu Sub Level is opened and has already appeared on screen.

onClose <instance>.onClose = function(sender:MovieClip) {}

Dispatched whenever the Options Menu Sub Level is closed and has already disappeared from screen.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String, position:Number) {}

Dispatched whenever user selects an item in the Options Menu Sub Level.

Flash Lite UI Components Help

76

Progress Indicator component

About Progress Indicator communicates to the user that an operation with a known duration is in progress.

Progress Indicator can be used for example in dialogs and lists, to let the user know that the system is responding, but taking some time.

Progress Indicator displays an area which is filled as the progress proceeds. The filled area represents how long the progress has proceeded. The filled area can have an animated transition, in order to show that the process is ongoing.

The Progress Indicator can either be in the form of a bar or a circle.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Progress Indicator component to an application while authoring.

To create an application with the Progress Indicator component:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

77

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop a ProgressIndicator component to the stage. (Note: Try to place UI components

on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give an instance name: myProgressIndicator_pgi.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

Key.addListener(this); //Creates a key listener to control the Progress Indicator.

this.onKeyDown = function() {

if (Key.getCode() == Key.RIGHT) { //Increments the Progress Indicator if the RIGHT key is pressed.

myProgressIndicator_pgi.setProgress(myProgressIndicator_pgi.getProgress() + 1);

} else if (Key.getCode() == Key.LEFT) { //Decrements the Progress Indicator if the LEFT key is pressed.

myProgressIndicator_pgi.setProgress(myProgressIndicator_pgi.getProgress() - 1);

}

}

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Progress Indicator component.

To create a Progress Indicator component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L.

Flash Lite UI Components Help

78

6. Drag and drop a ProgressIndicator component to the library or double click on it. When you double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ProgressIndicator", "myProgressIndicator_pgi", this.getNextHighestDepth());

myProgressIndicator_pgi._shape = "circle";

myProgressIndicator_pgi._size = "large";

Key.addListener(this); // Creates a key listener to control the Progress Indicator.

this.onKeyDown = function() {

if (Key.getCode() == Key.RIGHT) { // Increments the Progress Indicator if the RIGHT key is pressed.

myProgressIndicator_pgi.setProgress(myProgressIndicator_pgi.getProgress() + 1);

} else if (Key.getCode() == Key.LEFT) { // Decrements the Progress Indicator if the LEFT key is pressed.

myProgressIndicator_pgi.setProgress(myProgressIndicator_pgi.getProgress() - 1);

}

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize Sony Ericsson Progress Indicator on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Flash Lite UI Components Help

79

Properties summary

Parameter Name Syntax Type Description

Percentage text <instance>._isPercentageText Boolean Indicates whether the component has a text indicating progress percentage (true) or not (false). This parameter is available for "bar" shape only. The format is n% (from 0 to 100). The default value is false.

Shape <instance>._shape String The component graphical representation: either "bar" or "circle". The default value is "bar".

- <instance>._size String The size of the Progress Indicator: either "small" or "large". This parameter is available only for "circle" shape. The default value is "large".

Effect <instance>._hasEffect Boolean Indicates whether the component has animation (true) or not (false). This parameter is available for "bar" shape only. The default value is true.

Maximum value <instance>._maximum Number The maximum value for the Progress Indicator. It will be used to calculate the progress percentage together with the minimum value. The default value is 100.

Minimum value <instance>._minimum Number The minimum value for the Progress Indicator. It will be used to calculate the progress percentage together with the maximum value. The default value is 0.

Text color <instance>._textColor Number The percentage text color of the Progress Indicator. The default value is 0x282828.

Background color <instance>._backgroundColor Number The background color of the Progress Indicator. The default value is 0xACACAC.

Fill color <instance>._fillColor Number The fill color of the Progress Indicator. The default value is 0x8DDC48.

Effect color <instance>._effectColor Number The effect color of the Progress Indicator. The default value is 0xFFFFFF.

Note: The properties that do not have a Parameter Name can only be accessed via ActionScript code.

Methods summary

Name Syntax Description

getWidth <instance>.getWidth() : Number Returns the size in pixels of the "bar" shape Progress Indicator; if the "circle" shape is selected instead, returns 0.

setWidth <instance>.setWidth(newWidth:Number) : Sets the size in pixels of the "bar" shape

Flash Lite UI Components Help

80

Void Progress Indicator. This parameter is available for "bar" shape only. The minimum size is 35 pixels and the maximum is 220 pixels.

getProgress <instance>.getProgress() : Number Returns the progress of completion.

setProgress <instance>.setProgress(completed:Number, total:Number) : Void

Sets the visual state of the Progress Indicator according to the amount of progress made.

Events summary

Name Syntax Description

onProgress <instance>.onProgress = function(sender:Object, completed:Number, total:Number) {}

Dispatched whenever the value of the Progress Indicator changes.

onComplete <instance>.onComplete = function(sender:Object, completed:Number, total:Number) {}

Dispatched whenever ongoing process is completed.

Flash Lite UI Components Help

81

Push Button component

About The Push Button component is used to initiate an action, such as submitting information from a form.

Push buttons are not commonly used in a highlight driven UI where users depend on navigation keys for moving around the UI. Push Button component is rather more common in the case of forms (as in the case of submit buttons for example) and as controls in some applications (as in the case of close button).

The Push Button component may contain text, icon, or both.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Push Button component to an application while authoring.

To create an application with the Push Button component:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

82

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop, for instance, two PushButton components to the stage. (Note: Try to place UI

components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give different instance names for the two components: myPushButton1_btn and myPushButton2_btn.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

function selectHandler(sender:MovieClip, label:String) {

switch (sender._name) {

case "myPushButton1_btn":

trace("Push Button 1 Selected");

break;

case "myPushButton2_btn":

trace("Push Button 2 Selected");

break;

}

}

myPushButton1_btn.onSelect = selectHandler;

myPushButton2_btn.onSelect = selectHandler;

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create the Push Button component.

To create a Push Button component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a PushButton component to the library or double click on it. When you double

click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

Flash Lite UI Components Help

83

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("PushButton", "myPushButton_btn", this.getNextHighestDepth());

myPushButton_btn._labelText = "Push Button";

myPushButton_btn._isEnabled = true;

myPushButton_btn.setWidth(130);

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Push Button component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._labelText String The label of the Push Button. The default value is "OK".

Text placement <instance>._textPlacement String The placement of the text in relation to icon: either "right" or "left". The default value is "right".

Icon <instance>._icon String The icon to be displayed in the Push Button. The full path for the file must be informed. The size of the icon depends on having text or icon only in the Push Button. If icon + text: size is 20x20 px and if icon only: size is 26x26 px.

Enabled <instance>._isEnabled Boolean Indicates whether the Push Button is enabled (true) or disabled (false). The default value is true.

Flash Lite UI Components Help

84

Text color <instance>._textColor Number The text color of the Push Button. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color when the Push Button is disabled. The default value is 0x787878.

Highlight text color

<instance>._highlightTextColor Number The text color when the Push Button has focus. The default value is 0xFFFFFF.

Disabled highlight text color

<instance>._disabledHighlightTextColor Number The text color when the Push Button is disabled and has focus. The default value is 0xCADEBB.

Pressed text color

<instance>._pressedTextColor Number The text color when the Push Button is pressed. The default value is 0xFFFFFF.

Background color

<instance>._backgroundColor Number The background color of the Push Button. The default value is 0xFAFAFA.

Highlight color <instance>._highlightColor Number The background color of the Push Button when it has focus. The default value is 0x8DDC48.

Pressed background color

<instance>._pressedBackgroundColor Number The background color of the Push Button when it is pressed. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

getWidth <instance>.getWidth() : Number Gets the width (in pixels) of the Push Button instance.

setWidth <instance>.setWidth(newWidth:Number) : Void

Sets a new width to the Push Button instance. The minimum size allowed is 48 pixels and the maximum is 220 pixels.

Events summary

Name Syntax Description

onFocusIn <instance>.onFocusIn = function(sender:MovieClip) {}

Dispatched whenever the user highlights the Push Button.

onFocusOut <instance>.onFocusOut = function(sender:MovieClip) {}

Dispatched whenever the button looses focus.

onSelect <instance>.onSelect = function(sender:MovieClip, label:String) {}

Dispatched whenever the user presses the Middle soft key and the Push Button is with focus.

Flash Lite UI Components Help

85

Radio Button component

About The Radio Button component allows users to select one option, and only one, from among a set of mutually exclusive options, where users have to select one item, action, or setting out of several alternatives.

Radio Buttons are always arranged in groups, and only one button in the group can be checked at any time.

A group of Radio Buttons may not contain less than two buttons. Clicking a non-selected Radio Button will deselect any other button that has been previously selected in the same group. When necessary try to offer a default selection for Radio Button lists.

Middle soft key (MSK) label is usually set to Select when a Radio Button is highlighted.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Radio Button component to an application while authoring.

To create an application with the Radio Button component:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

86

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag at least two RadioButton components to the stage. (Note: Try to place UI components on

integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give different instance names for the two components: myRadioButton1_rbn and myRadioButton2_rbn.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

function selectHandler(sender:MovieClip, group:String, label:String, value:String) {

trace("RadioButton:" + sender._name + ", label:\"" + label + "\", group:" + group + ", value:" + value);

}

function focusInHandler(sender:MovieClip) {

trace("RadioButton: " + sender._name + " received focus.");

}

function focusOutHandler(sender:MovieClip) {

trace("RadioButton: " + sender._name + " lost focus.");

}

myRadioButton1_rbn.onSelect = selectHandler;

myRadioButton2_rbn.onSelect = selectHandler;

myRadioButton1_rbn.onFocusIn = focusInHandler;

myRadioButton2_rbn.onFocusIn = focusInHandler;

myRadioButton1_rbn.onFocusOut = focusOutHandler;

myRadioButton2_rbn.onFocusOut = focusOutHandler;

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create the Radio Button component.

To create a Radio Button component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

87

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a RadioButton component to the library or double click on it. When you double

click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("RadioButton", "myRadioButton1_rbn", this.getNextHighestDepth());

myRadioButton1_rbn._y = 20;

myRadioButton1_rbn._group = "defaultGroup";

myRadioButton1_rbn._labelText = "Radio 1";

this.attachMovie("RadioButton", "myRadioButton2_rbn", this.getNextHighestDepth());

myRadioButton2_rbn._y = 60;

myRadioButton2_rbn._group = "defaultGroup";

myRadioButton2_rbn._labelText = "Radio 2";

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Radio Button component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Flash Lite UI Components Help

88

Properties summary

Parameter Name

Syntax Type Description

Text <instance>._labelText String The label of the Radio Button.

Text placement <instance>._textPlacement String The placement of the text in relation to the Radio Button: "above", "below", "right" or "left". The default value is "right".

Enabled <instance>._isEnabled Boolean Indicates whether the Radio Button is enabled (true) or disabled (false). The default value is true.

Group name <instance>._group String The group name of the Radio Button. It is used to create a list of possible values related to a subject, defining a set of Radio Buttons that will interact with themselves. For example, both name the group "Gender" for Radio Buttons of values "Male" and "Female". The default value is "defaultGroup".

Selected <instance>._isSelected Boolean Indicates if the Radio Button will be loaded selected (true) or unselected (false). The default value is false. Note: only ONE selected option is accepted per group - if other instance is also defined as selected, the previous selected will be unselected.

Value <instance>._value String The value associated with the Radio Button. The default value is undefined.

Text color <instance>._textColor Number The text color of the Radio Button. The default value is 0x282828.

Disabled text color

<instance>._disabledTextColor Number The text color when the Radio Button is disabled. The default value is 0x8D8D8D.

Highlight text color

<instance>._hightlightTextColor Number The text color when the Radio Button has focus. The default value is 0x282828.

Disabled highlight text color

<instance>._disabledHightlightTextColor Number The text color when the Radio Button is disabled and has focus. The default value is 0x8D8D8D.

Background color

<instance>._backgroundColor Number The background color of the highlight when the Radio Button has focus. The default value is 0xFAFAFA.

Flash Lite UI Components Help

89

Highlight color <instance>._highlightColor Number The color of the highlight border when the Radio Button has focus. The default value is 0x8DDC48.

Selected color <instance>._selectedColor Number The color of the inner dot when the Radio Button is selected. The default value is 0xEEEEEE.

Highlight selected color

<instance>._highlightSelectedColor Number The color of the inner dot when the Radio Button is selected and has focus. The default value is 0x8DDC48.

Events summary

Name Syntax Description

onFocusIn <instance>.onFocusIn = function(sender:MovieClip, group:String) {}

Dispatched whenever the user highlights the Radio Button.

onFocusOut <instance>.onFocusOut = function(sender:MovieClip, group:String) {}

Dispatched whenever the Radio Button looses focus.

onSelect <instance>.onSelect = function(sender:MovieClip, group:String,label:String, value:String) {}

Dispatched whenever the user presses the Middle soft key and the Radio Button is with focus.

Flash Lite UI Components Help

90

Scrollable Area component

About The Scrollable Area component is used for displaying and scrolling bitmaps and Flash movie clips within a scrollable area. By using the Scrollable Area component, you can limit the amount of screen area occupied by your bitmaps, movie clips and other similar media types. The scrollable content can be set while authoring and at runtime by using ActionScript.

A typical usage for the Scrollable Area is displaying large Maps and Photos.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Flash Lite UI Components Help

91

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Scrollable Area component to an application while authoring.

To create an application with the Scrollable Area component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the ScrollableArea component to the stage. (Note: Try to place UI components

on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. In the Parameters inspector set the Content property with a valid path to an external file ( *jpg, unanimated *gif, *png or a *swf file). Customize the component as desired and give it an instance name: myScrollableArea_sca.

8. Select Frame 1 in the timeline, open the Actions panel through the menu Window > Actions or press F9 and enter the following code:

Stage.scaleMode = "noScale";

myScrollableArea_sca.onScroll = scrollingHandler;

myScrollableArea_sca.onContentLoad = loadHandler;

function scrollingHandler(vScroll:Number, vTotalScroll:Number, hScroll:Number, hTotalScroll:Number) {

trace("Vertical scroll index " + vScroll);

trace("Vertical maximum scroll index " + vTotalScroll);

trace("Horizontal scroll index " + hScroll);

trace("Horizontal maximum scroll index " + hTotalScroll);

}

function loadHandler() {

trace("Content loaded");

}

9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create the Scrollable Area component.

Flash Lite UI Components Help

92

To create a Scrollable Area component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the ScrollableArea component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ScrollableArea", "myScrollableArea_sca", this.getNextHighestDepth());

myScrollableArea_sca._content = "file://c:/Pictures/image.png"; // Full path of the image.

myScrollableArea_sca._hScroll = "automatic";

myScrollableArea_sca._vScroll = "automatic";

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Scrollable Area component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Content <instance>._content String The content to be displayed in the Scrollable Area container. The default

Flash Lite UI Components Help

93

value is "". The full path for the file must be informed.

Note: The maximum size for the content should be 2MB. If the size is greater than 2MB it could cause crash due to lack of phone memory.

Horizontal scroll <instance>._hScroll String Indicates whether the horizontal scroll bar will be displayed (automatic) or not (no). The default value is "automatic".

Vertical scroll <instance>._vScroll String Indicates whether the vertical scroll bar will be displayed (automatic) or not (no). The default value is "automatic".

Scroll track color <instance>._scrollTrackColor Number The track color of the scroll bar of the Scrollable Area. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the Scrollable Area. The default value is 0xA8A4A4.

Scroll slider color <instance>._scrollSliderColor Number The slider color of the scroll bar of the Scrollable Area. The default value is 0x8DDC48.

Events summary

Name Syntax Description

onScroll <instance>.onScroll = function(vScroll:Number, vTotalScroll:Number, hScroll:Number, vTotalScroll:Number) {}

Dispatched whenever a content is scrolled.

onContentLoad <instance>.onContentLoad = function() {}

Dispatched whenever an external content is completely loaded.

Flash Lite UI Components Help

94

Scrollable Text component

About The Scrollable Text component is used to display and scroll continuous text. It is not possible to edit the displayed text within the component.

The text font size can be customized but the font family cannot.

The Scrollable Text accepts HTML formatting, and due to Flash Lite limitations, it will render only for the following tags: p, br, sbr, font (with face and size attributes), b, and i.

A typical usage for the Scrollable Text is, for instance, an internet browser.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Scrollable Text component to an application while authoring.

To create an application with the Scrollable Text component:

Flash Lite UI Components Help

95

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the ScrollableText component to the stage. (Note: Try to place UI components

on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. In the Parameters inspector customize the component as desired, and add some text in the Text property.

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create the Scrollable Text component.

To create a Scrollable Text component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the ScrollableText component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("ScrollableText", "myScrollableText_sct", this.getNextHighestDepth());

myScrollableText_sct._text = "<b>Sony Ericsson</b> considers sustainable development and production to be one of the most important challenges for the future and one that demands immediate action from responsible manufacturers. Sony Ericsson is committed to continuously improving our impact on the environment and society, and striving to follow the holistic approach to business with the triple bottom line thinking* or the three dimensions of sustainability: economic, environmental and social aspects of the company. <br><br>Sony Ericsson aims to exceed minimum industrial standards and has taken a leadership position in a number of areas. Our decision to lead the way in phasing out unwanted substances, our efforts to drive energy efficiency and our focus on recycling give us a very strong foundation to strive for a leadership position in the mobile phone industry.";

Flash Lite UI Components Help

96

myScrollableText_sct.setHeight(200);

myScrollableText_sct.setWidth(200);

myScrollableText_sct._isFrame = true;

myScrollableText_sct._isHTML = true;

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Scrollable Text component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text String The text to be displayed in the Scrollable Text container. The default value is "".

Font size <instance>._fontSize Number The font size of the Scrollable Text. The default value is 20.

Frame <instance>._isFrame Boolean Indicates whether the container should have a frame (true) or not (false). The default value is true.

HTML text <instance>._isHTML Boolean Indicates whether the container should handle HTML (true) or not (false). The default value is false.

Text color <instance>._textColor Number The text color of the Scrollable Text. The default value is 0x282828.

Background color <instance>._backgroundColor Number The background color of the Scrollable Text. The default value is 0xFFFFFF.

Frame color <instance>._frameColor Number The frame color of the Scrollable Text. The default value is 0xB3B3B3.

Highlight color <instance>._highlightColor Number The highlight color when the Scrollable Text has focus. The default value is 0x8DDC48.

Flash Lite UI Components Help

97

Scroll track color <instance>._scrollTrackColor Number The track color of the scroll bar of the Scrollable Text. The default value is 0xFFFFFF.

Scroll track outline color

<instance>._scrollTrackOutlineColor Number The track outline color of the scroll bar of the Scrollable Text. The default value is 0xA8A4A4.

Scroll slider color <instance>._scrollSliderColor Number The slider color of the scroll bar of the Scrollable Text. The default value is 0x8DDC48.

Methods summary

Name Syntax Description

getHeight <instance>.getHeight() : Number Gets the height in pixels of the Scrollable Text container. The default value is 266 pixels.

getWidth <instance>.getWidth() : Number Gets the width in pixels of the Scrollable Text container. The default value is 240 pixels.

setHeight <instance>.setHeight(newHeight:Number) : Void

Sets a new height for the Scrollable Text container. The minimum size allowed is 50 pixels and the maximum is 266 pixels.

setWidth <instance>.setWidth(newWidth:Number) : Void

Sets a new width for the Scrollable Text container. The minimum size allowed is 30 pixels and the maximum is 240 pixels.

Events summary

Name Syntax Description

onScroll <instance>.onScroll = function(firstRowId:Number, lastRowId:Number, scrollSteps:Number) {}

Dispatched whenever the user scrolls the text. The parameters are: the Id of the first visible row of the container, the Id of the last visible row, and the Id that the first row will assume when reaching the bottom of the text.

onTextChange <instance>.onTextChange = function(lastRowId:Number, scrollSteps:Number) {}

Dispatched whenever a text change is detected.

Flash Lite UI Components Help

98

Slider component

About The Slider component defines a range of numeric values which a user can increase or decrease by using the navigation keys LEFT/RIGHT or UP/DOWN.

Typical usage for a slider is to adjust the volume, zoom in or out, or adjust screen brightness.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Slider component to an application while authoring.

To create an application with the Slider component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the Slider component to the stage. (Note: Try to place UI components on integer

XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player).

Flash Lite UI Components Help

99

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give it an instance name: mySlider_sli.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

mySlider_sli.onIncrease = onSliderIncrease;

mySlider_sli.onDecrease = onSliderDecrease;

function onSliderIncrease(sender:Object, position:Number) {

trace("Slider " + sender._name + " Current Value " + position);

}

function onSliderDecrease(sender:Object, position:Number) {

trace("Slider " + sender._name + " Current Value " + position);

}

9. Select Control > Test Movie.

The following example uses ActionScript to create a Slider component.

To create a Slider component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a Slider component to the library or double click on it. When you double click,

the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("Slider", "mySlider_sli", this.getNextHighestDepth());

mySlider_sli._initialPosition = 50;

mySlider_sli._isFilled = false;

mySlider_sli._steps = 10;

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Flash Lite UI Components Help

100

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Slider component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Background visible <instance>._isBackgroundVisible Boolean Indicates whether the Slider will have the background visible (true) or not (false). The default value is true.

Slider fill <instance>._isFilled Boolean Indicates whether the Slider will have a fill color (true) or not (false). The default value is true

Max value icon (20x20)

<instance>._maxIconValue String The name of a Movie Clip to set the maximum value icon. The default value is "iconMax". The full path for the file must be informed.

Min value icon (20x20)

<instance>._minIconValue String The name of a Movie Clip to set the minimum value icon. The default value is "iconMin". The full path for the file must be informed.

Steps <instance>._steps Number The number of steps of the Slider. The default value is 10.

Initial position <instance>._initialPosition Number The value of the Slider scroller initial step position. The default value is 0.

Background color <instance>._backgroundColor Number The background pane color of the Slider. The default value is 0xE3E4E5.

Track color <instance>._trackColor Number The track color of the Slider. The default value is 0x3E3E3E.

Slider color <instance>._sliderColor Number The slider color of the Slider. The default value is 0xE3E4E5.

Slider highlight color

<instance>._sliderHighlightColor Number The highlight color of the Slider. The default value is 0x8DDC48.

Flash Lite UI Components Help

101

Methods summary

Name Syntax Description

setPosition <instance>.setPosition(value:Number) : Void Sets the value of the Slider scroll position.

Events summary

Name Syntax Description

onDecrease <instance>.onDecrease = function(sender:Object, currentValue:Number) {}

Dispatched whenever left navigation key is pressed and Slider moves.

onIncrease <instance>.onIncrease = function(sender:Object, currentValue:Number) {}

Dispatched whenever right navigation key is pressed and Slider moves.

Flash Lite UI Components Help

102

Soft Keys component

About The Soft Keys component holds the actions for the application and for the current highlighted object.

Soft Keys are placed in the bottom of the screen, and right above or near the related device navigation buttons.

There are three soft keys, left, middle and right:

• Middle soft key (MSK) holds the most probable action for the view or the highlighted object on the screen.

• Left soft key (LSK) usually performs a secondary action or opens the Option Menu. • Right soft key (RSK) is usually associated with negative actions such as Cancel, Back, Exit or

Quit.

Soft Keys can be either textual or icon-based. Individual views can use both textual and icon-based soft keys. For example, it is possible to use icons on left and right soft keys and have a textual soft key in the middle.

A single soft key cannot contain both text and an icon at the same time.

The Soft Keys component background can be transparent, semi-transparent or opaque.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

Flash Lite UI Components Help

103

The following steps explain how to add the Soft Keys component to an application while authoring.

To create an application with the Soft Keys component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the SoftKeys component to the stage (Regarding performance reasons use just

one Soft Keys component per screen. Note: Try to place UI components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired and give an instance name: mySoftKeys_sks.

8. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

mySoftKeys_sks.onSoftKeyDown = function(keyPressed:String) {

trace("The key " + keyPressed + " was pressed.");

}

mySoftKeys_sks.onSoftKeyUp = function(keyReleased:String) {

trace("The key " + keyReleased + " was released.");

}

9. Select Control > Test Movie or press Ctrl + Enter to see the result. 10. Soft Keys will be automatically positioned in the bottom of the stage.

The following example uses ActionScript to create the Soft Keys component.

To create the Soft Keys component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the SoftKeys component to the library or double click on it. When you double

click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library (regarding performance reasons use just one Soft Keys component per screen).

Flash Lite UI Components Help

104

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("SoftKeys", "mySoftKeys_sks", this.getNextHighestDepth());

mySoftKeys_sks._LSK = "Options";//Always use capital letter on first letter

mySoftKeys_sks._MSK = "Select";//Always use capital letter on first letter

mySoftKeys_sks._RSK = "Back";// Always use capital letter on first letter

mySoftKeys_sks._isLSKEnabled = true;

mySoftKeys_sks._isMSKEnabled = true;

mySoftKeys_sks._isRSKEnabled = true;

8. Select Control > Test Movie or press Ctrl + Enter to see the result. 9. Soft Keys will be automatically positioned in the bottom of the stage.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Soft Keys component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Background visible <instance>._isBackgroundVisible Boolean Indicates whether the Soft Keys will have the background visible (true) or not (false). The default value is true.

LSK type <instance>._LSKType String Indicates whether the Left soft key contains text or icon image. Possible values are: "text", "image" or "empty". The default value is "text".

MSK type <instance>._MSKType String Indicates whether the Middle soft key contains text or icon image. Possible values are: "text", "image" or "empty". The default value is "text".

Flash Lite UI Components Help

105

RSK type <instance>._RSKType String Indicates whether the Right soft key contains text or icon image. Possible values are: "text", "image" or "empty". The default value is "text".

LSK content (text or path)

<instance>._LSK String The text to be displayed or the path of the image used for Left soft key. The image size should be 74x30 pixels.

MSK content (text or path)

<instance>._MSK String The text to be displayed or the path of the image used for Middle soft key. The image size should be 82x30 pixels.

RSK content (text or path)

<instance>._RSK String The text to be displayed or the path of the image used for Right soft key. The image size should be 74x30 pixels.

LSK enabled <instance>._isLSKEnabled Boolean Indicates whether the Left soft key is enabled (true) or disabled (false). The default value is true.

MSK enabled <instance>._isMSKEnabled Boolean Indicates whether the Middle soft key is enabled (true) or disabled (false). The default value is true.

RSK enabled <instance>._isRSKEnabled Boolean Indicates whether the Right soft key is enabled (true) or disabled (false). The default value is true.

Background color <instance>._backgroundColor Number The background color of the Soft Keys. The default value is 0xEEEEEE.

LSK text color <instance>._LSKTextColor Number The text color of Left soft key. The default value is 0x151616.

MSK text color <instance>._MSKTextColor Number The text color of Middle soft key. The default value is 0x151616.

RSK text color <instance>._RSKTextColor Number The text color of Right soft key. The default value is 0x151616.

LSK disabled text color

<instance>._LSKDisabledTextColor Number The text color when the Left soft key is disabled. The default value is 0x7D7C7D.

MSK disabled text color

<instance>._MSKDisabledTextColor Number The text color when the Middle soft key is disabled. The default value is 0x7D7C7D.

RSK disabled text color

<instance>._RSKDisabledTextColor Number The text color when the Right soft key is disabled. The default value is 0x7D7C7D.

LSK pressed text color

<instance>._LSKPressedTextColor Number The text color when the Left soft key is pressed. The default value is 0x151616.

MSK pressed text color

<instance>._MSKPressedTextColor Number The text color when the Middle soft key is pressed. The default value is 0x151616.

RSK pressed text color

<instance>._RSKPressedTextColor Number The text color when the Right soft key is pressed. The default value is 0x151616.

Flash Lite UI Components Help

106

Events summary

Name Syntax Description

onSoftKeyDown <instance>.onSoftKeyDown = function(softKey:String) {}

Dispatched whenever a soft key is pressed down.

onSoftKeyUp <instance>.onSoftKeyUp = function(softKey:String) {}

Dispatched whenever a soft key is released.

Flash Lite UI Components Help

107

Status Bar component

About The Status Bar component provides some of the device status information such as network coverage indicator, the time and the battery strength indicator.

Time can be customized to be displayed as 24-hour or AM-PM format.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add a Status Bar component to an application while authoring.

To create an application with the Status Bar component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop a StatusBar component to the stage. (Note: Try to place UI components on

integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired.

Flash Lite UI Components Help

108

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Status Bar component.

To create a Status Bar component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop a StatusBar component to the library or double click on it. When you double

click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("StatusBar", "myStatusBar_stb", this.getNextHighestDepth());

myStatusBar_stb._timeFormat = "24h";

myStatusBar_stb._isBackgroundVisible = true;

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Status Bar component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The table below shows what is available to be customized:

Flash Lite UI Components Help

109

Properties summary

Parameter Name Syntax Type Description

Time format <instance>._timeFormat String Formats the time display: either "24h" or "am-pm". The default value is "24h".

Background visible <instance>._isBackgroundVisible String Indicates whether the Status Bar background is visible (true) or not (false). The default value is true.

Text color <instance>._textColor Number The text color of the Status Bar. The default value is 0x282828.

Background color <instance>._backgroundColor Number The background color of the Status Bar. The default value is 0xEEEEEE.

Flash Lite UI Components Help

110

Text component

About The Text component is a string display used to show text data such as titles, labels, etc.

The Text component content can be changed dynamically in the application.

Font face, font size, font style are customizable and it is also possible to have a frame around the text.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Text component to an application while authoring.

To create an application with the Text component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab.

Flash Lite UI Components Help

111

5. Drag and drop the Text component to the stage. (Note: Try to place UI components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. In the Parameters inspector customize the component as desired, and put some text in the Text property.

8. Resize the component width using the Free Transform Tool in Flash IDE if the text doesn’t fit in. 9. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Text component.

To create a Text component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the Text component to the library or double click on it. When you double click,

the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("Text", "myText_txt", this.getNextHighestDepth());

myText_txt._x = 100;

myText_txt._y = 100;

myText_txt._text = "Login:";

myText_txt._fontSize = 20;

myText_txt._isBold = true;

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Flash Lite UI Components Help

112

Customizing You can customize the Text component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Text <instance>._text String The text to be displayed on the screen. The default value is "Text".

Font <instance>._font String The font name of the Text. The default value is "_sans".

Font size <instance>._fontSize Number The font size of the Text. The default value is 20.

Bold <instance>._isBold Boolean Indicates whether the font style is bold (true) or not (false). The default value is false.

Italic <instance>._isItalic Boolean Indicates whether the font style is italic (true) or not (false). The default value is false.

Underline <instance>._isUnderline Boolean Indicates whether the font style is underline (true) or not (false). The default value is false.

Alignment <instance>._alignment String The alignment of the text in relation to the frame: "left", "center", "right" or "left". The default value is "left".

Background visible <instance>._isBackgroundVisible Boolean Indicates whether the Text background is visible (true) or not (false). The default value is false.

Frame <instance>._isFrame Boolean Indicates whether the Text has a frame (true) or not (false). The default value is false.

Text color <instance>._textColor Number The text color. The default value is 0x282828.

Background color <instance>._backgroundColor Number The background color of the Text. The default value is 0xFFFFFF.

Frame color <instance>._frameColor Number The frame color of the Text. The default value is 0xFAFAFA.

Flash Lite UI Components Help

113

Title component

About The Title component is commonly used to contextualize an application screen.

The Title component may contain text only or icon and text. When it contains text only, the text will be center aligned in the component, and left aligned otherwise.

The Title is automatically placed at the top part of the screen and directly beneath the Status Bar component.

This component is commonly used with the List component.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Title component to an application while authoring.

To create an application with the Title component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab.

Flash Lite UI Components Help

114

5. Drag and drop the Title component to the stage. (Note: Try to place UI components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. In the Parameters inspector customize the component as desired. 8. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create the Title component.

To create the Title component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the Title component to the library or double click on it. When you double click,

the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("Title", "myTitle_ttl", this.getNextHighestDepth());

myTitle_ttl._x = 5;

myTitle_ttl._y = 50;

myTitle_ttl._text = "Contacts";

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Customizing You can customize the Title component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Flash Lite UI Components Help

115

Properties summary

Parameter Name Syntax Type Description

Title <instance>._text String The Title text. The default value is "Title".

Icon (24x24) <instance>._icon String The icon to be displayed near the Title text. The full path for the file must be informed. The size of the icon is 24x24 px.

Text color <instance>._textColor Number The text color of the Title. The default value is 0x282828.

Background color <instance>._backgroundColor Number The background color of the Title. The default value is 0xEEEEEE.

Flash Lite UI Components Help

116

Toolbar component

About The Toolbar component is used to group couple buttons in one area. Each button holds an image or an icon representing the different views or associated functionalities.

The Toolbar component also provides a title area placed on top of the icons and becomes visible when each toolbar icon is selected. The title area auto-hides when the Toolbar is not in focus.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

Flash Lite UI Components Help

117

The following steps explain how to add the Toolbar component to an application while authoring.

To create an application with the Toolbar component:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the Toolbar and the SoftKeys components to the stage. (Note: Try to place UI

components on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the Toolbar component in the stage.

7. From the Parameters inspector customize the Toolbar as desired, add at least three items to the “Icon on” property array, otherwise it will not be loaded, and give an instance name: myToolbar_tbr.

8. Select the SoftKeys component and from the Parameters inspector customize the SoftKeys as desired and give an instance name: mySoftKeys_sks.

9. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

mySoftKeys_sks.onSoftKeyDown = softKeyDown;

myToolbar_tbr.onClose = closedToolbar;

// Implements the onSoftKeyDown event handler.

function softKeyDown(softKey:String) {

//The code below interacts with the Toolbar depending on the following settings:

//a. When Toolbar style is set to "float", it shows and hides the Toolbar.

//b. When Toolbar style is set to "fixed" and "Options menu complement" property is set to false, it activates and deactivates the Toolbar.

//c. When Toolbar style is set to "fixed" and "Options menu complement" property is set to true, these methods have no effect.

switch(softKey) {

case "LSK":

myToolbar_tbr.show(); // Shows the Toolbar

break;

case "RSK":

myToolbar_tbr.hide(); // Hides the Toolbar

Flash Lite UI Components Help

118

break;

}

}

function closedToolbar () {

trace("Toolbar Closed");

}

10. Select Control > Test Movie or press Ctrl + Enter to see the result.

The following example uses ActionScript to create a Toolbar component.

To create the Toolbar component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the Toolbar and the Soft Keys components to the library or double click on

them. When you double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("Toolbar", "myToolbar_tbr", this.getNextHighestDepth());

this.attachMovie("SoftKeys", "mySoftKeys_sks", this.getNextHighestDepth());

//Sets the Toolbar style to "float"

myToolbar_tbr._style = "float";

//Adds three items to the Toolbar

//fullpath is the Full path for the image directory

myToolbar_tbr.addItem("The item 1", "fullpath/pictures/itemOn1.png", "fullpath/pictures/itemOff1.png"); myToolbar_tbr.addItem("The item 2", "fullpath/pictures/itemOn2.png", "fullpath/pictures/itemOff2.png"); myToolbar_tbr.addItem("The item 3", "fullpath/pictures/itemOn3.png", "fullpath/pictures/itemOff3.png");

//Defines the Toolbar event handlers

myToolbar_tbr.onOpen = toolbarOpen;

myToolbar_tbr.onClose = toolbarClose;

Flash Lite UI Components Help

119

myToolbar_tbr.onSelect = itemSelected;

mySoftKeys_sks._LSK = "Options"; // Sets Left soft key label

mySoftKeys_sks._RSK = "Back"; // Sets Right soft key label

mySoftKeys_sks.onSoftKeyDown = softKeyDown;

// Implements the onSoftKeyDown event handler

function softKeyDown(softKey:String) {

switch(softKey) {

case "LSK":

myToolbar_tbr.show(); // Shows the Toolbar

break;

case "RSK":

myToolbar_tbr.hide(); // Hides the Toolbar

break;

}

}

//Implements the onOpen event handler

function toolbarOpen(sender:Object) {

mySoftKeys_sks._MSK = "Select";

}

//Implements the onClose event handler

function toolbarClose(sender:Object) {

mySoftKeys_sks._MSK = "Continue";

}

//Implements the onSelect event handler

function itemSelected(sender:Object, titleText:String, position:Number) {

trace("sender : " + sender);

trace("titleText : " + titleText);

trace("position : " + position);

}

8. Select Control > Test Movie or press Ctrl + Enter to see the result.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Flash Lite UI Components Help

120

Customizing You can customize the Toolbar component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The tables below show what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Title text <instance>._titleText Array The title text of the items. It is an array that sets a title text for each item in the Toolbar. All items in the array must have a value set.

Style <instance>._style String Indicates whether the Toolbar style should be "fixed" or "float". The default value is "fixed".

Title visible <instance>._isTitleVisible Boolean Indicates whether the Toolbar title is visible (true) or invisible (false). The default value is true.

Dim background <instance>._isDimBackground Boolean Indicates if background dim is enabled (true) or not (false). The default value is true.

Icon on <instance>._iconOn Array The icon path of the images of the Toolbar items. It is an array that sets the icon path for each item in the Toolbar. The number of items in this array must be the same as in Text array. These icons represent the ON state of a setting when there is another icon set in Icon off array. The size of the icon is 30x30 pixels for the "fixed" style Toolbar and 24x24 pixels for the "float" style Toolbar.

Icon off <instance>._iconOff Array The icon path of the images of the items. It is an array that sets the icon path for each item in the Toolbar. The number of items in this array must be the same as in Text array. These icons represent the OFF state of a setting when there is primary icon set in Icon on array. The size of the icon is 30x30 pixels for the "fixed" style Toolbar and 24x24 pixels for the "float" style Toolbar.

Active item <instance>._isActive Array Indicates whether the Toolbar item state is set to ON (true) or OFF (false). If set to ON, the icon from Icon on array will be displayed for the item, and if set to OFF, it will be the icon from Icon off array. The default value for all items is true. This parameter is optional and needs to be informed only if Icon off is also informed.

Flash Lite UI Components Help

121

Enabled <instance>._isEnabled Array Indicates whether the Toolbar item is enabled (true) or disabled (false). All items in the array must have a value set. The default value is true.

Highlight position <instance>._highlightPosition Number The position of the highlight in the Toolbar. The initial position of the highlight can be set to any item inside the Toolbar. The default position is the first item.

Options menu complement

<instance>._isOptionsComplement Boolean Indicates whether Toolbar will be used as a complement to Options Menu (true) or will be used instead of the Options Menu (false). When used as a complement to the Options Menu, the user needs to navigate to the Toolbar functions and then select one of the items. When Toolbar is used instead of Options Menu, the Toolbar is accessed via LSK "Options" and closed via RSK "Back". Selecting a function from the Toolbar closes the Toolbar and performs the action.

Text color <instance>._textColor Number The text color of the Toolbar. The default value is 0xFFFFFF.

Title background color

<instance>._titleColor Number The title background color of the Toolbar. The default value is 0x8DDC48.

Background color <instance>._backgroundColor Number The background color of the Toolbar. The default value is 0xE3E4E5.

Highlight color <instance>._highlightColor Number The highlight color of the Toolbar focused item. The default value is 0x8DDC48.

Dim color <instance>._dimColor Number The dim color is the color behind the Toolbar when it appears. The default value is 0x3D4242.

Methods summary

Name Syntax Description

addItem <instance>.addItem(titleText:String, itemIconOn:String, itemIconOff:String, isEnabled:Boolean, isActive) : Void

Adds items to the Toolbar. The parameters are: the title text, the image path of icon on, the image path of icon off, the availability array (enabled or disabled) and the state array (initial selected image - either from icon on or from icon off arrays).

hide <instance>.hide() : Void Hides the Toolbar if it isn't an Options menu complement or if its style is "float".

removeAllItems <instance>.removeAllItems() : Void Removes all items from the Toolbar.

removeItem <instance>.removeItem() : Number Removes the last item in the Toolbar returning the number of remaining items.

show <instance>.show() : Void Shows the Toolbar if it isn't an Options menu

Flash Lite UI Components Help

122

complement or if its style is "float".

Events summary

Name Syntax Description

onClose <instance>.onClose = function(sender:MovieClip) {}

Dispatched whenever the Toolbar is closed (unselected) and has already disappeared from screen.

onOpen <instance>.onOpen = function(sender:MovieClip) {}

Dispatched whenever the Toolbar is opened (selected) and has already appeared on screen.

onSelect <instance>.onSelect = function(sender:MovieClip, titleText:String, highlightPosition:Number) {}

Dispatched whenever user selects an item in the Toolbar.

Flash Lite UI Components Help

123

Wait Indicator component

About The Wait Indicator component communicates to the user that an operation with unknown duration is in progress.

Wait Indicator can be used for example in progress feedback dialogs and lists, to let the user know that the system is responding, but taking some unknown time.

The Wait Indicator component is used for showing a looped animation while a process is taking place. It can be visualized as an animation of a bar (with colors moving from left to right) or as a spinning dotted circle.

Wait Indicator should last as long as the process lasts.

For more information on this component, read Sony Ericsson Developer World - UI Component Catalog.

Remark Make sure to read Getting Started with Sony Ericsson UI components before you start building applications. This page contains guidelines and information on how to use Sony Ericsson UI components.

A complete UI style guide can be found at Sony Ericsson Developer World - UI Style Guide.

Updating your package Updates and new releases of Sony Ericsson UI components can be downloaded from Sony Ericsson Developer World - Flash Lite Docs & Tools.

Using Note: Tips and Tricks on using Sony Ericsson UI components contains guidelines on how to start developing an application using Sony Ericsson UI components.

The following steps explain how to add the Wait Indicator component to an application while authoring.

To create an application with the Wait Indicator component:

1. Select File > New and then select Flash File (ActionScript 2.0).

Flash Lite UI Components Help

124

2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Drag and drop the WaitIndicator component to the stage. (Note: Try to place UI components

on integer XY coordinates in case you witness any distortion in the bitmaps. This happens due to lack of bitmap smoothing in Flash Lite Player.)

6. Open the Parameters inspector on Window > Properties > Parameters menu and select the component in the stage.

7. From the Parameters inspector customize the component as desired. 8. Select Control > Test Movie or press Ctrl + Enter to see the result. 9. The Wait Indicator starts to spin automatically.

The following example uses ActionScript to create the Wait Indicator component.

To create the Wait Indicator component using ActionScript:

1. Select File > New and then select Flash File (ActionScript 2.0). 2. Select File > Publish Settings and on Flash tab select Version (Flash Lite 2). For more

information on different phones and the Flash Player they support, go to: Technical specifications.

3. Open the Components panel on Window > Components menu or press Ctrl + F7. 4. Open the Sony Ericsson UI components tab. 5. Make sure the dock is expanded, open the library on Window > Library menu or press Ctrl + L. 6. Drag and drop the WaitIndicator component to the library or double click on it. When you

double click, the component is automatically added to the stage and library. Remove the one on the stage but make sure you maintain a copy in the library.

7. Select Frame 1 in the timeline, open the Actions panel on Window > Actions menu or press F9 and enter the following code:

Stage.scaleMode = "noScale";

this.attachMovie("WaitIndicator", "myWaitIndicator_wti", this.getNextHighestDepth());

myWaitIndicator_wti._shape = "circle";

myWaitIndicator_wti._size = "large";

1. Select Control > Test Movie or press Ctrl + Enter to see the result. 2. The Wait Indicator starts to spin automatically.

Related topics About Sony Ericsson UI components

Tips and Tricks on using Sony Ericsson UI components

Sony Ericsson Developer World – Project Capuchin

Flash Lite UI Components Help

125

Customizing You can customize the Wait Indicator component on Flash IDE using the properties available on Property Panel > Parameters and by ActionScript. The table below shows what is available to be customized:

Properties summary

Parameter Name Syntax Type Description

Shape <instance>._shape String The component graphical representation: either "bar" or "circle". The default value is "bar".

- <instance>._size String The size of the Wait Indicator: either "small" or "large". This parameter is available only for "circle" shape. The default value is "large".

Background color <instance>._backgroundColor Number The background color of the Wait Indicator. The default value is 0xACACAC.

Fill color <instance>._fillColor Number The fill color of the Wait Indicator. The default value is 0x8DDC48. This parameter is available for "bar" shape only.

Note: The properties that do not have a Parameter Name can only be accessed via ActionScript code.

Methods summary

Name Syntax Description

getWidth <instance>.getWidth() : Number Returns the size in pixels of the "bar" shape Wait Indicator; if the "circle" shape is selected instead, returns 0.

setWidth <instance>.setWidth(newWidth:Number) : Void

Sets the size in pixels of the "bar" shape Wait Indicator. This parameter is available for "bar" shape only. The minimum size is 35 pixels and the maximum is 220 pixels.