blackcj.com » XML http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 E4X XML Cheat Sheet http://www.blackcj.com/blog/2011/03/16/e4x-xml-cheat-sheet/ http://www.blackcj.com/blog/2011/03/16/e4x-xml-cheat-sheet/#comments Wed, 16 Mar 2011 14:29:54 +0000 Chris Black http://www.blackcj.com/blog/?p=961 Parsing XML is one of the major pain points in development. Without exact syntax you're left scratching your head. After visiting the same collection of links over and over, I've decided to consolidate the more useful syntax into a single post. All examples can be used with both JavaScript and ActionScript as they are both based off of ECMAScript.

Problem:
E4x is great but it requires exact knowledge of the syntax. It's easy to forget common functions if not used every day.

Solution:
This cheat sheet is a collection of examples from common XML structures. It's meant to kick your brain back into gear after a few months without working in e4x. For a more comprehensive guide to XML and e4x please visit the links at the bottom of this post.

What is XML and e4x? I'll let Wikipedia handle that one.

Step 1: Define XML

Here is a quick example on defining XML inline:

PLAIN TEXT
Actionscript:
  1. var data:XML = <data>
  2.     <image>pirates.jpg</image>
  3. </data>;

PLAIN TEXT
JavaScript:
  1. var data = <data>
  2.     <image>pirates.jpg</image>
  3. </data>;

The only difference is that the ActionScript variable is typed. The JS version will work in AS but typed variables are so much easier to work with. Code completion is my best friend.

OK, from here on out I'm just going to show the XML, trace statements and expected output. Everything is cast to a string for easy output.

Step 2: Access a node value

Using the XML above...

PLAIN TEXT
Actionscript:
  1. trace(String(data.image));
  2.  
  3. Output:
  4. pirates.jpg

PLAIN TEXT
JavaScript:
  1. alert(String(data.image));

Strikingly similar, however, break points and trace statements are so much more fun than alerts.

Step 3: Access an attribute

PLAIN TEXT
XML:
  1. <data>
  2.     <image name="Pirate Image">pirates.jpg</image>
  3. </data>

PLAIN TEXT
Actionscript:
  1. trace(String(data.image.@name));
  2.  
  3. Output:
  4. Pirate Image

I assume by this point you can figure out the JS syntax. Writing JS is like eating squash. It's good for you but why do it when there is free cake?

Step 4: Access a node value given an attribute key

PLAIN TEXT
XML:
  1. <data>
  2.     <image name="Pirate Image" id="p1">pirates.jpg</image>
  3.     <image name="Pirate Image 2" id="p2">pirates2.jpg</image>
  4. </data>

PLAIN TEXT
Actionscript:
  1. trace(String(data.image.(@id == "p2")));
  2.  
  3. Output:
  4. pirates2.jpg

JavaScript developers are ActionScript developers, they just don't know it yet.

Step 5: Access an attribute given an attribute key

Using the XML from step 4...

PLAIN TEXT
Actionscript:
  1. trace(String(data.image.(@id == "p2").@name));
  2.  
  3. Output:
  4. Pirate Image 2

ActionScript and JavaScript are like two people that hate each other only to later find out that they are actually siblings with everything in common. They proceed to live happily ever after.

Step 6: Parse through nodes

PLAIN TEXT
XML:
  1. <data>
  2.     <image name="Pirate Image" id="p1">pirates.jpg</image>
  3.     <image name="Flower Image" id="f1">flower.jpg</image>
  4.     <image name="Car Image" id="c1">car.jpg</image>
  5. </data>

PLAIN TEXT
Actionscript:
  1. for each(var img:XML in data.image)
  2. {
  3.     trace(String(img.@name));   
  4. }
  5.  
  6. Output:
  7. Pirate Image
  8. Flower Image
  9. Car Image

Just remove the typed variable, replace trace with print and your JS will be good to go. At this point you might want to start populating value objects with attributes, paths and id's.

Additional resources:
http://www.republicofcode.com/tutorials/flash/as3xml/
http://www.senocular.com/flash/tutorials/as3withflashcs3/?page=4

JSON parsing cheat sheet coming soon!

]]> http://www.blackcj.com/blog/2011/03/16/e4x-xml-cheat-sheet/feed/ 2 Re-Learning ActionScript 2 http://www.blackcj.com/blog/2009/05/26/re-learning-actionscript-2/ http://www.blackcj.com/blog/2009/05/26/re-learning-actionscript-2/#comments Tue, 26 May 2009 17:51:53 +0000 Chris Black http://www.blackcj.com/blog/?p=357 It's amazing how easy it is to forget the little niches in programming languages after going almost a year without using them. I recently had the pleasure of working on an ActionScript 2 project after almost a year of doing primarily ActionScript 3 development. This post will highlight a few things that can make ActionScript 2 development a bit more like 3. I'll also provide links to resources that helped get me back in the mindset of AS2.

Event dispatching.
One of the toughest parts of going back to AS2 is the event handling. AS3 does this much better and one of my co-workers (@rexeisen) sent me this great link: AS3 Style Events in AS2

Singleton design pattern.
I found a great PDF outlining how to implement the singleton design pattern using AS2: Singleton Design Patter with AS2

My singleton implementation:

PLAIN TEXT
Actionscript:
  1. import com.cb.Utils.messaging.*;
  2. import com.cb.events.Event;
  3. import mx.utils.Delegate;
  4.  
  5. class com.sierrabravo.Utils.messaging.MessageManager
  6. {
  7.     private static var instance:MessageManager;
  8.     private var _container:MovieClip;
  9.     private var _currentContent:MovieClip;
  10.     private var _tint:MovieClip;
  11.  
  12.     private function MessageManager()
  13.     {
  14.         // Do nothing
  15.     }
  16.  
  17.     public static function getInstance():MessageManager
  18.     {
  19.         if(MessageManager.instance == null)
  20.         {
  21.             MessageManager.instance = new MessageManager();
  22.         }
  23.         return MessageManager.instance;
  24.     }
  25.  
  26.     public function setParent(parentClip:MovieClip):Void
  27.     {
  28.         _container = parentClip;
  29.     }
  30.    
  31.     public function updatePosition():Void
  32.     {
  33.         if(_currentContent){
  34.             _currentContent._x = (Stage.width - _currentContent._width) / 2;
  35.             _currentContent._y = (Stage.height - _currentContent._height) / 2;
  36.         }
  37.         if(_tint){
  38.             _tint._width = Stage.width;
  39.             _tint._height = Stage.height;
  40.         }
  41.     }
  42.    
  43.     public function addMessageWindowContent(contentWindow:MessageContentBase):Void
  44.     {
  45.         tint();
  46.         _currentContent = _container.createEmptyMovieClip( "content", _container.getNextHighestDepth() );
  47.         contentWindow.init( _currentContent );
  48.  
  49.         _currentContent._x = (Stage.width - _currentContent._width) / 2;
  50.         _currentContent._y = (Stage.height - _currentContent._height) / 2;
  51.         contentWindow.addEventListener(Event.CLOSE, Delegate.create( this, closeWindow ));
  52.     }
  53.    
  54.     public function closeWindow():Void
  55.     {
  56.         trace('close window');
  57.         _currentContent.removeMovieClip();
  58.         clearTint();
  59.     }
  60.    
  61.     public function clearTint():Void
  62.     {
  63.         _tint.removeMovieClip();
  64.     }
  65.  
  66.     public function tint():Void
  67.     {
  68.         _tint = _container.createEmptyMovieClip("rectangles", _container.getNextHighestDepth());
  69.        
  70.         _tint.beginFill(0x000000, 50);
  71.         _tint.lineStyle(1, 0x000033, 100);
  72.         _tint.moveTo(0, 0);
  73.         _tint.lineTo(Stage.width, 0);
  74.         _tint.lineTo(Stage.width, Stage.height);
  75.         _tint.lineTo(0, Stage.height);
  76.         _tint.endFill();
  77.         _tint.onRelease = function(){
  78.             //DO NOTHING
  79.         }
  80.         _tint.useHandCursor = false;
  81.     }
  82. }

Preventing click through.
In the above example the screen is tinted to put focus on the pop up window. Unfortunately, even though there is a movie clip on top of everything else, it does not prevent interaction with the elements layered below it. In order to get around this I added an onRelease to the _tint movie clip along with a useHandCursor of false. This prevents interaction with elements below the tint. Here is the link to where I found this solution: Disable "Click-Through" on MovieClips in Flash

Debugging in ActionScript 2.
For the project we were working on it was not possible to use the built in debugger for Flash. Another great opportunity to use the Singleton design patter to include a trace window that can have text dumped out from any part of the application.

PLAIN TEXT
Actionscript:
  1. class com.cb.Utils.debug.Debugger
  2. {
  3.     private static var instance:Debugger;
  4.     private var _textField:TextField;
  5.     private var _parentClip:MovieClip;
  6.  
  7.     private function Debugger()
  8.     {
  9.         // Do nothing
  10.     }
  11.  
  12.     public static function getInstance() :D ebugger
  13.     {
  14.         if(Debugger.instance == null)
  15.         {
  16.             Debugger.instance = new Debugger();
  17.         }
  18.         return Debugger.instance;
  19.     }
  20.  
  21.     public function init(myText:TextField, parentClip:MovieClip):Void
  22.     {
  23.         _textField = myText;
  24.         _textField.wordWrap = true;
  25.         _textField.background = true;
  26.         _textField.border = true;
  27.         _textField.multiline = true;
  28.         _parentClip = parentClip;
  29.     }
  30.    
  31.     public function output(myString:String):Void
  32.     {
  33.         if(_textField) {
  34.              _textField.swapDepths(_parentClip.getNextHighestDepth());
  35.              _textField.text += myString + "\n";
  36.         }
  37.     }
  38. }

XML parsing.
Parsing XML is a key part of AS2 and AS3. I found a great tutorial on Loading XML data in Flash using ActionScript 2. This is my code for parsing XML.

PLAIN TEXT
Actionscript:
  1. public function init(clip:MovieClip):Void
  2. {
  3.     example_xml = new XML();
  4.     example_xml.ignoreWhite = true;
  5.     example_xml.load("xml/BookDefinition.xml");
  6.     example_xml.onLoad = Delegate.create(this, onLoadEvent);
  7. }
  8. function onLoadEvent(success:Boolean):Void {
  9.     if (success) {
  10.         var myImage = example_xml.firstChild.firstChild.childNodes;
  11.         for (var i = 0; i<myImage.length; i++) {
  12.             var pageNumber:Number = parseInt(myImage[i].childNodes[0].firstChild);
  13.             var imageURL:String = myImage[i].childNodes[1].firstChild;
  14.             var keywords:String = myImage[i].childNodes[2].firstChild.toString().toLowerCase();
  15.         }
  16.     }
  17. }

PLAIN TEXT
XML:
  1. <book>
  2.     <pages>
  3.         <page>
  4.             <pageNumber>1</pageNumber>
  5.             <pageFlash>thumbnails/page01.jpg</pageFlash>
  6.             <pageText>This is page 1.</pageText>k
  7.         </page>
  8.         <page>
  9.             <pageNumber>2</pageNumber>
  10.             <pageImage>thumbnails/page02.jpg</pageImage>
  11.             <pageText>This is page 2.</pageText>
  12.         </page>
  13.     </pages>
  14. </book>

Delegate functions.
Notice above that a delegate function was used to keep the scope of the function with the current class. More information on delegate functions can be found here: The Delegate Class

That's it for now. I know that I'll be using this post as a reference the next time I have to jump on another AS2 project. Being able to use design patterns, event dispatching, and debugging actually made coding in AS2 fun! Enjoy.

Additional resources.
http://www.flashmobileblog.com/tag/flash-lite-31/
http://www.adobe.com/products/flashlite/features/

]]> http://www.blackcj.com/blog/2009/05/26/re-learning-actionscript-2/feed/ 2