Thanks, Mister! » XML

HTTP Status 201 causing Flex #2032 Error in IE only

Mister — Sat, 28 Mar 2009 16:40:13 +0000

I ran into a problem right when we were going to launch a new Flex web-based application to production (of course) with Internet Explorer and Flex. I was calling an RESTful service that returns XML and using the built-in Flex HTTPService with either POST/GET as the method for the request. Most of the service calls either return a HTTP Status Code of 200 (OK) or they throw an error. For one POST request that returned a HTTP Status of “201 Created” Flex threw up a 2032 Stream Error in response. Here is a brief definition of the error:

The referenced resource does not exist or the swf is trying to access a file across a restricted domain.

This error causes Flex to report a fault error on the request even though it was successful. The 201 status code is handled fine in all other browsers except IE (6 & 7). I did some research on the issue thinking it must be something easy to fix, that many others have run across before me. It seems the error is out there for lots of different reasons.

One post reported that IE was having a caching issues, and the way to solve it was to add a random number on the end of your service calls or you have to set the response headers in your server side page to prevent caching. This one sounds similar to a FireFox issue I ran into a couple years back, but didn’t effect the results:

http://www.judahfrangipane.com/blog/?p=87

The overwhelming number of posts on the subject suggested that Rails and Adobe both share the responsibility for this error (depending on if you are a Rails dev or a Flex dev, the debate rages as to who is to blame). The fix seems to be changing status returned from Rails to something other than 201. This seems to be the legit solution since the web service I was hitting is running Rails:

http://stackoverflow.com/questions/354936/flex-2032-stream-error-in-ie-only
http://nachbar.name/blog/2008/06/14/flex-railsprotect_from_forgery-problem-with-rails-21-produces-ioerror-2032/
http://onrails.org/articles/2008/02/20/dealing-with-http-errors-in-a-flex-with-rails-application
http://www.manning-sandbox.com/message.jspa?messageID=64372
http://nachbar.name/blog/tag/adobe-flex-programming/

If you think Adobe should fix the issue (as some Rails people protest) then you can view all the other bug reports Adobe already had lined up to fix that involve a 2032 Stream Error, just type in Explorer 2032 and you will find them:

http://bugs.adobe.com/jira/secure/QuickSearch.jspa

The workaround we ended up implemented was totally client based. In the fault handler of this particular service request, I look for the errorID value of the Fault event and ignore it. It was all I could do on short notice and I wasn’t about to convince the backend dudes that we needed to change the server response from 201 to 200, pick your battles and my first battle was to get this app into the war.

For me the real culprit is IE (easy target). Something that works in every other browser but IE is so friggen familiar to anyone who has done any cross-browser work. IE sucks, it has always sucked, and it will always suck, period. My other thought is about web services and codes in general. As an application developer, I use a lot of different services, consuming data from many different pipes. I couldn’t tell you as a consumer of web services and an application designer what the value of having a returned Status of 201 has over returning a Status of 200, can you? I make a request, and if the request is good, just tell me ok, I don’t need to know that the server returned a HTTP Status Code of 311 (the server code for “I just made you a sandwich”). I need to know only two basic things, was the request good, or did it explode?

I think some API dudes and backend dudes are purists, they want server codes to bubble up to the client so we can admire them, even though in practice (meaning you actually build applications with these services) you don’t really need the extra data. Hey, I am totally used to having to make 5 service calls to accomplish one thing with a web service, I would never ask for the service to be changed to convenience the client, but some information is superfluous and could be scaled down.

UPDATE

Saw another blog post about the same topic at UserFlex.

- Mister

Bluestring Flex application launches at Techcrunch40

Mister — Tue, 18 Sep 2007 23:03:01 +0000

I just arrived at Techcrunch40 as AOL prepares to launch a brand new Flex application our team has been working on for the past few months (though it seems like years). Our group is releasing an application called Bluestring that allow users upload, share, and make ”creations”. Bluestring also offers’s users the ability to pull assets from other online services into their creations without actually moving the files into their Bluestring account. We reference the files from aggregated sources and save that to the RSS that is feeding our embedded Flash player.

Yep, that is me

Bluestring represents the second enterprise level Flex application launched by our team in the last year. The reason I mention Enterprise is because there are a lot of really cool Flex applications out there, but Bluestring is built, and tested to withstand time and traffic of millions of users. You don’t need an AOL account to sign up for Bluestring, probably for the first time you can use whatever email account you already have to register. Though Bluestring is a beta, its still offers robust file management and sharing capabilities. This is because we built Bluestring is built entirely upon the Xdrive Open API which offers a lot of different ways to share. This also means that any media file you upload to your Xdrive account will show up in Bluestring, and vice versa.

The AOL Techcrunch40 Booth.

Your Bluestring files and creations can be shared privately, publicly, or even as a collaborate show with rostered list of users. Users can contribute to a “String It” creation from their own accounts and then pass that creation to a friend to add his/her own media. People editing the show can rearrange and even delete other peoples content, but it never wipes it from that persons account. Items within shows are referenced back to either the aggregated sources or to other Bluestring accounts.

Our team presenting Bluestring to the Techcrunch audience.

I am very proud of this product, it was certainly a lot of Flex coding by both myself and Larry (the other Flex dude working for AOL in Beverly Hills with me). Something nice about Bluestring is that the graphics used were almost entirely vector graphics in a single Flash 9 library. This gives Bluestring the appearance of not appearing like every other Flex application on the market (with the exception of Picnik, which I adore). The graphics were mostly imported as PNG files saved from Photoshop while others were imported from Illustrator (simple copy/paste). All the images were then converted to Flash vector graphics and given instance names within the library. The CSS file and a shared assets class file referenced the instance names within the SWF.

We also used about 15 different Flex modules using the new Flex tag introduced in Flex 2.01. Each module gets loaded as the user navigates through the major views. Modules really slimmed down the size of the application and decreased the initial load time. However, it was a bit challenging at first devising a method of using modules with Cairngorm, but I think we have a really proven method that I might talk about in future posts. Most of the text within Bluestring resides in a single external xml file that can eventually be localized into different languages. The XML file is loaded at runtime before any of the graphics libraries or modules are loaded, making sure the text is ready before we load any views that bind to the text in the model.

I will be working to post some more code samples and components that we use for Bluestring in upcoming posts as time permits. We also have some new items coming down the pipe for AIR. For those of you interested, please check our the presentation Larry and I will be giving at the upcoming FITC Hollywood called Concepts on AIR.

For those of you at the last 360Flex conference, you now know what the Bluestring lanyards around your necks means. Due to some legal reasons and duct tape, we were unable to talk about Bluestring when we were at 360Flex. Maybe next year when 360Flex comes to Los Angeles???? we can talk about other products we are working on .

-Mister

Using XML with DataGrid itemRenderers

Mister — Wed, 23 Aug 2006 14:55:24 +0000

For a recent project I needed a way to create a ComboBox in a DataGrid component that was populated by an XML file. I found an older example by Brendan Meutzner that used an ArrayCollection. This was a good starting point, so I modified and added to the file to create an example that uses a ComboBox, CheckBox, and NumericStepper within the DataGrid and populated by an external XML file. The real trick is getting the XML file to be updated when changes to the itemRenderer occurred. This is where Brendan’s example helped the most. Using the editorDataField and renderIsEditor properties of the DataGridColumn, the changes to the itemRenderer were able to update the dataField and the XML file itself. Another trick I found interesting was making the the value or selected values of the NumericStepper and CheckBox components Bindable within the itemRenderer code. You can review the complete file and source code below.

Sample and Source Code

Binding XML to ComboBox using XMLListCollection

Mister — Fri, 18 Aug 2006 20:34:23 +0000

This post has been in serious need of updating since its one of my more popular posts, but the post is really outdated. Here is a new way to bind your data to a ComboBox and DataGrid by loading your XML document and converting it to an XMLListCollection.

Update 9/15/2009

An easier way to convert XML to a bindable list is to convert it to an XMLListCollection. I used Adobe AIR for the application output because security changes in Flex 3/Flash 9 prevent you from easily reading local XML files within a browser-based Flex project. Below is the complete XML and MXML files:

XML

1
2
3
4
5
6

<competencylist>
<competency identifier="1">
<data>1data>
<label>Comeptency 1label>
competency>
competencylist>

MXML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" creationComplete="init()">
<mx:Script>
[CDATA[
import mx.collections.XMLListCollection;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable] private var competencyListData:XMLListCollection;
[Bindable] private var xmlURL:String;

/***********************
Some code comes from the following examples:

Marco Casario
http://casario.blogs.com/mmworld/2006/07/arraycollection.html

Brendan Meutzner
http://www.visualconcepts.ca/blog/index.cfm/2006/6/22/Loading-modifying-writing-XML-locally-with-Flex-20
*****************/

private function init():void
{
var url:String = "data/test.xml";
var d:Date = new Date();
xmlURL = url + "?" + d.getTime().toString(); // great idea Brendan!

xmlDataList.send();
}

private function resultHandler(event:ResultEvent):void
{
// seems to only work with casting, not ArrayCollection(result)
//competencyListData = new ArrayCollection(xmlDataList.lastResult.competencylist.competency );

var xmlList:XMLList = xmlDataList.lastResult.competencylist.competency;
competencyListData = new XMLListCollection( xmlDataList.lastResult.children())
trace(competencyListData.length);
}

private function faultHandler(event:FaultEvent):void
{
trace("Fault : " + event.message);
}

private function setOutputData(event:Event):void
{
outPut.text = event.target.selectedItem.data;
}
]]>
mx:Script>
<mx:HTTPService id="xmlDataList" url="{xmlURL}" fault="faultHandler(event)" result="resultHandler(event)" method="GET" resultFormat="e4x"/>

<mx:ComboBox id="NameSelect" dataProvider="{competencyListData}" labelField="label" change="setOutputData(event);"/>
<mx:DataGrid dataProvider="{competencyListData}" change="setOutputData(event);" height="102">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="data"/>
<mx:DataGridColumn headerText="Label" dataField="label"/>
mx:columns>
mx:DataGrid>
<mx:HBox width="202">
<mx:Label text="Data Selected:"/>
<mx:TextInput width="100" id="outPut"/>
mx:HBox>
mx:WindowedApplication>

To use this example, just create a new AIR project in your Flex Builder 3 and create a new xml document named data.xml within the src/data/ folder structure. Copy the MXML code to your Main.mxml file for the application and run. If you want to do this example in a web-based Flex project then you will have to overcome the issues with loading a local XML file into Flex within the browser. See the post comments for that discussion.

- Mister

OLD POST (outdated)

I have been banging my head the past couple days trying to get an XML file I created to bind to and show up in a ComboBox. I found a couple of examples on different blogs, but they didn’t seem to work or were not updated to work with the Flex 2 (instead of beta 3). My XML file consisted of the following structure:

1
2
3
4
5
6

<competencylist>
<competency identifier="1">
<data>1data>
<label>Comeptency 1label>
competency>
competencylist>

I thought I could just use HTTPS, load my XML, and bind the structure to an ArrayCollection. I tried the following:

1	myAC = new ArrayCollection(myXML.lastResult.competencylist.competency)

But the nothing would show up in the ComboBox. I ended up casting the returned XML as an ArrayCollection, this proved more positive:

1	myAC = myXML.lastResult.competencylist.competency as ArrayCollection;

I did find some discussion about the issue on Flash Coders. I also referenced some blog examples by Marco Casario and Brendan Meutzner.

Sample and Source code

Bringing special characters into Flex with XML

Mister — Thu, 10 Aug 2006 01:21:21 +0000

In a recent project, I wanted to load the Unicode values for special characters from an external XML file to add a special characters panel to the RichTextEditor. I wanted these values to show up in a label or text box using something like label.htmlText =”\u00A9″, which would produce the copyright symbol. However, when I loaded the values from a external XML file, the resulting label showed the literal value”\u00A9″ instead of the copyright symbol.

I created a test application and found that locally created XML vars work and local strings work, but not loaded values from the external XML file. In my test application I was using this XML code:

1
2
3
4

<character>
<data>\\u00A9data>
<label>Inverted Exclamation Marklabel>
character>

However, Gordon Smith from the Flex Coders forum pointed out that “\u00A9″ is ActionScript syntax and that Flex E4X apparently has a bug which will not treat the \u as an escape sequence in an XML literal (this is Gordon’s lingo, not mine, hehe). Gordon suggested that I use the XML entity syntax:

1
2
3
4

I updated my XML with the new syntax and everything worked great. I doubt I could have tracked this issue down myself, it was literally driving me nuts. I am not sure if I have discovered a bug in E4X, but I certainly hope others don’t run into this same issue. Many thanks to Gordon Smith on Flex Coders for all his help. You can view my test application and source code here and the Flex Coder discussion at this link.

Binding Complex XML to a DataGrid in Flex (Redux)

Mister — Mon, 31 Jul 2006 17:10:19 +0000

Most binding examples work with a flat XML structure. However, in most cases the format of the data will not work directly with Flex components. I was looking for a way to bind complex XML to a DataGrid in Flex 2. I ran across a post by Brandon Purcell dealing with the same subject but his post was a little out of date and no longer worked in Flex 2. There was also some talk on Flash Coders about complex XML and using the labelFunction to bind it to the DataGrid, but I could not find a complete example. So I created a working example using the similar data.

I ran into some difficulty at first when I placed the labelFunction inside the DataGridColumn. If you don’t pass column:DataGridColumn to the myLabelFunc, the DataGrid will not show up. You can view the example here, right-click to view the source code. For a detailed discussion, please visit Brandon’s original post.

Flex: Phoenix Traffic Cams

Mister — Thu, 27 Jul 2006 22:20:45 +0000

Phoenix Traffic Cams is a Flex application using traffic cam data from the Arizona Department of Transportation. This was one of my very first Flex projects and the application is still rocking after 4 years of service, it also happens to be the very first post for this blog. I am surprised that ADOT hasn’t asked to have the code or remove it entirely, it’s certainly better than there current interface.

Currently, only 5 of the 7 major freeways are implemented at this time. If you have ever visited the ADOT traffic cam site, you would know that the Flex application is a great improvement upon the looks and functionality of that site. We are basically doing a screen scrape to get the needed information, along with some XML to create the menu and list of cameras.

This application was created by Larry Drolet and myself during our Flex training session at Almer/Blank Warehouse Training Facility in Los Angeles. Ah, good times .