105a XDK: How Does Cordova Starter App Work?
This tutorial explains the codes used in the previous tutorial, http://xdk-steps.blogspot.com/2016/12/105-xdk-create-cordova-starter-app.html .
Read the following explanation from blogs.intel.com:
The hybrid mobile Cordova app you create with the Intel XDK (or with Cordova or PhoneGap) is neither compiled nor translated into native code. It is packaged into a format that is suitable for distribution via native mobile app stores. Your hybrid mobile app does contain some native code, but the HTML5 code that you write never gets modified or compiled or translated or converted… it is interpreted at runtime by the webview that is built into the mobile device, just like a web app gets interpreted by the desktop or mobile browser.
Your HTML5 code resides within a native code Cordova framework that is specific to the platform for which your app is packaged. For example, your HTML5 code is packaged within the Cordova-Android native framework for use on Android devices, within the Cordova-iOS framework for use on Apple iOS devices, within Cordova-Windows, etc. If you look inside one of these app packages you will see your HTML5 code and supporting asset files (the stuff located inside the www directory within your Intel XDK project folder) along with the Cordova native code framework and plugins. |
There are three important files that runs the Cordova Starter Apps; index.html, init-app.js and app.js
File: index.html
This file contains the main page of our app. It's a simple HTML file.
We also import a number of important scripts that make the app works, such as Cordova and Intel XDK, and app.js.
The codes are placed near to </body> tag to make sure that all page elements are rendered first before the scripts get executed.
The cordova.js is used for interacting with mobile device.
The app.js contains user defined scripts to perform custom activities.
The init-app.js is contains the codes that ensure the libraries we need have been loaded and that the device is ready before we execute any of our code
The init-dev.js is used by Intel XDK hence we can just ignore it.
File: app.js
This file contains codes that will be executed when it is called by the apps ie when the user clicks the button.
File: init-app.js
The initEvents function does two things. First, it binds a click event listener to a button. Second, it calls the function myEventHandler() located in app.js
The logic is as follows:
1. Add an Event Listener that listens for app.Ready event and call the app.initEvents function.
2. app.initEvents contains two important instructions.
3. First instruction binds an object el to the button element id_btnHello on the page.
4. Second instruction calls the function myEventHandler() when onclick event is triggered on the object el.
.
No comments:
Post a Comment