Design Android address book with jquery mobile

Source: Internet
Author: User

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:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.