18 Responses to “Bumpslide App Template”

1. Tyler Craft Says:
   November 9th, 2008 at 7:43 pm

   Thanks for putting this out. Your bindable model has made my actionScript life a much happier one!

2. Gil Says:
   November 17th, 2008 at 3:53 am

   Great template. Thanks for sharing!
   As far as the ui package goes, I was wondering if you would consider removing the tweening code from at least BaseClip, if not all of the ui. This would make the components lighter and not penalize us for using a different tweener….

   There could be external static hooks instead, like how you initialized DisplayShortcuts?

3. david Says:
   November 17th, 2008 at 12:25 pm

   @Gil, the tweener stuff is only being used in the fadeIn/fadeOut functions which are in turn used by the hide/show methods of BaseClip. This class has become a place for shortcut methods like that. I agree that in this case, it’s not worth the dependency. Thanks for calling me out on that. For now, that’s pretty easy to comment out, but I do feel your pain, so I’ll move those functions to a static utility elsewhere. I’m not using Tweener anywhere else. FTween, however, is a core piece used in my grid and scroll panels as well as the drag and zoom behaviors. This will still be required.

4. Ben McMaster Says:
   November 19th, 2008 at 12:04 pm

   David! This is awesome. It is cool to see more examples of how you use the code.

   I have a question, I thought I would post here so that more people could see… I was looking into grabbing variables from the URL. I came across this:

   http://evolve.reintroducing.com/2008/07/03/as3/as3-querystring/

   I have been poking around the new App Template and I would like to stay true to the Bumpslide way… What do you use to get the vars from the URL?

5. david Says:
   November 19th, 2008 at 12:35 pm

   @Ben – Yes, you can grab url params via external interface, but this class needs some checks in place for when external interface is not available.

   I use SWFObject’s utility functions (swfobject.getQueryParamValue) or PHP to pass query string values to the swf via flashvars (loaderInfo.parameters). In my applications, flashvars are parsed by the Config class, an instance of which is stored in the Model. Then, all run-time settings are in model.config which is created either in a startup command or by the controller directly before the main view is instantiated. The Config class has default settings in place that are applied whenever running the swf in a context where flashvars are not available (ex: ‘Test Movie’). Overall, I think this is a more elegant and flexible approach than relying on ExternalInterface, but I’m sure there are cases where that could be necessary. Thanks for the link.

6. david Says:
   January 21st, 2009 at 1:42 am

   Updated: To followup on the tweening issue, the show/hide methods are no longer included in BaseClip. Thus, there is no longer a tweener dependency. The fadeIn/fadeOut shortcuts are now static methods in com.bumpslide.tween.Fade.

   On a similar note, I have added “_autoAlpha” support to FTween, and there are new FTween shortcuts fadeIn, fadeOut that make use of these.

7. Ben Says:
   January 21st, 2009 at 2:50 pm

   So I am looking at the model. I see that you hard coded Home, News, and Puppies into model.sections and into the const array SECTION_PATH_NAMES. I want to pull that data from an external source.

   In previous Bumpslide projects I have called service.loadSiteXML(); in the very beginning of MainView. I guess now I am confused as the best way for the model to get the data in it’s constructor… Or do I even need that?

   Here is what I am currently thinking:

   1. MainView init call service.loadSiteXML();
   2. Main View: bind model.sections
   3. service.loadSiteXML: fills the model.sections array with the section headers from the XML file
   4. MainView: sections setter calls function to build the rest of the site?
   5. Then use model.sections in place of SECTION_PATH_NAMES?

   What do you think? What would be the best way to get the section names into the model?

8. david Says:
   January 21st, 2009 at 3:11 pm

   Ben, this sounds like a fine approach. I would recommend doing this at startup before the views are initialized. Assuming you're not using commands, you can do something like this in your Controller's constructor after the service is initialized...

   PLAIN TEXT
   Actionscript:

   1. model.bind( 'sections', this, onSectionDataLoaded );

   And, comment out that call to notifyComplete. We will then call that inside the onSectionDataLoaded function.

   PLAIN TEXT
   Actionscript:

   1. function onSectionDataLoaded(sdata:*):void {
   2.   notifyComplete();
   3. }

   Now your main view initialization (AppRoot.initView) will not be called until the site config XML is loaded.

   These days, I'm using the command pattern quite often, and in this case your controller would extend FrontController, and you would have something like this in your Controller's constructor instead of the Service proxy init stuff.

   PLAIN TEXT
   Actionscript:

   1. // register commands
   2. addCommand( AppCommand.START_OVER, StartOver );
   3. addCommand( AppCommand.LINK_ADVANCED, LinkAdvanced );
   4. addCommand( AppCommand.SELECT_MOVIE, SelectMovie );
   5. addCommand( AppCommand.STARTUP, Startup );
   6.  
   7. // notify callback when startup is complete
   8. var startupEvent:CommandEvent = new CommandEvent(
   9.     AppCommand.STARTUP, view, notifyComplete );
   10. startupEvent.dispatch();

   Notice that third param to the CommandEvent. That is an onComplete callback. This concept is borrowed directly from the UniversalMind cairngorm extensions.

   I guess it's time to make a new app template that includes commands.

9. Ben Says:
   January 22nd, 2009 at 4:41 pm

   I just tried your first suggestion. I am getting a Binding Error. Here is my code:

   PLAIN TEXT
   Actionscript:

   1. function Controller( appRoot:DisplayObjectContainer, callback:Function ) {
   2.            
   3.    view = appRoot;
   4.    _callback = callback;
   5.            
   6.    // pass flashvars to app configuration in model
   7.    model.config = new Config(getFlashVars());   
   8.            
   9.    // Bind model.sections
   10.    // Should wait for xml to be loaded to call notifyComplete()
   11.    model.bind( 'sections', onSectionDataLoaded );
   12.            
   13.    service.loadSiteXML();
   14. }
   15.        
   16. function onSectionDataLoaded(sdata:*):void {
   17.    trace("Calling notifyComplete()");
   18.    notifyComplete();
   19. }

   Then I got this error:

   [Binding Error] Error #1056: Cannot create property sections on builtin.as$0.MethodClosure.
   ReferenceError: Error #1056: Cannot create property sections on builtin.as$0.MethodClosure.
   at com.bumpslide.data::Binding/::executeBinding()
   at com.bumpslide.data::Binding$iinit()
   at com.bumpslide.data::Binding$/create()
   at com.bumpslide.data::BindableModel/bind()
   at app::Controller$iinit()
   at app::AppRoot/app:AppRoot::onAddedToStage()

   Any thoughts?

10. david Says:
    January 23rd, 2009 at 12:45 am

    sorry, ben. I messed up. The binding needs to be like this.

    PLAIN TEXT
    Actionscript:

    1. model.bind( 'sections', this, onSectionDataLoaded );

    And, really, that onSectionDataLoaded handler will be receiving an Array, so you can type the sdata parameter as such. But, I guess you don't really need it here assuming you are updating the model from your service class.

    Code sample above has been updated.

11. Wayne Says:
    February 3rd, 2009 at 5:21 pm

    David, I'm finally getting around to trying out your template. One question, from an MVC newbie, I'm going to be integrating a preloader for assets based on XML content. I'm not sure how to fit the preload code into the startup sequence.. it's not exactly a view, but it has display elements. any advice or suggestions?

12. david Says:
    February 3rd, 2009 at 5:40 pm

    Wayne, if it has display elements, it's a view. Think of it like a top level section. Section 0 is asset loader. Section 1 is homepage, etc. Once you have your model and configs initialized, init your MainView and go to section 0. Section 0 should trigger a view where you can do your preloading and whatever you want. Once done, model.section=1. This should then take you to the homepage.

    A more robust approach... You could also have a flag in your model like assetsLoaded (boolean). If deep-linking to section 2 and assetsLoaded is false, go to section 0, and save a reference to your deep-linked path (model.requestedSection=2). Then, once assets are loaded, set model.assetsLoaded = true. In your assetsLoaded setter, if assetsLoaded is being set to true and model.requestedSection>1, model.section = model.requestedSection.

    The key to command-less MVC is to put logic in those bindable model setters. Have UI events trigger state changes on the model, and let the model sort things out. Model is the new controller.

    When this gets messy, start using commands to encapsulate business logic.

13. Wayne Says:
    February 3rd, 2009 at 6:16 pm

    Thanks, that helps a lot.

14. Ben McMaster Says:
    February 4th, 2009 at 2:39 pm

    David, I am using the ImageUtil. I am getting a type error, yet my code and your code looks fine to me...

    public function loadPic(url:String):void {
    loader.load( new URLRequest( url ), new LoaderContext( true ));
    loader.contentLoaderInfo.addEventListener(Event.INIT, onImageLoaded );
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
    addChild(loader);
    loader.x = 4;
    loader.y = 4;
    }

    private function onImageLoaded(event:Event):void{
    ImageUtil.resize(loader, 398, 398, false);
    }

    error:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.bumpslide.util::ImageUtil$/resize()
    at app.view::PagePic/app.view:PagePic::draw()
    at com.bumpslide.ui::Component/updateNow()

    I initialized the loader in the constructor.

    Thoughts?

15. Wayne Says:
    February 5th, 2009 at 2:37 pm

    David, sorry to be a bug! one more issue I'm having.. per this suggestion from you:

    "Then, once assets are loaded, set model.assetsLoaded = true. In your assetsLoaded setter, if assetsLoaded is being set to true and model.requestedSection>1, model.section = model.requestedSection."

    In my assetsLoaded setter I'm doing exactly this, to no avail. The strange thing is if I replace requestedSection with a literal value, (this.section = 2), it works. But trying to assign it to a variable value (this.section = this.requestedSection) doesn't work, even though the value will trace correctly.

    Any ideas on this?

16. david Says:
    February 5th, 2009 at 11:56 pm

    Ben, the problem here is that you're trying to resize the loader before it's loaded. Ok, the real problem is that when resizing a loader, the resize method resizes loader.content. The null reference error is coming when loader.content is null. I should put a check in there for that. Meanwhile, in your draw method, make sure the loader is loaded.

17. david Says:
    February 5th, 2009 at 11:59 pm

    Wayne, note that binding events don't fire unless the value actually changes. Beyond that, I'd have to see code.

18. freemind Says:
    March 28th, 2009 at 11:34 am

    cheers david!

    big thank u for the bumpslide library and the app template :)
    having a pureMVC background (always trying to use the appropriate
    approach for each project) i have to say your library is really cool ;)

    the things you mentioned regarding the command pattern sound
    interesting... would really appreciate an additional app template that
    uses commands to see how you implement the command pattern.

    keep up the good work!!