Use jQuery Mobile to implement the Mobile news browser (Chapter 1) (1)

The jQuery Mobile project is another masterpiece of Mobile development under the jQuery project. in this article, I will take you step by step to learn more about using the jQuery Mobile framework to implement a news browser that can run on Android phones, this news browser will read the news provided by Yahoo website via RSS.

The latest version of the jQuery Mobile project is alpha 3. The main purpose of this project is to easily implement applications that can run on different Mobile operating systems, such as Android, run on iOS and blackberry. This article focuses on how to run programs on Android. This series of articles will be taught in the following structure:

First, we will introduce the basic UI framework elements in jQuery Mobile. To achieve this goal, we will first learn how to make a Web application. This Web application uses Ajax and php technologies to initiate requests to Yahoo servers, the system then parses the news list returned by Yahoo RSS, which is actually a file in XML format. Here, we will learn how to use the jquery-dotimeout-plugin plug-in to implement the transition gradient effect when there are constantly the latest news returns. We also use the DST. js plugin plug-in to save the selected news category. This Web application includes an HTML file, jQuery Mobile library file, and jQuery plug-in. It also uses the php program to initiate a request and return the request to the html file. Finally, we provide the actual application on Android and iOS to show that the effects of jQuery Mobile's applications seem to be consistent on different systems.

In Part 3 of the tutorial series, we will introduce how to port our existing web applications to Android. Here we use Android in the android system. webkit. webView object container to run the HTML page we have implemented. This is a very convenient implementation method. At the same time, the modification here is just to change the ajax implementation request implemented in PHP to the RSS address of Yahoo News. We will also introduce how to design some Android buttons and their skills.

Project Page Structure

Let's take a look at the page structure of the project. First, let's have a preliminary understanding. First, the first page of the user lists the latest news of each category, such:

In, the split list control of jQuery Mobile is used, which is divided into the left and right regions. On the left is the selected news category. The latest news is displayed under each category. The latest news is displayed every two seconds. There is a cross icon on the right of each category. When you click this icon, the category will be deleted. In addition, you can use the Add icon at the top to Add a category.

After you click the Add button, the following appears:

In, select a favorite news Category from the drop-down list and click "Get Category". This will add the news Category to your favorite news Category.

Click the title of each category to list all the latest news under the category on another page, as shown in:

Each piece of news has related news images. When each piece of news image is clicked, it will jump to the detailed connection page of news, such:

Note that in our web applications and Android programs, when the news details page is opened, if the user wants to return, you must click the back button or the back button on the mobile phone, will be returned to the home page of the category directory.

The figure below clearly lists the entire process:

Note that a small wait icon is used between page transitions. This is a very common technique on mobile devices, because the limited resources of mobile devices are not the same as those of common web applications, it is a good user experience to use a wait icon to tell users the current loading progress.