In this article I talk about Sencha Touch best practices, specifically for developing user interfaces. I use the following practices in my projects. I think they will help you when developing Sencha Touch UIs.
My Sencha Touch book is now updated for Sencha Touch 2.4. The book will teach you how to create a Sencha Touch 2.4 application. Starting with UI mockups, and ending with a production build of the app.
These are the specific topics that you will learn:
- The building blocks of a Sencha Touch application.
- How to implement the Model-View-Controller pattern in a Sencha Touch application.
- How to create an application with multiple views, and how to implement intuitive navigation patterns.
- How to create list-based and master-detail user interfaces in a Sencha Touch application.
- How to use Sencha Touch forms to capture and validate user input.
- How a Sencha Touch app leverages HTML5 local storage to save data on the device.
- How to scaffold, minify, and deploy a Sencha Touch app to production using Sencha Cmd.
In this mobile UI patterns article we will build a flowchart depicting the screens needed to handle user registration, login and logout in a mobile application. As a UX designer, it’s very important that you are familiar with these screens and how the interact with each other.
Let’s start by taking a look at the typical application launch sequence.
An Application’s Launch Sequence
A large number of applications have a launch sequence that takes users to a Landing Page or Landing Screen, however you like to call it, from where they have access to deeper areas of the app. We could draw this UI pattern like this:
The Login Flowchart
Most apps provide personalization features that require a user to have an account in the app. In those applications the launch sequence changes quite a bit. For starters, when users arrive at the Landing Page and you don’t know who they are, you need to redirect them to a Login Page where they will enter their credentials: