Seeking guidance with layout & navigation

[dvorak]

Hi!

I'm new to Sencha Touch and I have been spending a few hours playing with the demo applications (the samples as well as the cactus festival app).

The goal would be to write an online game. Sencha touch seems to be a nice plateform that could do the job but I need to get used to the way it works. In my daytime job, I'm more of a server side kind of guy ;)

I'm looking for guidance around the layout and the navigation between the screens. Here is a quick description of what I have in mind:

http://oi55.tinypic.com/1zme4ol.jpg

Note: I used green to show the part that can be scrolled.

So, what about using a TabPanel which will contain panels with card layouts:




01 >> TabPanel

02 >> Toolbar docked top (this could be shared by all screens but each could change the title)
03 >> Button (to navigate back)

04 >> Panel T1 with a card layout
05 >> Component - first card
06 >> Component dock top (T1.Header1)
07 >> ? might use a template to mix HTML and 2 buttons here
08 >> ? might use a list with a template
09 >> Component - second card
10 >> [...]
11 >> Component - third card
12 >> Component dock top (T1.Header2)
13 >> ? some kind of dropdown list
14 >> Button OK

15 >> Panel T2 with a card layout
16 >> Component - first card
17 >> Component dock top (T2.Header1)
18 >> ? might use a list with a template
19 >> Component - second card
20 >> Button action1
21 >> Button action2

1) Is this a good approach? Should I be concerned about the perf of the scrolling of the nested areas?

2) Has someone got any advice or tips on stucturing the navigation code? e.g. I want to avoid passing hard coded index values to setCard if possible.

3) What happens if a card needs to be accessed from two different tabs? (see the "maybe" arrow on the drawing)

Thanks!

[gcallaghan]

1) I would define all the "leaf" screens/cards at the same level and reference them with variables rather than define them inline within their container.



var card1 = ...
var card2 = ...
...
var tabpanel = Ext.Tabpanel{
items:[card1,card2,card3]
}
...
tabpanel.setCard(card3);


1.2) I haven't had issues with the performance of the scrolling areas.
2) If you define the cards as variables, perhaps within a namespace for code cleanliness, you can use that variable in setCard(<card variable>) method rather than an index. This gives you the added benefit of adding that card to the container if it doesn't already exist.
3) You can have two tabs that reference the same card but have different text and/or icon. Not sure if/how you would make it dynamic. You might want to extend the Container/Panel object to allow it to be passed another card and update its display information on show(). (untested, just an idea off the top of my head)

[MiamiCoder]

More tips:
- Try to reduce the number of cards to a minimum. (Simple if your cards will contain mostly html)
- Try to reduce the number of items in any list. Usability and scroll performance suffer as the number of items grows.