In the past, I have used FlexLib’s MDI Canvas to accomplish this. In this instance however, I wanted to use pre existing components, and didn’t want to have to extend other classes.

My solutions was to create a wrapper for MXML for TitleWindows that would turn any container into bounds for the TitleWindows.

Here is the Widget Manager that I’ve come up with.

package net.tylermac.utils
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	
	import mx.binding.utils.ChangeWatcher;
	import mx.containers.Panel;
	import mx.containers.TitleWindow;
	import mx.core.IDeferredInstance;
	import mx.core.IMXMLObject;
	import mx.core.UIComponent;
	import mx.events.CloseEvent;
	import mx.managers.PopUpManager;
	
	[DefaultProperty("children")]
	/**
	 * Class to handle widgets on the screen
	 */
	public class WidgetManager implements IMXMLObject
	{
		private var _parent:UIComponent;
		private var _id:String;
		private var _initalizedCount:int;
		
		[InstanceType("mx.containers.TitleWindow")]
		[ArrayElementType("mx.core.IDeferredInstance")]
		public var children:Array;
		
		public function WidgetManager()
		{
		}
		
		public function initialized(document:Object, id:String):void
		{
			_parent = document as UIComponent;
			_id = id;
			
			_initalizedCount = 0;
			if(_parent)
			{
				//Preoptimization, just for fun
				_parent.addEventListener(Event.ENTER_FRAME, proccessAChild);
			}
		}
		
		private function proccessAChild(event:Event):void
		{
			if(_initalizedCount == children.length)
			{
				_parent.removeEventListener(Event.ENTER_FRAME, proccessAChild);
				return;
			}
			var win:TitleWindow = IDeferredInstance(children[_initalizedCount]).getInstance() as TitleWindow;
			ChangeWatcher.watch(win,"includeInLayout",toggleDisplay);
			if(win.includeInLayout)
			{
				displayWindow(win);
			}
			_initalizedCount++;
		}
		
		private function toggleDisplay(event:Event):void
		{
			var win:TitleWindow = TitleWindow(event.target);
			if(win.includeInLayout)
			{
				displayWindow(win);
			} else {
				closeWindow(win);
			}
		}
		
		private function displayWindow(win:TitleWindow):void
		{
			win.showCloseButton = true;
			win.addEventListener(CloseEvent.CLOSE,handleCloseButton);
			
			win.maxHeight = _parent.height - 10;
			win.maxWidth = _parent.width - 10;
			
			PopUpManager.addPopUp(win, _parent);
			if(win.x == win.y && win.x == 0) {
				PopUpManager.centerPopUp(win);
			}
			win.callLater(drawResizeGraphic, [win]);
		}
		
		private function closeWindow(win:TitleWindow):void
		{
			win.removeEventListener(CloseEvent.CLOSE, handleCloseButton);
			PopUpManager.removePopUp(win);
		}
		
		private function handleCloseButton(event:CloseEvent):void
		{
			TitleWindow(event.target).includeInLayout = false;
		}
		
		public function toString():String
		{
			return _id;
		}
		
		private function drawResizeGraphic(win:Panel):void
		{
			var s:Sprite = new ResizeIcon();
			s.name = 'resizeGraphic';
			win.rawChildren.addChild(s);
		}
		
		private function positionResizeGraphic(win:Panel):void
		{
			var s:DisplayObject = win.rawChildren.getChildByName('resizeGraphic');
			s.x = win.width - s.width;
			s.y = win.height - s.height;
		}
	}
}
	import flash.display.Sprite;
	import flash.events.Event;
	import mx.controls.Alert;
	import flash.display.Graphics;
	import flash.display.DisplayObjectContainer;
	import mx.effects.Resize;
	import mx.core.UIComponent;
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import mx.managers.CursorManager;
	import mx.collections.CursorBookmark;
	import mx.managers.PopUpManager;
	import flash.display.Shape;
	import mx.managers.SystemManager;
	import flash.media.Microphone;
	

class ResizeIcon extends Sprite
{
	private var _parent:DisplayObjectContainer;
	private var _hitArea:Sprite;
	
	public function ResizeIcon(color:uint = 0x000000)
	{
		this.draw(color);
		this.setHitArea();
		this.setupListeners();
	}
	
	override public function get hitArea():Sprite
	{
		return _hitArea;
	}
	
	private function draw(colour:uint):void
	{
		var g:Graphics = graphics;
		g.clear();
		g.lineStyle(2,colour);
		g.moveTo(4, 9)
		g.curveTo(7, 7, 9, 4);						
		g.moveTo(4, 9)
		g.curveTo(5, 5, 6, 5);
	}
	
	private function setHitArea():void
	{
		this._hitArea = new Sprite();
		this._hitArea.graphics.drawRect(0,0,10,10);
	}
	
	private function setupListeners():void
	{
		this.addEventListener(Event.ADDED, added);
		this.addEventListener(Event.REMOVED, removed);
		this.addEventListener(MouseEvent.MOUSE_DOWN, startResize);
	}
		
	private function added(event:Event):void
	{
		if(this.parent == _parent) return;

		if(_parent)
		{
			_parent.removeEventListener(Event.RESIZE, parentResized);
		}
		
		_parent = this.parent;
		positionResizeIcon();

		_parent.addEventListener(Event.RESIZE, parentResized);
	}
	
	private function removed(event:Event):void
	{
		if(_parent)
		{
			_parent.removeEventListener(Event.RESIZE, parentResized);
		}

		_parent == null;
	}
			
	private function positionResizeIcon():void
	{
		x = _parent.width - 10;
		y = _parent.height - 10;
	}
	
	private function parentResized(event:Event):void
	{
		positionResizeIcon();
	}
	
	private function startResize(event:Event):void
	{
		var rubber:RubberbandPlaceHolder = new RubberbandPlaceHolder();
		rubber.mimic(this.parent as UIComponent);
	}
}

class RubberbandPlaceHolder extends UIComponent
{
	private var mimicedWin:UIComponent;
	
	public function RubberbandPlaceHolder() { super(); }
	
	public function mimic(win:UIComponent):void
	{
		this.mimicedWin = win;
		this.x = win.x;
		this.y = win.y;
		this.height = win.height;
		this.width = win.width;
		PopUpManager.addPopUp(this, win.parent,true);
		systemManager.addEventListener(MouseEvent.MOUSE_MOVE,handleMouseMove);
		systemManager.addEventListener(MouseEvent.MOUSE_UP,handleMouseUp);
	}
	
	private function handleMouseMove(event:MouseEvent):void
	{
		event.stopPropagation();
		this.width = Math.min(Math.max(event.stageX - this.x, 150, mimicedWin.minWidth), mimicedWin.maxWidth, mimicedWin.parent.width - this.x - 5);
		this.height = Math.min(Math.max(event.stageY - this.y, 300, mimicedWin.minHeight), mimicedWin.maxHeight, mimicedWin.parent.height - this.y - 5);
	}
	
	private function handleMouseUp(event:MouseEvent):void
	{
		event.stopPropagation();
		mimicedWin.width = this.width;
		mimicedWin.height = this.height;
		
		systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
		systemManager.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
		PopUpManager.removePopUp(this);
		
		this.mimicedWin = null;
	}
	
	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
	{
		var g:Graphics = graphics;
		g.clear();
		g.lineStyle(1);
		g.beginFill(0xCCCCCC,.8);
		g.drawRect(0,0,unscaledWidth, unscaledHeight);
		g.endFill();
	}
}

* Some clean up required.

Skip to Implementation

The first thing I did (after the unit testing framework failed to work with PHP) was to decide I didn’t want to hardcode my HTML in code. Having worked on many PHP projects in the past, I have become a fan of using Smarty to abstract my views.

So in order to learn how to include Smarty in my project, I begin by looking up examples for using external libraries. It shows how to use the extern keyword on classes to make references that the Haxe Compiler can’t interpret.

Using this, I was able to create a Smarty.hx file that implemented all the functionality I needed.

//empty package because they are not natively supported by the PHP target
package ;

//Using NativeArray, since that is what Smarty is expecting
import php.NativeArray;

extern class Smarty 
{
    public var template_dir:String;
    public var compile_dir:String;
    public var config_dir:String;
    public var plugins_dir :NativeArray;
    public var debugging:Bool;
    public var error_reporting :Int;
    public var compile_check:Bool;
    public var force_compile :Bool;

    public function assign(tpl_var:Dynamic, ?value:Dynamic):Void;
    public function append(tpl_var:Dynamic, ?value:Dynamic, ?merge:Bool):Void;
    public function clear_assign(tpl_var:String):Void;
    public function clear_all_assign():Void;

    public function register_block(block:String, block_impl:String, ?cacheable:Bool, ?cache_attrs:Dynamic):Void;
    public function unregister_block(block:String):Void;

    public function display(resource_name:String, ?cache_id:String, ?compile_id:String):Void;
    //Returns Boolean or String containing parsed template
    public function fetch(resource_name:String, ?cache_id:String, ?compile_id:String, ?display:Bool):Dynamic;
}

Using this class will trigger a runtime error of not being able to locate the class file. Makes sense since we haven’t installed it yet. So next was to figure out how to how to include this file.

The first option was just to require the Smarty file using “untyped __call__('require_once', smarty_location);” in the main file. Although this may be alright for this scenario, I wasn’t happy with it because I do not require this library when I will start with remoting.

EDIT: It’s also possible to include this code in a static __inline__ function in the external class, which eliminates this issue.

So I began digging into what the compiled PHP looked like. One of the first relevant bits I came across, in lib/php/Boot.class.php, was _hx_register_type that would allow the path to be declared for the class file. This could have worked, by implementing a mapping between external libraries and their types.

However, I started then noticing the structure of the generated PHP’s for the base package. They are simply in the form of (class name).class.php. So I simply copied the contents of Smarty’s libs directory into the generated lib directory of my project, and confirmed it worked.

This worked because:

1. My extern class was in the base package. (to avoid the compiler’s work around for packages in PHP)
2. The Smarty class file was called Smarty.class.php, which is the format expected by Haxe’s auto_load function.

Now that I’ve confirmed this is working, I then went ahead to create it as part of my build.

Implementation

So first I created a Haxe/PHP project in FlashDevelop. I deleted the generated Bin folder and pointed the output to a subfolder oh my htdocs, changing the custom run command at the same time.

Next I created a lib directory in the root of my project directory and copied the Smarty libs there.

I then created all the default folders for Smarty under the root of my project.

• templates
• templates_c
• configs
• cache

I created a simple html page and saved it as index.tpl under the the templates folder.

I created my main class to test the template.

static function main()
{
    var template = new Smarty();
    template.display('index.tpl');
}

Next I have to make sure these files get copied to during the build. Since I’m using Vista, I decided to make use of RoboCopy for this step. I created a batch file called doCopy.bat and placed in the the project’s root directory, and set it as the the pre build command.

@echo off
REM USE: in prebuild use 
REM $(ProjectDir)\doCopy.bat "$(ProjectDir)" "$(OutputDir)\$(OutputName)"

REM copy the full directory to the output directory, removing generated and deleted files
robocopy %1 %2 /MIR /XD *src /XF *.hxproj *.bat

REM robocopy return and exit code between 0 and 8 for success
REM FlashDevelop will only continue for exit code 0
EXIT /B 0

Testing, I ran into the follow error

uncaught exception: unlink(templates_c\%%3F^3F5^3F5AD92D%%MainTemplate.tpl.php) [function.unlink]: No such file or directory (errno: 2) in C:\dev\httpdocs\FirstSite\lib\internals\core.write_file.php at line #46unlink(templates_c\%%3F^3F5^3F5AD92D%%MainTemplate.tpl.php) [function.unlink]: No such file or directory

Called from net.tylermac.PHPIndex::runApp
Called from net.tylermac.PHPIndex::main

Line 44 (not 46) of lib/internals/core.write_file.php contains @unlink($params['filename']);. Of course, the @ in PHP is suppose to suppress errors, however, it doesn’t if there is a error handler set. Haxe sets one up for us, so this line throws an error if the filename does not exists. (It doesn’t on first run). So to correct it, I simply modified as follows

if (file_exists($params['filename']))
{
	@unlink($params['filename']);
}

This causes a small performance hit rather then trying to silently ignore the error, but I find it acceptable.

Running the code again, and suddenly I have the html displaying for me.

This is the current design. Nice, clean, functional design. I’ll extract the symbol to use as a favicon on the site as well.

I’ll be putting the site together through out the next month. I’ll post here when it is complete.

Are good programmers a product of an inherit ability, or is the ability more cognitive? Is programming an art, like music or writing where some can become decent, but only a few can become great; or is it more like a language, where those who are exposed to it before they finalize their thinking model can just get it?

Of course, some would say that anyone can become a great developer? Is this true, or is it just people trying to make ourselves feel good?

let add, remove, event =
 let doChange, changeEvent = IEvent.create() in
 let value = ref 0 in (
  (fun x ->
	value := !value + x;
	doChange(x, !value);
	!value;
  ),
  (fun y ->
	value := !value - y;
	doChange((y * (-1)), !value);
	!value;
   ), changeEvent);;

event.Add(fun (x,y) -> printfn "changed by %d to make %d" x y);;

Here is a simple example with two closures sharing a single state, throwing an event whenever the state changes. The state can now be listened to anywhere without affected the original code. Makes maintenance easier to manage.

The real benefit here will be when used in conjunction with asynchronous functions, for parallel execution.

For more reference, check out Don Syme’s Article on Events.