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

This post expands on the previous simple example with an example of a basic menu for an Actionscript-only AS3.0 project in Flash that uses a cool feature of the Flex SDK — the Embed tag. The last example was useful because the Flash IDE’s Library wasn’t used at all. This method, allows you to still use the Flex SDK’s [Embed] meta tag but lets you work with a Designer who only knows how to use .fla files and the Library. Using this technique a Developer can receive an assets SWF from a Designer and worry about the code, not about setting up graphics in the library.

Prep the files
In the Flash IDE* (CS4, for example), create an empty .fla and set TenOfSameButn as the Document Class. Make sure you have an assets SWF named “BasicBtnAssets.swf” inside a folder called /assets in your main directory, or in the same place your main .fla is located. BasicBtnAssets.swf should contain your button graphics, in this case just a generic Off state and On state set to Export for Actionscript. The Off state has a Class name of “reg” (set by going to Library > (Right/Control click the asset MovieClip ) > Properties) and the On state is named “ovr” via the library by the Designer.

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.Sprite;
	import flash.display.MovieClip;
	
	public class BasicBtnAssets extends Sprite
	{	
		//embed graphic assets, 
		// "../../../" since "/assets" is outside this package
		[Embed(source="../../../assets/BasicBtnAssets2.swf", symbol="reg")]
		private var MyBtns1offState:Class;
		[Embed(source="../../../assets/BasicBtnAssets2.swf", symbol="ovr")]
		private var MyBtns1onState:Class;

		//create displayable object to attach graphics to
		private var _mybtn1off:Sprite;
		private var _mybtn1on:Sprite;
		
		public function BasicBtnAssets():void 
		{
			//attach graphic asset to displayable object	
			_mybtn1off = new MyBtns1offState();
			_mybtn1on = new MyBtns1onState();
		}
		
		/*  create getter method to give other classes a way to access 
			the displayable graphic object while preserving Encapsulation */						
		public function get mybtn1off():Sprite { return this._mybtn1off; }		
		public function get mybtn1on():Sprite { return this._mybtn1on; }		
	}	
}

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

package 
{	
	import com.timshaya.model.BasicBtnAssets;
	
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.display.DisplayObject;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;	
	
	[SWF (width="600", height="400", backgroundColor="#9999cc", frameRate="31")]
	public class TenOfSameButn extends MovieClip
	{				
		//a reference to the custom graphics object
		private var btnAssets:BasicBtnAssets; 
		private var butnGroup1:Sprite;
		
		//buttons
		private var butn1:      Sprite; //button 1 local container
		private var butn2:      Sprite;
		private var butn3:      Sprite;
		private var butn4:      Sprite;
		private var butn5:      Sprite; 
		private var butn6:      Sprite;
		private var butn7:      Sprite;
		private var butn8:      Sprite;
		private var butn9:      Sprite; 
		private var butn10:     Sprite; 		
		private var butnsArra:  Array = [butn1,butn2,butn3,butn4,butn5,butn6,butn7,butn8,butn9,butn10];
		
		private var offSet:     Number = 20; //horizontal button spacing offset
		
		public function TenOfSameButn():void 
		{						
			buildMenu();
		}		
		
		public function buildMenu():void 
		{
			butnGroup1 = new Sprite();
			addChild(butnGroup1);			
			
			for(var itm:int = 0; itm < butnsArra.length; itm++) //make 10 buttons
			{				
				butnsArra[itm] = new Sprite();
				//butnsArra[itm] = new MovieClip();																
				//butnsArra[itm].ID = itm; 
				//adding custom properties only works 
                                //with MovieClip, because it's a Dynamic Class															
																
				//create a new BasicBtnAssets instance for each button
				btnAssets = new BasicBtnAssets(); 				
				
				//put btn1 off state inside btn1 
				butnsArra[itm].addChild(btnAssets.mybtn1off);	
	
				//put btn1 on state inside btn1
				butnsArra[itm].addChild(btnAssets.mybtn1on);	
				
				//add each button to the group container so they can be repositioned as a group
				butnGroup1.addChild(butnsArra[itm]);		
				
				butnsArra[itm].x = 2.2;
				butnsArra[itm].x = butnsArra[itm].x * itm * offSet;
				//trace("butnsArra["+itm+"].x = " + butnsArra[itm].x);	
				butnsArra[itm].y = stage.stageHeight / 2 - butnsArra[itm].height/2 - 100;
				
				//hide Mouse Over state
				butnsArra[itm].getChildAt(1).visible = false; 
				butnsArra[itm].buttonMode = true;
				
				butnsArra[itm].addEventListener(MouseEvent.MOUSE_OVER, doMouseOvr, false, 0, true);
				butnsArra[itm].addEventListener(MouseEvent.MOUSE_OUT, doMouseOut, false, 0, true);				
			}
			
			//center btns container
			butnGroup1.x = stage.stageWidth/2 - butnGroup1.width/2;			
		}
		
		public function doMouseOvr(e:MouseEvent):void 
		{				
			e.target.parent.getChildAt(1).visible = true;
		}
		
		public function doMouseOut(e:MouseEvent):void 
		{
			e.target.parent.getChildAt(1).visible = false;
		}
	}	
}
Advertisements

J2EE Code Behind for Flex / Actionscript Developers

Just re-stumbled upon Ted Patrick’s post on using the Code Behind technique in Flex with Actionscript. Ted wrote about how he used it in .NET and in Flex. There’re more explanations of Code Behind here and here.

The same technique exists in J2EE in the form of JSP and Java Beans. It’s also known as Model 1 architecture (Model 2 is an example of MVC). As Ted states MXML is just a bunch of tags that are really ActionScript code under the hood and a .mxml file is a .as file. JSP can be thought of as tags that represent Java code. They’re XML-like tags that the compiler breaks down into a Java class, specifically, a Servlet.

JSP is used for displaying visual content, what’s called the “View” in design pattern terminology. Java Beans are Java class files that handle the application’s logic.

You can use a JSP import statement to use a Bean to create objects and then access its public methods like so:

<jsp:useBean id="calc" class="com.mysite.MyCalc" scope="session" />

<html><head><title>JSP Code Behind</title></head><body>

<%
	double myResult = calc.addTwoNumbrs(92.2231, 2384.0);
	out.print("myResult = " + myResult);
        //in the browser  you should see
        //myResult = 2476.2231
%>

</body></html>

Here “id=calc” refers to the object reference, or an instance name called “calc.” The “com.mysite.MyCalc” part specifies the package “com.mysite” and class “MyCalc.” For the Tomcat 6 servlet container (or application server), this Bean would live inside the Tomcat6/webapps/yourApp/WEB-INF/classes/com/mysite/ directory.

package com.mysite;
public class MyCalc {
  public void MyCalc() { }
  public double addTwoNumbrs(double num1, double num2 )
  {
     return num1 + num2;
  }
}

How to set up Connector/J in Eclipse

Connector/J is a “Type IV JDBC driver for MySQL.”

Assumptions

You have downloaded & installed MySQL 5.1, Connector/J for 5.1 (the JDBC driver for MySQL) from mysql.com, Tomcat 5.5 or 6, Eclipse 3.4 for Java EE. I’m assuming this is a Dynamic Web Project in Eclipse with Tomcat 6 as the Target Runtime. I did this successfully on OS X 10.5 (Leopard) & on Windows XP.

The Steps:

  1. Select your project folder in Eclipse’s Project Explorer (just click on it so it’s highlighted).
  2. Open project properties. There’re several ways to do this. For example, you can go to Project > Properties in Eclipse’s top menu.
  3. Click on Java Build Path. Click “Add External Jars.” Navigate to where you unzipped Connector/J on your hard drive. Choose the .jar file (in my case mysql-connector-java-5.1.7-bin.jar) & click Open. It’ll now show up under JARs and class folders in the build path.
  4. Click on Java EE Module dependencies in the menu on the left.
  5. Check the checkbox next to the Connector/J path under JAR/Module. Hit Apply and OK.
    Run a skeleton test Servlet to see if it works:

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TestJDBC extends HttpServlet {

    public void init(){
        try {
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            System.out.println("JDBC driver loaded");
        } catch (ClassNotFoundException e) {
            System.out.println(e.toString());
        } //Eclipse may auto-force some extra catch blocks here
     }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        out.println("Check the Console tab in" +
		" Eclipse... it should say \"JDBC driver loaded\"");
    }

}