From Forum Nokia Wiki

Contents 1 Introduction 2 Basic Features 3 Basic Components 4 Future Releases 5 How to Install and Use it 6 Contributions 7 See More

Introduction

There are many screen resolutions for mobile devices, it makes the development of graphic user interface more difficult than should be. Many languages provide a lot of components for build graphic interfaces easily, like Java ME, Python for S60 or WRT. A set of components is a Kit for development of graphic user interfaces.

In Flash Lite there is no Kit for the development of graphic user interfaces. Normally the developers use the Flash native components, but they are made for web or desktop and they are so much heavy for mobile devices.

In this article is proposed a Flash Lite Kit for development of graphic user interfaces. The following will show the basic features of this kit, the download of the first beta release and how to use it.

Basic Features

• It has to work in many screen resolutions.
• Details as color, font and format must be configurable.

Basic Components

In the first beta version of the Kit two basic components were developed (TextBox and Button); they are the only components available in this version.

Future Releases

In future releases more and more components will be added and existing components will be upgraded. This version is just a proof-of-concept of the Kit.

How to Install and Use it

The Kit consists of a set of Action Script classes that must be imported in a Flash Lite project (It can be downloaded here ). After being imported, the use of them is very simple, like shown below:

import flkit.components.ui.*;
 
//Creates two instances of TextBox UI component of the Flash Lite UI Kit
var tx1:TextBox = new TextBox("tx1","FirstName","");
var tx2:TextBox = new TextBox("tx2","SurName","");
 
//Creates two instances of Button UI component of the Flash Lite UI Kit
var bt1:Button = new Button("bt1","send");
var bt2:Button = new Button("bt2","load");
 
//Defines the event when a click on button SAVE occurs
bt1.onClick = function(){
trace("click on button SAVE");
}
 
//Defines the event when a click on button LOAD occurs
bt2.onClick = function(){
trace("click on button LOAD");
}
 
//Creates a new UIManager, this is the base class of the Flash Lite UI Kit. All UI components must be in this instance.
//The constructor parameter is the MovieClip where all components will be added.
var uiManager:UIManager = new UIManager(_root);
 
//Adding all UI components
uiManager.addUIComponent(tx1);
uiManager.addUIComponent(tx2);
uiManager.addUIComponent(bt1);
uiManager.addUIComponent(bt2);
 
//Builds the graphic interface
uiManager.build();

This code produces the same effect in two different screen resolutions, as shown in the pictures below.

Contributions

The code is Open Source and any contribution will be appreciated.

See More

More posts in Flash Lite Effort