Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - Flex

XML Whitespace is evil and should be punished

Wed, 24 Oct 2012 07:28:00 -0000

I've spent a bit of time recently working on a flash based reporting website. The project is all pretty standard architecture for a flash website, but there has been a persistent issue about loading times and poor user experience. After having a bit of digging around behind the scenes it appeared as though the flash SWF file was streaming a configuration XML file in the background. This isn't a great idea at the best of times but in this case the file was 147k lines long and weighed in at 22.5mb. So this accounted for a stack of loading time when the flash app loads up. After downloading the XML file and browsing through it in Eclipse my first impression is that there was a ton of whitespace in it. After running a quick 'find and replace' on any double space characters (to avoid removing spaces in legitimate text strings) and re-saving the file was down to 3.2mb. So let this be a warning to anyone loading up machine-to-machine text files. Squeeze them down, don't include whitespace, your Apps don't care about it, the file doesn't need to be human readable, all you are doing is using up network bandwidth. I won't even get into the risks involved in allowing your config files to be downloaded by people here, that's a whole different issue!

Opening a new window from a flex / AIR application

Fri, 12 Jun 2009 14:34:00 -0000

I was sure I had done this before, somewhere but I couldn't find the code anywhere. So I've knocked together a really quick and simple example. I want to be able to open a new site in a pop up from an AIR application. To do this I need to use the 'urlRequest' function to create a url request. Then insert that into a 'navigateToURL' method, specifying that you want a new window '_new'. Here is the complete example.

Works like this. View demo.

Flex Currency Formatter Example

Sun, 05 Apr 2009 23:08:00 -0000

Whilst developing a new Flex shopping cart I came across an issue in dealing with the formatting of currencies for the payment system. The previous version of the shopping cart had preformatted values stored in the actual database, so I was simply displaying them in the Flex front end. In this version there is the specific requirement that it is able to handle a multi currency configuration. So I thought I'd dig out the documentation on the Flex currency Formatter. Firstly create a CurrencyFormatter object, and specify the currency symbol, and any other formatting parameters that you require. Next create a NumberValidator, as this will validate our entered value as a numeric value, we don't need to try and re-format alpha numeric values. Then create a form to run the test validation against. I often find it easier to build a test mechanism at the same time. Below is a simple submission form, in the form we just enter the value, click the Button, which fires the Format() function.

The Format() function checks that the value is numeric, and applies the CurrencyFormatter object to the value. Then we simply assign the newly formatted value back to our Text field in the form.

AIR Phone Book application - Part 3 (Full code)

Fri, 03 Apr 2009 15:17:00 -0000

Below is the full code in one run for the PhoneBook AIR application.






	= 1)
		  {
		  	// Do nothing
		  }
		  else
		  {
		  	stage.nativeWindow.startMove();
		  }
	  }
	  
	  public function onMinimize():void
	  {
	  	stage.nativeWindow.minimize();
	  }
	  
	  public function onClose():void
	  {
	  	stage.nativeWindow.close();
	  }    

	  public function resultsHandler(event:ResultEvent):void
	  {
		// trace(event.result)
		displayPeople.dataProvider = popData.getData.lastResult
	  } 

	  public function faultHandler(event:FaultEvent):void
	  {
		Alert.show("Error: " + event.fault.faultString, "Application Error");
	  }

	  public function changeImage(img:String):void
	  {
	  	userImage.visible = true
	  	userImage.source = "http://www.url.co.uk/wld/phonebook/" + img
	  }   

   ]]>



	.header {color: #70c7f1;}
	.greyHeader {color: #777879;}
	.controls {color: #000000; font-size: 13pt;}

AIR Phone Book application - Part 2 (Functions and WebService)

Fri, 03 Apr 2009 15:13:00 -0000

As our application starts I want to fire the request for data, so we call an init() method on initialization. Also I have turned the flex chrome off here with 'showFlexChrome="false"'.

import mx.controls.Alert; import mx.collections.*; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; [Bindable] private var loadedData:ArrayCollection; public function init():void { // start the move listener moveListener() // get the remote data getData() } The moveListener() method adds a listener to the outerCanvas element which forms the application 'border'. When this event is fired it calls moveWindow. The getData() function calls the webservice, and specifies which method to call.


     public function moveListener():void
      {
		// mover event
		outerCanvas.addEventListener( MouseEvent.MOUSE_DOWN, moveWindow );  	
      }     
             
      public function getData():void
      {
      	popData.getData();
      }
	  public function moveWindow( event:MouseEvent ):void
	  {
		var str:String = event.target.valueOf();

		  // if its a datagrid then don't do the move
		  if ( str.search("displayPeople") >= 1)
		  {
		  	// Do nothing
		  }
		  else
		  {
		  	stage.nativeWindow.startMove();
		  }
	  }

The moveWindow function also contains a check to see if the datagrid was the event target, as this was interfering with the functionality of the Datagrid. It would be interesting to see if anyone else has a more elegant solution to this, rather than a specific element check. To populate our datagrid we need to use a data provider. In FLEX applications I usually use the RemoteObject function, but for AIR I've been using the WebService tag.

The final two 'chrome' functions we need are the minimize and close functions. I will detail handling custom chrome in another article.


  
	  public function onMinimize():void
	  {
	  	stage.nativeWindow.minimize();
	  }
	  
	  public function onClose():void
	  {
	  	stage.nativeWindow.close();
	  }

Our WebService is referencing two functions. A results handler and a fault handler.



	  public function resultsHandler(event:ResultEvent):void
	  {
		// trace(event.result)
		displayPeople.dataProvider = popData.getData.lastResult
	  } 

	  public function faultHandler(event:FaultEvent):void
	  {
		Alert.show("Error: " + event.fault.faultString, "Application Error");
	  }

The resultsHandler() simply assigns the datagrids dataprovider as the result of the WebService call. By adding DataGridColumn's to the datagrid with the right naming convention our results from the returned query object will map directly to our datagrid. The faultHandler() function simply Alerts a user to a fault event. Lastly I have a function that assigns the image source dynamically based on the click event in the datagrid.


	  public function changeImage(img:String):void
	  {
	  	userImage.visible = true
	  	userImage.source = "http://url/wld/phonebook/" + img
	  }

So that completes the Phone Book AIR application. There are one or two tweaks I'd like to make in the image handling, but otherwise its exactly the spec I had in mind. You can view the full code here.

Adobe AIR Web Service Hello World test application

Thu, 02 Apr 2009 10:55:00 -0000

I've recently been looking at putting together some AIR applications. I've used FLEX for a few years now, and have only just come up with some useful AIR ideas, so I thought I'd build an application or two. Usually I would use flash remoting, but I haven't spent too much time investigating how this works in AIR, so I've opted for the old school Web Service. In the middle of my newest AIR application I stumbled upon an issue. No matter what I did I was receiving a 'HTTP Error' response from my Web Service. After stumbling around in the dark for a while tweaking code to no avail, I decided to write the most basic Web Service I could think of. So here is 'Hello World', as a Web Service call from AIR. Firstly create a call to your Web Service. In this case it was a local file. Point the wsdl variable at the fully qualified path to your service. I am using a coldFusion back end, so it is a CFC. This is also where you specify the fault handler and result handlers. You can add as many 'operation' methods here as you want, that way you address specific functions in your service individually.

I've also added a button that will call a function to action the service call. Next we will add the functions.

A getter function, that will actually send the Service request, a fault handler that will simply Alert the user to a fault event, and a result handler that Alerts the user to whatever message is returned from the Web Service.

The CFC

The CFC service is a simply object to return a string. Just make sure that your 'Access' is set to remote.

So we end out with:

Adobe releases Tour-de-Flex as Eclipse plugin

Wed, 01 Apr 2009 11:00:00 -0000

I was directed to the Adobe Developer Connection site by a colleague the other day, and told to go look at 'Tour-de-Flex'. Its an AIR/Web application that hosts a whole range of example FLEX and AIR resources. Its also available as a handy eclipse plugin, if you are that way inclined :-) I've had a brief look around it, and it looks pretty good, very handy having code examples and themes right there on your desktop. Also gave me some interesting trains of thought of the next AIR application I have in mind....

Adobe brings AIR to Linux

Fri, 19 Dec 2008 15:30:00 -0000

Adobe delivers AIR to Linux platforms! Adobe finally brings the AIR SDK to a variety of linux platforms. Handy if your home development network is Ubuntu based. Full article here:

Returning useful error messages from CFC's in Flex

Mon, 01 Dec 2008 14:30:00 -0000

One thing I've learnt from my flex to CFC tomfoolery is that sometimes flex doesn't diplay very good error messages from CFC's. This is no fault of flex, but more usually a problem with the interface between it, and CF, as most of the unfriendly error messages you get are http error strings, which usually get truncated as they are raw code, so you don't get to see the problem then either. So you need more elegant error handling in your CFC's. (or whatever back end your using) Here is a complete script as an example, we will go through it line by line:





	
		

			

			
			
	
				
					
				
	
				
					SELECT id, name, age, sex, telephone, mobile, address, postcode, county, country
					FROM memberTable
					Where id = #arguments.id#

So its a normal component, with one function, it accepts an 'ID' and performs a query, and returns it. I am setting a local variable at the top, 'message' that will only be created and used inside the scope of the CFC. Then we will 'TRY' and do our transaction. At this point I'm wrapping everything in the cftry tag so as to encapsulate any possible code errors or logic faults. Any logic I have here will replace the value of 'message' if proven to be false, and return that message rather than the query object I was expecting. But you'll notice the lines:

This will catch any errors from the try block, and throw them to flex. In this way flex receives the message in the throw command, not a http response message when the CFC breaks. This is obviously a Coldfusion - CFC specific example, but I've seen very similar error trapping in php, working in exactly the same way, so it really doesn't matter what back end your using with flex.

Be careful using URL FlashVars!

Sun, 26 Oct 2008 18:40:00 -0000

A while ago I subscribed to an online magazine. Its a bit laddish, but it has the odd interesting article, and its done in flash/flex. The most recent article arrived in my in-box the other day, and one of the pages was an advert for the new film 'eagle eye' rather unfortunately they had passed in your subscription name value as a flashVar in the URL scope. This is probably one of the easiest ways to pass variables into flex, but also the most unsecure, and easily changed, as per the screen shot below. Luckily in this case it was just a display variable, but what about if this was a query param? or a value for a piece of data being sent back to a server? There are many other ways of passing variables into flex apps, I'd go for using a properties file. Have your flex look for a server side XML definitions file on "creationComplete". Or edit your Embed/Object code, whilst still not ideal its far better than a url variable! The magazine:
http://www.monkeymag.co.uk/

Flex - Coldfusion Remoting, passing an Object usefully

Tue, 01 Jul 2008 17:30:00 -0000

Ever noticed that with the increase in scale of a Flex application, the amount of data that you pass around seems to grow exponentially? Well I was fed up with passing multiple values back and forth from CF to flex, so after some digging here's the first article in using objects in remoting. [More]

ColdFusion - Flex remoting struct() case sensitivity

Tue, 01 Jul 2008 12:05:00 -0000

One of the more frequent data Objects that I pass from CF to Flex is the structure. I recently stumbled upon a case sensitivity issue in flex, that can be solved in CF with a slight change in code. [More]

Method for populating a flex combo box from cfc

Tue, 24 Jun 2008 10:09:00 -0000

Many of the flex form elements can be populated directly from the data output from a coldfusion cfc, as long as you get the format right! Here's the best way I've found to painlessly populate a combo box in flex. [More]

Strongly typing data between flex and coldfusion

Mon, 23 Jun 2008 14:15:00 -0000

As part of an ongoing series of working out the best ways of passing data around from coldfusion to flex (and back again) I'm looking at the different formats of passing data into flex. I've heard that you can "strongly type" the arguments and method names etc, and that allows for much easier passing of data back and forth. [More]

Flex Pop-ups, and disabling/enabling the parent application

Fri, 13 Jun 2008 14:12:00 -0000

I recently needed to create a pop up window in flex, and knew that I wanted to replicate much of the functionality of the 'Alert' method, IE graying out the background. [More]