GhostWire Studios - Flash/Flex UI Components Development And Consulting Services
Quality User Interface Controls For Flash Application DevelopmentAspireUI Components

Nov 07 2009

[AS3] Simple Editor For Loading And Saving XML As Binary

Published by at 2:35 am under Flash,Flash AS3,Tips

This post is a supplement to “Saving XML As Binary”.

As mentioned in the previous post, you can save XML in binary and get the benefits of compression, but doing so would make it impossible to edit the data through a text editor.

This post explores a simple tool you can create easily using Flash/ActionScript 3, a tool that will allow you (or your clients and end-users) to load, read, edit and save XML in compressed binary format. As shown below, this is a minimalist approach – feel free to beautify and/or customize it to fit your own requirements.

You can find the source code at the end of this post. The code does not use any UI component, not from Aspire UI, Flex or Flash, just plain native Flash Player classes so you can compile the AS3 class alone without any additional library.


(480×480 SWF, 2KB)

Get Adobe Flash player

  • You need Flash Player 10+ to view the above SWF.
  • Click the “Browse” button to open a native local filesystem dialog – choose an XML file to load.
  • Once loaded, the XML will be displayed in the input text field above.
  • After that, click the “Save” button to open a native local filesystem dialog – choose location and file name.
  • Look for the saved file in your local storage – notice that the file size is much smaller than the original.
  • If you open the saved file in a text editor, you will see garbage text because it is in compressed binary format.
  • You can load a binary XML file into the above tool (if it was saved in “.xml” extension).
  • You can edit the XML in the text field before saving.


BinaryXMLTool Class

package 
{
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.IOErrorEvent;
	import flash.net.FileFilter;
	import flash.net.FileReference;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.utils.ByteArray;
	import flash.xml.XMLDocument;
 
	public class BinaryXMLTool extends Sprite 
	{
 
		// ** minimalist buttons **
		private var browseButton:TextField;
		private var saveButton:TextField;
 
		// ** minimalist editor **
		private var xmlText:TextField;
 
		// ** browse/load/save **
		private var xmlFile:FileReference;
 
		public function BinaryXMLTool():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// entry point
			stage.align			= StageAlign.LEFT;
			stage.scaleMode			= StageScaleMode.NO_SCALE;
			stage.showDefaultContextMenu	= false;
 
			// ** draw minimalist text editor **
			xmlText				= new TextField();
			xmlText.multiline		= true;
			xmlText.background		= true;
			xmlText.backgroundColor		= 0xEEEEEE;
			xmlText.type			= TextFieldType.INPUT;
			xmlText.width			= 400;
			xmlText.height			= 400;
			xmlText.border			= true;
			xmlText.x			= (stage.stageWidth - xmlText.width) * 0.5;
			addChild(xmlText);
 
			// ** draw minimalist browse button **
			browseButton			= new TextField();
			browseButton.autoSize		= TextFieldAutoSize.LEFT;
			browseButton.background		= true;
			browseButton.backgroundColor	= 0x000000;
			browseButton.defaultTextFormat	= new TextFormat("Tahoma", 14, 0xFFFFFF, true, null, null, null, null, null, 4, 4);
			browseButton.selectable		= false;
			browseButton.text		= "BROWSE";
			browseButton.x			= (stage.stageWidth - browseButton.width) * 0.5;
			browseButton.y			= 420;
			addChild(browseButton);
 
			// ** draw minimalist save button **
			saveButton			= new TextField();
			saveButton.autoSize		= TextFieldAutoSize.LEFT;
			saveButton.background		= true;
			saveButton.backgroundColor	= 0xAAAAAA;
			saveButton.defaultTextFormat	= browseButton.defaultTextFormat;
			saveButton.selectable		= false;
			saveButton.text			= "SAVE";
			saveButton.x			= (stage.stageWidth - saveButton.width) * 0.5;
			saveButton.y			= 460;
			addChild(saveButton);
 
			// ** button listeners **
			browseButton.addEventListener(MouseEvent.CLICK, on_buttonClick, false, 0, true);
			saveButton.addEventListener(MouseEvent.CLICK, on_buttonClick, false, 0, true);
		}
 
		/**
		* handle browse or save
		*/
		private function on_buttonClick(evt:MouseEvent):void
		{
			var btn:TextField = evt.target as TextField;
			if (btn)
			{
				if (btn.text == "BROWSE")
				{
					xmlFile = new FileReference();
					xmlFile.addEventListener(Event.SELECT, on_xmlSelect, false, 0, true);
					xmlFile.browse([new FileFilter("XML Documents","*.xml")]);
				}
				else if (btn.text == "SAVE")
				{
					if (xmlFile)
					{
						if (xmlText.text.length)
						{
							// ** saving as binary **
							var data:ByteArray = new ByteArray();
							data.writeUTFBytes(xmlText.text);
							data.compress();
							new FileReference().save(data, "bin" + xmlFile.name);
						}
					}
				}
			}
 
		}
 
		/**
		* handle browse, load XML file
		*/
		private function on_xmlSelect(evt:Event):void
		{
			xmlFile.removeEventListener(Event.SELECT, on_xmlSelect);
			xmlFile.addEventListener(Event.COMPLETE, on_xmlComplete, false, 0, true);
			xmlFile.load();
		}
 
		/**
		* handle load, check if it is binary, uncompress, display XML in editor
		*/
		private function on_xmlComplete(evt:Event):void
		{
			xmlFile.removeEventListener(Event.COMPLETE, on_xmlComplete);
 
			saveButton.backgroundColor = 0x000000;
 
			var data:* = FileReference(evt.target).data;
			if (data is ByteArray)
			{
				try
				{
					ByteArray(data).uncompress();
				}
				catch(e:Error)
				{
				}
 
			}
			data = XML(data);
			xmlText.text = data;
		}
	}	
}
pixelstats trackingpixel
Share or Bookmark This Post:
  • StumbleUpon
  • email
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • Yahoo! Buzz
  • Netvibes
  • NewsVine
  • Reddit
  • Slashdot
  • Technorati
  • BlinkList
  • Mixx
  • Diigo
  • Faves
  • Suggest to Techmeme via Twitter
  • Twitter

Other Posts You Might Enjoy:

       

10 responses so far

10 Responses to “[AS3] Simple Editor For Loading And Saving XML As Binary”

  1. johnon 10 Nov 2009 at 4:44 pm

    sunny, this tool works great! it reduced my XML 90% 50K => 5K.

  2. Philippeon 11 Nov 2009 at 9:32 am

    Nice trick – I suppose the result is similar to binary embed XML but easier to update ;)

  3. Flash Componentson 11 Nov 2009 at 2:11 pm

    Nice tool! It allows me to load, read, edit and save XML in compressed binary format. Great! Thanks for sharing!

  4. makcon 11 Nov 2009 at 2:51 pm

    this app would be far more useful if it allowed to flash-compress any binary file (not just xml)

  5. sunnyon 11 Nov 2009 at 2:58 pm

    @makc, er… perhaps you missed the point of the post?

  6. Siddharthon 31 Dec 2009 at 11:54 am

    Why is it not showing browser pop up (or a default loader of browser) which we generally see on downloading any file from browser ??

    Well I’m asking this because I am getting the same problem in my project.
    I have wrote the code for downloading the file from SWF (from browser).
    It’s working well without any issue in both IE and Mozilla.

    But I want to show default loader or that pop up which we see on downloading any file from internet.
    Any suggestions would be worthwhile.
    Thanks.

  7. shamson 02 Jul 2010 at 11:44 am

    Thanks a lot.

    this’s a very useful tool.
    i will work on ByteArray, to explore more things.

  8. Jorgeon 22 Feb 2011 at 2:47 pm

    Hi sunny,

    I’ve converted several xml to bin with your tool, but for some unknown reason i’m getting Error #2058 in some of the files when doing uncompress(); These is even stranger cause in localhost everything works fine… i only get the error when uploaded to server. Is it possible that filezilla “corrupts” the file while uploading? Is there something that can be done in the server side!?

    Thanks

  9. Jorgeon 22 Feb 2011 at 2:52 pm

    Hi sunny,

    I\’ve converted several xml to bin with your tool, but for some unknown reason i\’m getting Error #2058 in some of the files when doing uncompress(); These is even stranger cause in localhost everything works fine… i only get the error when uploaded to server. Is it possible that filezilla \”corrupts\” the file while uploading? Is there something that can be done in the server side!?

    Thanks

  10. Jorgeon 22 Feb 2011 at 3:58 pm

    Hi all,

    Just want to give my 2cents …. when uploading to server make sure the file transfer mode is set to binary or you could end up with corrupted files that throw errors when trying to uncompress.

Comments RSS

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word