So color in KML is in aaBBGGRR!

not in aaRRGGBB as you normally expect:

<color>ffFFFF00</color> is cyan

<color>ffff00ff</color> is pink

“Error #1088: The markup in the document following the root element must be well-formed.”

I was using PHP and curl as proxy to get some xml files from Basecamp for my Flex UI to consume and was successful (something like “return $response   = curl_exec($session);“. But after I refactored my little php functions into an object/class and included it in another delegation file, it suddenly stopped working. In Flex, I got the following error for the HTTPService fault event:

faultCode:Client.CouldNotDecode
faultString:’Error #1088: The markup in the document following the root element must be well-formed.’
faultDetail:’null’

In Firefox 3.5, the output XML file looked ok. But both Safari and IE gave error messages: There was an “*” in front of the <?xml ..?> header in Safari source code view; while IE gave the following error:

Invalid at the top level of the document. Error processing resource

After comparing the files before refactoring and the one after, I noticed that the refactored one was encoded in UTF-8 while the old one was in ANSI. After I converted my class file into ANSI, XML output became normal in all three browsers.

BTW, I used Notepad++. Not sure if that was an issue.

Anyhow, lessons learned: Make sure the source files are encoded in ANSI.

Any comments and thoughts are welcome!

MVC revisit: Take two

I find that MVC is much easier to understand both at the conceptual level and at the implementation level if you think about it from the perspective of how you communicate with the Model.

1. Control is the input to Model. Basically, the Control is responsible to take input from the user or the system and stransfer it to the changes in the Model; The View is merely there to render the changes from the Model; so it can be considered as the output from the Model. You should keep the business logic as much as possible inside the Model and leave Control/View simple and dandy.For Flex 3 (Halo) components, the way of input is realized by implimenting the “change” listener of the controls, like this:
   
<mx:TextInput id="mTxt" change="mVO.txtValue = mTxt.htmlText;"/>

   In Flex 3, when you bind a model to a control, it is one-way communication, meaning the control will reflect the change whenever there is one in the model; but the control would not be able to change the model. That’s why we need to wire through the change listener to make this happen.

   The output is hooked up by setter methods in the Model. Whenever you detect some changes that are historical, you would notify your listeners.
   
[Bindable]
public function set myValue(v:int):void
{
_myValue = v;
notifyListeners();
}

   In ActionScript 3, we normally implement “notifyListeners” by way of dispatchEvent. Your client listens to the event and updates the View by querying the changes from the Model. You may want to have different types of events so that your listeners can respond differently. For example, you normally would invalidate properties of your component and regenerate all the renderers when the data provider has changed, besides doing other updates; and you don’t want to do this kind of heavy-lifting each time when changes occur on the “less important” members of the Model.

2. Asynchronous data. Sometimes you may compose something like an HTTPService component into your Model so that it can request external data.The data that are requested by the Control at a lot of times are not immediately available, and normally you would not notify your listeners until they are ready (For example, parsed into an XMLList object that can be consumed by component’s dataProvider).
3. Static members are available before non-static members of the objects. You can use static members to set some initial values of your member variables.
4. When you smell spaghetti code in your Model, try to partition/refactor your Model into smaller Value Objects. Value objects are a good way to structure your data/make flat Model hierarchical.
5. For larger projects, you may want to duplicate Model (or value objects) so that multiple client can access the same data. For example, in your main window of your AIR application, you initialize your model like so:

   public var chatModel:ChatModel = new ChatModel();In another console window, you want to access the same model, like so:

   private var chatModel:ChatModel = Application.application.chatModel;

JSON to XML

A lightweight plugin for Eclipse. Works good for me on Flex Builder 3 (v3.0.1.2x).

JavaScript xml2json and json2xml.

Using with htmlText to display XML

This is a little something thing that I found this morning in Flex. Not sure it would be of much use but I think it’s kinda cool:

<mx:Text htmlText="{elibXML.music}"/>

Then you can see all the text nodes (the mx:Text component traverses through all the nested nodes) in the targeted XML object.

elibXML is an XML object:

<mx:XML id="elibXML" source="data/eLibrary.xml" format="e4x"/>

and the eLibraray.xml looks something like this:

<music type="album" thumb="img/e336076c29f9162186b8ce463aa93a8c.jpg">
<title>Que Du Bonheur</title>
<artist>Asa</artist>
<year>2008-05-05</year>
<songs>
<name>Que Du Bonheur</name>
</songs>
</music>

“Unexpected end of token stream when parsing XML”

When I tried to load an external xml file using an XML tag, I got something like this from Flex Builder:

“Problem parsing external XML. Unexpected end of token stream. The last token was: 360.”

The file was built in Nodepad++ and was displayed fine in Firefox as well as in Eclipse/FB. When I got the error message, I then tried to load it in IE, which also gave me an error. What I did to fix it was going back to Nodepad++ and  “Format>Encode in UTF-8“, which basically changed the encode from ANSI (the default one for Notepad++) to Unicode. I got several “special” unicode characters such as 360° in my orignial XML file.

Loading data in Flex 101

First of all, all the Flash ways of loading data are available for Flex.

Then there are some Flex specific ways (depending on whether it’s Adobe Flash Player application or Adobe AIR application).

Using the HTMLControl Class in Adobe AIR to parse HTML as a data source

E4X in ActionScript 3 and Flex 3

The following top AS3 classes, in conjunction with HTTPService and mx.rpc.events.ResultEvent classes are used in Flex (2+) to handle XML:

XML/XMLList/Namespace/QName

XMLList Class can be considered a collection of XML objects. It is a native ActionScript class that is advised to handle XML such as data binding. XMLNode has become the legacy class in AS 2.

So the first step of handling XML data is to deserialize an XML document or object into XMLList objects.

<mx:HTTPService id="dataFetcher" url="http://mysite/myData.xml" resultFormat="e4x" result="onData(event)" />

Remember you will almost always need to initialize the call by adding the following code to the “creationComplete” event handler of the mx:Application node:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="dataFetcher.send()"/>

To deserialize the an XML object (sample shown as follows), use ResultEvent Class, like so:

<delSum Test="1" timestamp="2007-12-10T21:07:48Z">
<del pId="Dem" dNeed="2029" dTot="4056" dChosen="991" dToBeChosen="3237">
<Cand cId="1746" cName="Clinton" dTot="290" d1="+290" d7="+290" d30="+150"/>
<Cand cId="1918" cName="Obama" dTot="194" d1="+194" d7="+194" d30="+55"/>
</del>
<del pId="GOP" dNeed="1113" dTot="2225" dChosen="251" dToBeChosen="2153">
<Cand cId="893" cName="Romney" dTot="109" d1="+109" d7="+109" d30="+1"/>
<Cand cId="302" cName="Paul" dTot="47" d1="+47" d7="+47" d30="0"/>
</del>
</delSum>

private function onData(event:ResultEvent):void
{
demData = event.result.del.(@pId=="Dem").Cand.(@cName!="Uncommitted");
gopData = event.result.del.(@pId=="GOP").Cand.(@cName!="Uncommitted");
}

Note that event.result represents the top node, which is <delSum> node in the XML document.

XML filtering:

To locate a set of XML objects that represents similar characteristics, use the parenthesis () to include sets of boolean statements, following a dot after the node you want to carry out the filtering against, like so:

var product1:XMLList = catalog.product.(@id==1);//Returning the product node or nodes if there are multiple products whose id is equal to 1

or

var productName:String = catalog.product.(price<50).name;//Returns the name node

or

var manufName:String = catalog.product.(price<50).@manufacturer;//Returns the manufacturer attribute under the name node

To get list of candidate names:

var _tst:XMLList = event.result.del.(@pId=="GOP").Cand.(@cName!="Uncommitted").@cName
trace((_tst[0] is XML)+"; "+_tst[0].nodeKind() )//Returns "true; attribute"
trace(gopData[0].@cName+"; "+(gopData[0].nodeKind())//Returns "Romney; element"

Types of node include: text, comment, processing-instruction, attribute, or element.