23 Comments

1. Thanks for this, it’s helping a ton with getting accustomed to mate.

   I’m having one problem though, I grabbed the source off svn, set it up as an air app in flex, cleaned and built it. It runs great, but I’m trying to take a look at everything in design mode and I get the following error:

   Design mode: Cannot load SuperImage.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode.

   This occurs with all of the swc files. Have you bumped into this before? I’m not sure if it’s mate or the way this app is organized, or even if it’s just a flex quirk.

   Thanks again Tim, it’s a really great sample app.

   Comment by ZachG — June 10, 2009 @ 12:04 pm

2. Tim,
   Thanks a lot for sharing this nice application. It is a great contribution and you really help beginners like me to learn a bit more every day and towards the right direction. You and all Mate developers and community members deserve all my respect and gratitude.

   Comment by Toni Cruces — June 10, 2009 @ 12:12 pm

3. Hi Zach,

   Sometimes swc file components don’t show in design view. I haven’t had a problem with this myself, because I don’t ever use the design view. Instead, I layout everything in code. I do this mainly because the code that design view creates is very poorly formatted and hard to read. The only thing that you could do to avoid this is to go to the various sites at the bottom of the post and get the source code. I used this code to create swc files for this sample, so that the only code that was visible was for the example itself. Sorry that I can’t offer a better work-around for you.

   -TH

   Comment by TimHoff — June 10, 2009 @ 12:41 pm

4. Hey Tim,
   Oh well, thanks for the quick reply.
   -Zach

   Comment by ZachG — June 10, 2009 @ 1:03 pm

5. Hey Tim,

   I’m just going through the code here, trying to get a good understanding of how this whole thing works.
   Couple of questions:
   -How does the Main.mxml instantiate the MainPresentationModel? Is this a mate thing, and is it occuring in the MainMap because a FlexEvent.PREINITIALIZE is getting fired? If so, where is that getting fired from?
   -What’s the purpose of the [transient] tag for the isFavorite property in VideoVO?
   -What’s the proper process to go about skinning an application like this? I know that’s a massive question, but would I go and skin it in, say a different project, where I have the design mode working and I can see the skin as I’m working on it? There would be a lot of guess and check if I just straight up did it through code, and I can’t help but see that as inefficient.

   Thanks!

   Comment by ZachG — June 11, 2009 @ 7:30 am

6. -How does the Main.mxml instantiate the MainPresentationModel?

   All of the presentation models are instantiated in the maps; using the ObjectBuilder tag in the FlexEvent.PREINITIALIZE event handler. This event is dispatched when the application is finished loading. So, Main.mxml instantiates MainMap, which in turn instantiates MainPresentationModel; which is then injected back to Main.mxml. Typically, all of the maps would be instantialted in the Application class, because the FlexEvent.PREINITIALIZE event isn’t available to maps that aren’t immediately instantiated. In this case though, the splash screen presented some interesting challenges.

   -What’s the purpose of the [transient] tag for the isFavorite property in VideoVO?

   Many times the VO’s need to map to a class in the middle tier; in order to utilyze strongly typed serialization/de-serialization with RemoteObject. The transient meta data (decorator pattern) allows you to add properties to a VO that are only used by the ui, and are not sent back to a server. For this application, there isn’t an isFavorite field in the database for any of the tables; because they are all favorites. However, I wanted to be able to indicate if items returned by a search were already favorites, and display the common itemRenderers appropriately.

   -What’s the proper process to go about skinning an application like this?

   Big question. I used minimal skinning for this application, in order to stay with the Google theme as much as possible. However, I did use Degrafa for skinning some of the controls; as well as some programmatic skins and CSS. You can check out the Flex Style Explorer for an easy way to visually create CSS. Flex4 and Catalyst will make this workflow much more user friendly and efficient.

   -TH

   Comment by TimHoff — June 11, 2009 @ 9:33 am

7. wow that’s extremely helpful.

   Another question for ya
   In MainPresentationModel, the initNavigationItems method calls initNavigation in a MainViews object, which sets a bunch of VO’s and adds them to an ArrayCollection. I’m just a bit confused about the use of the MainViews class in this application.

   Comment by ZachG — June 11, 2009 @ 11:31 am

8. The MainViews, SearchViews and FavoritesViews classes are used to abstract the navigation properties. In MainPresentationModel, the MainViews.initNavigation method is called to set the currentView to the default view, and to populate the navigationItems ArrayCollection; a collection of NavigationVO’s. The currentView and navigationItems references are passed in and updated as arguments for the method. The navigationItems AC is then bound to the GMToggleLinkBar dataProvider in Header.mxml. The NavigationVO’s contain properties that control the LinkButton labels and navigation action to perform when a link is clicked; including which ViewStack selectedIndex to update. Look at what happens on itemClick and follow the trail.

   -TH

   Comment by TimHoff — June 11, 2009 @ 11:43 am

9. oooohhhhh. That makes total sense.

   alright so you rock. It’s official.

   Cheers eh!

   Comment by ZachG — June 11, 2009 @ 11:56 am

10. [...] Google Mate Adobe AIR, Adobe Flex, Degrafa, Google AS3 API, Mate Framework air, Degrafa, efflex, flex, Google AS3 API, Mate Framework [...]

    Pingback by Google Mate projekt | Ivan Ilijasic.com | Web i tome slično... — June 11, 2009 @ 11:27 pm

11. hi there… nice application.

    im using Mate and trying to create an applicatoin that also utiliises the presentaion model. I have struggled to get my head around the ‘flow’ of the application and what binds what etc….

    I was hoping you could knock up a diagram of the applicatin that you created, just for some reference while i look into your source?

    Thanks

    Comment by jbuda — June 12, 2009 @ 3:10 am

12. Hi jbuda,

    I don’t have the time to make a diagram right now, but below are some quotes from Nahuel Foronda; that might help you wrap your head around Presentation Models and Managers. My advice is to study the Maps. They wire everything up with object builders, event handlers and injectors. For the bindings, just look at a view to determine which presentation model it uses. Then go to the associated map to see how the properties are injected from a manager into the presentation model. The basic flow is:

    Service Call Result –> Manager –> Presentation Model –> View.

    All of this is handled via events and injection in the maps.

    -TH

    Quotes from Nahuel Foronda:

    Presentation Model: Presentation models act as mediators between the application and the view and contain all view logic. They insulate the view from the specifics of the application by presenting a simple, view-centric interface of the model to the view. For example, if a view should display the details of an employee, instead of handing the Employee object directly to the view the presentation model presents an interface containing the properties name, phone and email. Behind the scenes the name property is created by concatenating the firstName and lastName properties of the Employee object. The view calls methods on the presentation model, and the presentation model translates these method calls into actions that the application understands.

    Manager: A manager keeps track of model objects and provides a transactional interface for working with the model. It’s not quite as simple as one manager for each kind of model object, in some situations there might be managers that don’t handle model objects at all, or two managers handling objects of the same kind, it depends.

    Manager vs. Presentation Model: Managers are the model, they keep track of model objects, modify them and move them around. Presentation models adapt the model for views. In some ways managers and presentation models are similar, they keep track of objects and present an interface for working with these objects — and to the view, its presentation model is the model. It doesn’t know anything beyond. You also can think a manager as a global model that it is shared by multiple PM/Views. But usually the PM is only used by a view (in some cases, they can be used by multiple small views that are part of a bigger view).

    For example, you can have a SessionManager that is used by different presentation models and also each of those PMs may have other data that is coming from other manager. The SessionManager just has the logic to deal with the sessions, but the PM is there to recollect and massage the data from different managers to expose an interface to the view. For the view, the PM is the only thing that it cares about.

    You can bind directly from multiple managers to the view (via injection) and avoid the PM, but in the end, we found that the best is to have a PM that helps the view, unless that the view is super super simple.

    Comment by TimHoff — June 12, 2009 @ 9:16 am

13. thats brilliant tim, thanks

    Comment by jbuda — June 12, 2009 @ 1:49 pm

14. Nice post. I’ll definitely be checking out the Air app and the SQLite code that you’ve included

    One question relating to the PM - I’ve used that in a Mate/Flex project which i’ve worked on and noticed a good deal of duplication of code. For instance, the following block of code is duplicated in your VideosManager and your VideosPresentationModel:

    private var _searchResults:ArrayCollection = new ArrayCollection();

    [Bindable( event="searchResultsChange" )]
    public function get searchResults():ArrayCollection
    {
    return _searchResults;
    }

    public function set searchResults( value:ArrayCollection ):void
    {
    var oldValue:ArrayCollection = _searchResults;
    if ( oldValue != value )
    {
    _searchResults = value;
    dispatchEvent( new Event( “searchResultsChange” ) );
    }
    }

    I’m not sure I see a good way to reduce duplication when you’re just basically injecting properties from the Manager to the PM, but was wondering if anyone else had any thoughts on the matter?

    Comment by Jason Langdon — June 12, 2009 @ 6:14 pm

15. Thanks for the comment Jason,

    There is going to be some duplication in a manager and a presentation model; specifically the properties that you want to inject. In order to keep the managers and presentation models self-contained and re-usable, it makes sense to have corresponding properties in both places; that are injected. However, as long as the injected properties are the same type (ArrayCollection, Boolean, etc…), they don’t have to be identical; the targetKey and sourceKey of a PropertyInjector can be different. I chose to make them identical for this sample, so that it would be easy to follow the injection. If you wanted to use [Bindable] public var, instead of getter/setter, that would reduce the amount of byte-code. I choose getter/setter though, for performance and unit testing benefits.

    Another thing to point out is that injection is one-way; not a reference. I think of it as the presentation model having an instance of the model object in the manager. If you change a model object in a presentation model, it does not automatically change the corresponding model object in the manager; that was injected. This comes in very handy when dealing with CRUD and multi-instance views.

    Any other thoughts are more than welcome.

    -TH

    Comment by TimHoff — June 12, 2009 @ 7:06 pm

16. I really like your post. Does it copyright protected?

    Comment by Kelly Brown — June 12, 2009 @ 8:49 pm

17. Thanks Kelly,

    The project is open source - license: Mozilla Public License 1.1. I should say though, that this sample application is for example purposes exclusively, and is not intended to be used as a commercial software product.

    -TH

    Comment by TimHoff — June 13, 2009 @ 10:06 am

18. Hi, gr8 post thanks for posting. Information is useful!

    Comment by JaneRadriges — June 13, 2009 @ 12:47 pm

19. The article is usefull for me. I’ll be coming back to your blog.

    Comment by KattyBlackyard — June 14, 2009 @ 9:13 pm

20. I think I will try to recommend this post to my friends and family, cuz it’s really helpful.

    Comment by GarykPatton — June 15, 2009 @ 6:53 pm

21. Hi! I like your srticle and I would like very much to read some more information on this issue. Will you post some more?

    Comment by KonstantinMiller — July 6, 2009 @ 11:25 am

22. Hello! Thanks for the post. It is really amazing! I will definitely share it with my friends.

    Comment by CrisBetewsky — July 6, 2009 @ 12:22 pm

23. @KonstantinMiller,

    Thanks, yes I’ll be posting more in the future. In the mean-time, there’s a lot of great information on the asfusion site.

    -TH

    Comment by TimHoff — July 6, 2009 @ 6:25 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.