Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: best practice for animating between "pages" of an app?

  1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default best practice for animating between "pages" of an app?

    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.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    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.

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default

    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!

  4. #4
    Ext User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

    thanks for sharing this wonderful tips.. ive been trying since 3 weeks now hehe

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    You can go back to the card with the index that is one lower using
    Code:
    yourPanel.layout.prev(animation);

  6. #6
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
      0  

    Default

    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?

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    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.

  8. #8
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    324
    Vote Rating
    2
      0  

    Default

    When will the presenter class be released?

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    Hopefully together with the 1.0 release which is due in a couple of weeks (we are aiming for mid-July).

  10. #10
    Ext User
    Join Date
    Jun 2010
    Location
    Ponder, TX
    Posts
    9
    Vote Rating
    0
      0  

    Default Sample Code?

    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.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: 28 Oct 2009, 6:38 AM
  2. Replies: 0
    Last Post: 28 Jun 2009, 3:52 PM
  3. replace the "south" with the "new Ext.StatusBar" in "layout:'border'"
    By ealpha in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 May 2008, 8:28 PM
  4. Couple of simple questions...? and confusion what is "good practice"?
    By violinista in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 23 Aug 2007, 11:19 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •