Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced
In the previous chapter we described how to create a Cordova Android project, which we introduced to the code of the HelloWorld project that was created to analyze its operation.
Mainactivity.java
We have imported the mainactivity into eclipse. Open the Mainactivity.java under Com.example.hello under SCR.
//MainActivity inherits CordovaActivity
Public class MainActivity extends CordovaActivity
{
@Override
Public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
}
As you learned about Android, activity starts by calling the OnCreate method first.
Loadurl (Launchurl), will be in the current webview to load the home page, of course, this home is our own configuration, in the Res/xml/config.xml. <content src="index.html" />. This path refers to the path under the assets/www.
This allows the app to call the Mainactivity (which is configured in Androidmanifest.xml) first when it is launched. When the activity starts, it loads the index.html in its webview, and then we see the Cordova page.
Index.html
Let's look at what's in index.html.
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src ‘self‘ data: gap: https://ssl.gstatic.com ‘unsafe-eval‘; style-src ‘self‘ ‘unsafe-inline‘; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
<script type= "Text/javascript" src= "Cordova.js" ></script>
<script type= "Text/javascript" src= "Js/index.js" ></script>
When the index page is displayed, two JS files will be loaded. Cordova.js is the Cordova API that calls native content, which is equivalent to a jar package.
Index.js
Look at this index.js again.
Var app = {
/ / Initialization method, will call the method of binding events
Initialize: function() {
this.bindEvents();
},
/ / Bind the event method, the event can be these:
// ‘load’, ‘deviceready’, ‘offline‘, and ‘online’.
//This event is an event that occurs after cordova is loaded. It indicates that cordova is loaded and ready to access. YourCallbackFunction is equivalent to the program's entry function.
bindEvents: function() {
document.addEventListener(‘deviceready‘, this.onDeviceReady, false);
},
// deviceready event handling
onDeviceReady: function() {
app.receivedEvent(‘deviceready‘);
},
// event processing, update DOM, change css of two elements
receivedEvent: function(id) {
Var parentElement = document.getElementById(id);
Var listeningElement = parentElement.querySelector(‘.listening‘);
Var receivedElement = parentElement.querySelector(‘.received‘);
listeningElement.setAttribute(‘style‘, ‘display:none;‘);
receivedElement.setAttribute(‘style‘, ‘display:block;‘);
Console.log(‘Received Event: ‘ + id);
}
};
/ / call the initialization method
App.initialize();
After loading index.js, the program will first call the initialization method, the initialization will be bound to the event listener: Document.addeventlistener (' Deviceready ', This.ondeviceready, false);
The Deviceready event, which is an event that occurs after Cordova loading completes, indicates that the Cordova load is complete and ready to access the callback function that you passed in, equivalent to the entry function of the program.
When Cordova is ready, it will go through the callback function you passed in first, here is Ondeviceready (). This method changes the CSS style of the DOM element.
The end result is that when Cordova is not finished loading, the page Apache Cordova below shows: Connecting toDevice (background is gray). After loading, Cordova ready, the original display disappears, now displays: Device is readiness (background is green)
Cordova Introductory Series (ii) analysis of the first HelloWorld project
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
