Explore Android (2) jquery mobile

It was not long before the mobile phone was refreshed. Google released Rom 2.3.4 and Rom 3.1 and codenamed 2.4. Despite the fact that many of the large versions target very small groups, however, Android is still trying its best to catch up with the iPhone and iPad. We hope these two camps can compete well and bring more and better equipment and software to users. At the same time, I am looking forward to the WP7 mango update. Don't let the audience wait too long. It's too late for the city to eat too much.

Download test code

 

Let's get down to the truth. This time, let's take a look at jquery mobile. Jquery has already stood out in the Javascript framework. The approachable protocol and syntax have brought many supporters. Jquery Mobile is the framework of jquery on mobile terminals. It can be considered as the lite version of jquery. official homepage: http://jquerymobile.com /.

This project is currently in Alpha stage, and the latest version is Alpha 4.1. Currently, it supports most mobile platforms:

Thanks to the sound development of HTML5 in mobile terminals, jquery has widely used the new element attributes of html5. this has contributed to the further promotion of html5.

The official demo and Doc are good. We recommend that you repeat them. Let's test them briefly.

 

1. Download The jquery mobile component

Http://jquerymobile.com/download/

 

2. Create a website project

2.1 create an ASP. Net project using vs2010 and add the required JS and CSS:

 

2.2 vs2010 can directly drag JS and CSS to generate corresponding labels, which is very convenient:

 

2.3 build a basic page framework, including the title, content, and footer:

<Div Data-Role= "Page">

<Div Data-Role= "Header">

<H1>

Page title</H1>

</Div>

<! --/Header -->

<Div Data-Role= "Content">

<P>

Page content goes here.</P>

</Div>

<! --/Content -->

<Div Data-Role= "Footer">

<H4>

Page footer</H4>

</Div>

<! --/Footer -->

</Div>

Data-role is the custom attribute of HTML5.

2.4. F5 run. Chrome 11 is used. The effect is as follows:

 

3. Set up a server

To access on a mobile phone, you need to build a web server, first use IIS on the PC, and then build on the mobile phone.

3.1 create a website in IIS:

 

Note ApplicationProgramPool configuration, I use. Net 4.0:

 

3.2 PC browsing is normal:

 

3.3 The following is accessed on the mobile phone. First, WiFi is enabled and wireless routing is enabled in the home. Therefore, a LAN is formed with the PC. The pc ip address is 192.168.0.100 and the mobile phone IP address is 192.168.0.101. The vncserver is installed on the mobile phone, test the result through the RealVNC Client on the PC:

Native Browser:

 

Firefox Mobile 4:

 

Opera mobile 11:

 

3.4. For the convenience of development and testing, I set up a Web server on the mobile phone. The kws I used, a small web server, has good performance.

First, deploy the webpage, JS, CSS, and so on to the mobile phone. KWS is only a Static Page Server and does not support ASP. NET.

To facilitate deployment, enable the FTP server on the mobile phone. I use swiftp to connect to filezilla on the PC:

I brushed i9000's 2.3.3 Rom, and the system partition is ext4, some directories cannot be read on Windows. Deploy the HTML page to the SD card as follows:

The scripts directory stores JS and CSS.

 

Configure the KWS main directory. Do not forget to restart KWS to make the configuration take effect:

 

Access on PC is normal:

 

The operation on the mobile phone is also normal:

 

Summary:

The wave of mobile terminals has arrived, and more mobile terminal transplantation, optimization, testing, and systems will be available. Jquery mobile, as an excellent cross-platform B/S solution, deserves attention. In the subsequent sections, we will continue to test the official example to gain a deeper insight into this "micro-world ".

Note: To facilitate testing and deployment of programs, high-end mobile phones can be installed with appropriate servers, such as FTP, web, DNS, and VNC servers.