Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 `config.xml` for PhoneGap Build

PhoneGap Build requires special settings in config.xml. In this lesson, I’ll show you how to specify these and how they are different than in a local build.

Related Links

3.2 `config.xml` for PhoneGap Build

Hello, everyone. This is Reggie Dawson. Welcome to the Publishing App with Cordova course for tuts+. The main configuration we need to do for PhoneGap Build is with the config.xml file. I knowi we have talked about this file a lot, and that is primarily because this is what controls our app. PhoneGap is no different, and the format is actually a little different than a local config.xml. Let's take a look. The first change is in our widget element that still wraps our file. Our XML namespace of http://cordova.apache.org has been replaced with xmlns:gap http://phonegap.com. Now this is essential, without this, none of our plugins will work and you will get errors when you try to build your app. The name, description, and author tags remain the same. Then we have gap:platform name ios and android. Contrary to a local build, when platform with specific preferences to be written to a config.xml file, this platform tag is different. By default, PhoneGap Build will compile your app for all the platforms it supports, which are iOS, Android, and Windows Phone. The gap:platform tag specifies that the build service should only compile for the platforms listed. Next we have our familiar preference element. This preference specifies that the app will appear in portrait. I added this tag just to show you a preference, as this tag is not necessary. The reason is that if we omit this tag, the app will use the default, which is usually the portrait. Other multi form preferences supported our phonegap-version, which allows you to specify the Phone Gap version you want to use to build your app. If you don't add this preference, the app will be built with the current version and full screen, which hides the status bar, makes our app full screen. Then, our iOS specific preferences are target-device, which allows you to target a handset, tablet or universal. Prerendered-icons, which when set to false will not apply gloss to the app icons. Detect-data-types which controls whether data types are turned into links by the system. Exit-on-suspend, which determines if the app is terminated when suspended and deployment target which sets the minimum OS version for your app. Then our Android specific preferences are android-midSdkVersion, android-maxSdkVersion, and android-targetSdkVersion, which corresponds to the minimum version of Android we can run the app with, the maximum version, the target version of Android. The android-installLocation determines where the app is installed. Either internalOnly, which is the default, or preferExternal, which installs the app on the SD card. Then android-windowSoftInputMode, which controls how the app interacts with the onscreen keyboard. And finally the android-build-tool, which determines which build tool is used to build the app, ant or gradle. The preference defaults to gradle. Again, I know this is a lot of information, so I've included a link to the preferences so that you can determine what preferences you wanna use with Build. Next we have the gap:config element that allows us to configure the iOS property list or the Android manifest file. Similar to our platform element used when building locally this allows us to set up specific features for our platform. For example, the Android manifest allows all sizes of screens, but say we wanted to disable support for extra large screens. This gap:config preference disables extra large screens and will be written to the Android manifest. One thing of note, though, when using the gap:config file with Android, we have to add the Android name space. Next we have our splash icon and splash screen. As opposed to using the plugin, I adopted the easier approach and used the default icon and splash screen. Instead of me having to use multiple images from my icons splash screens for each platform, the default applies this for all platforms. When we use the defaults, the images go into root of the app. Remember when I was showing you the project in the last video, that is why icon.png and splash.png were in this folder. Also, take note, the files have to named icon.png and splash.png respectively. We use iconsrc=icon.png to add our icon, and gap:splashsrc=splash.png to add our splash screen. Compared to a local build, it is simple to add icons and splash screens for all platforms. Then we have our gap:plugin element. Unlike our local work flow, no plugins will work or be included in our project unless they are added here. As you can see, we have added all of our plugins from our project with the exception of the splash screen plugin and the whitelist plugin. Plugins can be used from PhoneGap's repository, the Cordova npm repository, or the deprecated Cordova plugins repository. It is advised not to use the old code over repository as it will be removed October 15, 2015, so it is a good idea to use either PhoneGap or the Cordova npm repository. Now our plug-ins take the form of gap:plugin, the name and the source. If we omit the source it will default to PhoneGap Build and since I used npm plugins, I have added npm as the source. We can also add a version number if we want to use a particular version of a plugin. Also, if a plugin has additional parameters, we can add them as children to the plug in element. And then finally, we have the access origin tag. As you can see, I've omitted the whitelist plug in for a few reasons. First, our app doesn't connect to remote resources. And then secondly I wanted to show you that we don't need to whitelist plugin, as we can configure access is the remote resources directly to the access origin element. As you can see here we have added the asterisk to allow access to all remote addresses. But we can easily change that to reference a specific address if we liked. No that's all you need to configure your project to use PhoneGap Build. In the next video we will actually build our app.

Back to the top