Use javascript and PhoneGap 3.0.0 to create a mobile app

WhenAndroidAndIOSWhen the Platform continues to compete, developers are allowed to buildCross-platformApplication libraries become more attractive, the most prominent of which isPhoneGapLibrary. In this tutorial, we will create a hardware-Aware ApplicationJavaScriptTo process the device accelerator.

If you haven't downloaded the latest version of PhoneGap framework, it's easy. Suppose you have installed NodeJS. Once you install PhoneGap, you can create an application.

1) enter the following command line to create the PhoneGap application.

?

Note that the application will be created in any folder specified in your command line. Make sure that the application is directed to your destination folder. The first two lines of command line commands are self-explanatory. They create a PhoneGap application, call acceleration, and navigate to the newly created folder.

The latest version of PhoneGap uses the remote plug-in architecture. Therefore, you must use the code in the last line of the command line to manually obtain and install the acceleration plug-in.

2) Open the acceleration folder and note that the application structure contains a www folder. We will work here.

650) this. width = 650; "alt =" PhoneGap, mobile, APP "src =" http://www.bkjia.com/uploads/allimg/131228/095915Na-0.jpg "style =" width: 414px; height: 170px "/>

Figure 1: Build a PhoneGap application folder

The PhoneGap creation Command actually builds a small sample application. If you export index.html to a browser, you can see its startup screen. If you like, you can run the entire application on a mobile device.

Run the sample application on an Android mobile device and connect the device to your computer using a USB cable. Run the following command to point to your project folder in the command line path:

?

Running the sample application on an iOS device is actually more complicated because the device must be correctly configured through XCode. To configure the iOS device for testing, you must register it with the apple development program.

We will remove cssfolder, icon.png, image folder, and js folder from the application. You can open index.html in your most recent editor. Once it is opened, Code related to the sample application will be removed. Then, there will be the following:

?

As you can see, there are some meta labels on the title, processing screen size standardization. The rest of the code is standard HTML. We will first set up an initialization program to know that the device and the PhoneGap library are ready for us to run any code.

We will add the following <script> elements to ?

The init () function will become the entry point for us to enter the application. You will notice that the anonymous function contacts the window. onload event and attaches the "deviceready" device to the program. This event will tell us the device and PhoneGap
When the database is ready to interact with users. For convenience, we can also annotate and call init () If you want to test the browser) because the "deviceready" event is part of the PhoneGap library and it will not run in the browser.

This is a good point to stop and test. When the Android device is connected, run the following command to point to the application Folder:

?

If you get the expected alarm box and everything else is correct, it is time to create a UI for the application. Now you may want to comment the alarm box in the init () function ). We will create a relatively simple UI to show us the results of the Acceleration Program in the device. We will add the following HTML to the body element.

?

Add an element to the document head to accommodate CSS:

?

In the PhoneGap library, there are three methods for accelerating objects:

• GetCurrentAcceleration ()

• WatchAcceleration ()

• ClearWatch ()

The first method, getCurrentAcceleration (), gets a snapshot read by the accelerator when the function is executed. WatchAcceleration () returns the accelerometer read until the clearWatch () command is issued. We will use watchAcceleration () to see acceleration within a period of time.

Return an ID value in watchAcceleration () mode. We can use this value to stop the accelerator later. This is important because I cannot make it take up valuable resources when I no longer need acceleration.

Edit your Code as follows:

?

We have added the basic code to run the accelerator. You will notice that the init () function contains a very important line of code:

?

In essence, this line is to configure and run the accelerator. If the accelerator successfully obtains the device mobile information, the three parameters in the watchAcceleration () method will send a call back, and vice versa. A frequency object uses the sample obtained by the accelerator in milliseconds to set the frequency.

The receiving call back of success () and failure () is quite direct. In success () call back, an acceleration object is uploaded to the function, which contains the attribute for reading the x/y/z axis. Failure () call back is a simple output of an error message.

Now it will be a good time to test your application and see if everything works properly. Once again, build and run your application and release the following command:

?

If everything works normally, you should update at the bottom of the screen to see the resolution of X/Y/Z when moving the device. Move the device slowly along different axial directions and pay attention to the reflection of X/Y/Z.

650) this. width = 650; "alt =" PhoneGap, move, APP "src =" http://www.bkjia.com/uploads/allimg/131228/0959156440-1.jpg "style =" width: 196px; height: pixel PX "/>

Figure 2: Pay attention to the display at the bottom of the screen.

Now we will make the application more interesting. We will use the accelerator to move the object around the screen, add the object itself through HTML, and then use the accelerator reading to determine the speed and movement direction. As a preparation, we can add a canvas for the application and put an object in it. To add this canvas, we will add a canvas element to the first line of the body.

?

We will also standardize the width, height, and margin css attributes of HTML and body just in case. Add the following selector and rule to your CSS.

?

Create a crosshair.png image. We will load it to the canvas in the int () event. You need to set up NVS for the context and target of canvas to make the image the top of the global script.

Modify Your int () function as follows:

?

There will be many articles here. The iW and iH variables contain the screen size. Obviously, mobile devices change between their different technical parameters, so we need to ensure that a canvas is elastic. The NV variable is used to reference the context object that will do a lot of work. It is useful to think of canvas as an invisible layer.

We use the context object and ECM to set the width and height attributes of the canvas. To take into account the output bar we have created at the bottom of the display, We have to subtract 40 from the height. We initialize the target variable as an image target and provide the source image to the src attribute.

We need to ensure that the image has been loaded before we try to display it, so we set an anonymous function that is called when the image object calls the target to load. At that time, we held back the image and made some simple mathematics to put it in the center of the screen. Finally, we configured the accelerator.

This is another great time to test programs on your device.

650) this. width = 650; "alt =" PhoneGap, move, APP "src =" http://www.bkjia.com/uploads/allimg/131228/0959152492-2.jpg "style =" width: 183px; height: 323px "/>

Figure 3: The application and image behind the canvas have been added to the canvas.

Now, when you tilt the device, the image will move and the accelerator will respond. Most of the work will be done in the success () callback function. However, we can also make some changes to the init () function to facilitate a smoother running application. The modified init () function is as follows:

?

Open the modified init () to add the canvas to the global list at the beginning of your script. You will also notice that during init () Processing the captured image location, the xPos and yPos variables are set, and you also need to add them to the global list. Finally, we can get the result from the accelerator every 25 milliseconds by reducing the frequency to 25. Now success () callback function:

?

After the display bar at the bottom of the screen is updated, the canvas object is removed in clearRect () mode. This clears the canvas at the updated position before refreshing the image. The clearRect () method requires a start point and the width and height of the data you want to clean up. We clean up the entire canvas, so we provide its complete width and height.

Next we will update xPos and yPos before refreshing. You must deny xPos so that the image can be moved in the direction of the user's mobile device. Both xPos and yPos multiply by 1.5 so that the image can be moved a little faster. Finally, drawImage () is called to draw an image at a new position.

Test your application again and it should be moving along the device skew axis. Of course, to challenge yourself, you can create additional code to prevent images from falling off the edge.

As you can see, PhoneGap makes it easier to access device hardware, just like this accelerator, which is included in your JavaScript-based mobile app.