Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Config.xml

In this lesson you’ll learn about the config.xml file. I’ll show you what it contains, and how its settings are used in creating an app.

Related Links

2.5 Config.xml

Hello, everyone. This is Reggie Dawson. Welcome to the Building an App with Cordova course with Tuts+. In this view, we're gonna learn about the config.xml file. In the last video, when we created our project, a folder was created. In this folder, we had multiple files. Among these files was config.xml. This file is the key file for creating a Cordova project, so it is important that you understand what it does. Navigate to your sample1 folder and open the config.xml file. First we are going to talk about what is currently in the file. Then we will discuss what additional options you can add to this file. First of all, we have the widget element that wraps everything else we have in our config.xml file. Inside of this element, we have the reverse domain identifier we specified when we created this project, and a version number. Next, we have the name we specified when we created our app. This is also the name that will be displayed when the app is installed, as well as in the app stores. Following that, we have a description and author elements. This information may appear within app Store listings so edit accordingly. The optional content element references the starting page of our app, in this case our index.html page. Next we have a reference to a plugin, the Cordova Whitelist plugin. Normally under the cross platform workflow we do not add plugins directly to the config.xml file. The white list plugin works with the config file, which is why we are using it here. I will explain how to add plugins to this file in a moment, as a platform specific workflow has to add plugins this way. The white list plugin controls access to remote resources for your app. The first line, access origin=* allows access to any remote address from our app. If we remove the access element, we will not be able to use any remote resources. Next we have our intent white list which controls the URLs our app is allowed to ask the system to open. By default, external URLs are blocked so we have to enable them. The first two options allow intent HTTP and HTTPS allow links to web pages to open in a browser. They allow intent tell allows a phone link to open the dialer. Allow intent SMS allows SMS links to open in the messaging app. Allow intent mail to allows mail to links to be opened. And allow intent geo allows a link to open in maps. Next we have a platform element with the name android wrapping in allow intent. When we add a platform, device specific and fig xml files are written. The platform element specifies that this is a platform specific feature and should only be copied to the config.xml for the android platform. This allowed intent lets links to the Android market open. Then we have another platform element, this time with the name of ios. There we have two allow intents specifically for the iOS platform. We also could have used an allow intent with an asterisk, but this is not recommended. It has the effect of allowing any unrecognized URL to open apps on the device. We can also add preference elements to this document. For example, we can use the global preference, the preference name ="Fullscreen" value="true", serves to hide the status bar at the top of the screen and is set to false by default. This is considered a global preference because it applies to all platforms. We also have multi-platform preferences that apply to more than one platform but not all of them such as Preference name = "BackgroundColor", and a value sets the apps background color. And applies only to Android and Blackberry. Or preference name orientation and a value of landscape, which allows the app to lock the orientation, and applies the Android, iOS, Windows Phone, Amazon Fire, and Firefox OS. Finally, we have the preferences specifically for our platform. In the Cordova documentation for the platforms, there are configuration pages. On these pages, they show the various preferences you can use for each platform. On the Android platform, for example, we can set our preference for show a title at the top of the screen, or determine whether the app will run in the background after a pause event. We can use the platform element we saw in the whitelist section to make sure platform-specific features are copied to the correct config.xml. Finally I wanna talk to you about plugins as it relates to the config.xml file. In older versions of Cordova, plugins were added inside of the config.xml file. This has been phased out, with the emphasis on the command line interface, and not necessary unless we're using a platform specific work flow. In that situation, we would add our plugins with the feature element. For example, first we wrap the plug in, inside of the feature element. Then we have the peram name and the name of the plug in. Again this is only if youre using a platform specific work flow, and working directly in the config.xml file. I've included links to the Cordova documentation, so you can check out the platform specific guides and see the preferences available to you. That's all you need to know about the config.xml file. In the next video, we will learn about the device ready event, and how to add a plugin.

Back to the top