Now that you know what events are in PhoneGap, this section starts with a detailed look at their usage. This section describes the program loading events, deviceready, pause, and resume.
Example 4-2 Use of program load events
01 <! DOCTYPE HTML > 02 < HTML > 03 <head> 04 <meta charset="utf-8"> 05 <title> program load event use </title> 06 <! > 07 <script SRC ="js/cordova-2.7.0.js" type="text/javascript"></script> 08 // Statement when the device time of completion of loading of the callback function onDevieReay 09 document. The addEventListener (" deviceready ", onDeviceReady, false); 10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {10 function ondeviceReady () {12 ); 14 / / in general need to keep the equipment load after 15 / / statement to perform other operations when the application is placed in the background to suspend execution of the callback function onPause 16 document. The addEventListener (" pause ", onPause, false); 17 / / statement when the program has been suspended state from the background when running back to the front desk of the callback function onResume 18 document. The addEventListener (" resume ", onResume, false); 21 function onPause() {22 // When this function is executed, a pop-up dialog tells the user that the program is paused 23 alert(" The program is paused! ); 24} 25} 26 function onResume() {26 function onResume() {27 alert(" resume "); 29} 30 </script> 31 </head> 32 <body> 33 <h1> 34 <h3> </h3> 35 </script> 31 </head> 32 <body> 33 <h1> 34 <h3> < h3 > program into the background pop-up dialog prompt also suspended < / h3 > < h3 > 36 but not when the program is restored the pop-up dialog < / h3 > 36 < / body > and < / HTML >After the program is run, the system will automatically load the script in PhoneGap, and a screen as shown in Figure 4-7 will pop up, indicating that the device has been loaded. When the user clicks the “Back” or “Home” button, the corresponding dialog box will pop up, as shown in Figure 4-8, but before the author can react and click the “OK” button, the application will be placed in the background. Tsinghua University Press ‘Building Cross-Platform Apps: PhoneGap Mobile Apps in Action’ is an APP practice book, containing more than 20 APP examples and three APP projects, and also combined with HTML5 mobile development. This book for mobile development beginners, low threshold, shallow reading, the most suitable for mobile APP entrepreneurship Xiaobai. Chapters 3~5 of this release serve as the basis for readers to learn, and those who are interested are welcome to buy this book!
Figure 4-7 The dialog box pops up after the device is loaded
Figure 4-8 shows the same dialog box when the program is paused
In principle, if run the program again at this time will also pop up the corresponding dialog box, but the truth is that when run the program again but no dialog box pop up prompt “program was restored”. This is not the result of a miswritten piece of code, but rather the result of a specific calling relationship for PhoneGap. To prove this, now make a few changes to lines 16-29 of the example. Instead of using an alert to pop up the dialog, the console.log method is used to output information in Eclipse’s LogCat panel when the corresponding function is executed.
Function ondeviceReady () {console.log(" Device is loaded! "); function ondeviceReady () {console.log(" Device is loaded! "); ); } // function onPause() {console.log(" The program is paused! "); ); } function onResume() {console.log(" Device is restored! ");} function onResume() {console.log(" Device is restored! "); ); }Then run the program and output the information on the LogCat panel as shown in Figure 4-9.
Figure 4-9 information in LogCat
It turns out that when a program resumes from a pause, calling some DOM operations may not produce the expected results. This is due to the compatibility and efficiency of PhoneGap on the Android platform, which should be paid special attention to in the actual development.
Let’s use this example to illustrate how events are used in PhoneGap. As you can see from lines 10, 12, and 14 of the example, If you want to an event in the PhoneGap operate only need according to the document. The addEventListener (” eventname “, the function, false); This format can be defined. EventName is the eventname that needs to be defined, and Function is the custom function that is responsible for responding to that event.
Note: An interesting observation of the example is that Pause and Resume events are declared after the device has loaded. This is a good habit that every PhoneGap developer has to get used to.
This is an opportunity to introduce a little extra knowledge about how to debug in PhoneGap. In the development of the program will often encounter some unexpected errors, generally speaking, you can output some data at a specific location to verify the location of the program error. This is where you need to think about what method to use to get the data.
For developers accustomed to Web development, the alert method is a convenient option to pop up data in a dialog box, but in practice it is not very convenient, so the console.log method is often used to output information for debugging purposes.
In addition to using the console.log method, many people prefer to use JavaScript DOM manipulation to output results directly to the page, which is also useful in situations where you need to count how a variable has changed over time.
Tsinghua University Press ‘Building Cross-Platform Apps: PhoneGap Mobile Apps in Action’ is an APP practice book, containing more than 20 APP examples and three APP projects, and also combined with HTML5 mobile development. This book for mobile development beginners, low threshold, shallow reading, the most suitable for mobile APP entrepreneurship Xiaobai. Chapters 3~5 of this release serve as the basis for readers to learn, and those who are interested are welcome to buy this book! Welcome to add group: 348632872, direct questions to the author exchange!