JQuery Mobile design Android Address Book (Chapter 1) (1)

This article assumes that you have some preliminary understanding of jQuery Mobile and some basic usage of Android.

Structure of this tutorial

This series of tutorials are arranged as follows. In the first part, we will introduce the running interface of the application, and describe the process direction and structure of the entire application, it also describes some tips and knowledge about how to use Javascript to interact with backend JAVA applications in the Webview control of Android. It will introduce various important page elements in jQuery Mobile. The second part of this series describes how to add, edit, and delete accounts in the address book application. In the third part of this series, we will introduce how to add an address book, which will introduce a tool class. The fourth part focuses on how to use the Jackson JSON processing library to convert JAVA objects and JSON objects, and describes how to configure the entire project, how to Design icons based on the best practices of Android icons, and finally summarize the full series of tutorials.

Page Flow Structure

The following describes the page flow structure of the application. In this application, each address book is associated with an account. That is to say, each account user can create multiple address books, just like gmail. After the Android app is started, it will check whether an account has been created in the app. If this is the first time the app was started and there is no account, it will prompt you to create a new account, as shown in:

Once an account is created, you can enter the initial Page of the address book, for example:

We can see that the address book is sorted alphabetically. When the user clicks the "Add" button, the page for the user to enter the specific address book is displayed, as shown in the first figure on the left of the following side.

In the address book list, you can click the information of an existing contact to view the information, as shown in the second figure. Here, you can edit and modify the information, save it.

Address book list page. At the same time, if you click the "delete" button, the interface is displayed as shown in the following figure, asking if you want to delete the contact information of the user.

In the entire application, considering the large number of records to be processed and the processing capability of mobile devices, a friendly way is to process data, add an icon indicating the progress of the current progress, for example:

To sum up, the actual process of the entire application is shown in: