Saturday, July 19, 2008

Using JumpShip inside Flex. A roadmap.

Using JumpShip inside Flex. A roadmap.

All files can be found at: http://www.youbits.com/jumpship/FlexAndJumpShip.zip for your convenience the entire JumpShip Framework is also included.

        The JSDataModel and JSControllerBase can be used inside of an mxml document as they are. The only trick to using JumpShip in Flex is in using JSViewBase. 

JSViewBase extends Sprite in order to add the ability to add, remove and manipulate DisplayObject's to itself and have those DisplayObjects be part of the Display List. It extends Sprite as opposed to Flex's UIComponent so that it can be used in both Flash and Flex but this decision adds a small amount of complexity for the Flex developer since You can't attach a Sprite directly to most Flex components because all children of a Flex component must extend UIComponent. 

    There are several ways to get past this small annoyance, however. 

    First of all you should realize that you don't need to add JSViewBase to the the Display List in order to use it. JSViewBase is Just a mediator between your Model / Controller and a group of one or more components. It is meant to handle communication between other pieces of the MVC framework. This allows you to build components which don't have any code that is JumpShip Framework specific and wrap them in a JSViewBase instance which takes care of all of the interaction within JumpShip.

    You can create and use JSViewBase just as if it didn't extent Sprite by creating a new instance but not bothering to attach it to the display list. In this case the only thing you loose is the ability to use add components directly to JSViewBase and have them show up on the display list. Instead you would use JSViewBase to store references to it's components which would sit somewhere on the display list. An example of this is provided along with this post.

    Included is a demo Flex project that uses the JSViewBase as a mediator for the Flex compnents contained in the main application.

    Another way to use JSViewBase would be to wrap the class in a proxy component that extends UIComponent. The JSViewBase proxy would just pass all references straight to the JSViewBase instance and the rest of the JumpShip Framework would not know the difference. An example of a JSViewBase proxy class is provided as part of this post.

    A third solution is just to give up the utility function that JSViewBase provides and simply create a new Flex component that implements IView. Although you would loose some of the nicer things that JSViewBase provides, you may decide that those features aren't particularly useful to you anyway. Or you could implement a subset of the JSViewBase functionality in your new component. But as long as your component implements IView, it is capable of fully participating in the JumpShip Framework. Note that IView doesn't require that your implementation be a DisplayObject at all.

    Most MVC frameworks don't even attempt to provide a standard View implementation because as this article illustrates, it can be tricky to implement a View class flexible enough for everyone to use. But JumpShip attempts to go where other frameworks do not, realizing that there is value to establishing conventions even if those conventions get away on rare occasion. But I hope this article illustrates that what may seem like a barrier, really is no big deal when you understand the broader intentions of the JumpShip Framework.

All files can be found at: http://www.youbits.com/jumpship/FlexAndJumpShip.zip for your convenience the entire JumpShip Framework is also included.