dougrdotnet

This is a nice little gem I wanted to share. I needed to display the current version of my application in the startup screen, when the user launches the app. I’ve already been updating this as I push releases to my update server where my updater xml file is located. At first I was going to just do a request for that xml document but then thought I’ve already got the version locally in the app.xml file, why not get it from there and not have to have the request.

I’m using Cairngorm so I wrote a command class to do this for me.

package com.dougrdotnet.commands
{
	import com.adobe.cairngorm.commands.ICommand;
	import com.adobe.cairngorm.control.CairngormEvent;
	import com.dougrdotnet.model.StatusModelLocator;

	import flash.desktop.NativeApplication;

	public class GetAppXMLVersionCommand implements ICommand
	{
		private var statusModel:StatusModelLocator = StatusModelLocator.getInstance();
		public function execute(event:CairngormEvent):void
		{
		   var descriptor:XML = NativeApplication.nativeApplication.applicationDescriptor;
		   var ns:Namespace = descriptor.namespace();
		   var version:String = descriptor.ns::version;
		   statusModel.version = version;
		}

	}
}

What i’ve done is use the NativeApplication class’ applicationDescriptor property to get the XML from app.xml. I set a variable to hold the namespace value from the descriptor xml. Then I go in and get the version node using descriptor.ns::version. Then, in this case, I am assigning the version string to a Model variable so that I can use it wherever that model singleton exists. Certainly, this method could simply return version to supply the value to the caller.

A reader asked me a question about taking a date stored as a string and manipulating it so as to remove sub-strings. This is really simple in ActionScript, using the replace method. The replace() method is used to find a match in a particular string and then replace it with some other string inside the parameters of the method, such as string.replace(pattern, repl);

From Livedocs ( http://livedocs.adobe.com/flex/201/langref/String.html#replace() )

replace(pattern:*, repl:Object):String
Matches the specifed pattern against the string and returns a new string in which the first match of pattern is replaced with the content specified by repl.

The reader needed to take a date formatted as such – 15:07:47.001.850.000 and end up with a string formtted like the following – 50747001850.
As I said this is really simple using replace and just a little bit of RegEx:

private function init():void {

    var dateStr:String = "15:07:47.001.850.000";

    var d:String = stringReplace(dateStr);

    trace(d); // Output is 150747001850

}

    private function stringReplace(value:String):String {
    var v:String = value;
    v = v.replace(/:/g, "");
    v = v.replace(/\./g, "");
    var re:RegExp = new RegExp("000$");
    v = v.replace(re, "");

    return v;
}

In the init method, I’ve set the variable dateStr to the value of the string that needs to be manipulated. Next, I’ve set the variable d to the value of the result of the stringReplace() method which follows, passing in the original string. In the stringReplace() method, which accepts the string parameter named value, I assign value to the variable v. Next, using the replace() method, I search the string for any ‘:’ characters. The reason it will search the entire string is that I’ve used the global (g) flag in the expression. Then note that the second parameter of the replace method I’ve specified an empty string. This will replace any ‘:’ with “” (nothing). I’ve done the same in the second replace() method, only removing periods from the string and replacing with an empty string. The next line I create a new RegExp object so that I can use the following RegExp(“000$”) in order to remove the trailing 000. The $ in the expression applies the pattern match to the end of the string, so as to not remove any instances of 000 that might exist anywhere other than the end of string. This way if the original string is provided from a dynamic source there is no worry of removing zeros anywhere other than the end of string. I then run the replace() method a last time and apply the RegExp as the pattern and replace it with an empty string. When I return the modified string the result is the formatted string as needed for other parts of the application, shown in trace output.

Today a question came up regarding the difference between constant fields and static fields and I thought it noteworthy to mention here as it is easy to casually use static when one’s intention is really to define a constant.  Prior to AS 3.0, const was not available.

In short, a field declared as static const is indeed read-only, however, if declared as static it may be writable from inside or outside of its containing class, depending upon its access modifier (see Basic Modifiers below), and there is not a requirement for an instance of that class to be created in order for it to be referenced. Fields declared as constants may not be modified, they are constant.

It is interesting to note that a static field declared in a class may have the same name as an instance variable – the rule is that while both vars of the same name may be used in the instance, the static variable must be preceded by the classname (i.e. MyClass.variableName), whereas the instance variable would simply be declared by name.

Basic Modifiers:
Internal: the default if no modifier is specified – allows internal and package level access
Private: provides the greatest degree of access restriction – allows only internal access
Public: provides the least degree of access restriction – its an all-access pass
Protected: provides package level access restriction – allows internal and subclass access

The creation of an event which occurs in the View

In Part II I outlined how I wish to walk through the process of creating functional prototypes by incorporating the Business Delegate found within the Cairngorm Architecture. I am beginning from the View down since we are approaching development from a prototypical point of view. The object is to get a functional prototype developed as quickly as possible without the need for development of the data tier. As I’ve mentioned in Part II, we will be developing our data requirements and will know exactly what our back-end requirements will be when finished, but that is actually a bi-product of what we are doing. Additionally, we won’t be locked into any particular technology for the back end, we will have the added benefit of determining our data tier needs while developing our prototype.

In this section we will be concentrating on the view with a simple example using the Cairngorm Event model. Lets suppose that we have a view which contains a simple member intake form in a Panel container for which we wish to store data upon submit.

<mx:Script>
     <!--[CDATA[
          import mx.controls.Alert;
          import com.adobe.cairngorm.control.CairngormEvent;

          //Save the member's data
          private function saveMember():void{
               //check to see if form fields have data
               if(fname.text != "" || lname.text != ""){
                    //create a new Cairngorm Event
                    var event:CairngormEvent = new CairngormEvent("saveMember");
                    //create a generic object to hold form data to be passed on event
                    event.data = new Object();
                    event.data.fname = fname.text;
                    event.data.lname = lname.text;
                    event.dispatch();
                    //If the form was not filled in correctly, alert the user
               }else{
                    Alert.show("Please enter member first name and last name in form","Empty Form Fields";
               }
          }
     ]]-->
</mx:Script>

Its pretty straight forward, create a new event of type CairngormEvent and pass a string of “saveMember” as the event identifier. Additionally, I’ve created a generic object to hold the data from a form which contains a member’s first name and last name. I will be passing this data on to be stored in memory during testing and later will actually be passed onto a remote object to do something with it. Finally dispatching the event. I’ve got the event contained within a condition here to check to make sure that the form fields have been completed by the user, if not an alert pops up letting the user know. saveMember(), in this case, would perhaps be called on the click event of a button.
In the next installment I will discuss the Cairngorm Control class and how it ties together the event with the appropriate command to associate with the event.

<< Previous Next >>

On a current project I had the need to incorporate a button into a Panel title bar which would allow users to launch a new intake form. I also needed to use this panel in four different places. First option was to create a Panel component and absolutely position a button by placing the Panel container within a Canvas container. I really don’t like absolute positioning and before this was considered I had already begun researching extending Panel over on Doug McCune’s Blog. However, related to the problem which I was trying to solve, his really cool example was just a point in the right direction for me. Ultimately, Simeon, reminded me that I had a perfect example available in my Adobe Flex 2 Training from the Source book. So here is how to extend the Panel class and add custom properties to suit your needs, in this case the addition of a button placed in title bar.

package com.douglasReynolds.views.components
{
	import flash.events.Event;
	import mx.containers.Panel;
	import mx.controls.Alert;
	import mx.controls.Button;

	public class NewFormPanel extends Panel
	{
		//declare button var
		private var newFormButton:Button;

		private function doCreateForm(event:Event):void{
			//create an event - just an Alert for testing here
			Alert.show("Button Clicked");
		}
		//override the createChildren method with the properties I need
		protected override function createChildren():void{
			super.createChildren();
			//instantiate new button and assign properties
			newFormButton = new Button();
			newFormButton.label = "New";
			//add event listener for click event and call method
			newFormButton.addEventListener("click", doCreateForm);
			newFormButton.visible = true;
			//add the button to rawChildren
			rawChildren.addChild(newFormButton);
		}
		//update the display and get panel size - dynamic since the form can be resized
		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			//gap between label and edges of button
			var margin:int = 4;
			//set the button size + margin
			newFormButton.setActualSize(50 + margin, 16 + margin);
			//define vars which determine distance from right and top of Panel
			var pixelsRight:int = 10;
			var pixelsTop:int = 4;
			//define var to width of button
			var buttonWidth:int = newFormButton.width;
			//set x and y properties to be used for positioning of button
			var x:Number = unscaledWidth - buttonWidth - pixelsRight;
			var y:Number = pixelsTop;
			//position the button in the panel
			newFormButton.move(x, y);
		}
		//constructor
		public function NewFormPanel()
		{
			super();
		}

	}
}

Then, all we have to do is use our NewFormPanel in MXML instead of Panel:

<components:NewFormPanel xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:components="com.douglasReynolds.views.components.*">
     //note the addition of components namespace to NewFormPanel properties
     //all of your normal stuff that you want to put in a panel
</components:NewFormPanel> 

In Part I I discussed how we, as developers, are tasked with communication of project requirements. Not only do we need to gather information from our client but we also must ensure that the client has adequately communicated what they think they need. Often times what the client believes what they need is not actually what they really need, or even more often than not, the client doesn’t know how to define their needs at all. I also discussed that through the use of agile techniques, such as user stories, additional work on our part is needed in order to simply train the client in how to create their stories or use cases. For this reason I believe that the best approach is to remain very flexible while minimizing developer time. In order to do this it is necessary to break a project down into sub-components and iteratively develop prototypes which both address visual as well as functional requirements. Flex is an excellent rapid prototyping platform. We can use FlexBuilder to create layouts in very little time. These layout prototypes can be presented to the client in the native environment in which the final application will reside and can be easily modified, saving time on change iterations. Once the layout prototype is developed we don’t necessarily want to have to think about things like how we are going to handle data, after all we are still in design. This, however, doesn’t mean that we can’t develop how we are going to connect to data. We can create an extremely flexible data-ready architecture with Flex and ActionScript using the Cairngorm framework. As mentioned in Part I, the Cairngorm framework provides a layer between the Command (the model calls commands from here) tier and the Service Locater (this is where we call our Remote Services and hook to our data tier). This layer is the Business Delegate and that is what I want to talk about. By leveraging the capabilities of the Business Delegate we can create test data for our applicaton and completely encapsulate the need for changes outside of the delegate once we have completed prototyping and decided on our actual back-end requirements. Actually, when complete, we will know exactly what data requirements and schema will be needed before we begin database design. In effect we will be designing our database as we develop the Business Delegate. This means that we can create a completely functional application, with data, that can be easily modified from prototype to deliverable.
I really recommend a concentrated read on Cairngorm, you may find articles, diagrams,and the docs at the Cairngormdocs site.
I am going to be discussing the Cairngorm event paradigm and Model View Controller (MVC) Framework in the following order:

• The creation of an event which occurs in the View
• The passing of data on the event to the Front Controller
• Calling a Command from the Front Controller
• Writing the Command Class for the event
• Updating the Model from the Command
• Enlisting the Business Delegate from the Command
• Updating the View from the Model

I’ve decided to hold off on the code examples until Part III as I want to break up the large amount of information into smaller, bite-size chucks. In Part III I will begin detailing the list above. I expect that this will end up being around a 10-part series.
<< Previous Next >>

Dearest Flex,
Today I am reflecting upon our time together, given that we are fast approaching our one year anniversary. I remember before we actually met how I would look at you in wonder from across the forum, thinking to myself, “I am going to meet you”. Finally, I worked up the nerve to introduce myself, I waited until the other developers with whom you were speaking indicated that they were away for a moment so that I could approach, after all I was very unsure and quite hesitant to seek a new relationship. I had become so comfortable in my relationship at the time, out of respect I shall only mention her by the initials CF. I really thought that I had a comprehensive view of the world while I was with CF, yet now, after our time together, I realize that I was falling into a procedural pot-hole which was limiting my ability to model the world as it should be – as classes who’s instantiations allow me to make real models from real types. From within this realization I have found that I am now better able to accurately define public var doug:Developer = new Developer();. Flex, it is you who have provided me with this insight.
Remember when we first started hanging together, we’d sit on the couch and experiment, I would take you with me to the coffee shop, the park, and even to work so we could be together as much as possible. None of that has changed, as a matter of fact I feel that our being together has been instrumental in our growth together. Now, look at us, not only do you come to work with me, but we get to work together on projects every day! It is amazing to me that as I have been able to get to know you better how much more time we actually get to spend with each other. Ha_ha, remember that time when you hiked up your skirt so slightly and showed me your ActionScript? I recall my knees getting week and an overwhelming sense of things to come! It was a daunting feeling to me to see you that way and to know that the things which you are capable of were so far from my understanding, yet you’ve taken the time to guide me slowly into learning how to manipulate your mxml and use methods to provide you with better means to fulfill my needs. Of course, this led to a much broader view of the world where I could understand how you love it when I break out the development tools and implement EasyMVC or, for those longer nights of enterprise development, Cairngorm! I know how you love it when I implement Cairngorm. I love that about you, you have the flexibility and breadth of ability to take me from the simple to the complex while helping me to maintain state.
Then came the time when I realized that you held a hidden gem which truly changed the way in which I approached handling our information, you introduced me to remoting and immediately you made me realize that its not just you that I need but that you and I and CF could all be together as one! I had spent so long looking at your front-end virtues that I had neglected to pay attention to what is going on with your back-end capabilities. At that moment I realized just how lucky I am to be able to have the both of you in my life and no longer shall I just refer to CF by initial but by her full name ColdFusion! I couldn’t imagine how things could get any better – but then they did. Up until this time you, ColdFusion and I had always spent our time developing Web-based applications. But now things have changed, now we have a new sense, somewhat like having two homes that we all love to spend time in. Now we have AIR, now we have AIR…. Now we can all deploy locally together. I see this as a new, richer way, for us to be together and continue to learn of one-another and the world. It is at these times in which I feel that I have so much that there is so much to lose. Flex – ColdFusion – I want us to be together always – on the Web – on the Desktop – and in my heart.
I love you Flex and you too ColdFusion (even though, ColdFusion, you piss me off sometimes but thats another story).