Determine and Dynamic Change a View in Stacklayout

Recently, I've been doing quite a bit of mobile development using client side code. One fantastic, but poorly documented IDE (come-on Apple!) is Dashcode. The tool can assist with event handling, layouts, standard UI components, etc. It is a simplistic tool and can be confusing. Relying on it for complex tasks can be challenging, however.

One often needed event in mobile web development is a way to flip views easily in a Stacklayout. There are various ways this can be accomplished through hardcoding buttons, and so forth. Making a back and forward card flip button is much more interesting.

Through two JavaScript functions  the onclick events can be handled and we have a dynamic view change function. To start, attach a function name of your choosing to any object on screen. For the forward or right button view change I use rBtn_onclick as the function name.

The function works by looping an array of all the views, comparing it to which current view we are on and then presenting the user with the next one in the array.
function rBtn_onclick(event) {    var views = document.getElementById('stackLayout');    for (var i=0;i<views.object.getAllViews().length;i++)    {        if (views.object.getAllViews()[i] == views.object.getCurrentView())          var next = views.object.getAllViews()[i+1];    }    if (views && views.object && next) {       views.object.setCurrentView(next);    } }

The left navigation button is similiar but just displays the .getAllViews()[i-1]. An interesting notation here, if you are using transitions for your view changes there is an additional parameter that can be added to .setCurrentView(). Change this line in left navigation       views.object.setCurrentView(next); To this to reverse the transitions       views.object.setCurrentView(next, 'reverse'); Also, be sure and trap your (< 0) and (> length) in the code. Enjoy!