YUI Library Examples: SWFStore Utility: SWFStore Advanced Example

Advanced SWFStore Example

This example consists of two text fields, a few Buttons and a DataTable. The Buttons allow you to save data, set properties on SWFStore, or clear all items from storage.

Once the page is drawn, initialize is called to instantiate a SWFStore instance and set up some listeners. We also disable all of the Buttons until the SWFStore is ready.


1	function initialize()
2	{
3	var useCompression = compressionCheckbox.get("checked");
4
5	saveButton.set("disabled", true);
6	purgeButton.set("disabled", true);
7	removeButton.set("disabled", true);
8	removeAtButton.set("disabled", true);
9	sharedataCheckbox.set("disabled", true);
10	compressionCheckbox.set("disabled", true);
11
12	//the swfstore instance
13	swfstore = new YAHOO.util.SWFStore("swfstoreContainer", false, useCompression);
14
15	//some basic listeners for user feedback
16	swfstore.addListener("save", onSave);
17	swfstore.addListener("error", onError);
18	swfstore.addListener("quotaExceededError", onError);
19	swfstore.addListener("securityError", onError);
20	swfstore.addListener("contentReady", onContentReady);
	view plain \| print \| ?

When SWFStore is ready, it will dispatch a contentReady event. We can then enable the Buttons and initialize a DataTable with any previously stored values. Because items are stored as objects, we need to loop through them to turn them into name-value pairs suitable for use with the DataTable.


1	function onContentReady(event)
2	{
3	saveButton.set("disabled", false);
4	purgeButton.set("disabled", false);
5	removeButton.set("disabled", false);
6	removeAtButton.set("disabled", false);
7	sharedataCheckbox.set("disabled", false);
8	compressionCheckbox.set("disabled", false);
9	load();
10	}
11
12	function load()
13	{
14	//could use swfstore.getItems(), but that would not separate the data into fields
15	var len = swfstore.getLength();
16
17	var arr = [];
18
19	for (var i = 0; i < len; i++)
20	{
21	arr.push({ name:swfstore.getNameAt(i), value: swfstore.getValueAt(i) })
22	}
23
24	var datasource = new YAHOO.util.LocalDataSource(arr);
25
26	datasource.responseSchema = {fields : ["name", "value"]};
27
28	var configs =
29	{
30	scrollable: true
31	}
32
33	var columns =
34	[
35	{key:"name", label:"Storage Name (Key)"},
36	{key:"value", label:"Text Stored"}
37	];
38
39	datatable = new YAHOO.widget.DataTable("datatableContainer", columns, datasource, configs);
40
41
42	}
	view plain \| print \| ?

The "Save" Button is set up to take the values from the text fields and store them, using the setItem method of SWFStore.


1	function save()
2	{
3	swfstore.setItem( YAHOO.util.Dom.get('nameField').value, YAHOO.util.Dom.get('valueField').value);
4	}
	view plain \| print \| ?

Similarly, a couple of other Buttons are set up to remove items from storage, either by name or index, or by clearing the entire local store.


1	function remove()
2	{
3	var obj = YAHOO.util.Dom.get('nameField').value;
4	swfstore.removeItem(obj);
5
6	}
7
8	function removeItemAt()
9	{
10	var index = parseInt(YAHOO.util.Dom.get('indexField').value);
11	swfstore.removeItemAt(index);
12
13	}
14
15	function purge()
16	{
17	swfstore.clear();
18	}
	view plain \| print \| ?

We've already set up a listener for a "save" event, which is dispatched once an item is successfully stored. That calls the onSave function, which loops through the rows of the DataTable. Using the info property of the event, we can determine what type of change occurred, and either add rows, delete rows, or update its current values.


1	function onSave(event)
2	{
3
4	//added
5	if(event.info == "add" \|\| event.info == "update")
6	{
7	var newobj = {name: event.key, value: event.newValue};
8
9	var len = datatable.getRecordSet().getLength();
10
11	//loop through current records and see if this has been added before
12	for (var i = 0; i < len; i++ )
13	{
14	var rec = datatable.getRecord(i);
15	var data = rec.getData();
16
17	//if it's been added already, update it
18	if(data.name == event.key)
19	{
20	datatable.updateRow(i, newobj);
21	return;
22	}
23	}
24
25	//if it's not been added, add it
26	datatable.addRow(newobj);
27	}
28
29	//removed
30	else if(event.info == "delete")
31	{
32	//var index = parseInt(YAHOO.util.Dom.get('indexField').value);
33	datatable.deleteRow(event.index);
34	}
35
36	//cleared
37	else
38	{
39	datatable.deleteRows(0, datatable.getRecordSet().getLength());
40	}
41	}
	view plain \| print \| ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: SWFStore Utility: SWFStore Advanced Example

Advanced SWFStore Example

Configuration for This Example

YUI Logger Output:

SWFStore Utility Examples:

More SWFStore Utility Resources: