Basic Tabbed-Menu / View Stack Flex App Structure

Just some quick notes on setting up a basic Flex app that encapsulates individual page content (views). This could work for a multi-tab widget or a simple microsite.

Here’re some ways to interact w/ the View Stack:

Simple ViewStack switching by id
Selecting a view in a ViewStack just by its Class

To replace the views with your own custom .mxml files, check out at least the first 7 minutes of the Cairngorm Part 2 video here. It ends up looking like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:view="view.*" 
    layout="vertical" >

//....
<mx:ViewStack id="yourID" width="100%" height="100%">
<view:YourPage1 />
<view:YourPage2 />
</mx:ViewStack>
//...

Note, the extra namespace at the top, “xmlns:view”, and make sure that directory actually exists in your source folder. The “view” directory is where YourPage1.mxml and YourPage2.mxml should be stored.

Advertisements

Note to self: Structs in C++ are like Value Objects in Actionscript or Java

Wiser folks than I have accurately pointed out that no analogy is perfect. In this case, it’s plain to see that Structs in C++ are an official data type that’s part of the language itself, whereas Value Objects are more of a convention (former design pattern[1]) created by Java programmers (among others) over the years.

Structs are similar to Value Objects since both are essentially containers for a bunch of data. Both don’t have methods. Perhaps, Value Objects could have Getters & Setters, but more often there aren’t methods.

An example of a Struct in a C++ tutorial:

struct database {
  int id_number;
  int age;
  float salary;
};

int main()
{
  database employee;  
  employee.age = 22;
  employee.id_number = 1;
  employee.salary = 12000.21;
}

An example of a Value Object from an AS3 tutorial using PureMVC:

package com.flashtuts.model.vo
{
	public class DataVO
	{
		public var dataURL:String          = 'assets/xml/data.xml';
		public var urlsArray:Array	  = [ ];
		public var urlsDataArray:Array  = [ ];
	}
}

1. In Java the Value Object Pattern is now called the Transfer Object Pattern.

Part 1: Using custom graphics via Flex SDK in the Flash IDE

Part 2. This is one way to organize graphical assets for an Actionscript-only AS3.0 project in Flash without using the Library.

Prep the files
In the Flash IDE* (CS4, for example), create an empty .fla and set Tester1 as the Document Class. Make sure you have an image named “mybutton1.png” inside a folder called /assets in your main directory, or in the same place your main .fla is located.

Create the graphic assets container Class
Place it inside this folder structure: {your main .fla’s location}/com/timshaya/model.

package com.timshaya.model
{	
	import flash.display.DisplayObject;
	
	public class BtnAssets 
	{	
		//embed graphic assets
		// "../../../" since "/assets" is outside this package
		[Embed("../../../assets/mybutton1.png")]
		private var MyBtn1:Class;
		
		//create displayable object to attach graphics to
		private var _mybtn1:DisplayObject;
		
		public function BtnAssets():void 
		{
			//attach graphic asset to displayable object	
			_mybtn1 = new MyBtn1();
		}
		
		/*  create getter method to give other classes a way to access 
			the displayable graphic object while preserving Encapsulation** */
		public function get mybtn1():DisplayObject { return this._mybtn1; }		
				
	}	
}

Use the above graphic assets Class to display a graphic on stage
Place Tester1.as in the same location as your main .fla file that uses this as its Document Class.

package 
{	
	import com.timshaya.model.BtnAssets;
	
	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	[SWF (width="600", height="400", backgroundColor="#9999cc", frameRate="31")]
	public class Tester1 extends MovieClip
	{				
		//a reference to the custom graphics object
		private var btnAssets:BtnAssets; 

		//buttons
		private var butn1:DisplayObject;		
		
		public function Tester1():void 
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;
			
			btnAssets = new BtnAssets();
			
			//add button to stage
			butn1 = btnAssets.mybtn1;
			butn1.x = (stage.stageWidth/2) - butn1.width/2; //stage center
			butn1.y = stage.stageHeight/2 - butn1.height/2;
			addChild(butn1);			
		}		
	}	
}

Why bother? Why not just stuff all assets in the .fla via the Library? Doing it this way makes your AS3.0 code less IDE dependent. It’s easier to compile regardless of whether you’re using Flash, Flex Builder, FDT, or FlashDevelop.

* IDE means Integrated Development Environment. It’s a fancy way of saying “program” or “development tool.”

** Encapsulation is a key principle of OOP