This test has been setup to show the usage of two custom layout controllers along with mobile/SwapView and mobile/PageIndicator.

1) The DivIdBasedLayout will layout views by appending them inside the main template into the div with the id that matches the value set in the constraints for the view.

2) The ObjBasedLayout will layout views by appending them inside the main template into the div with the id that matches the "parentId" of the object set in the constraints for the view.

The ObjBasedLayout can handle a constraint object which can hold both a "parentId" and a "class" ( for example {"parentId":"swapView3Id", "class": "center"}).

The "parentId" will be used to position the view, and the "class" will be added to the domNode for the view, if one view should replace another view, the views must have the same "parentId" and "class".

The main.html which has the base layout with the divIds setup is the template used for the application.

There are 3 views shown in the SwapViews, they can be seen by swipping from the left to the right in the main content area, the Header and Nav area are also added to the main area by div id.

or by clicking the ListItem for Next, Previous or a specific view.

The 3 views shown in the SwapView are all loaded as part of the defaultView for the application..

The Header and Nav area are also added to the main area by div id.

The 3rd view will transition to a details view, which will add a Back button to return to this view, the swapViews are still active after the transition.

Some of the css from the mediaQueryLayout test is included, so on a desktop you can make the window smaller and the navigation area will become hidden when the screen gets less than max-width: 560px.