Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Adding Plugins

In this lesson we’ll add and configure the first two plugins for our app. I’ll also show you a handy tool for generating splash screen images.

Related Links

3.2 Adding Plugins

Hello everyone. This is Reggie Dawson. Welcome to the building an app with Cordova course for Touch Plus. In this video, we're gonna add and configure two plugins, the splashscreen plugin and the network information plugin. Before we get to that, first we have to do some clean up on our index.js file and configure our header bar to work. If you noticed, our header bar did not show when we launched our app. That is because when we used the header outside of the page container it doesn't load. In order to make it work we have to initialize the header. Let's go to index.js. I really don't wanna make this app too complex, so we will use the single index.js file for our app. I will also continue to add my own methods to the app object. First let's get rid of the receivedEvent method, then remove the bindEvents call from the initialized function and replace it with the device ready event listener. Then delete the bindEvents method. After that I remove all of the comments. Now we should just have the initialize and onDeviceReady methods. Remove the receivedEvent method call from onDeviceReady and add. Data-role header.toolbar is the command to initialize the header bar and make it display. Now we need to go to a command prompt and add our plugins. Make sure you are in your project directory and type cordova plugin add cordova-plugin-network-information This adds the network information plugin. And then cordova plugin add cordova-plugin-splashscreen, which adds the splashscreen plugin. Let's go back to indexjs and set up our network information plugin. Remember we added a device offline in the foot of our app? Well we are going to check the network's status at startup, and make sure we have a network connection. The idea being, that this app will need access to the network to perform tasks such as navigation or uploading photos. Bear in mind, this is a proof of concept, so the idea is just to verify connectivity. Although ultimately, we could code the app to be disabled without a network connection. Inside of the onDeviceReady method we are going to add. App.isOnline. Remember when we are called from device ready, we are in the scope of the event so we explicitly call the method. Let's add the isOnline method. jQuery and Cordova make it possible to check the network connection with two lines of code. The if navigator.network.connection.type is not equal to connection none command as using the network information plugin to check the connection. Devices have multiple connections we can check, such as 4G, Wi-Fi, etc. Instead of cycling through all of them to see if we're online, we just make sure our connection is not set to none. Then we add. This is using a jquery selector to grab the netinfo ID, which is the h4 tag in our footer. Using the replaceWith method, we set the footer to read device online. The same could have been accomplished with plain JavaScript, but would require more lines of code. That's all we have to do to configure our network information plugin. Now let's set up our splashscreen and icon. To configure this plugin, we're going to go to our config.xml as the splashscreen plugin is configured here. First let's talk about splash screens. Each platform has its own requirements for splash screens. In the case of Android, they have eight different specifications for their splash screen sizes, four for portrait, four for landscape. We can create a special nine-patch PNG file to use that scales to each size, or we can generate the different sizes needed for each screen. For this example, I will just generate four files and use them for portrait and landscape. I found a good tool that let's you generate the files automatically and have included the links in the notes. For the icon I just used the 128 by 128 pixel icon. For the splash screen I created a 2208 by 2208 pixel graphic and used the tool to generate my four sizes: HDPI, LDPI, MDPI, and HXDPI. Once we have our splash screens and icon, create a screen in icons directory in your www folder. Copy the icon to the icons directory, and then copy our splash screens to the screen directory. To make it easier, I have named all my splash screens splash hyphen and the density they apply to, for example splash hyphen HDPI. After that, in config.XML under the author tag, add preference name equals SplashScreen, value equals screen. This tells Cordova to use the SplashScreen plugin. Then we add, preference name equals SplashScreenDelay, value 3,000, which adds a delay of 3,000 milliseconds. Then we are going to add our platform specific configuration for Android. Other platforms are a little different, so your best bet is to refer to the documentation on how to configure other platforms splash screens. We add platform name Android. Remember this specifies that this configuration will only be written to the Android specific config.xml file. Then we add our icon. It is of the utmost importance that you include the full path including www. The reason being is when we prepare or build our app, Cordova needs to know where to find the resources to copy to the Android platform. Next we add Splash src www/screen/splash-hdpi.png density equals land-hdpi. Again, we use the full path, including the www folder. Notice how we match the density to the image. For example, in this one, we have splash-hdpi for land-hdpi. Next we're going to add our splash screen for landscape-ldpi and then land-ldpi and land-xhdpi. Remember to match the name of your image to the density. Then we will do the same thing for portrait-hdpi. Portrait LDPI. Portrait MBPI and portrait XHDPI. After that, we have configured our splash page. Let's save and preview If you use the Ripple emulator, the splashscreen will not show. If we use the Cordova emulator, the splashscreen will display and the app will start. On both, the app should show Device Online. Also if we go look at the apps we should see our icon. We have now configured our first two plugins. In the next video we will configure the camera page and plugin.

Back to the top