everynerd.net

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.

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.

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.

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();
}

Developing an application to administer content on a site or internal web application is relatively basic. You have a set of functional requirements sitting in front of you and the tasks to complete them are often  straightforward. In a web-based PHP or ASP.NET application, the possibilities in arrangement of controls and convenience for the user are fairly constrained.  They need to fit in a standards compliant way and in a good application, there needs to be as few page loads as possible. In a Rich Internet Application (RIA) using Flex, we can utilize Flash to build an interface in practically any way we want and allow as little or as much to be shown to the user at one time. Understanding the resources to accomplish this may be difficult, however.

A few things need to be considered when developing the user interface for the RIA.

First, finish developing the functional requirements for your application. Don’t start rearranging and skinning components that might lose their usefulness or be removed entirely by the end.

Second, you need to know your audience. The users of your program are the ones that are going to be using it the most and you will need to cater to whether they are skilled computer users, novice, or a mix of all types. This will help determine the complexity of your screens and the “lingo” you might use.

Third, research the “common method” for developing a user interface with the tools that you’re using. In the case of Flex, there are a series of subclasses on the Container class which are used to order and arrange child components in a meaningful manner on the screen. Classes like Accordian and TabNavigator can be crucial in organizing many different components into one area.

And lastly, and most importantly, take the time to actually use the application. I don’t know how many times my perception of a design (or lack thereof) has changed after actually sitting down and going through the motions on the application as if it were my daily routine.

It also really helps to sit down with an end user or a stranger to the design and go through a mini-training session. Within the first 20 minutes of this process you will immediately know what is going to be used the most, and what will be used the least. This can greatly help the manage the appearance of these controls by prioritizing access to them.

In a previous post I gave an introduction into the complete 180 I’ve done in the web development industry and where I’ve found myself now, and it’s a pretty good place. There have been some mighty challenges, but I feel I’m breaking fairly new ground in the department of Cairngorm asynchronous unit testing. At least, that’s what the results in a Google search would have me believe.

So to continue, I’ll elaborate in more detail about how I accomplished my tests:

1. In my case, the commands were not separated into service delegates and a delegate is imperative for Cairngorm unit testing
2. Follow these steps for modifying the FlexUnit source code to assist in giving your delegates a valid IResponder to work with
3. Build a service component (in our case, /business/Services.mxml) that includes RemoteObjects for your amfphp services
4. Build a test suite as per the FlexUnit documentation or a great blog entry here from Darron Schall - extremely helpful.
5. Create a test model class and use it to store values as a private variable in the test class will be cleared after the tearDown() function is hit (regardless if  you’ve specified any variable cleanup)
6. Build a function in your test suite to call a service from the delegate.

A few things should be kept in mind at this point, you will want to use the IResponder interface in place of Responder in the Cairngorm documentation. This will assist the unit testing process and in turn simplify your test assertions in the test suite. Therefore, in your test suite (which implements IResponder) you will have a result() function where you can run assertions on the service call you just made.

For instance:

1
2
3

private function result(event:Object):void {
assertTrue("Expected a true result.", testModel.var == true);
}

In the event the variable returns a false, the test runner will display a failure message. Otherwise, it is a passed test.

One suggestion for verifying true data rather than just existing data in the model, is to create an object and force it to have the values the service call should return depending on the parameters sent in, which is something I am likely to implement in the near future.

It sounds like a bit of a hack to hardcode a set of values that you know will exist somewhere, but considering the tools available it appears to be the best course of action. I’ve tried a variation on the FlexUnit package called dpUint but found that it wasn’t much clearer on proper implementation for my exact needs.

If there are any Flex developers that have some experience doing exactly this, feel free to let me in on the big secret. Beer’s on me if you can make my job easier.

Introduction

In February 2007, just a few months after earning my BSc., I was hired by a local custom software development company to assist in the development of several large-scale applications for the international airport, as well as enhancing an internal item-tracking system with ASP.NET.  Using ColdFusion, MS SQL, and the Model-View-Controller architecture it was my duty to help build applications that either managed money or managed incidents.  It was a massive learning experience that I had thought weathered me to the storm of professional software development. However, when the company closed its doors over a year later due, I became quickly aware of how very little I had scratched the surface.

After several intense and interesting interviews at several different organizations, I pursued one position which preferred me to specialize in PHP.

Having only seen PHP and never utilized it, I was apprehensive about pursuing the choice. However, after two interviews and a telephone conference later, it was clear to me they found more interest in me than just my passing knowledge of PHP, but rather in my experience in Object-Oriented Programming (OOP).

A Whole New Can of Worms

Day one on the job opened up a Pandora’s box of research, troubleshooting, and headaches.  I was assigned as an Adobe Flex developer. My requirement was to design, maintain, and enhance an administration tool for a high-profile website in tandem with another developer who was much more experience in the architecture and ActionScript than I was.  The most I’d seen of Flash development was at least five years ago and I made a ball roll across the screen. Needless to say, programmatic development in this language was alien to me.

The most challenging part about this new position was a few things:

1. The job centered around a single site and proposed future sites
2. I had never developed any sort of graphical Flash application or otherwise
3. The usefulness of knowledgeable people was sadly stunted by over-inflated egos

Challenges aside, I toughed out the first month and suddenly found myself really getting the idea behind graphical development. Funny enough, learning the language was the easiest part of the transition, it was everything else that was difficult.

Developing a flash-based image cropping tool was probably the biggest mouthful I’d had to digest in my professional career. At my previous job, there was hardly a task I would’ve had to scratch my head over by the time of my departure, and now in the first week of this one I’ve got the biggest head-scratcher a head’s ever seen.

Once the tool was developed it was integrated into the Cairngorm architecture of our Flash application (a relatively simple MVC system which simplifies scalability), and I was onto my next task.

Unit Testing as a Pioneer

Show of hands on who’s developed unit tests for an application? (probably a good number)

Show of hands on who’s developed unit tests in Cairngorm? (probably a much smaller number, but thank God for FlexUnit)

Show of hands on who’s developed unit tests in Cairngorm to test asynchronous service calls via amfphp? (Oh god, am I the only one?)

Needless to say my next task was nearly as trying as the first, but I was determined to make it happen.

For anyone new to Cairngorm and especially to the idea of testing asynchronous calls to a service, it’s important to remember that not everything anyone else says is right for your application. I’ve tried numerous methods in order to get a proper test done and only after about 3 weeks was a half-solution decided upon.

First and foremost, read through every word of Steven Webster’s starter guide to Flex and Cairngorm and familiarize yourself with the setup, and be absolutely certain you’ve followed his guidelines for developing your application. The next step is to grab FlexUnit, a wonderful testing suite written by the good folks at Adobe to help test-driven developers like myself build a better system.

Once FlexUnit’s installed, look at your code and commence the head-scratching.

Look to part 2 of this entry for some actual code and suggestions to assist your testing needs.