Wednesday, May 23, 2012

Backbone views design for standard menubar / detail pages mobile UI

I'm building a mobile web app and have been struggling with the design and wiring of my backbone views.

Let me illustrate what I would like to achieve.

enter image description here

As you can see, the image above identifies few UI components:

  • Toolbar view with back, search and menu button

  • Tabbed view with lists

  • Detail view

  • Menu view

Some notes on the behavior:

  • Tapping on the menu button overlays and animates the menu.

  • The list and detail views are permanently accessible with hashtags

For now I have created views for the toolbar, menu, list and detail. But obviously there has to be some interaction between views and I'm not sure how to handle it.

Problems to solve:

  1. Do I render all views when going to detail or list? If not, how to update the toolbar and handle that relationship

  2. How to remember which tab was shown when going to detail from say tab 2 and go back to list. Remembering the visible tab with hashtags is not an option because just switching between tabs should not be remembered.

I've been looking into tbranyen layoutmanager but it still seems to assume complete isolated views.

No comments:

Post a Comment