Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 The Deviceready Event and Adding a Plugin

In this lesson, we will learn about the deviceready event and how to use it in our apps. Then we’ll add and configure a plugin!

Related Links

2.6 The Deviceready Event and Adding a Plugin

Hello everyone, this is Reggie Dawson. Welcome to the building an app with Cordova course for Tuts+. In this video we're going to learn about the device ready event, and how to add a plugin to our project. Let's go back to the sample1 project and open the www folder. First we're going to look at the index.html file in the www directory. The main file of our project is really just a standard HTML file. In the head of the document, the first meta tag is another security policy that is working with the white list plugin. Also, the meta tag with the name viewport is making sure the app takes up the full screen of the device. Then we have our reference to our CSS style sheet and the title of Hello World. In the body, we have a class of app that governs the style of this page. Then we have a div with the ID of deviceready and a class of blink. And no, this is not the deviceready event we're going to be talking about but it does have something to do with it. Then we have two p tags and before the closing body tags, we have references to cordova.js and index.js. Index.js is in our js folder and cordova.js is injected automatically. Next, open up index.js. We're going to change both this file and index.html. But I wanted to show you how they work before I do. First you have the app object that contains some methods. Before we get to those methods and what they do, I want you to take note of the the app.initialize call at the bottom of the file. When the app is launched, the script is loaded but it doesn't do anything until it reaches the app.initialize call. Although it is last, starting from here makes sense as it launches the first method in the app object, initialize. The initialize method uses a bind.Events method from the app object. Take note that we use the keyword this with the bindEvents method, as we are in the scope of the object. Next is the bindEvents method. This is the method called by initialize, and it creates an event listener for the deviceready event. Deviceready is one of the many events that Cordova can emit and probably the most important. The reason is that when Cordova starts it has to run both the native code and JavaScript. If we are using an API from Cordova there is a possibility that it could be called before the API is available. To avoid that, if you have any call that uses Cordova APIs, when the app loads you should listen for the deviceReady event. In the event list when we are detect the deviceReady event we are launching the onDeviceReady method. OnDeviceReady executes the received event method with the argument of deviceready. Take note that when we called the received event method we used app as opposed to this. That is because the scope of this refers to the event and not the app object. The received event method takes one argument called id. In this case when we called it, the id supplied was deviceready. The first variable, parentElement, is grabbing an HTML element by its id. It is using our id argument so the id is deviceready. Remember this div with this id in our index.html file? Then we store the two p elements from the index.html file in two variables, listeningElement and receivedElement. Then we are setting the style attribute of the listening element to display none. The received element is going to have its displays at the block. Then finally the event is logged to the console. Can you guess what this file is going to do when we run the app? One thing for certain, this is definitely overcomplicated for what it does. When the app runs, connecting to a device will disappear, and all you will see is deviceready. We aren't going to preview this file. We're going to add our own code and use a plugin. First bring up a command prompt and navigate to your app. Once you're inside of your apps folder, we are going to add a plugin. The ecosystem for Cordova plugins has changed and now it uses MPM. There is a repository where we can search for plugins and I have included the link in the course notes. The plugin we want to use is the device plugin. To install it, cordova plugin add cordova-plugin-device. This will add the plugin to our plugins directory and make it available to our app. After that let's go to our index.html page. First let's remove everything from the deviceready div except our div tag. After that remove the p tag that says Device is ready. Then change the class tag in the connecting to a device p tag to id with the name of update. Then let's go to our index.js file. We can remove the entire receivedEvents method. And then remove the app.receivedEvents call and the onDeviceReady method. After that, we add a variable br, which we set to the br tag Then we create a variable target that contains a reference to our p element with the id of update. Finally we use our target variable to set the inner HTML of the p element. We're going to set the HTML as Cordova Version plus device.cordova. Device.cordova is a call to the device plugin we just added. In this case it is returning what version of Cordova we are on and then we add our BR variable with device and device.model which returns the model of the device we are on. Then we add another br plus OS plus device.platform and then Version and then device.version. Device.platform is what OS the device is running and version is the version of that OS. We now have our project set up and ready to go. Let's save everything. In the next video, we will learn how to preview our apps and check out the app we just set up.

Back to the top