The root

The root of your project could contain the following folders:

• build
• deploy
• src

Here’s more details on each

build

The build folder is for your Flash output, generated during the build process.

You can set this folder in Flash CS4 by opening the .fla file and going to : “File -> Publish settings…” in the menu, and then navigating to the build folder to set the file for the Flash type in the popup which comes up.

The build folders contents should be able to be deleted at any time, and recreated by running the build. Do not keep any source files or the .fla in here!

deploy

The deploy folder is a good place to keep your installers, such as the .sis files produced by the Adobe Mobile Packager, or other packagers.

src

The src folder is the place to keep your source code, that’s your .fla and related .as files, structured as explained in the following section.

The source code folder

As mentioned, all your source code should be kept in the src folder.

The structure of src folder will look something like this:

• com
• companyName
• appName
• controller
• model
• view
• main.as
• utils
• components
• appName.fla

So your .fla file goes into the root of src, alongside a folder structure unique to your company, which will also be reflected in the namespaces you give your classes.

The classes specific to the app go within a folder with the same name as the app, and the classes which can be used in other applications are placed alongside this folder in their own folders. I’ll go into more detail on the contents of each folder next.

appName

Within the appName folder, you place the classes which cannot be reused in other applications and are specific to this application. These will form the core of this individual application.

You will also place a main.as file here which will be called from the .fla file and will call the various controllers to manage the app.

model

In the model folder you store datatypes declaring data formats used within the app, as well as perhaps classes to manage arrays of data stored and kept in memory whilst the app is running.

view

In the view folder you store classes relating to screens as well as components that you only want to use within this app.

controller

In the controller folder you can store classes relating to the logic of the programme, a key controller to manage what key is pressed and when, a screen controller to manage what screen is currently being displayed, perhaps an API controller to manage all the API calls. The classes here will work closely with the view and the model, building views and manipulating the model. They will be called initially from your main.as class.

utils

Within the utils folder you place helpers and utilities which can be reused in other apps. You should be able to drop classes in here and just start reusing them.

components

Within the components folder you place classes which relate to visual components of your app, stored in the library of the .fla. These components classes, although may come with different assets in another app, can always be reused and will always behave in the same way when placed in another app.

This tutorial is aimed at OS X 10.5 users, with Device Central CS4.

1 – Get a capable unarchiver

You need a file unarchiver which can cope with .cpgz files. The only one I could find was File Juicer which costs around $12 – if anyone finds a free one, let me know.

2 – Extract the Shared Object file

Navigate to your home folder and “Library/Application Support/Adobe/Adobe Device Central CS4″.

Locate the file named storageObjects.bin and drag it onto the File Juicer icon in your apps.

A folder should appear named “Storage Objects Juice”, containing a folder named “txt”, containing a file called something like StorageObject(xx% copy)-1.txt – this is the file you’ll need.

3 – Interpreting the StorageObject file

Open the txt file with your editor of choice. You will see likely see lots of text, expand the text editor to fill your screen to make things easier.

This file contains reference to all saved shared objects, so to see the latest you need to be at the bottom of the file.

Look for codes resembling “B81FA49052AAA2BD750992BCFD03478D 8144600B02252A799C14CCE2BC9F50B6 ø TCSO ” – this appears to be the delimiter between shared object sessions.

Directly following each of delimiter you will find the name of your shared object, the name of the shared object element, and any data saved.

The layout isn’t great, line breaks are seemingly random, and its clear this file was not meant for human consumption. Until Adobe add a Shared Object inspector to Device Central, its all we got though, as far as I know.

Anyone got an easier method?

API restrictions

Unfortunately there are some restrictions within Flash Lite which means you will only be able to access certain API’s. Before continuing, ensure the API you are trying to access meets the following criteria. If its your API, you are in luck, you can fix these issues.

Crossdomain Policy

You will need to be accessing an API which has a crossdomain policy file in place. If you own the API you can create one. If not you will need to create a proxy – although that’s out of scope of this tutorial.

Authentication

Flash Lite does not work with HTTP header based security using the “Authorize” header. The function for adjusting headers – XML.addRequestHeader has a bug. In addition, you cannot use the addRequestHeader feature unless you are making a POST request, bug or no bug. This means for GET request you need to find another way of authenticating anyway. If the API you have access to doesn’t allow any other means of authentication, you won’t be able to write a Flash Lite client.

If you have control of the API, ensure it can read the user credentials from the URL for GET requests, and from either the URL or parameter body for POST requests. That way you can avoid having to use addRequestHeader.

HTTP Status codes

Flash can’t easily interpret HTTP status codes. The API should therefore have an option for returning status in either an XML or string format. The HTTP status should always be 200, with the actual success code returned in the body of the content. This code can then be interpreted by Flash.

Please note, for POST’s, the status returned should be of the same type (either XML or string) as the data posted. So in other words if you pass XML to the API to POST data, the status should be returned as XML, if you pass name key pairs to POST data, the status should be returned as a plain text name key pair (e.g. name=xxxx). If the API interprets POSTed data in chunks of XML, it should return the status as XML. This enables you to use either XML.sendAndLoad to send and read XML or LoadVars.sendAndLoad to send and read variables. You can’t (as far as I can tell) send XML and read variables, or send variables and read XML.

PUT and DELETE

You can’t make PUT and DELETE requests from Flash (or indeed any browser), so you will need to ensure your API uses overloaded POST. That is, you can specify the PUT or DELETE method in the POST url and the API interprets it, or you can make edits and deletes through the basic POST or GET functions.

Flash Lite checklist

You will need to make a few updates to your app before connecting to the API.

Playback settings

Ensure you have set the playback settings to access network only (File in top menu -> Publish Settings option -> Flash tab -> Advanced section -> Local playback security dropdown -> set to Access network only)

Device central

Ensure you have selected a Flash Lite 3.1 device in Device Central for testing.

Ensure under the device central security settings you have selected “Local Trusted Sandbox”.

Flash Lite security settings

When testing on a device as a swf, if you find network errors, ensure the swf is placed inside the Flash Lite trusted folder, if available. Location of the trusted folder will vary from device to device, but for Nokia’s N95 its located in C:/Data/Others/Trusted. Note that the Others folder may appear as Other without the s – this is not an issue. If you can’t find the Trusted folder inside Other(s), create it. To access the swf from the device just navigate directly to C:/Other(s), the data folder won’t appear within the phone view. There’s more on this topic on Kuneri Bloggy.

Making a GET request

To perform a GET request, returning XML you use the XML.load method.

[code lang="actionscript"]
var my_xml:XML = new XML();

my_xml.onLoad = function(success:Boolean) {

var endTime:Number = getTimer();

var elapsedTime:Number = endTime-startTime;

if (success) {
trace("xmlDecl:"+my_xml.xmlDecl);
trace("contentType:"+my_xml.contentType);
trace("docTypeDecl:"+my_xml.docTypeDecl);
trace("packet:"+my_xml.toString());
} else {
trace("Unable to load remote XML.");
}

trace("loaded in: "+elapsedTime+" ms.");

};
my_xml.load("http://api.url.com/user/1.xml");
[/code]

You get the idea, you could create a text field to output the data on the device, manipulate the xml etc.

To perform a GET request returning name value pairs, you use the LoadVars.load method.

[code lang="actionscript"]
var myLoadVars:LoadVars = new LoadVars();
myLoadVars.onLoad = function(success:Boolean) {
if (success) {
trace(this.toString());
} else {
trace("Error loading/parsing LoadVars.");
}
};
myLoadVars.load("http://api.url.com/user/1.json");
[/code]

POST request

To make a POST request by sending name value pairs and processing a returned status code in name value format, you use the LoadVars.sendAndLoad method.

In this example we are posting a name value pair of “name=New Category”, with the server interpreting the field name, and returning either “error=404″ or “status=200″ as plain text output. The code interprets either the error or the status and traces it out to the console. You would probably interpret it in some way and do something more with it.

[code lang="actionscript"]
var resultLoadVars:LoadVars = new LoadVars();
resultLoadVars.onLoad = function(success:Boolean) {
if (success) {
if (resultLoadVars.error !== undefined) {
trace("error: "+result_lv.error);
}
if (resultLoadVars.status !== undefined) {
trace("status: "+result_lv.status);
}
} else {
trace("Error connecting to server.");
}
};
var send_lv:LoadVars = new LoadVars();
send_lv.name = "New Category";
send_lv.sendAndLoad("http://api.url.com/user/1", result_lv, "POST");
[/code]

To make a POST request by sending XML and processing a returned status code in XML format, you use the XML.sendAndLoad method.

In this example we are posting xml containing the tag name with content “New Category”, with the server interpreting the field name, and returning either an error tag with the code “404″ or a status tag with the code “200″ as XML. The code interprets either the error or the status and traces it out to the console. You would probably interpret it in some way and do something more with it.

[code lang="actionscript"]
var dataToPost:String = "New Category";
var my_xml:XML = new XML(dataToPost);
var myReply_xml:XML = new XML();
myReply_xml.ignoreWhite = true;
myReply_xml.onLoad = myOnLoad;
my_xml.sendAndLoad("http://api.url.com/user/1", myReply_xml);
function myOnLoad(success:Boolean) {
if (success) {
if ((myReply_xml.firstChild.nodeName == "error")) {
trace("error: "+myReply_xml.firstChild);
}
if ((myReply_xml.firstChild.nodeName == "status")) {
trace("status: "+myReply_xml.firstChild);
}
} else {
trace("Error connecting to server.");
}
}
[/code]

Next steps

Don’t worry too much about following the code examples here, follow the links to the adobe documentation and see if you can get the code to work with the API you have. I’m starting out in this area too – so have really just presented my initial findings after a couple of days research – hopefully this will save some of you that time at least! Leave issues or problems with specific devices, links to better ways of doing things or suggestions in the comments.

Please note – this method will also work with all Actionscript 2.0 Flash 8 apps.

1 – Download and install the ASUnit Framework

Download the latest version of the code.

Unpackage and locate the folder named ‘as25′.

Copy this folder ‘as25′ into the classpath (the root folder containing the code files) of your app.

Create another folder in the classpath called ‘tests’.

I’m assuming the classpath also contains all your components, classes etc, or if you have yet to code, its empty.

Here’s the contents of my root folder so you can follow my examples:

* AppName.fla (file)
* _classpath (folder, containing all my .as files)
** as25 (folder)
** tests (folder)
** other .as files

2 – Set up the ASUnitRunner app

2a – Copy the ASUnitRunner.fla and open it

Copy the ASUnitRunner.fla file to the same location as your apps fla file/s.

My folder now looks like this:

* AppName.fla (file)
* ASUnitRunner.fla (file)
* _classpath (folder, containing all my .as files)
** as25 (folder)
** tests (folder)
** other .as files

Open the newly moved ASUnitRunner file with your editor.

2b – Set the publish settings

Open publish settings and set the .swf to be published in your chosen location.

Alternatively you can create a folder called bin in the same folder the ASUnitRunner is sitting in, and it will automatically publish in there.

2c – Set the classpath

Open the Actionscript settings (in CS4 its File -> Publish Settings -> Flash -> Script settings button).

Remove both classpaths currently in place.

Set one class path pointing to the src folder within the as25 folder starting from the location of the fla e.g.

[code lang="bash"]
./path/to/as25/src
[/code]

in my case:

[code lang="bash"]
./_classpath/as25/src
[/code]

Set another class path pointing to the classpath root starting from the location of the fla e.g.

in my case:
[code lang="bash"]
./_classpath
[/code]

2d – Set the action to the right folder

Open the first frame of the fla and change it to:

[code lang="bash"]
import tests.AsUnitRunner;
AsUnitRunner.main(this);
[/code]

3 – Set up the tests folder

3a – copy test files

There are 2 more files to copy over into your tests folder.

Copy ‘as25/test/AllTests.as’ to ‘tests/AllTests.as’

Copy ‘as25/test/AsUnitRunner.as’ to ‘tests/AsUnitRunner.as’

3b – Add correct paths to AllTests.as

AllTests is set up to test ASUnit itself – so we will update it to test a sample file we will create.

Change tests/AllTests.as to:
[code lang="actionscript"]
class tests.components.AllTests extends asunit.framework.TestSuite {
private var className:String = "AllTests";

public function AllTests() {
super();
addTest(new tests.components.ExampleTest());
}
}
[/code]

3c – Add correct paths to AsUnitRunner.as

Change tests/AsUnitRunner.as to:

[code lang="actionscript"]
import asunit.textui.TestRunner;
import tests.AllTests;

class tests.AsUnitRunner extends TestRunner {

public static function main(container:MovieClip) : Void {
var tR = new AsUnitRunner();
}

public function AsUnitRunner() {
start(AllTests);
}
}
[/code]

4 – Create sample file to test along with some tests

4a – Create components/Example.as

Create a folder called components at the root of your classpath, for me thats:

* AppName.fla (file)
* ASUnitRunner.fla (file)
* _classpath (folder, containing all my .as files)
** as25 (folder)
** tests (folder)
** components (folder)
** other .as files

Create a new file called Example.as and place it inside the components with the following code:
[code lang="actionscript"]

class components.Example {

public function Example() {
}

}
[/code]

4b – Create tests/components/AllTests and ExampleTest

Create a folder within your tests folder called components, for me thats:

* AppName.fla (file)
* ASUnitRunner.fla (file)
* _classpath (folder, containing all my .as files)
** as25 (folder)
** tests (folder)
*** components (folder)
** components (folder)
** other .as files

Create the following two files:

AllTests.as
[code lang="actionscript"]
class tests.components.AllTests extends asunit.framework.TestSuite {
private var className:String = "AllTests";

public function AllTests() {
super();
addTest(new tests.components.ExampleTest());
}
}
[/code]

ExampleTest.as
[code lang="actionscript"]
import components.Example;
import asunit.framework.TestCase;

class tests.components.ExampleTest extends TestCase {
private var className:String = "ExampleTest";
private var instance:Example;

public function ExampleTest(testMethod:String) {
super(testMethod);
}

public function setUp():Void {
instance = new Example();
}

public function tearDown():Void {
delete instance;
}

public function testInstantiated():Void {
assertTrue("Example instantiated", instance instanceof Example);
}

public function test():Void {
assertTrue("failing test", false);
}
}
[/code]

5 – Run your tests

Now you are all set up, time to run those tests.

Simply publish and run AsUnitRunner.fla.

Expect to see a failure, the dummy test is set up expected to fail.

Now you can see how to set up ASUnit, you can expand Example.as and add some functions to test, and play around until you are ready to test your own functions. Advice on how to write tests can be found here. I hope to add another tutorial on this soon.

Define XML

XML is a way of marking up data. The data could be directly from a database, for example the result of a nested query. Instead of just outputting the results as plain text, we can mark up each element of the results in a machine readable format. That’s XML.

Simple XML element

A single element representing a stand alone piece of information would be represented as follows:

[code lang="xml"]

Complex Types

A name on its own might not be enough, for a person you might have other pieces of information. A person can be considered a complex type of XML element, constructed from several other XML elements.

[code lang="xml"]

We could introduce another complex type to break up the address into further elements.

[code lang="xml"]

Nested elements

A root element (say, person) could have more than one of a specific element (say, phone number). This is fine, and would be represented as follows:

[code lang="xml"]

Attributes

XML elements can have attributes added to them to add more information about the element.

I feel you should use attributes to add meta information about the element, information about the data itself, information useful to machines and not people. Here are a few examples:

• Database id’s
• Created date
• Edited date

Here’s our person with some suitable attributes:

[code lang="xml"]

I’ve seen API’s come up with a single element (say person), and stuff the tag with attributes containing all the details, thus:

[code lang="xml"]

This is very bad! It’s hard to read, hard to process, inflexible and doesn’t follow established standards.

An attribute can only be used once per element, and you shouldn’t store multiple values for a single attribute.

This is wrong:

[code lang="xml"]

This is wrong:

[code lang="xml"]

This is correct:

Constructing an XML document

An XML document should (and for should read must for standards sake) have the following features:

An XML document should have the extension XML

An XML document should begin with the XML declaration

[code lang="xml"]
< ?xml version="1.0" encoding="Unicode" standalone="yes"?>
[/code]

• Version should be set to 1.0 to comply with the majority of parsers.
• Encoding can be specified, or left out to assume Unicode
• Standalone yes means there is no DTD or XSD document describing the XML available, no means there is a document, leave the attribute out to assume no

An XML document must have one and only one root element

In the above example, if you wanted to list more than one person, you could start with a root element, ‘people’.

[code lang="xml"]

Extract the folder, placing the folder PHPUnit in /Applications/MAMP/bin/PHP5/lib/php

Open the file PHPUnit/Util/Fileloader.php and replace all instances of

[code lang="php"]@php_bin@[/code]

with

[code lang="php"]/Applications/MAMP/bin/php5/bin/php[/code]

Get the file pear-phpunit from the extracted folder and place it in usr/local/bin

1. Open the finder
2. Select Go->to folder
3. enter usr/local/bin in the path
4. Drag and drop the file.

With the finder open, select the file and open with a text editor. Ensure the file reads as follows:

[code lang="php"]
#!/Applications/MAMP/bin/php5/bin/php
< ?php
/* PHPUnit
 *
 * Copyright (c) 2002-2008, Sebastian Bergmann .
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 *   * Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 *
 *   * Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in
 *     the documentation and/or other materials provided with the
 *     distribution.
 *
 *   * Neither the name of Sebastian Bergmann nor the names of his
 *     contributors may be used to endorse or promote products derived
 *     from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
 * FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
 * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
 * BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRIC
 * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
 * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 * POSSIBILITY OF SUCH DAMAGE.
 *
 * $Id: pear-phpunit 2805 2008-04-14 16:52:19Z sb $
 */

require_once 'PHPUnit/Util/Filter.php';

PHPUnit_Util_Filter::addFileToFilter(__FILE__, 'PHPUNIT');

require 'PHPUnit/TextUI/Command.php';

define('PHPUnit_MAIN_METHOD', 'PHPUnit_TextUI_Command::main');

PHPUnit_TextUI_Command::main();
?>
[/code]

Now rename your file to phpunit (if you already have a copy of phpunit installed, rename the file to phpunit-mamp so you know which one to use). In terminal:

[code lang="php"]
sudo mv /usr/local/bin/phpunit-pear /usr/local/bin/phpunit
[/code]

Now you can run tests from within MAMP by simply typing phpunit into terminal.

Here’s how to avoid the issue.

1. Create a regular Static/CGI/PHP application called <appname> within the panel
2. Place the Zend Framework code within the <appname> folder created inside “/home/<username>/webapps/<appname>”
3. Select the option in Panel for adding a new application
4. Select the “Symbolic link to static/cgi/php app” as app type
5. Name the app <appname-symlink>
6. In the extra info field add an absolute path to the public folder, such as “/home/<username>/webapps/<appname>/public”
7. Create a new website named <appname-website> (or whatever you like) which uses the application <appnamesymlink>
8. Create a domain and link it to the website <appname-website>

Therefore, make:

[code lang="bash"]
slideshare id=1068027&doc=ribotmobiledesignuk
[/code]

[code lang="bash"]
slideshare id=1068027&doc=ribotmobiledesignuk&w=425
[/code]

[code lang="css"]
.mir { letter-spacing : -1000em; text-indent : -999em; overflow : hidden; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em;
overflow : hidden;}
[/code]

The method I’m going to explain to you, in summary, is this:

1. you will copy your bookmarks down to a local mySQL database using an existing open source tool
2. you will delete and edit them locally using your preferred tool
3. using a script I have made you will turn the database into an uploadable delicious export file
4. in your delicious account you will delete all your bookmarks and then import them again from the newly created, cleaned, file

WARNING: this could go wrong, I accept no responsibility for any loss of data, read through before beginning and take a backup of all your bookmarks.

Before you start

1. Ensure you have a local apache server with PHP and MySQL installed and enabled. On OS X you will simply need to activate your installation, on windows you can follow my instructions on installing WAMP
   
2. Locate a database editing tool, and it should be one that allows you to delete multiple rows at once such as Navicat
3. Create a local database called ‘delicious’  and ensure there is a user that can access it – it could be the default user root if you haven’t changed anything since installing

Getting your bookmarks into the database

Download the mysqlicious tool

Unzip the downloaded file and open the mirror.php file

Find the first block of code and enter your database name (delicious) and the user and password as shown:

[code lang="php"]
$MySQL_Host = "localhost";
$MySQL_Database = "delicious";
$MySQL_Table = "delicious";
$MySQL_Username = "root";
$MySQL_Password = "";
[/code]

Then add your delicious username and password to the fields underneath. I found the tag option didn’t work for me, but the idea is you can restrict the export by tag.

Create a folder called delicious in the area where your webserver is set up to point to (this might be your Sites folder on OS X, instructions on the pages listed earlier).

Copy the two files, mirror.php and MySQLicious.php into this folder.

Go to http://localhost/delicious/mirror.php, the tool should now export all your bookmarks to the database.

Modify the database

If you have a good tool, you can now go through the database table named delicious and quickly delete all the posts you no longer need.

A hint – by writing simple database queries you can easily boil your bookmarks down to certain tags – the following SQL will help you:

[code lang="sql"]
select * from delicious where tags LIKE  '%ajax%' order by tags
[/code]

Delete all current bookmarks

WARNING! This could go wrong – ensure you have exported the bookmarks to a file as a backup first. Also please note that any bookmarks you import have to be all set to private, or all set to public – the previous public and private settings will be lost. This problem goes for any kind of import, either the method I am describing here, or by importing the exported file I just reminded you to save.

If you are ready, do the following to quickly delete all your bookmarks:

Go to your bookmarks and set the number displayed to 100

Copy and paste the following code into your browser address bar, replacing the site address

[code lang="javascript"]
javascript:var delay=2;
var s=document.createElement('script'); s.type='text/javascript';
s.src='http://ghill.customer.netspace.net.au/re-mark/re-mark-del-code.js';
document.getElementsByTagName('head')[0].appendChild(s);
void(0);
[/code]

(courtesy of Scripted Remark – Batch Editor For Bookmarks)

Allow a few minutes for this to complete, then select the next button and repeat until all bookmarks are gone.

Upload the bookmarks

Download the delicious-import.php script I put together (right click on that link) and add it to the delicious folder. This file creates a bookmarks html file which can be imported into delicious, or any other browser.

Navigate to http://localhost/delicious/delicious-import.php, save the outputted file somewhere, such as the Desktop (in Firefox go to File -> Save Page As…) and make sure the extension is set to html.

Go to the Manual import settings and import the file you just saved.

Your done!