Creating a front-end for wordpress is incredibly easy and great for making weird and unnecessary versions of the site with UI swoops and swishes. All the data you need is available in the RSS feed for the site. You could even add a special feed specifically for the purpose of supporting a flash version of the site. Just make sure you change the settings to add a good number of full posts to the feed. You can always link back to the site for anything older than that.

The flex version of Imbimp just went live and it tries to improve on the standard Imbimp cardboard interface by keeping everything on one page, where arrows allow the user to browse new content. The widget sidebar is also combined with the navigation. There are no huge benefits to either party (ie me or random imbimp reader) but it’s a good proof of concept of what can be rustled together using Flex in about a day.

Fetching the RSS feed is as easy as calling an httpService…

result=”loadWordpressXML(event)” />

and…

private function loadWordpressXML(evtObj:ResultEvent):void {
var myURLPattern1:RegExp = /content:encoded/g;
var myXMLString:String = evtObj.result.toString().replace(myURLPattern1, “content”);
wordpressXML = XML(myXMLString);
}

From here you can then use the XML in whichever way suits your design… For example, here I am creating the navigation dynamically…

private function generateNavigation():void {
for each (var itemXML:XML in wordpressXML.channel.item) {
var navigationItemHBox:VBox = new VBox;
navigationItemHBox.styleName = “navigationBackground”;
navigationItemHBox.width = 280;
navigationItemHBox.height = 37;
var navigationLabel:Label = new Label;
navigationLabel.text = itemXML.title;
navigationLabel.width = 240;
navigationLabel.styleName = “navigationText”;
navigationLabel.truncateToFit = true;
navigationLabel.buttonMode = true;
navigationLabel.useHandCursor = true;
navigationLabel.mouseChildren = false;
navigationLabel.data = itemXML.guid;
navigationLabel.addEventListener(MouseEvent.CLICK,selectPost);
navigationItemHBox.addChild(navigationLabel);
navigation.addChild(navigationItemHBox);
}
}

The most difficult part was to position the main post elements in the right place before whizzing them into view. There is a little bit of dubious logic required to do that. Look at the attached source for that.

Also given the increased size of the feed - ie it loads 100 post in one go (not including images) it’s important to have some kind of preloader in place while things load up.

Download an earlyish version of the source here to see how I did…

…and see the finished version here

I have had more problems than worth mentioning with the LocalConnection API, but felt compelled to write about it after finally getting everything up and running.

The setup I have involves an AIR app communicating with a Flex 3 application running on an SSL enabled web page and back again. There seems to be rarely any problems going from browser to AIR, since the AIR app is easily addressable using the applicationID and publisherID strings or by passing strings though outside of the localconnection method in arguments along with the browserInvoke event.

When communicating from the AIR app back to the browser it seems to be rather fragile and fails regularly. Addressing the browser I use the last part of the domain and random ID of the browser flex instance (see previous post) eg “imbimp.com:dhdvgks35357″.

Now unbeknown to me, the domain string should not be the top level domain shown in the browsers address bar but should in fact match the TLD of where the Flex SWF file is hosted if of course it is different from your original site.

There are a few confusing bits and pieces to include around allowDomain and allowInsecureDomain, all of which are fairly well documented on Adobe’s livedocs pages, but seemed to have little effect when faced with inadvertantly addressing the wrong place.

No error event is thown in this case, just a statusEvent classing the connection attempt as an error of no particular type. Annoying.

There are a number of methods to detect network connectivity, all of which can be read about here, here, here and here. What I found is that these seem to work fine when there is an actual change in your network connection. eg disconnecting your wireless connection, unplugging a network cable or USB modem. But if there is just a drop in network connectivity, such as a break the router side, invisible to the user’s PC then these methods work less well.

When using a URL monitor in flex, it polls for a URL on first start, and then after that you can configure the poll interval depending on your needs. Unfortunately, this is far from ideal given that people are online more often than offline, and its just not great to poll some URL every few seconds when it really isn’t necessary.

My recent download manager application uses a URL monitor but it also has a timer running in the background for each download. Every 10 seconds it checks to see if the bytes downloaded has changed. The theory being that if even the slowest net connection has downloaded 0 bytes in 10 seconds, its safe to say there is probably a network problem. It then begins polling every 10 seconds until there is a response and then assumes the user is online again and the download can continue. This is done as follows….

Firstly I initiate a timer and update value using a progressEvent tied to my URLStream.

private function onDownloadProgress(event:ProgressEvent):void {
value = Math.round(event.bytesLoaded);
}

Then I compare the bytes downloaded to a running count as follows…

private function possibleNetworkProblem(e:TimerEvent):void {
if (lastLotOfBytes == value) {
lastLotOfBytes = 0;
sendNetworkError();
} else {
lastLotOfBytes = value
}
}

If the values have not changed then I disconnect and reconnect the URL monitor every 10 seconds until network returns….

private function sendNetworkError():void {
if (monitor.available) {
myTimer.stop();
myTimer.removeEventListener(TimerEvent.TIMER,possibleNetworkProblem);
initiateDownloads();
}
monitor.removeEventListener(StatusEvent.STATUS, announceStatus);
monitor.stop();
monitor.start();
monitor.addEventListener(StatusEvent.STATUS, announceStatus);
}

During my download manager development I tried a number of different methods to download files. This article was invaluable, as it explains how to download in 50k chunks rather than buffering much larger amounts.

To start with a tried buffering about 5mb. Seemed sensible, since I figured it would cut the amount of writing to disk that would required. Especially since most mp3 files are about that size. Unfortunately it did not work, since for some reason downloaded files were becoming corrupted. 50k is a pretty good level of buffering to improve performance and avoid an infinite level of disk reads.

For a while I figured that changing the method for downloading was impacting performance due to the application hanging and scrolling being disabled. This was due to an unnecessary amount of debugging though. Or rather - writing out to a text field for the purpose of debugging without relying on trace statements.

Using either the arguments field when launching an AIR app from a browser or initiating a local connection between AIR apps or Flex apps and the browser is a great way to pass data and create a better integrated user experience. However, there are some serious flaws. The documented limit for passing data between flex application using LocalConnection is 40Kb. This is easily enough for a few IDs, but not a sizable XML document.

The argument field when launching or installing AIR applications from the browser when creating a custom AIR badge is even more restrictive. It is not clear what the limit is for this although in various tests it seems closer to 10Kb. The workaround is to split data into chunks and then send multiple messages. Here is how I did it….

Firstly gather the XML either by generating dynamically or in my case fetching it from the page using the ExternalInterface call to a JS function embedded on the page in the browser…

var orderXML:String = ExternalInterface.call(”getXML”);
var arguments:XML = XML(orderXML);
xmlChunkProcessor(arguments);

Next the xmlChunkProcessor loops through the repeated nodes in the XML passes blocks of 10 items back out. 10 worked fine given the limited amount of data in each “delivery” node. However this figure may need to be change depending on the complexity of each node…

private function xmlChunkProcessor(arguments:XML):void {
var item:XML;
var counter:int = 0;
for each (item in arguments..delivery) {
counter++;
chunk += item.toString();
if (counter == 10) {
xmlChunkDispatcher(chunk);
chunk = “”;
counter = 0;
}
}
if (counter < 10) {
xmlChunkDispatcher(chunk);
chunk = "";
}
}

Lastly the xmlChunkDispatcher adds xml headers and footers to the collected nodes and sends it off to the application the needs it using the localCollection method in the function sendMessage…

private function xmlChunkDispatcher(chunk:String):void {
var queueString:String = xmlHeader;
queueString += chunk;
queueString += xmlFooter;
sendMessage(XML(queueString));
}

I have tested this with upwards of 300 items, so the receiving application would receive 30+ messages in quick succession. This seems to work OK, but performance in the application degrades depending on what processing needs to be done to the XML the other end. In my case i am using the XML to build UI objects and so once you get beyond 300…it runs very slowly.

In my recent efforts to create an MP3 downloader application I have been extensively investigating the Adobe Flex browser API to pass through download URLs and other meta data through to my app.

Any sensible person would ensure a web service or suitable server-based XML file was available to AIR requiring only an ID or two to get going but in this instance I had no such luxury.

Typically a flash/flex badge sits on a website and can detect, install and launch an AIR app while passing through simple arguments. It is not widely documented that these arguments may only be alpha-numeric and may not include special characters like dots, slashes, percents and ampersands. This counts simple encoding out.

The way the flash badge fetches content from the page is using the External Interface method whereby the flash badge can call JavaScript functions embedded on the page, which in turn allows XML, also embedded in the page, to be collected and encoded.

I came up with my own encoding mechanism so that XML could be passed through the flash badge and into my AIR app as a string and then decoded there. This meant replacing . with DOT and % with PCNT and / with SLSH etc etc

So everything is working a lot better now, although it would be helpful if Adobe included details about this restriction in their Flex documentation to save wasting time debugging why the flash badge fails to launch the AIR app for no apparent reason. It’s probably a fair restriction for various security reasons due to people running dubious scripts on even more dubious websites that would somehow take hold of your computer via AIR. I had never thought a percent sign could be so dangerous, exclamation marks are much more scary.