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

Flex webservices security error accessing url

Fri, 23 Jul 2010 15:24:00 -0000

I've been working with some client side flash developers recently and we came across an unusual error that was being thrown in a Flex application when we were sending a webservice request to a Coldfusion server. The error was "Security error accessing URL". I thought I'd overcome this a long time ago by using the cross-domain.xml file to allow server access to services. It appears that there is a security issue with Flash 9 that requires the following line to be added to the CrossDomain.xml file:

I'm guessing that it is enabling access for SOAP requests to any remote services on that server.

ColdFusion structures and case sensitivity examples

Tue, 13 Oct 2009 12:24:00 -0000

Having been using Flex a little more recently I stumbled upon an old issue that I had previously addressed, but it had become second nature, and so I had forgotten about having to learn a workaround in the past. Passing objects from ColdFusion to Flex can be tricky at times, especially as ColdFusion is generally not case sensitive, but Flex is, and this can lead to problems. I had previously found that how you build your Structure will have an impact the case of the keys. Example one is a Structure built using the traditional dot notation, in a CF 7 and below method:



	newStruct = structNew();
	newStruct.starter = "Prawn Salad";
	newStruct.maincourse = "Roast Chicken";
	newStruct.desert = "Apple Pie";

This is the older way of building a Structure, notice how all the keys are uppercase. The second example is very similar, except that it is using associative array notation, IE brackets to denote the key values, rather than dot notation.



	newStruct = structNew();
	newStruct["starter"] = "Prawn Salad";
	newStruct["maincourse"] = "Roast Chicken";
	newStruct["desert"] = "Apple Pie";

Since I originally looked at this ColdFusion 8 (and now 9!) have been released. ColdFusion 8 introduced a new way of creating structures, what casing does this use?

It also creates an uppercase structure. I haven't really played around with this method enough to see if there is another way of creating a lowercase structure, so for now I'll be sticking to the older associative array method of creating my structures. That way they are easily transferred as a Flex object.

Example of inserting a Struct() into a database using keys

Wed, 26 Aug 2009 16:42:00 -0000

A while ago a colleague and I were working on a timesheet application in Flex. The idea was that you could commit a custom timebar object, generated in flex, and it would update the dataset in the back end using the ColdFusion flex gateway. I came across the code recently, and decided to tidy it up a bit, and make the query dynamic, based on the Struct contents. The obvious limitation to this is that your Struct and your database schema have to match exactly. I won't go into the Flex application here, but I've emulated its input arguments here with a pre-populated structure.



      timesheetTask = StructNew();
      StructInsert(timesheetTask, "employeeid", '36');
      StructInsert(timesheetTask, "timesheetDT", '0');
      StructInsert(timesheetTask, "projectid", '6');
      StructInsert(timesheetTask, "weekid", '25');
      StructInsert(timesheetTask, "taskid", '39');
      StructInsert(timesheetTask, "hours", '8');
      StructInsert(timesheetTask, "comment", 'Comments for this task live here');
      StructInsert(timesheetTask, "szStatus", '1');
      StructInsert(timesheetTask, "iFirstLineApproval", '23');
      StructInsert(timesheetTask, "iSecondLineApproval", '34');
      StructInsert(timesheetTask, "iCurrentApprover", '');
      StructInsert(timesheetTask, "szRejectReason", '');
      StructInsert(timesheetTask, "szDescription", '');
 
      updateTimesheet = createObject("component", "timesheet");
      updateTimesheet.updateTask(timesheetTask);

Notice that this code also calls the CFC object at the end. The data itself isn't massively important, it's a time object for recording tasks. Next we have the function, which accepts a Struct() argument called 'taskStruct'. I then loop through the structure, and populate a SQL query using the keys from a collection. The only logic is a check to see if it is the last structure element, as this controls the ',' placement.


      
            
      

            
      
 
      
            INSERT INTO [dbo].[timesheet]
           (
                        [#key#]
                        
                        ,
                  )
    
       
      
      VALUES(
                  '#arguments.taskStruct[key]#'
               
               ,
               )

That will insert your Struct into a database, in small and tidy manner. It was somewhere around here that we started using cfproperty tags, and creating strongly typed objects for Flex.

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.

AIR Phone Book application - Part 1 (CFC and GUI)

Fri, 03 Apr 2009 14:46:00 -0000

I'm always asking what peoples phone numbers are in the office, we currently don't have any internal communications (like an intranet) so I thought I'd create a handy phone book application in AIR. With FLEX of AIR applications I often wireframe them up with the data model in mind first. If you know what data you are going to display, and the format and delivery mechanism of that data, it can often have a large impact on the design and layout of your application. In this instance I was just returning a simple query object of users and their phone numbers and a thumbnail image.

The CFC

My preferred server language is ColdFusion, so my service is a CFC object.




	
	
		
			select 	id AS ID, 
					name AS Name,
					number AS No,
					image As Image
			from phonebook 
			Order by name

In my example I'm using an MS SQL database, so I have included the creation script here:


SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[phonebook](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[name] [varchar](20) NULL DEFAULT (NULL),
	[number] [int] NULL DEFAULT (NULL),
	[image] [varchar](55) NULL DEFAULT (NULL)
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF

Now that we know what the data will look like we can build the GUI front end. My display layer is going to be a canvas, with another canvas inside it, to create a bordered effect. Then I have a DataGrid, with a click event that will call an AS function. This will control the displaying of an image that corresponds to the user being clicked. Its always nice to see who you want to call!

My 'userImage'has a showEffect attribute, that uses an image fadeIn method. It fades in the first image called, but not any others, I've had a play around with this, and I can't get it to fade in subsequent images, so if anyone has any ideas let me know! Lastly I have added some chrome controls, as I will be removing the standard chrome, and building my own. Now, on to the functions.

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:

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/

Init method for coldfusion cfc's

Mon, 07 Jul 2008 16:21:00 -0000

I'm lucky enough to be working in an environment that is small enough to allow me access to our whole suite of coldfusion cfc's. So i generally know pretty much what they all do, but what if your interrogating unknown cfc's? Well you can use the init() method. [More]

Matching date ranges to flex arrays in SQL queries

Thu, 03 Jul 2008 17:05:00 -0000

Whilst writing a search function for a flex applicaiton I needed to be able to filter results back to flex from a remote cfc by a variety of criteria. Two of these were the month, and the year. So here's a handy way of doing it. [More]

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]