WireframeSketcher is an Eclipse plugin which offers a similar feature-set to Balsamiq Mockups, although personally i prefer WireframeSketcher. Firstly, it plugs right in to my current workflow in Eclipse – that already wins it many points in my book! Aside from that, the plugin feels a lot more stable than Balsamiq and offers a few interesting features, such as:

• Wiki syntax formatting on all supported controls
• Screens vs Masters vs Storyboards
  • A Screen is a view that you can build
  • A Master is a reusable component that can be used in Screens
  • A Storyboard is made up of a collection of Screens
• Well thought-out presentation mode allowing you to jump between screens

All in all, i like the way it’s structured; i like that you can create separate files for logically separate areas of your whole application mockup and bring them together in a storyboard. I’ve used it on a couple practical examples that i was planning to do, and it feels comfortable and usable.

If you’re developing your a Java application with SWT, there’s also a neat plugin to export your wireframes as SWT code

Maybe an MXML export feature is on the cards too! That would certainly be wonderful…

What is Aerial CMS?

Aerial CMS (named Aerial because it was the first word i could think of with “RIA” in it) is a simple content management framework. I decided to rethink the concept of a content management system, because – the way I see it – CMSs these days are about content management AND content presentation. I think that these two massive areas of development & design need to stay very far away from each other. They are like brother and sister to us now, but sometimes – when stuck in a room together for so long – they breed and the results are disastrous (on top of being scandalous!).

Design Philosophy

Look at how the MVC (Model View Controller) pattern came about: software engineers found that separating application logic from presentation from data has serious design benefits. Now, i’m not attempting to bad-mouth all the incredible efforts of the CMS developers… I’m saying that for Rich Internet Application development, it really becomes a chore to use systems like Drupal or Symfony because they were not meant to be used in that way. They do what they do superbly well, but for RIAs they fail to impress me.

Aerial CMS has been built from the first line of code for optimized Rich Internet Application development. It focuses only on content management and development tooling, and wants nothing to do with how you present the data. It’s certainly a change from the standard model, and i’m convinced about how I want to develop my RIAs, but that’s why i’ve put out this early release – to see if you all agree with me. This CMS still has a very, very long way to go; it works well for most situations but the tools haven’t been developed yet.

Technology

Aerial has been built on two very well established and loved open-source frameworks, namely AMFPHP 1.9 and Doctrine 1.2.1. The Aerial framework is built for compatibility with PHP 5 only. Aerial enforces no rules upon you when you get down to developing your back-end code, but it does stick to Doctrine’s method of generating database tables and models. In essence, once you’ve set up your database schema, you can do whatever you like you can plug into Doctrine’s API or you can write your own code; it really gives you the freedom to code the way you’re comfortable with.

Tutorials and Videos

I’ve made a Getting Started video to get you familiar with the framework and i’ll be writing a series of tutorials in the Wiki section of the Google Code page for Aerial CMS. I’ve also got plans for a couple more video tutorials, so keep checking the site for updates or follow me on Twitter (@dannykopping).

Comments, Suggestions, et al

I’d love to hear what you have to say (as long as it’s in English – being monolingual sucks)! I’m very open to suggestions, any offers to help contribute would be welcomed and all constructive criticism is encouraged!

As any developer who has ever dipped their toes into the murky pond that is cross-domain configuration with Flash will tell you, it is quite a confusing and somewhat aggravating task to accomplish. In this post, I’m going to demonstrate how you can control access to your APIs from Flash applications by dynamically generating crossdomain.xml files that work the same as static crossdomain.xml files.

But before we go any further, what the hell is a crossdomain.xml file?

The definition of a cross-domain configuration file is (taken from http://www.senocular.com/pub/adobe/crossdomain/policyfiles.html):

A cross-domain policy file is a XML document that grants a web client, such as Adobe Flash Player, permission to handle data across multiple domains. When a client hosts a content from a particular source domain and that content makes requests directed towards a domain other than its own, the remote domain would need to host a cross-domain policy file that would grant access to the source domain allowing the client to continue with the transaction. Policy files grant read access to data as well as permit a client to include custom headers in cross-domain requests.

Essentially what this means is that if you have a Flash application and you need to pull data (other than images or video) from a domain which is not the domain of your hosted application, you will need to place a crossdomain.xml file on the server you are requesting data from.

The configuration file needs to be placed in the webroot of the server; you can have a look at some of the more popular sites’ crossdomain.xml files:

• http://youtube.com/crossdomain.xml
• http://twitter.com/crossdomain.xml
• http://facebook.com/crossdomain.xml

This post is not a “how-to” on crossdomain.xml files unfortunately: for that, you can visit http://www.adobe.com/devnet/flashplayer/articles/cross_domain_policy.html – a great article by Lucas Adamski.

The Problem

You would like to control access to your application’s API based on a database table, for instance:

You have an application that serves up a list of products like Amazon.com to be made available via AMF requests (could be a REST-based architecture, SOAP, etc). You have a service offering whereby Flash/Flex application developers can register with your company to be allowed to access this wonderful API. You charge a set price per year for your service and you keep a database of authorized subscribers. At this stage, you can either allow any domain to access your API by using the following crossdomain.xml file:

1
2
3
4
5
6

<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
 
<cross-domain-policy>
   <site-control permitted-cross-domain-policies="master-only"/>
   <allow-access-from domain="*"/>
</cross-domain-policy>

The problem with this configuration is that any domain can send requests to your API from their Flash applications, and for obvious reasons this is not such a great idea.

The other (more secure) option would be to manually stick in each subscriber’s domain name into the crossdomain.xml file as follows:

1
2
3
4
5
6
7
8

<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
 
<cross-domain-policy>
   <site-control permitted-cross-domain-policies="master-only"/>
   <allow-access-from domain="example1.com"/>
   <allow-access-from domain="example2.com"/>
   <allow-access-from domain="example3.com"/>
</cross-domain-policy>

With the above configuration, you will start running into major headaches your subscribers either start cancelling their accounts or fail to pay in full. You will manually have to go and remove their domains from the configuration each time.

The Solution

When Flash applies a security policy like this, it automatically looks for a crossdomain.xml file on the requested server in the webroot. We can use a nifty combination of Apache rewriting and a PHP script to dynamically generate a list of authorized domains.

Apache Configuration

We want Apache to listen for an incoming request for our crossdomain.xml file, but instead of serving the XML file, we want to process a PHP script called generate-config.php to generate our configuration options. This example is quite simplistic, and I encourage you to take this further with whatever rules your application may require.

We are going to create a .htaccess file in the webroot of our server with the following contents:

RewriteEngine On
RewriteCond %{REQUEST_URI} crossdomain.xml
RewriteRule ^crossdomain\.xml$ generate-config.php [L]

This will present the output of our generate-config.php file as the contents of the crossdomain.xml file – essentially using another file’s content in place of another.

PHP & MySQL

In our generate-config.php file, we are going to:

1. Connect to a database
2. Run a SQL query that will return a list of subscribers
3. Iterate through our list and add them to our XML output
4. Echo the XML output back to Apache

First, create a database called crossdomain_test and then run the following SQL query to create our subscribers table:

CREATE TABLE IF NOT EXISTS `subscribers` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `domain` varchar(255) NOT NULL,
  `active` tinyint(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Insert a couple of test rows:

INSERT INTO `subscribers` (`ID`, `name`, `domain`, `active`) VALUES
(1, 'YouTube', 'youtube.com', 1),
(2, 'Twitter', 'twitter.com', 1);

Now we’re going to create our generate-config.php file in the webroot:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
	// create our config skeleton according to the crossdomain.xml rules
	$xml = '<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<site-control permitted-cross-domain-policies="master-only"/>
</cross-domain-policy>';
 
	// create $config variable to hold our config data
	$config = new SimpleXMLElement($xml);
 
	// connect to MySQL and select database
	$conn = mysql_connect("localhost", "username", "password");
	mysql_select_db("crossdomain_test", $conn);
 
	// loop through all rows, and create xml nodes
	$res = mysql_query("SELECT domain FROM subscribers WHERE active = 1");
	while($subscriber = mysql_fetch_object($res))
	{
		$child = $config->addChild("allow-access-from", null);
		$child->addAttribute("domain", $subscriber->domain);
	}
 
	// echo back to Apache
	echo $config->asXML();
?>

If we navigate to the crossdomain.xml file in the browser, we should see:

1
2
3
4
5
6
7

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<site-control permitted-cross-domain-policies="master-only"/>
	<allow-access-from domain="youtube.com"/>
	<allow-access-from domain="twitter.com"/>
</cross-domain-policy>

and if we delete one of the records out of the table (try deleting YouTube), and navigate to that page again, you’ll see:

1
2
3
4
5
6

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<site-control permitted-cross-domain-policies="master-only"/>
	<allow-access-from domain="twitter.com"/>
</cross-domain-policy>

And that’s it! Not too difficult at all

A Workaround for all frustrated developers consuming REST services

As a side-note, if you ever encounter a site that you need to pull data from and they do not have a crossdomain.xml file, all you have to do is write a simple “proxy” file with PHP (or whichever language you choose) that will accept one parameter (the URL to be called) and send the results back:

1
2
3
4
5

<?php
 
	$url = $_GET["url"];
	echo file_get_contents($url);
?>

Make sure that this proxy file is sitting in your domain though, or a domain with a crossdomain.xml file present.

Take the following services-config.xml file for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
	<services>
		<service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService"
				messageTypes="flex.messaging.messages.RemotingMessage">
			<destination id="amfphp">
				<channels>
					<channel ref="my-amfphp"/>
				</channels>
				<properties>
					<source>*</source>
				</properties>
			</destination>
		</service>
	</services>
	<channels>
		<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
			<endpoint uri="gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
		</channel-definition>
	</channels>
</services-config>

As you can see, we’re setting the endpoint for our my-amfphp channel to gateway.php. What if you wanted to read that value into your Flex application? You could use the following code:

trace(ServerConfig.getChannel("my-amfphp").endpoint);

Check out the ServerConfig for more information!

I have teamed up with Ariel Sommeria-klein to revive the legendary AMFPHP project that spawned a whole new dimension of Rich Internet Applications. Together we have brought AMFPHP 1.9 out of beta and made it compatible with PHP 5.3. We have also completely rewritten the AMFPHP service browser and we have several improvements planned for AMFPHP 2.0.

If you would like to help contribute to this great open-source application, please contact us.

My test was conducted using Flex SDK 3.4.0.9271, Firefox 3.5.7 and Flex Builder Professional 3.0.214193

According to this page (under the Preloading modules heading), Adobe asserts the following:

When a module is loaded by the Flex application for the first time, the module’s SWF file is transferred across the network and stored in the browser’s cache. If the Flex application unloads that module, but then later reloads it, there should be less wait time because Flash Player loads the module from the cache rather than across the network.

Module SWF files, like all SWF files, reside in the browser’s cache unless and until a user clears them. As a result, modules can be loaded by the main application across several sessions, reducing load time; but this depends on how frequently the browser’s cache is flushed.

I found the above claims to be demonstrably false, or at least just plain inefficient…

Let me qualify this:
According to my tests (conducted with my Firefox browser cache turned both on and off), i found that the application’s memory usage keeps growing exponentially when switching between two loaded modules. There was a variance (as you’d imagine) when the browser cache was left on but nonetheless, the memory usage keeps growing steadily.

In the code sample below, I have extended the functionality of the mx.modules.ModuleLoader class, and added a Dictionary (with a little logic) to manage the (ostensibly) effective caching of previously loaded modules. I have not tested this class extensively, but all the tests that I conducted seemed to produce a significant memory and speed improvement.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

package
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.utils.ByteArray;
	import flash.utils.Dictionary;
 
	import mx.events.FlexEvent;
	import mx.events.ModuleEvent;
	import mx.modules.IModuleInfo;
	import mx.modules.ModuleLoader;
	import mx.modules.ModuleManager;
 
	/**
	 * This class manages the loading, unloading and caching of Flex Modules
	 * This is a modified version of the mx.modules.ModuleLoader class
	 *
	 * @author Danny Kopping - danny@ria-coder.com
	 */
	public class CachedModuleLoader extends ModuleLoader
	{
		private var map:Dictionary = new Dictionary();
 
		private var _url:String = null;
		private var module:IModuleInfo;
		private var loadRequested:Boolean = false;
 
		public function CachedModuleLoader()
		{
			super();
		}
 
		override public function set url(value:String):void
		{
			if (value == _url)
				return;
 
			if (module)
			{
				module.removeEventListener(ModuleEvent.PROGRESS, moduleProgressHandler);
				module.removeEventListener(ModuleEvent.SETUP, moduleSetupHandler);
				module.removeEventListener(ModuleEvent.READY, moduleReadyHandler);
				module.removeEventListener(ModuleEvent.ERROR, moduleErrorHandler);
				module.removeEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
 
				//module.release();
				module = null;
 
				if (child)
				{
					removeChild(child);
					//child = null;
				}
			}
 
			_url = value;
 
			dispatchEvent(new FlexEvent(FlexEvent.URL_CHANGED));
			removeAllChildren();
 
			if (_url != null && loadRequested)
			{
				if(!map[_url])
					loadModule();
				else
				{
 
					child = map[_url];
					addChild(child);
				}
			}
		}
 
		override public function get url():String
		{
			return _url;
		}
 
		override public function createComponentsFromDescriptors(recurse:Boolean = true):void
		{
			super.createComponentsFromDescriptors(recurse);
 
			loadRequested = true;
			loadModule();
		}
 
		override public function loadModule(url:String = null, bytes:ByteArray = null):void
		{
			if (url != null)
				_url = url;
 
			if (_url == null)
			{
				//trace("loadModule() - null url");
				return;
			}
 
			if (map[_url])
			{
				//trace("loadModule() - already created the child");
				return;
			}
 
			if (module)
			{
				//trace("loadModule() - load already initiated");
				return;
			}
 
			dispatchEvent(new FlexEvent(FlexEvent.LOADING));
 
			module = ModuleManager.getModule(_url);
 
			module.addEventListener(ModuleEvent.PROGRESS, moduleProgressHandler);
			module.addEventListener(ModuleEvent.SETUP, moduleSetupHandler);
			module.addEventListener(ModuleEvent.READY, moduleReadyHandler);
			module.addEventListener(ModuleEvent.ERROR, moduleErrorHandler);
			module.addEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
 
			module.load(applicationDomain, null, bytes);
		}
 
		override public function unloadModule():void
		{
			if (child && contains(child))
			{
				removeChild(child);
				child = null;
			}
 
			if (module)
			{
				module.removeEventListener(ModuleEvent.PROGRESS, moduleProgressHandler);
				module.removeEventListener(ModuleEvent.SETUP, moduleSetupHandler);
				module.removeEventListener(ModuleEvent.READY, moduleReadyHandler);
				module.removeEventListener(ModuleEvent.ERROR, moduleErrorHandler);
 
				module.unload();
				module.removeEventListener(ModuleEvent.UNLOAD, moduleUnloadHandler);
				module = null;
			}
 
			if(map[_url])
			{
				delete map[_url];
			}
		}
 
		private function moduleProgressHandler(event:ModuleEvent):void
		{
			dispatchEvent(event);
		}
 
		private function moduleSetupHandler(event:ModuleEvent):void
		{
			// Not ready for creation yet, but can call factory.info().
 
			dispatchEvent(event);
		}
 
		private function moduleReadyHandler(event:ModuleEvent):void
		{
			child = module.factory.create() as DisplayObject;
			dispatchEvent(event);
 
			if (child)
			{
				var p:DisplayObjectContainer = parent;
				// p.removeChild(this);
				addChild(child);
 
				map[url] = child;//ModuleManager.getModule(_url);
				//trace(map + ":" + url + ":" + map[url]);
			}
		}
 
		private function moduleErrorHandler(event:ModuleEvent):void
		{
			unloadModule();
			dispatchEvent(event);
		}
 
		private function moduleUnloadHandler(event:ModuleEvent):void
		{
			dispatchEvent(event);
		}
	}
}

The usage of this class is exactly the same as the regular mx.modules.ModuleLoader class. I hope this helps!

Download this file: Download

**DISCLAIMER**
I know a bit about Flex modules from hours of obsessing over them, but i do not know everything. From my tests of the efficacy of the above code & explanation, i found that it reduces memory usage and increases the general usability of my Flex project; i could be very wrong on this topic, and if i am – please tell me. Maybe i’m just an idiot, but it seems to work…

CursorManager
{
	/* You can use PNGs, SWFs or JPEGs */
	busyCursor: Embed(source="path/to/your/resource");
}

To invoke the busy cursor, use the following line:

CursorManager.setBusyCursor();

…or you could set the showBusyCursor to true in your HTTPService or RemoteObject instances.

Check out http://dannykopping.co.za/amfphp-genie/ for more information!

Background

My development environment is Windows-based (against my wishes… not enough loot or motivation for a Mac, lack of Adobe software on Linux) but i make up for this by running a virtual Linux installation in my Windows environment and networking the two together. It actually works really well, and the process for setting this up can be found here. To cut a very long and boring story short, essentially i cannot use localhost as your server when using this architecture since i have my LAMPP stack running on my Linux environment, so my “local server” can only be accessed using the IP address of the virtual system.

This complicates things a bit when trying to use asSQL to connect to my MySQL installation, because MySQL gets all paranoid and won’t accept connections from a foreign IP address (the IP of my Windows machine on which my AIR app is running)… To get around this, all you have to do is create a new user in MySQL (i used phpMyAdmin), set the user’s hostname to the IP address of your remote system (i’ve explained how to do this below) and you’re ready to rock and roll!

Solution

The first thing you need to do is get the IP address of the remote system…

Windows: Open the command line, type ipconfig
Linux & Mac: Open the terminal, type ifconfig

In this example, my IP address is 192.168.56.1

I’ll be using phpMyAdmin to fix the problem.

1. Open phpMyAdmin and click on the Privileges tab.
2. Click Add a new User
3. Enter any username you like, paste the IP address obtained in the Host field and put in a password
4. Under the Database for user panel, leave it at None
5. Under the Global privileges, you can Check All

That should sort it out… Remember, this is HIGHLY insecure and should only be used on development environments and NOT production environments.

I was browsing through the documentation like i had many times before, but this time i noticed the offscreenExtraRowsOrColumns property. At first you think “wtf” but then i got curious…

Say you have 25 images in a grid that displays one row of 5 images at a time:

The row in green will be the only row visible at this point in time. When you scroll, Flex will chuck out the first row and create the second row:

…and so on. Isn’t that just damn irritating? (If you’re thinking “nah, what’s the big deal?” then you obviously haven’t tried this before).

Anyway, the way to fix it is to tell Flex how many rows there are offscreen so that it can create them in the interim. This seems like a bit of a weird method because in the navigator classes (ViewStack, et al) there is a creationPolicy property which – when set to “all” – will create all the non-visible components before they’re navigated to, thus slowing down the processing a bit (depending on your app) but also speeding up the switch between views. Alas, no such property to be found in the TileList component. Can anybody tell me why? I think i should code a modified version of the TileList component to accept this property… +1 to TODO list… *sigh*

Hopefully this will help those of you experiencing the ball-ache that i did.