everynerd.net

Exploring Adobe AIR

// September 23rd, 2009 // No Comments » // Actionscript, Computer Software, Flex, Web Development

Recently, I’ve begun developing a Flex application for the desktop using Adobe’s Integrated Runtime (AIR), which is a local library for running Flex applications. One of the most enticing features of AIR applications is the ability to deploy them cross platform with little to no machine-specific code (except perhaps special keystrokes on Mac).  As well, the ability to store data on the client machine is also extremely convenient.  Gone is the worry of keeping a web interface tuned to the application, which can assist in streamlining development into a more user-friendly product.

The only downside to the desktop application is the lack of custom data that would have previously been delivered through the web interface. At least, that’s what I thought.

My exploration into the AIR libraries and many tutorials on the web is that AIR has built-in, for free, SQLite that will allow an application to store and manage data persistently for the lifetime of the application’s existence on the client machine.  There are some minor limitations from a backend development standpoint (like lack of stored procedures), but nothing that should be a surprise to users familiar with ‘lite’ databases.

One of the difficulties with local storage like this is the fact that sensitive data stored through SQLite is not necessarily secure, since it exists on the user’s machine unencrypted. If this were a regular Flex application, all of the data would reside on a database server we own. However, since this on the client’s side, Adobe has a featured called encrypted local store.  The usage and explanation of this feature is out of the scope of this article, but it’s simply a class with static methods that can “get” and “set” values of any kind into encrypted storage. Perfect for storing authentication tokens, and other similar pieces of data.

With data taken care of entirely through AIR, it leaves the developer available to focus to on the user experience with their application. Which for me, has always been a very difficult part to nail down. I’ve written about GUI design previously, and still learn new things everyday either from coworkers, or my own personal experience with software I use frequently.

Hopefully by year end, Flash Builder 4 (the successor to Flex Builder 3) will be released, but more importantly, a program called Flash Catalyst will also be released (likely in tandem). Judging by the demo videos of designer and developer working together to build a Flex interface, mocking up a realistic interface can include physically converting the items in the mockup into flash style definitions.

The more I watch the demonstrations of this technology, the more tempted I am to put my pet project on hold and wait for these to be released.  The trial download for Flash Builder 4 is available from Adobe Labs, though I challenge anyone to use it for the full 30 days and try to return to the previous version. Luckily, my last install of the trial was interrupted by a failed hard drive – I was subsequently saved from the spoils.

Future posts will explain my experiences with my pet project in AIR, which I hope to release to public use as soon as it’s near stable, likely sometime in the new year.

Component Crazy: Handling Your Growing Flex Application

// September 3rd, 2008 // No Comments » // Actionscript, Flex, Web Development

It’s no surprise to developers that the requirements for an application are bound to change, and it’s because of this fact that there are numerous architectures for developing software applications that can ease the process of adding new functionality. 

For Flex specifically, one such architecture is Cairngorm, which has been described here a few times. But as easy as it is to manage important events in the application, even the best architecture fails to simplify a project.  It always gets to a point where there are too many pages to keep track of.

Using a personal example, the backend administration tool that has been in development for my entire tenure at the company (and as such, requirements have shifted dramatically over this time period) has grown to house a fairly large number of major components. Two types of search pages, two types of master-detail pages, a login page, two types of general site maintenance pages and a number of custom renderers and other compents necessary for image retrieval and display.

How does one keep track of all these different areas that a user is supposed to seamlessly surf through?  At first I had a show/hide game going on, but after about 3 different major compents were in use, the process became unmanageable. 

Then I discovered States.

Using the ModelLocator of the Cairngorm architecture, I decided to hold two significant states: the authentication state, and the application state. Both variables declared as strings.

Here’s how the format of the application implements states:

MainApplication.mxml -> Two states: Valid, or invalid.  

When this loads, it dispatches a Cairngorm event to check if a user session exists (via amfphp, to a Zend_Auth controller), if does then the variable for authentication state in ModelLocator is set to “valid”, if not it is set to “invalid”.

In the MainApplication.mxml file, two states are listed such:

1
2
3
4
5
6
7
8
9
10
11
12

<mx:states>
	<mx:State name="invalid">
		<mx:AddChild>
			<mx:LoginComponent />
		</mx:AddChild>
	</mx:State>
	<mx:State name="valid">
		<mx:AddChild>
			<mx:WrapperComponent />
		</mx:AddChild>
	</mx:State>
</mx:states>

The currentState property of the application is bound to the ModelLocator variable for authentication state. So in the event that this property changes to either of these states, the child component will be loaded.

In the case of the administration tool, one of these is a login form and the other is a wrapper component for the next tier of major components. For this example it is called WrapperComponent. Its currentState property is bound to a separate ModelLocator variable to control the general application state.

This solved the problem of having to manage N different components in a complex administration system, and now the code will only need to manage the application state variable and the rest is taken care of.

For added flair, states can also have transitions set to them. Which if done correctly and sparingly, can really add to the look and feel of an application.

Hello Data Modeling, My Old Friend

// August 5th, 2008 // No Comments » // MySQL

About 2 weeks ago I was given the opportunity to step away from Flash and Flex and get back to the basics of application development: designing a database.

For those that don’t know me, I’ve spent my entire software development career before May of this year developing custom software solutions for a wide variety of clients. Being in a small team, this rendered me the opportunities to develop through nearly all aspects of the SDLC including designing a data model.

Previously most of my experience had been using Microsoft’s SQL Server, but now this time I’d been handed the challenge of an open source solution in MySQL. A few versions ago this might have caused me some minor heart palpitations, but luckily with recent versions of the product, there are a lot of creature comforts that I can work with thanks to the InnoDB storage engine.

Stored Procedures

This topic is easily debatable, and it especially depends on the architecture and scope of the application, but I am a very large supporter of stored procedures in RDBMS. The reason for this is a few things:

1. They are compiled on the database server – meaning, an SQL string will not need to be passed every single time from the web application to the database server. This can increase performance by reducing the network load.
2. Easy to debug – running a stored procedure from MySQL Query Browser (or whatever your flavor is) is far easier than stepping through a PHP debugger or dumping variable values, and this can in turn make the problem solving step far simpler.
3. Separates web code from DB code – this is extremely important to me, and being able to leave the in-line SQL strings behind can greatly clean up and simplify an application.

Foreign Keys

It actually surprised me to uncover that foreign keys are relatively new to MySQL, and on top of that, the application that I’m in the middle of rebuilding the database for was built without any relationships between the tables at all.  There is a good possibility I’ve been spoiled by a paid product, but I had assumed data integrity was far more important than leaving out such a vital component for so long.

With these features at my disposal I felt a little more comfortable diving into MySQL Workbench and creating a working database model.  It’s one thing to build a model and improve upon an old product, but without the ability to form relationships between the tables and manage its data directly with stored procedures, it can be nightmarish.

My next task is to ensure the data migration (via stored procedure, I’ll plainly brag) has fit into the new site’s requirements and have retained all the necessary and previously assumed relationships between the entities of data.

To say this is a boring or stressful task would be doing the process a great disservice, but after spending so long developing RIAs with Flex, going back to the basics with some raw SQL and modeling an ERD, it has been a welcome change and has completely envigorated me professionally.

Here’s hoping I continue with more of the same.

Flex Spotlight: Streamzy.com

// July 28th, 2008 // No Comments » // Flex, Web Development

I came across this site the other day and instantly recognized the interface. I also recognized the fact that it had a lot of thought put into the way it was designed. It’s a small, minimalist interface under which you can achieve a lot.

The idea of Streamzy is that you enter search criteria into the box, it returns streaming music in audio OR video form, and you can add and manage playlists (and save these if you choose to register and sign in).  And by “return” it’s not simply providing links, it will play the audio and video streams in their respective custom players.

Kudos to the makers of Streamzy, it’s a very easy to use and useful (albeit probably temporary, see: copyrights) tool to search music while hardly lifting a finger.

Footnote: I was impressed by what I thought might have been a custom Accordion control holding the content grids on the page, but it was in fact a WindowShade control courtesy of the flexlib library.

Workaround for Cached URL Images in Flex

// July 21st, 2008 // 3 Comments » // Flex, Web Development

Just this past week I had found myself wrestling with a Flex application that can crop images on the fly, and display in two different places and two different sizes, a thumbnail of the new image.

One of the biggest headaches in the process was Flash’s caching of the previous URLs when another one has been added in its place. Clearly this causes an inconsistency in ‘what you see is what you get’ (WYSIWYG). So I had to find a solution.

The Image component in Flex has a cachePolicy property (inherited from UIComponent) that will ensure the component’s bitmap values are not cached, but straight URLs are not affected by this.

However, I found a workaround after a good deal of searching the net, and poking and prodding through the nooks and crannies of Flex.

Initially I was going to generate a bitmap of every image brought into the application, but the overhead would have been outrageous, and the simplicity of the program is the service call to generate the new cropped image and return the URL. But it turns out that by adding a random-numbered query string to the end of the incoming URL, the extra value will force the retrieval of the new image.

It worked like a charm, and the only drawback is that all images, changed or unchanged, are re-retrieved with every refresh of the display (in my case, when a component is set to visible, it makes a service call to populate data).

In my case, the value for the URL is kept in in a value object and in the get accessor for its value, I did the following:

1
2
3
4

public function get urlValue():String
{
return _urlValue + "?" + Math.random();
}