Installation Guide by Rico Schneider

• Back to Top

Downloads

Download Adobe Flex 3.3 SDK

Download the Adobe Flex 3.3 SDK and the Adobe Flex 3.3 Data Visualization Components from the Adobe download page http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk and store both download files on your desktop. We need the Data Visualization Components because the PureMVC Console uses the AdvancedDataGrid component.

Download PureMVC Standard for AS 3

Download the PureMVC Standard Framework from the web page http://trac.puremvc.org/PureMVC_AS3/wiki/Downloads and store the download file on your desktop. Remember this documentation is using the standard or simple versions from the PureMVC and PureMVC Console framework, only.

Download PureMVC Console

Download the PureMVC Console from the web page http://lab.kapit.fr/display/puremvcconsole/PureMVC+Console and store the download file also on your desktop.

• Back to Top

Installation

Extract the downloaded zip files into the folders, who are listed below. The further documentation is based on these folders. If you don't want to install the libraries into the folder D:\Libraries\flex you can use your own installation folder.

Setup FDT Workspace

After opening your Eclipse IDE with the FDT plugin or your standalone FDT IDE you have to switch to the 'Flash FDT' perspective. If you are in another perspective select in the menu bar Window ? Open Perspective ? Other.... Please select 'Flash FDT' in the next window 'Open Perspective' and press the OK button. These steps are shown in the following two pictures.

• Back to Top

Add the Flex SDK 3.3 to the FDT AS3 Core Libraries

Select Window ? Preferences and open the FDT item. Select the subitem Core Libraries as shown below.

Click at the Add... button and do the following steps:
Step 1: select the type 'Flex 3 SDK' in the window 'Core Library'
Step 2: type in the name input field the name 'Flex_3_SDK_3_3_0_4852'
Step 3: click at the Browse... button
Step 4: click at the New... button
Step 5: type in the Name input field the name 'Flex_3_SDK_3_3_0_4852'
Step 6: click at the Folder... button
Step 7: select the folder D:\Libraries\flex\sdk\3.3.0.4852
Step 8: click at the OK button from the window 'Folder selection'
Step 9: click at the OK button from the window 'Edit Variable'
Step 10: click at the OK button from the window 'Linked Libraries'

Now you see the following window 'Core Library.

Close the window 'Core Library' with the OK button. At this point you've added the new Flex 3.3 SDK. Close the Preferences window with the OK button.

• Back to Top

Create the Flash Project

Select in the menu bar File ? New ? New Flash Project. The example project has the name webshop. Change the select box under the project language from the standard entry CS3 to Flex_3_SDK_3_3_0_4852.

Click the Next button. Then we have to add three libraries to the webshop project. Click at the button 'Add Linked Libraries...'. Then click on the Add button. Now we do three times nearly the same.

Step 1: Add the datavisualization.swc

• click at the 'New...' button
• type in the Name field the name datavisualization
• click at the 'File...' button
• select the swc file
  D:\Libraries\flex\sdk\3.3.0.4852\frameworks\libs\datavisualization.swc
• press the 'Open' and the 'OK' button

Step 2: Add the PureMVC_AS3_2_0_4.swc

• click at the 'New...' button
• type in the Name field the name puremvc
• click at the 'File...' button
• select the swc file
  D:\Libraries\flex\puremvc\2.0.4\PureMVC_AS3_2_0_4\bin\PureMVC_AS3_2_0_4.swc
• press the 'Open' and the 'OK' button

Step 3: Add the PureMVCConsole.swc

• click at the 'New...' button
• type in the Name field the name puremvcconsole
• click at the 'File...' button
• select the swc file
  D:\Libraries\flex\puremvcconsole\1.0.1\PureMVCConsole.swc
• press the 'Open' and the 'OK' button

In the window 'Linked Libraries' select all three libraries datavisualization, puremvc and puremvcconsole and press the OK button.

Press the Finish button to close the window 'New Linked Libraries'. After that you close the window 'New Flash Project' with the Finish button.

Now the Flash Explorer looks like this...

• Back to Top

Create the PureMVC Basic Project Structure

I've added a PureMVC basis project structure to the example webshop project. The main mxml file is webshop.mxml. The webshop.mxml only defines the StageView view component. The StartupCommand is called from the startup notification. Into the StartupCommand I add only the two sub commmands ModelPrepCommand and ViewPrepCommand.

Now run your PureMVC Project without the PureMVC Console. If the project runs without any compilation errors, we will add the PureMVC Console.

• Back to Top

Integrating PureMVC Console

First we add a new ActionScript class named SwitchFacade into the package folder de.schneiderwebanwendungen.apps.webshop. The SwitchFacade file is in the same package like the ApplicationFacade.

Insert the following ActionScript lines of code into the SwitchFacade class:

package de.schneiderwebanwendungen.apps.webshop {

  import fr.kapit.puremvc.as3.patterns.facade.DebugFacade;
  import org.puremvc.as3.interfaces.IFacade;
  import org.puremvc.as3.patterns.facade.Facade;
  
  // Release version of the facade, extends Facade class from PureMVC 
  // CONFIG::release
  /**
  public class SwitchFacade extends Facade implements IFacade {
    public function SwitchFacade():void {
      super();
    }
  }
  **/

  // Debug version of the facade, extends DebugFacade class from PureMVCKapit
  // CONFIG::debug
  public class SwitchFacade extends DebugFacade implements IFacade {
    public function SwitchFacade():void {
      super();
    }
  }
}

In the next step you add the new SwitchFacade class as base class into the ApplicationFacade class. Please change the line ApplicationFacade extends Facade to ApplicationFacade extends SwitchFacade.

Now you have to add the PureMVC Console to your main stage. Open your main mxml file webshop.mxml and add the line <kapit:PureMVCConsole />.

Now you've to add the new namespace kapit to your application with xmlns:kapit="fr.kapit.*" into the application tag.

Now you're just two steps before the finish. Run the webshop project and after creation press the keys Ctrl + ALT + F6 to open the PureMVC Console.

• Back to Top