Create Web Apps in Flash

While making complex Web-based applications, you are often required to save information on your system. JavaScript

cookies help you do that, but they have their limitations as well, such as deletion of the cookie files from the browser itself.

Flash MX offers a simpler and more powerful option for this task, called shared objects. 

Shared objects exist in two forms: local and remote. Remote shared objects are used with the Flash Communication Server while local shared objects (LSO) can store data on your system when the Flash app is closed, and can be retrieved once it reopens.

Also, LSO can store data types, such as array and object, which cannot be done using JavaScript cookies. 

By default, Flash app from any one domain can store up to 100 KB data. However, this value can be increased according to your need. You can manually change Flash player storage settings by right clicking on the swf file, and choosing Settings.

When the stored data exceeds 100KB, Flash player sounds an alert.

Where are the LSOs stored?



Shared objects are stored in a file with a .sol extension. On an XP machine the path to all the .sol files is like this

C:\Documents and Settings\ {username}\ApplicationData\ Macromedia\Flash Player\Are Shared Objects

Secure?



Shared objects are used to store data on the client machine in the same way, as data is stored in a cookie created through a Web browser. The data can only be read by Flash apps originating from the same domain that created the shared object. This is the only way Macromedia Flash Player can write data to your machine. Shared objects cannot save your e-mail address or other personal information, unless you ask them to do so.

Now let’s try some application building using LSO. Here, we will make a very simple contact manager application, where you can add and save contacts on your system and use them later.

Contact Manager using LSO



Let’s look at the interface for the application.

The application shows the existing contacts in the list box (instance name: contacts_lb) on the left side of the interface. Clicking on any existing contact shows the contact information in the text box on the right. The Add Contact button lets you add more contacts in the

LSO. 

The source file of the contact manager application is available on www.pcquest.com/flashsource

The DataProviderClass



First, we create a data provider, which will hold the data in the memory. This is an instance of the DataProviderClass available with the Flash UI components such as list box, combo box and tree component.

The DataProviderClass is an API wrapped around a regular ActionScript array to make operations, such as adding and retrieving objects, easier. 

This is how we instantiate the DataProviderClass:

myData = new DataProviderClass()

You can find more information on DataProviderClass at 

www.ericd.net/ff2k2_sources/DataProviderClass_Summary.htm

The following code is used to create a data provider by the name of ‘tempContacts’ in the contact manager application:






tempContacts = new DataProviderClass() 

Creating an LSO



The following statement will create and retrieve the LSO:






so = SharedObject.getLocal(‘contactsObject’, ‘/’)

The LSO by the name of contactsObject will be saved on your system, if no LSO by the same name already exists. If it does, this statement retrieves it. Now you can access all the LSO methods and properties by the object ‘so’.

Note that the forward slash is an optional parameter, which makes the LSO in the root of the directory. This way it will be possible to access the LSO from other swfs of the same domain.

The Data Property



It is a generic object, which can store data as number, boolean, string, array, object, and XML and date objects in Flash.



For example, you can create a date object in the data property:

SharedObj_so.data.time = new Date()

We would use the data property to create a contacts array in the ‘so’ object that will store the contacts. If the array is already present, we loop through the contacts stored in it and hold them in the memory in the data provider (tempContacts) instance we declared before like this:

if (so.data.contacts == undefined) {



so.data.contacts = new Array() //this array stores all our data


}else {


for (var i=0; i
tempContacts.addItem(so.data.contacts)



}


}

Initializing the UI Components



Now we can initialize the UI components by connecting them to the data provider. Below we are connecting the list box to the same

(tempContacts).

// set the data provider for the list box as tempContacts, this will automatically store and update the list box with new contacts



contacts_lb.setDataProvider(tempContacts)


// init the UI


contacts_lb.setChangeHandler(‘displayContact’)


add_pb.setClickHandler(‘addContact’)


date_cl.setChangeHandler(‘getDate’);

Now that the UI is done, you can make a function that will add data into the contacts array and save it in the system once the Add button is clicked. You can find the source file at

www.pcquest.com/flashsource.

Writing to disk



By default, the Flash player saves the data on the system when a Flash app is closed. However, you can force the data to be saved on the disk, before the Flash app is closed, by using the flush () method. 

You can use the following function to check the byte size of the LSO:

SoBytes = so.getSize()

That’s It! Your contact manager application is complete.

Manually reading the LSO



Remember, LSOs are binary format and cannot be read. However, you can use SOL Reader to read them. It will decompile the entire file and will show you all the saved variables, their class type and their value.

You can download it from:

www.sephiroth.it/python/SOLReader.zip

Arpit Jain,GE E-Learning Division Delhi Flash User Group Manager www.flashgroup.org