Enyo 2.0 Replacement for V\HFlexBox control, to change views.

edited October 2012 in Newbie Questions
Hi All,

As enyo 2.0 does not have a V\HFlex box control, what is the ideal control to use when there are multiple views. Didn't find any sample or documentation on this, other than FittableRows\FittableColums which perform the same task of arranging the controls, but does it also provide a way to change the view.

If Panels is the control to be used i would like to know how do i pass along data from View 1 to View 2 while i am switching between them.

Thanks,
Errol

Comments

  • I've used Panels for that purpose. If your views are custom kinds, then you can use published properties or public methods to pass data. If the view is defined within the components array of the Panels instance, then you can setup that view from the owner of the Panels.

    As far as when to set that data, if you're controlling when the Panels changes views (by setting draggable=false), you can setup the view before calling Panels.setIndex. If the Panels is draggable (the default), you can handle the Panels onTransitionStart event to set up the destination view (identified by toIndex on the event object).
  • I think in Enyo 1, you're confusing V/HFlexBox with Panes. Like ryanjduffy said, I've used Panels where before I've used Panes. Here is an example of how I've arranged my views in a Panels kind:
    
    enyo.kind({
        name: "TouchFeeds.Main",
        kind: "FittableRows",
        classes: "app enyo-fit",
        components: [
            {name: "slidingPane", kind: "Panels", fit: true, arrangerKind: "CollapsingArranger", animate: false, components: [
                {name: "feeds", style: "width: 384px; height: 100%;", fixedWidth: true, components: [
                    {name: "feedsView", kind: "TouchFeeds.FeedsView", headerContent: "TouchFeeds", flex: 1, components: [], onFeedClicked: "feedClicked"}
                ]},
                {name: "articles", style: "width: 384px; height: 100%;", fixedWidth: true, components: [
                    {name: "articlesView", kind: "TouchFeeds.ArticlesView", headerContent: "All Items", flex: 1, components: []}
                ]},
                {name: "singleArticle", style: "height: 100%;", dragAnywhere: false, dismissible: false, components: [
                    {name: "singleArticleView", dragAnywhere: false, kind: "TouchFeeds.SingleArticleView", flex: 1, components: []},
                ]},
            ]}
        ]
        // etc.
    });
    
    So you see that the Main app kind is a FittableRows kind that arranges the Panels kind horizontally as a component.

    You can also see that I have custom view kinds. On each of these custom view kinds, I have published properties and events that control the direction of the app. The TouchFeeds.FeedsView kind has a "feedClicked" event that is called whenever the user clicks a feed in that view. This action loads articles for that view in the TouchFeeds.ArticlesView. Here's a basic overview of the essentials for both kinds:
    
    enyo.kind({
        name: "TouchFeeds.FeedsView",
        events: {
            onFeedClicked: ""
        },
        // etc.
        // following callback called when a feed is clicked
        feedItemClicked: function (sender, event) {
            this.doFeedClicked(this.feeds[event.index]);
        } 
    });
    
    enyo.kind({
        name: "TouchFeeds.ArticlesView",
        published: {
            articles: []
        },
        // etc.
        // following method called whenever articles change
        articlesChanged: function() {
            //load the articles in the view
        }
    });
    
    So you can see I set up events on the FeedsView, called whenever a feed is clicked. I also have articles as a published property in the ArticlesView, and whenever articles is changed, Enyo will call the articlesChanged method of the ArticlesView kind.

    To pass along data between the views, notice how in FeedsView, I pass a parameter to this.doFeedClicked(). This signals Enyo to trigger the feedClicked event and pass the feed that was clicked as an argument. In the Main kind, the feedClicked callback will receive this data from the FeedsView kind, do some processing, and then decide what data to pass to the ArticlesView kind. As you can see above, the callback for onFeedClicked on the FeedsView kind is named "feedClicked" in the Main kind. Here is the content of that callback:
    
    function feedClicked (event, feed) {
        // get articles for feed, store them in articles variable
        this.$.articlesView.setArticles(articles);
        this.$.slidingPane.setIndex(1);
    }
    
    You can see that the feedClicked callback will receive the event data as the first argument, and the feeds data that was passed back from FeedsView as the second argument. The feedClicked callback then does some processing on the data and calls setArticles() on the ArticlesView, which will trigger the articlesChanged method on the ArticlesView kind.

    You will also notice the setIndex line. When I click a feed, I want the ArticlesView to slide into view over the FeedsView. Since FeedsView is the 0th element in Panels and ArticlesView is the 1st element, I use setIndex(1) to tell Panels to change the view to ArticlesView. (NOTE: I call it slidingPane in the code just because I got used to calling it that from Enyo 1.)

    With the Panels kind and custom view kinds that have events and published properties, it's easy to pass data between kinds using the Main parent kind as a mediator, and it's easy to have the Main parent kind change the view depending on user actions.
Sign In or Register to comment.