Hello World App
This sample app is a Core Cordova Plugins Demo showing several device functionalities.
Demo
Import Hello World App to your Monaca Account
Tested Environment
Android 11.0
iOS 14.3
index.html
phonegap-demo.html
File Components
File | Description |
| The Startup page |
| The Core Cordova Plugins Demo page |
| The style sheet for the Core Cordova Plugins Demo page |
| The JavaScript file handling implementation in the Core Cordova Plugins Demo page |
| The style Sheet for the whole application |
| All icon files needed to use this template |
Required JS/CSS Components
jQuery
HTML Explanation
index.html
index.html
is the Startup page.
The above html code inside the <body>
tag is showing a HelloWorld!
phrase and a Start Demo
button as shown below.
phonegap-demo.html
phonegap-demo.html shows a Core Cordova Plugins Demo with the basic phone information and a list of functions as below:
Get Location: Get current location of the phone.
Call 411: Call
411
.Vibrate: Vibrate the phone.
Get a Picture: Turn on the phone's camera.
Check Network: Check the current type of network the phone is
using.
The JavaScript code corresponds to these functions will be explained in the next section.
JavaScript Explanation
The main.js
is a JavaScript file handling the implementation of the Core Cordova Plugins Demo page. There are 5
main functions in this file:
Get Location
Get current location of the phone. Below is the JavaScript code of this function:
When click on the button, a message showing the current location of phone will appear as below:
Call 411
Call 411
. Below is the JavaScript code of this function:
In order to use the href="tel:411"
, the following setting is needed in config.xml
file:
When click on the Call 411
button, a confirmed message of the call is appeared.
Vibrate
Vibrate the phone. Below is the JavaScript code of this function:
When click on the Vibrate
button, you will notice that your phone vibrates.
Get a Picture
Turn on the phone's camera. Below is the JavaScript code of this function:
When click on the Get a Picture
button, the phone camera is turned on. If you take a picture and use it, it will be displayed in the page as shown below otherwise a message will be displayed (see below):
Check Network
Check the current type of network the phone is using. Below is the JavaScript code of this function:
When click on the Check Network
button, the current network type information will be displayed.
Last updated