«
»

Getting Started with the PureMVC Startup Manager – Part 3

Preparing the View

We are almost there. In the final step of this tutorial we will be creating a very simple view:

  1. Create a file with the name StageMediator.as in the view folder.
  2. Create a new folder inside the view folder and call it components.
  3. Create two files in the components folder and name them SectionView.as and TitleView.as.


Here’s an updated screenshot of the project panel:

Project Panel

Both view components are not PureMVC-specific. Their only purpose is to display the CSS-formatted content from the XML file. The code of the view components is shown here without any comments.

TitleView

  1. package com.log2e.puremvcdemo.view.components
  2. {
  3.    import flash.display.Sprite;
  4.    import flash.text.StyleSheet;
  5.    import flash.text.TextField;
  6.    import flash.text.TextFieldAutoSize;
  7.  
  8.    public class TitleView extends Sprite
  9.    {
  10.       private var _title:String;
  11.       private var _css:StyleSheet;
  12.       private var _titleTextField:TextField;
  13.    
  14.       public function TitleView( title:String, css:StyleSheet )
  15.       {
  16.          _title = title;
  17.          _css = css;
  18.  
  19.          _titleTextField = new TextField();
  20.          _titleTextField.autoSize = TextFieldAutoSize.LEFT;
  21.          _titleTextField.x = 20;
  22.          _titleTextField.y = 20;
  23.          _titleTextField.width = 350;
  24.          _titleTextField.wordWrap = false;
  25.          _titleTextField.multiline = false;
  26.          _titleTextField.styleSheet = _css;
  27.          _titleTextField.htmlText = '<p class="title">' + _title + '</p>';
  28.      
  29.          addChild( _titleTextField );
  30.       }
  31.  
  32.    }
  33. }

SectionView

  1. package com.log2e.puremvcdemo.view.components
  2. {
  3.    import flash.display.Sprite;
  4.    import flash.text.StyleSheet;
  5.    import flash.text.TextField;
  6.    import flash.text.TextFieldAutoSize;
  7.    import com.log2e.puremvcdemo.model.vo.SectionVO;
  8.  
  9.    public class SectionView extends Sprite
  10.    {
  11.       private var _sectionVO:SectionVO;
  12.       private var _css:StyleSheet;
  13.       private var _labelTextField:TextField;
  14.       private var _contentTextField:TextField;
  15.    
  16.       public function SectionView( sectionVO:SectionVO, css:StyleSheet )
  17.       {
  18.          _sectionVO = sectionVO;
  19.          _css = css;
  20.  
  21.          _labelTextField = new TextField();
  22.          _labelTextField.autoSize = TextFieldAutoSize.LEFT;
  23.          _labelTextField.x = 20;
  24.          _labelTextField.y = 60;
  25.          _labelTextField.width = 350;
  26.          _labelTextField.wordWrap = false;
  27.          _labelTextField.multiline = false;
  28.          _labelTextField.styleSheet = _css;
  29.          _labelTextField.htmlText = '<p class="label">' + _sectionVO.label + '</p>';
  30.    
  31.          _contentTextField = new TextField();
  32.          _contentTextField.autoSize = TextFieldAutoSize.LEFT;
  33.          _contentTextField.x = 20;
  34.          _contentTextField.y = 90;
  35.          _contentTextField.width = 350;
  36.          _contentTextField.wordWrap = true;
  37.          _contentTextField.multiline = true;
  38.          _contentTextField.styleSheet = _css;
  39.          _contentTextField.htmlText = _sectionVO.content;
  40.    
  41.          addChild( _labelTextField );    
  42.          addChild( _contentTextField );
  43.       }
  44.  
  45.    }
  46. }

The StageMediator

An instance of the StageMediator class has already been created and registered with the application inside the StartupCommand (see part 2):

  1. …
  2. var stage:Stage = note.getBody() as Stage;
  3. facade.registerMediator( new StageMediator( stage ) );
  4. …

The role of the StageMediator is to initialize the view once all resources have been loaded successfully. In a real-world project you would probably want to display some state information on the loading progress before creating the main view. To simplify things, we will be sending this information to the output panel using trace().

In our sample project the StageMediator not only declares an interest in the “Loaded” and “Failed” notifications for each resource, it also listens to various other notifications that are automatically sent by the monitor.

  1. package com.log2e.puremvcdemo.view
  2. {
  3.    import com.log2e.puremvcdemo.model.vo.SectionVO;
  4.    import com.log2e.puremvcdemo.view.components.TitleView;
  5.    import flash.display.Stage;
  6.    import org.puremvc.as3.interfaces.IMediator;
  7.    import org.puremvc.as3.interfaces.INotification;
  8.    import org.puremvc.as3.patterns.mediator.Mediator;
  9.    import org.puremvc.as3.utilities.startupmanager.model.StartupMonitorProxy;
  10.    import com.log2e.puremvcdemo.ApplicationFacade;
  11.    import com.log2e.puremvcdemo.model.StyleSheetProxy;
  12.    import com.log2e.puremvcdemo.model.SiteDataProxy;
  13.    import com.log2e.puremvcdemo.view.components.SectionView;
  14.  
  15.    public class StageMediator extends Mediator implements IMediator
  16.    {
  17.       public static const NAME:String = "StageMediator";
  18.       private var _styleSheetProxy:StyleSheetProxy;
  19.       private var _siteDataProxy:SiteDataProxy;
  20.  
  21.       public function StageMediator( viewComponent:Object )
  22.       {            
  23.          super( NAME, viewComponent );        
  24.       }
  25.  
  26.       override public function listNotificationInterests():Array
  27.       {
  28.          return  [    
  29.                      StartupMonitorProxy.LOADING_PROGRESS,
  30.                      StartupMonitorProxy.LOAD_RESOURCE_TIMED_OUT,
  31.                      StartupMonitorProxy.LOADING_COMPLETE,
  32.                      StartupMonitorProxy.LOADING_FINISHED_INCOMPLETE,
  33.                      StartupMonitorProxy.CALL_OUT_OF_SYNC_IGNORED,
  34.                      StartupMonitorProxy.LOAD_RESOURCES_REJECTED,
  35.                      ApplicationFacade.STYLE_SHEET_LOADING,
  36.                      ApplicationFacade.STYLE_SHEET_LOADED,
  37.                      ApplicationFacade.STYLE_SHEET_FAILED,
  38.                      ApplicationFacade.SITE_DATA_LOADING,
  39.                      ApplicationFacade.SITE_DATA_LOADED,
  40.                      ApplicationFacade.SITE_DATA_FAILED
  41.                   ];
  42.       }
  43.  
  44.       override public function handleNotification( note:INotification ):void
  45.       {
  46.          switch ( note.getName() )
  47.          {
  48.             case ApplicationFacade.STYLE_SHEET_LOADING:
  49.                trace( "Loading StyleSheet…" );
  50.                break;
  51.             case ApplicationFacade.STYLE_SHEET_LOADED:
  52.                trace( "StyleSheet Loaded" );
  53.                break;
  54.             case ApplicationFacade.SITE_DATA_LOADING:
  55.                trace( "Loading Site Data…" );
  56.                break;
  57.             case ApplicationFacade.SITE_DATA_LOADED:
  58.                trace( "Site Data Loaded" );
  59.                break;
  60.      
  61.             case StartupMonitorProxy.LOAD_RESOURCES_REJECTED:
  62.             case StartupMonitorProxy.CALL_OUT_OF_SYNC_IGNORED:
  63.                trace( "Abnormal State, Abort" );
  64.                break;
  65.             case StartupMonitorProxy.LOADING_PROGRESS:
  66.                var perc:Number = note.getBody() as Number;
  67.                trace( "Loading Progress: " + perc + "%" );
  68.                break;
  69.             case StartupMonitorProxy.LOADING_COMPLETE:
  70.                trace( ">>> Loading Complete" );
  71.                initializeView();
  72.                break;
  73.             case StartupMonitorProxy.LOADING_FINISHED_INCOMPLETE:
  74.                trace( "Loading Finished Incomplete" );
  75.                break;
  76.          }
  77.       }
  78.  
  79.       private function initializeView():void
  80.       {
  81.          _styleSheetProxy = facade.retrieveProxy( StyleSheetProxy.NAME ) as StyleSheetProxy;
  82.          _siteDataProxy = facade.retrieveProxy( SiteDataProxy.NAME ) as SiteDataProxy;
  83.    
  84.          var titleView:TitleView = new TitleView( _siteDataProxy.title, _styleSheetProxy.css );
  85.          stage.addChild( titleView );
  86.    
  87.          var sectionVO:SectionVO = _siteDataProxy.sections[0];
  88.          var sectionView:SectionView = new SectionView( sectionVO, _styleSheetProxy.css );
  89.          stage.addChild( sectionView );
  90.       }
  91.  
  92.       public function get stage():Stage
  93.       {
  94.          return viewComponent as Stage;
  95.       }
  96.  
  97.    }
  98. }

Lines 29-34: These notifications are generated by the monitor. For more details please refer to the StartupMonitorProxy API documentation.

Lines 35-40: These notifications are generated inside the resource proxies.

Line 71: The main view is only initialized if all resources have been loaded.

And, finally, here’s the class that starts it all (Main.as):

  1. package
  2. {
  3.    import com.log2e.puremvcdemo.ApplicationFacade;
  4.    import flash.display.Sprite;
  5.    import flash.display.StageScaleMode;
  6.    import flash.display.StageAlign;
  7.  
  8.    public class Main extends Sprite
  9.    {
  10.       public function Main()
  11.       {
  12.          stage.scaleMode = StageScaleMode.NO_SCALE;
  13.          stage.align = StageAlign.TOP_LEFT;        
  14.          
  15.          var facade:ApplicationFacade = ApplicationFacade.getInstance();
  16.          facade.startup( this.stage );
  17.       }
  18.  
  19.    }
  20. }

Testing the Demo

If you run our sample app, you should see three textfields that display the content from the XML file, all nicely formatted:

Project Panel

The output panel should display the following lines (don’t be confused by the fact that the “Site Data Loaded” message is spit out after the “>>> Loading Complete” message):

Loading StyleSheet...
Loading Progress: 50%
Loading Site Data...
StyleSheet Loaded
Loading Progress: 100%
>>> Loading Complete
Site Data Loaded

Now, in order to test that the Startup Manager is working properly, you can, for example, rename one of the resource files (styles.css, data.xml). In either case the utility should display a “Loading Finished Incomplete” message.

Conclusion

I hope this three-parts tutorial helped you to use the PureMVC Startup Manager in your own PureMVC projects. This utility is an excellent addition to the PureMVC framework, it’s very flexible and can greatly support you to organize the loading of resources and to correctly handle errors that might occur during startup.

You can download the sample files from here (the ZIP archive includes a FlashDevelop project file). If you want to comment on this tutorial please post in the comments section at the end of the introductory post.

Tags: , , , ,

This entry was posted on Monday, May 19th, 2008 at 10:20 am and is filed under ActionScript, Flash, FlashDevelop, Flex, PureMVC. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

One Response to “Getting Started with the PureMVC Startup Manager – Part 3”

  1. Bildschirmsport » Blog Archive » Asynchrones Laden in PureMVC says:
    July 4, 2008 at 12:19 am

    [...] empfehle ich die 3-teilige Anleitung aus Stefan Schmalhaus’ log2e Blog: Teil 1, Teil 2 und Teil 3. Obwohl er laut Blog aus Krefeld kommt, sind diese Anleitungen allerdings in [...]