Panes

A Pane is a control designed to host a set of views and show one view at a time. Any view may be selected and shown as needed. When a view is selected, it animates into display based on the type of transition specified in the transitionKind property. By default, views fade in. To specify a pane with views that fly in, do this:

{kind: "Pane", transitionKind: "enyo.transitions.LeftRightFlyin", components: [
  {kind: "mainView"},
  {kind: "otherView"}
]}

While a view may be any kind of control, views are typically complex collections of controls. Therefore it's often convenient to create a kind for each view, as in the example above. Also note that each view will be sized to fit the dimensions of the pane.

By default, the first view is selected (displayed). There are several ways to select views; use whichever method is most convenient for the application. You may select a view by reference...

this.$.pane.selectView(this.$.otherView);

by name...

this.$.pane.selectViewByName("otherView");

or by index.

this.$.pane.selectViewByIndex(1);

Pane also maintains a history list of views that have been selected. This list may be navigated using the back and next methods.

Frequently, an application will need to retrieve information about the currently selected view. A pane's view property is a reference to the currently selected view. The getViewName and getViewIndex methods return the name and index of the selected view, respectively.

The onSelectView event fires whenever the selected view changes. For example:

{kind: "Pane", onSelectView: "viewSelected", components: [
  {kind: "mainView"},
  {kind: "searchView"}
]}

In the following example, we stop search processing when the search view is hidden:

viewSelected: function(inSender, inView, inPreviousView) {
  if (inPreviousView.name == "searchView") {
      this.cancelSearch();
  }
}

Pane also supports a performance-enhancing optimization that can defer the creation of views until they are selected. To enable this optimization for a given view, set its lazy property to true:

{kind: "Pane", components: [
  {kind: "mainView"},
  {kind: "otherView", lazy: true}
]}

You must use selectViewByName to select a view that has not yet been created:

this.$.pane.selectViewByName("otherView");

It's also possible to verify that a lazy-marked view has been created without selecting it, by calling validateView(inName).

Published Events

viewSelected: function(inSender, inView, inPreviousView) {
    inView.startProcessing();
    inPreviousView.endProcessing();
}

paneCreateView: function(inSender, inName) {
    if (inName == "searchView") {
        this.$.pane.createComponent({kind: "searchView", owner: this});
    }
}

Methods

back(e)

Pane maintains a history of selected views in the history property. The back method selects the previous view in the history.

getView()

Returns the currently selected view.

getViewIndex()

Returns the index of the currently selected view.

getViewName()

Returns the name of the currently selected view.

next()

Pane maintains a history of selected views in the history property. The next method selects the next view in the history. This method is typically called in conjunction with back.

selectView(inView, inSync)

Selects the view specified by the inView reference and fires the onSelectView event. Set inSync to true to ensure that the view is selected synchronously.

selectViewByIndex(inIndex, inSync)

Selects the view with the index inIndex and fires the onSelectView event. Set inSync to true to ensure that the view is selected synchronously.

selectViewByName: function(inName, inSync)

Selects the view with the name inName and fires the onSelectView event. Set inSync to true to ensure that the view is selected synchronously.

validateView(inName)

Checks whether the view specified by inName exists. If it does not exist, attempts to create the view by name from the list of lazy-marked views. If the view is not found, fires the onCreateView event, which can be implemented to dynamically create a view by name.