TESTE

Tutorial

October 2009

Creating the Twitter application demowith Sony Ericsson Flash Lite™ UI components

Tutorial | Twitter application demo

Preface

About this tutorial

This tutorial demonstrates how Sony Ericsson UI components can be used to create real interactive mobile applications.

Sony Ericsson Developer World

At www.sonyericsson.com/developer, developers find the latest technical documentation and development tools such as phone White papers, Developers guidelines for different technologies, Getting started tutorials, SDKs (Software Development Kits) and tool plugins. The Web site also features news articles, go-to-market advice, moderated discussion forums offering free technical support and a Wiki community sharing expertise and code examples.

For more information about these professional services, go to the Sony Ericsson Developer World Web site.

2 October 2009

This document is published by Sony Ericsson Mobile Communications AB, without any warranty*. Improvements and changes to this text necessitated by typographical errors, inaccuracies of current information or improvements to programs and/or equipment, may be made by Sony Ericsson Mobile Communications AB at any time and without notice. Such changes will, however, be incorporated into new editions of this document. Printed versions are to be regarded as temporary reference copies only.

*All implied warranties, including without limitation the implied warranties of merchantability or fitness for a particular purpose, are excluded. In no event shall Sony Ericsson or its licensors be liable for incidental or consequential damages of any nature, including but not limited to lost profits or commercial loss, arising out of the use of the information in this document.

This Tutorial is published by:

Sony Ericsson Mobile Communications AB, SE-221 88 Lund, Sweden

www.sonyericsson.com/

© Sony Ericsson Mobile Communications AB, 2009. All rights reserved. You are hereby granted a license to download and/or print a copy of this document.Any rights not expressly granted herein are reserved.

First edition (October 2009)Publication number: 1233-4386.1

Tutorial | Twitter application demo

Typographical conventions

In this document code examples are written in Courier font:

softKeys_sks._LSK = "Login";

Names of labels, buttons, layers and menus are written in italics, for example, Select File - Install extension.

Names of edited values, file names and input text are within quotes, for example, "MXP files.zip".

Trademarks and acknowledgements

Adobe, Adobe Flash Lite and Adobe Flash are either trademarks or registered trademarks of Adobe Systems Incorporated in United States and/or other countries.

Java and all Java based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc, in the U.S. and other countries.

Microsoft and Windows are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries.

Other product and company names mentioned herein may be the trademarks of their respective owners.

Document history

Change history

2009-10-12 Doc. no. 1233-4386.1 First version published on Developer World

3 October 2009

Tutorial | Twitter application demo

4 October 2009

Contents

Introduction .................................................................................................................5Skill level ....................................................................................................................5Requirements ............................................................................................................5Content of the zip file ................................................................................................7UI components used in this tutorial ..........................................................................8

Tutorial .........................................................................................................................9Creating the application ............................................................................................9

Frame 1 – Login screen .......................................................................................10Frame 2 – Login fail screen ..................................................................................13Frame 3 – Browse last tweets screen ..................................................................14Frame 4 – Post tweet screen ...............................................................................16

Testing .....................................................................................................................18

Tutorial | Twitter application demo

Introduction

This tutorial shows how to use Sony Ericsson Flash Lite™ 2.0 UI Components in developing real mobile applications.

The Twitter application of this tutorial allows the user to browse and post tweets.

Note: Support for Project Capuchin is required for the application to run on the phone. A list of phones supporting Project Capuchin can be found at: http://developer.sonyericsson.com/device/searchDevice.do?defaultSearch=true&attributes=e3b7531a-468c-40c5-9e54-8b1ce192ebb3.

Skill level

Intermediate – Good skills in Action Script 2.0 are needed.

Requirements

The applications and tools required to execute this tutorial are listed below.

• Adobe™ Flash™ CS3/CS4A multimedia authoring application used to create web applications, games, movies, and content for embedded devices. It features support for vector and raster graphics and ActionScript.http://www.adobe.com/products/flash/

• Adobe Extension ManagerAdobe tool devoted to install new extensions for Adobe Flash CS3/CS4.http://www.adobe.com/exchange/em_download/

• Java runtime environment (JRE)The latest version of JRE and installation instructions are available at http://www.java.com/en/download/manual.jsp

• Sony Ericsson UI ComponentsThe Sony Ericsson UI components are available athttp://developer.sonyericsson.com/site/global/docstools/flashlite/p_flashlite.jsp. Install them using the Adobe Extension Manager and read the help documentation for further information on application architecture.

5 October 2009

Tutorial | Twitter application demo

• Project Capuchin Kit MXP filesProject Capuchin Kit MXP component for Microsoft® Windows® or OS X.The Project Capuchin kit extends Adobe Flash CS3 and CS4 to support creating and publishing Flash content as a Project Capuchin application. This file can be downloaded fromhttp://developer.sonyericsson.com/site/global/docstools/projectcapuchin/p_projectcapuchin.jsp.

The following Sony Ericsson Project Capuchin Platform Services are needed:• Location MXP v4.0.1 • Persistency MXP v4.0.1These files can be downloaded fromhttp://developer.sonyericsson.com/site/global/docstools/projectcapuchin/p_projectcapuchin.jsp.Install them using the Adobe Extension Manager.

The Twitter Project Capuchin Platform Services implemented for this specific application are also required:• “TwitterUtils.mxp”: Provides methods for resizing images and retrieving city names based on the

GPS coordinates.• “Twitter.mxp”: Implements the Twitter methods for login, browsing and posting tweets.

The Twitter MXP files are packaged together with this document and the source code files. Install the Twitter MXP files using the Adobe Extension Manager.

After successfully installing all MXP packages, they should be listed in the Adobe Extension Manager as in the image below:

6 October 2009

Tutorial | Twitter application demo

Content of the zip file

The "TwitterApplication.zip" file contains the folder structure and content described below:

• “Capuchin Services” folder:• “Location_4.0.1.mxp”: Used to get GPS coordinates.• “Persistency_4.0.1.mxp”: Used to store the user name and password (for future access to the

application).• “Twitter_4.0.1.mxp”: Provides Twitter services.• “TwitterUtils_4.0.1.mxp”: Provides additional Twitter services.

• “Installation Files” folder:• “TwitterApplication.jar” and “TwitterApplication.jad”: The installable application (MIDlet) for your

Capuchin enabled Sony Ericsson phone.

• “Source File” folder:• “TwitterApplication.fla”: The Flash source of the Twitter application. This tutorial describes how the

Flash file was implemented, using the Sony Ericsson UI components beta version.

• “Tutorial” folder:• “tutorial_flash_ui_twitter_appl_r1a.pdf”: This document.

7 October 2009

Tutorial | Twitter application demo

UI components used in this tutorial

The following Sony Ericsson Flash Lite UI components are used in this tutorial:

• Check Box: Used to check/uncheck the "Remember me" option to store the last username/password used for login.

• List Two-row with Icon: Used to allow the user to browse recent tweets.

• Soft Keys: Used to provide the list of possible actions for each screen of the application, "Login", "Logout", "Refresh", and so on.

• Wait Indicator: Used to give visual feedback that the result is being loaded.

8 October 2009

Tutorial | Twitter application demo

Tutorial

Creating the application

Open the "TwitterApplication.fla" file. In the Library (Window > Library), you find MovieClips, Images, Capuchin Services and the four Sony Ericsson Flash Lite components used: Check Box, List Two-row with Icon, Soft Keys and Wait Indicator.

The following sections of this tutorial explain the functionalities of these components in every screen of the application.

Each screen is implemented in a separated frame as described below:

• Frame 1: Login screen• Frame 2: Login fail screen• Frame 3: Browse last tweets screen• Frame 4: Post tweet screen

9 October 2009

Tutorial | Twitter application demo

The application has the following layers: ActionScript, SoftKeys, CheckBox, ListTwoRowWithIcon, Post Title, Post Input Text, Logo, Bird, Status Text, Login Labels and Login Input Texts.

Frame 1 – Login screen

The Twitter authentication is implemented in frame 1. If the login process fails then the application goes to frame 2 (Login fail screen). If the login succeeds, it goes to frame 3 (Browse last tweets screen).

The components used in frame 1 are: Check Box, Wait Indicator and Soft Keys.

The Soft Keys component (softKeys_sks instance) shows the available interactions to the application or to the focused object. There are three Soft Keys: left (LSK), middle (MSK) and right (RSK). Their labels can be customised either using the Parameters panel (Window > Properties > Parameters) or using code, as follows:

softKeys_sks._LSK = "Login";softKeys_sks._MSK = "Edit";softKeys_sks._RSK = "Exit";

10 October 2009

Tutorial | Twitter application demo

The table below shows all possible labels of each soft key on frame 1:

The Soft Keys component dispatches two events when any soft key is selected: onSoftKeyDown (when a Soft Key is pressed) and onSoftKeyUp (when it is released). This application uses the onSoftKeyUp event with the following structure to respond to user interaction:

softKeys_sks.onSoftKeyUp = function(keyPressed:String):Void {switch(keyPressed) {

case "MSK":// Middle soft key actions.break;

case "LSK":// Left soft key actions.break;

case "RSK":// Right soft key actions.break;

}}

The Check Box component (rememberMe_chk instance) is used only on this frame (Login screen). When selected, the Capuchin Persistency Service is used to store the current user name and password to the next login.

if (rememberMe_chk._isSelected) {Persistency.store(_root, _root.onStore, "username",

"TwitterUserStorage", username_txt.text);Persistency.store(_root, _root.onStore, "password",

"TwitterUserStorage", password_txt.text);} else {

Persistency.store(_root, _root.onStore, "username", "TwitterUserStorage", "");

Persistency.store(_root, _root.onStore, "password", "TwitterUserStorage", "");

}

The Check Box dispatches an onSelect event when selected. The application handles this event to change the middle soft key to "Unmark" (when selecting) or "Mark" (when deselecting):

rememberMe_chk.onSelect = checkboxSelection;

function checkboxSelection(sender:MovieClip, label:String):Void {softKeys_sks._MSK = (rememberMe_chk._isSelected) ? "Unmark" : "Mark";

}

LSK label MSK label RSK label

username_txt focused "Login" "Edit" "Exit"

password_txt focused "Login" "Edit" "Exit"

rememberMe_chk focused (selected) "Login" "Unmark" "Exit"

rememberMe_chk focused (unselected) "Login" "Mark" "Exit"

11 October 2009

Tutorial | Twitter application demo

When this screen is loaded the Check Box is visible, which means that the user can see and interact with it. After clicking the left soft key ("Login"), the Check Box is set to invisible, avoiding unauthorised interactions while a process is being loaded. The Check Box visibility can easily be modified as explained below:

rememberMe_chk._visible = true; // Visible

or

rememberMe_chk._visible = false; // Invisible

The Wait Indicator component is used to provide a visual feedback that some information is being loaded. It is attached using code and removed when the loading process has finished to save memory.

The application uses the Wait Indicator on frame 1 when logging in or loading the tweets. The following code creates a circle shaped Wait Indicator with the indicator_wti instance name at the specified position:

if (!indicator_wti) {_root.attachMovie("WaitIndicator", "indicator_wti",

_root.getNextHighestDepth());indicator_wti._shape = "circle";indicator_wti._x = 103;indicator_wti._y = 145;

}

When data finishes loading or login fails, the Wait Indicator instance is removed using the code below:

indicator_wti.removeMovieClip();

12 October 2009

Tutorial | Twitter application demo

Frame 2 – Login fail screen

This screen is shown only if the login process fails.

The Soft Keys component is the only one used on frame 2.

In this screen, the existing Soft Keys component is reused and re-customised to fit frame 2 context (Login fail screen). The two possible actions are to exit the application or retry login:

softKeys_sks.onSoftKeyUp = function(keyPressed:String):Void {switch(keyPressed) {

case "LSK":gotoAndStop(1); // Returns to Login screenbreak;

case "RSK":fscommand2("Quit"); // Ends the applicationbreak;

}}

13 October 2009

Tutorial | Twitter application demo

The labels of the Soft Keys are also modified as described in the table below:

Frame 3 – Browse last tweets screen

In frame 3, the tweets are displayed using the List Two-row with Icon component. The icons show the Twitter user avatar. The first text row displays the user information and the second row displays his/her tweet.

The components used in frame 3 are List Two-row with Icon, Soft Keys and Wait Indicator.

The list of tweets is presented using the List Two-row with Icon (tweets_lst instance). If the user profile has no tweets to show, an error message is displayed inside the list, otherwise it is populated with the tweets found.

LSK label MSK label RSK label

Login fail screen "Retry" "" "Exit"

14 October 2009

Tutorial | Twitter application demo

The user information (row 1), the tweet message (row 2) and the avatar (icon) are inserted first in auxiliary arrays (arrText1, arrText2 and arrTwittImages respectively), avoiding multiple accesses to the list population method. After preparing these arrays with the loaded data, the items are inserted using the following code:

tweets_lst._text1 = arrText1;tweets_lst._text2 = arrText2;tweets_lst._icon = arrTwittImages;

The Soft Keys component has new actions on the browsing screen:

• The left soft key is responsible for refreshing the list, searching on Twitter if any new message is available to be displayed.

• The middle soft key calls frame 4 of this application, responsible for posting updates on Twitter.• The right soft key, labeled "Logout", is responsible for disconnecting the user from the account.

When the "Refresh" button (LSK) is pressed, no action is available to the user while the process is still loading.

The Wait Indicator component is used on frame 3 to provide a visual feedback when the "Refresh" soft key was pressed and the information is not already loaded.

The application has a method, isLoading, which is placed on frame 1 and shared across frames. This method can create or remove the Wait Indicator depending on the parameter used (true for creation, false for removal). When the left soft key is pressed, the Wait Indicator is created:

isLoading(true);

The Wait indicator is removed when data has finished loading:

isLoading(false);

LSK label MSK label RSK label

Browsing tweets screen loaded "Refresh" "Post" "Logout"

Refresh soft key pressed (loading data) "" "" ""

15 October 2009

Tutorial | Twitter application demo

Frame 4 – Post tweet screen

Frame 4 is called when the user wants to send an update to his/her profile.

The components used in frame 4 are the Soft Keys and Wait Indicator.

The Soft Keys component are customised with the information of this screen as described in the table below:

The middle soft key opens the native input text of the phone, allowing the user to write a new message. The left soft key is responsible for sending the written message to Twitter. The right soft key returns the application to the browsing tweets screen (frame 3).

When pressing the "Post" soft key, the application sends the message to Twitter and reloads it, getting the most recent tweets information. After finishing loading the updates, the information is stored in auxiliary arrays that will be read on frame 3 to create the tweets list.

LSK label MSK label RSK label

Post tweet screen loaded "Post" "Edit" "Back"

Post soft key pressed (sending data) "" "" ""

16 October 2009

Tutorial | Twitter application demo

The Wait Indicator component is used on frame 4 to provide a visual feedback when the "Post" soft key was pressed and the tweet message has not been yet sent.

The application has a method, isLoading, placed on frame 1 and shared across frames. This method can create or remove the Wait Indicator depending on the parameter used (true for creation, false for removal). When the left soft key is pressed, the Wait Indicator is created:

isLoading(true);

When data has finished loading it is removed:

isLoading(false);

17 October 2009

Tutorial | Twitter application demo

Testing

To publish the Twitter application as a jar file, select Commands > Create Capuchin Application from the menu. A Swf2Jar window opens. (The User guide for the Swf2Jar tool is available at https://developer.sonyericsson.com/site/global/docstools/projectcapuchin/p_projectcapuchin.jsp.)

The following image shows the required input text fields in bold, see the Swf2Jar User guide. The Security tab is optional and not necessary for this tutorial to work properly. Once the required fields are filled, click the Create button.

18 October 2009