PDA

View Full Version : best practice for animating between "pages" of an app?



joeinjapan
23 Jun 2010, 3:05 AM
I looked through the examples and they seem to be pretty much single page webapps. I'd like to make something with multiple independent pages - for example a home screen with links to different sections, section pages, a help screen, an options screen.

What is the best practice for splitting up these different screens? (I'm guessing Ext.Panel?) Also, what is the best way to support animated transitions between pages? How are the controllers handled for these pages/views/whatever they're called?

There are follow up questions, too, that naturally spring to mind: presumably you'd rather not destroy the last viewed page, so that you can quickly go back. But if a user navigates through a long sequence of views, how does one control the buildup of those rendered pages?

Any examples of a "real" multi-page app? KitchenSink uses a single view and swaps out parts of it using this.setCard(...), which is undocumented.

TommyMaintz
24 Jun 2010, 10:40 AM
The best way to do this is creating a Panel with fullscreen: true and a layout of 'card'. Then you can call setCard(someCard) so switch between the different cards. The second argument to setCard is the animation you want to use. setCard is the preferred way of switching cards on Containers with CardLayouts, and we will make sure that it is documented asap.

joeinjapan
24 Jun 2010, 4:06 PM
Thanks for the follow up. Just curious, if I call setCard(someCard, animation), is there any way to go "back" easily? Does the CardLayout maintain any kind of state? Or if I want to allow the user to go back (eg from an app screen to a help screen and back to the app screen) do I have to recreate the view they just saw and pass it to setCard again?

In addition to documenting setCard, creating even a two/three page sample app would be really, really helpful (something that doesn't use a list as the first page)

Thanks again for the quick reply!

astropos
24 Jun 2010, 9:44 PM
thanks for sharing this wonderful tips.. ive been trying since 3 weeks now :D hehe

TommyMaintz
25 Jun 2010, 12:08 AM
You can go back to the card with the index that is one lower using


yourPanel.layout.prev(animation);

joeinjapan
25 Jun 2010, 12:52 AM
That's helpful, but it brings up one of my follow up questions from the original post. Is there any way to manage how many previous pages are in the card 'stack'? If the user keeps moving around the app, how do you prevent the stack of cards from continually growing? Is there any way to sort of reset it? For example if the user moves back to the app's home screen manually, it would be nice to reset the history.

Essentially, I guess I'm really asking how to handle page view history (both views and corresponding controller code). Any documentation/tutorials/examples that show this well?

TommyMaintz
25 Jun 2010, 9:49 AM
We are currently working on something we (will probably) call Presenter classes. They will help you with almost everything you are describing. They will also take care of presenting the UI differently across Tablets and Phones.

An example of how this could work can be found in the source code for the kitchensink. There you can find a class called UniversalUI, that takes care of removing and adding cards to the stack, back button management, shared toolbar across cards, orientationchange management and more. The UniversalUI was more a proof of concept than an actual solid implementation, so my advice is to not use the class directly, but rather check out how it works to get some ideas.

profunctional
25 Jun 2010, 12:02 PM
When will the presenter class be released?

TommyMaintz
25 Jun 2010, 3:01 PM
Hopefully together with the 1.0 release which is due in a couple of weeks (we are aiming for mid-July).

GaryW
30 Jun 2010, 2:03 PM
Any chance someone can whip up a basic panel (using layout:card) with 3 cards and a button or link to transition from one to the next and maybe toss some html or a component on each card to demonstrate how everything ties together? The examples are great, but I'm not understanding how it all works together.

TommyMaintz
30 Jun 2010, 5:26 PM
@GaryW

Here is a very basic example.


Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
html: 'Card 1'
}, {
html: 'Card 2'
}, {
html: 'Card 3'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Previous',
ui: 'back',
handler: function() {
panel.layout.prev({
type: 'slide',
direction: 'right'
});
}
}, {xtype: 'spacer'}, {
text: 'Next',
ui: 'forward',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
});
}
}]
}]
});
}
});

GaryW
1 Jul 2010, 11:47 AM
This is great, it got me moving again. Is it possible to jump from 3 to 1 again instead of just 1 panel forward or backwards?

meyerovb
1 Jul 2010, 1:07 PM
Yeah, call panel.getLayout().setActiveItem(x); where x=index of card

TommyMaintz
1 Jul 2010, 1:41 PM
However, in order to have wrapping that you were asking for you could try the following code.



Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
html: 'Card 1'
}, {
html: 'Card 2'
}, {
html: 'Card 3'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Previous',
ui: 'back',
handler: function() {
panel.layout.prev({
type: 'slide',
direction: 'right'
}, true); // true to wrap.
}
}, {xtype: 'spacer'}, {
text: 'Next',
ui: 'forward',
handler: function() {
panel.layout.next({
type: 'slide',
direction: 'left'
}, true);
}
}]
}]
});
}
});


@meyerovb Just FYI, panel.getLayout().setActiveItem(x); is equal to panel.setCard(0);

nobosh
1 Jul 2010, 1:51 PM
I too would hugely benefit from a simple 2/3 page sample app. The example are either to simple or overly complicated for newbies. Thanks!

nobosh
1 Jul 2010, 1:52 PM
I too would love to see this

TommyMaintz
1 Jul 2010, 1:58 PM
I just gave an example that does this! :) Could you please be more specific about what you are trying to achieve? "An app with 3 cards" doesnt give me much to go on.

meyerovb
1 Jul 2010, 9:17 PM
@TommyMaintz setCard is not displayed in the documentation for Ext.layout.CardLayout, probably because this is how it's included in the code:



...
setOwner : function(owner) {
Ext.layout.CardLayout.superclass.setOwner.call(this, owner);

Ext.applyIf(owner, {
setCard : function(item, animation) {
this.layout.setActiveItem(item, animation);
}
});
},
...


Other than the layout classes, are there other classes that extend a components functionality? Like setting propertyX to something will tack on an additional 5 methods to my object (similar to how setting a specific layout appends layout-specific methods to a component)

gabrielstuff
11 Oct 2010, 12:53 AM
I was wondering how did you manage to finally get a clear stack and use back and prev button on the fly ? Is the presenter class ready ? does it change the name ?

Thanks in advance,