Waxe: NMEStage

Note:

I’ve updated this post to work with Waxe 3.0 by changing:
waxePanel.setSizer(sizer); to waxePanel.set_sizer(sizer);

Once you have a waxe window created, it’s easy to add both NME stages and Waxe content to the application.

We’ll add a panel to hold our content.

var waxePanel:Panel = Panel.create( frame );

then add a button to it:

var button:Button = Button.create( waxePanel, null, 'A Button');

Then we’ll add an NMEStage:
Note: It’s posible to add multiple NMEStages.

var nmeStage:NMEStage = NMEStage.create( waxePanel );

The NMEStage’s stage ( NMEStage.stage ) behaves, as far as I’ve seen, as the stage does in a standard NME project. So we can set it up to deal with scaling using the same techniques. In this case I’ll align it to the top left, and tell it not to scale.

nmeStage.stage.align = StageAlign.TOP_LEFT;
nmeStage.stage.scaleMode = StageScaleMode.NO_SCALE;

Let’s draw something on the stage so we can see it’s all working:

nmeStage.stage.graphics.beginFill( 0x000000 );
nmeStage.stage.graphics.drawCircle( 50 , 50 , 50 );
nmeStage.stage.graphics.endFill();

We can then position the button and NMEStage with a Sizer, the NMEStage will scale following the same rules as other waxe objects( More on Sizers at CambiataBlog ).

var sizer:Sizer = BoxSizer.create(true);
waxePanel.set_sizer(sizer);
sizer.add( button , 1 , Sizer.EXPAND | Sizer.BORDER_ALL , 5 );
sizer.add( nmeStage , 3 , Sizer.EXPAND | Sizer.BORDER_ALL , 5);

Here’s the full source:

package;

import wx.App;
import wx.Button;
import wx.Frame;
import wx.NMEStage;
import wx.Panel;
import wx.Sizer;
import wx.BoxSizer;

import nme.display.StageAlign;
import nme.display.StageScaleMode;

class Main
{
	private var frame:Frame;
	
	function new()
	{
		// Make an app window
		frame = Frame.create(null, "WaxeApp" , null , { width:400 , height:400 } );
		
		// Make a panel
		var waxePanel:Panel = Panel.create( frame );
		var button:Button = Button.create( waxePanel, null, 'A Button');
		
		// Make an NME stage
		var nmeStage:NMEStage = NMEStage.create( waxePanel );
		nmeStage.stage.align = StageAlign.TOP_LEFT;
		nmeStage.stage.scaleMode = StageScaleMode.NO_SCALE;
		// Draw something on the NMEStage
		nmeStage.stage.graphics.beginFill( 0x000000 );
		nmeStage.stage.graphics.drawCircle( 50 , 50 , 50 );
		nmeStage.stage.graphics.endFill();
		
		// Auto position the panel and NMEStage with a sizer
		var sizer:Sizer = BoxSizer.create(true);
		waxePanel.set_sizer(sizer);
		sizer.add( button , 1 , Sizer.EXPAND | Sizer.BORDER_ALL , 5 );
		sizer.add( nmeStage , 3 , Sizer.EXPAND | Sizer.BORDER_ALL , 5);
		
		
		// Show your window
		App.setTopWindow( frame );
		frame.shown = true;
	}

	
	
	// Entry
	public static function main()
	{
		App.boot( function(){ new Main(); } );
	}
}

This should compile and give you a window with a large, currently useless Waxe button, and the circle on a plain which rectangle of our NMEStage like this:

Advertisement