Archived:Flash Lite UI Kit
We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.
Article Metadata
Contents |
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 Symbian 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.
This is a good article showcasing some basic components to use in FlashLite applications.
When creating the mobile applications it is necessary to consider the deployment to different screen resolution and change the look of the application. And as the components provided can change the dimension according to the screen resolution, this is very useful.