Dashcode: setCurrentViewWithTransition

I haven't offered much discussion of Dashcode or web development in this blog. I still remain convinced that it's a very viable method of iPhone app release, but it's not where my personal attention has been focused these last several months, and thus I've had much more opportunity to write about new SDK code than web extensions.

However, yesterday I got a Dashcode query, and I wanted to share the results.

Dashcode, of course, adds tons of functionality for web app developers, to the point where you can match the look-and-feel of a lot of pure SDK coding. We showed some of this off on on pp.137-138 of iPhone in Action where we explained how to use setCurrentView to allow a simple sliding transition. As is our wont, we also gave you a pointer to a more complex function, setCurrentViewWithTransition, even though our books didn't have space for that additional functionality. Today I'm going to explain that a bit more, since documentation of it online is lacking in any examples.

A setCurrentViewWithTransition Example

setCurrentViewWithTransition allows you to do change your view in Dashcode with much fancier transitions than simple slides. In order to use it, you must first create a "Transition" object, then pass that as an additional (second) argument to the setCurrentViewWithTransition method.

To create a transition, you'll send it three arguments: type, duration, and timing. Both type and timing are constants that can be found here, in the Dashcode documents under the "Stack Layout Transitions" section.

The type constant in particular lets you do a lot of cool stuff, like DISSOLVE, SWAP, and REVOLVE.

Here's an example of actually creating a transition, then applying it to setCurrentViewWithTransition. It's a variant of a function found in Listing 7.3, our Dashcode tab bar.

function gotoPageTwoFor(event)
{
  newTransition = new Transition(Transition.FLIP_TYPE,1,Transition.EASE_TIMING);
  document.getElementById('stackLayout').object.setCurrentViewWithTransition

    ('view2',newTransition,false);
}

That's it, a simple two-step process of creating the transition, then sending it as the second argument of setCurrentViewWithTransition.

Book Update: As of the current version of Dashcode, both setCurrentView and setCurrentViewWithTransition take an additional argument. The correct arg list for setCurrentView (updating what you see on p.137) is "View, Reverse, ToTop" while the correct arg list for setCurrentViewWithTransition is similarly "View, Transition, Reverse, ToTop".

The new "ToTop" variable is a boolean that says whether to scroll the new view to the top. If you omit it (as I did in the above example, to maintain clear consistency with the book example), Dashcode will do the right thing, but it's probably better to start using the updated function call.

Comments

[Mike Mayo]

I tried doing this, but no matter what I did, the transition was always the right to left slide. I was finally able to get it work by adding the following line before calling it:

document.getElementById('stackLayout').object._restrictedBrowserTransition = null;

But I know it's not a good idea to mess with "private" members :(