Saturday, 5 December 2020

What is Config.xml in PhoneGap?

 In this section of PhoneGap, we will first look at the config.xml file, which allows us to configure our application before submitting it to one of the online app stores. After that, we will learn about the Adobe PhoneGap build. It can automate the build process for both iOS and Android for our application. We will also take a look at the command-line interface for giving us a second way to build our applications. At last, we will talk about testing using the Android Virtual Device Tool. It will allow us to test our application on a simulated device on our screen. After gaining all this information, we will be ready to release our first PhoneGap application.

Config.xml

The config.xml file depends on the template we choose when we initially build our PhoneGap app. If we build our PhoneGap app using the PhoneGap Desktop application, it may look a little bit different from the command-line. In this complete file, we will briefly explain different sections and these sections will show which section is important and which is not.

1) Name

The first line is designed for the name that is important because it is the name that our app displays below the icon on someone's device.

  1. <name> Push Example </name>  

2) Description

The next line of code is designed for the description. We have to make sure that the description is robust and correct because this description is used by the App Store.

  1. <description>  
  2.         Push sample application that receives push notifications.  
  3. </description>  

3) Author email and support URL

The next line of code defines the author's email. We always want to have the correct author email here, and if we have a support URl, we need to put that here.

  1. <author email = "shubham.18mca3036@abes.ac.in" href = "http://javatpoint.com">  
  2.         Shubham Rastogi  
  3.     </author>  

4) Starting page of our app

The next line determines the starting page of our app. In a simple way, it determines the page from where our app will be started.

  1. <content src = "index.html" />  

5) Adding preferences

The next few lines are designed for some preferences that are important. We may or may not want to set these to change how our app appears. These preferences are:

  1. How scrolling is controlled in our app.
  2. What is the minimum Android version support?
  3. How the status bars appear, what color and style are used for the status bar.
  1. <preference name = "DisallowOverscroll" value = "true" />  
  2. <preference name = "android-minSdkVersion" value = "14" />  
  3. <preference name = "StatusBarOverlaysWebView" value = "false" />  
  4. <preference name = "StatusBarBackgroundColor" value = "#ee6e73" />  
  5. <preference name = "StatusBarStyle" value = "blacktranslucent" />  

6) Plugins

After preferences code, the next line are coded for plugins which we are using in our application. These plugins will be declared automatically, when we build those plugins.

  1. <plugin name = "phonegap-plugin-push" source = "npm" spec = "~1.8.0">  
  2.         <variable name = "SENDER_ID" value = "XXXXXXX" />  
  3. </plugin>  

7) icon

The next part is quite typical but important for Android. There are different standard screen densities, and it prefers that we have separate icons for each one. This icon is the icon that appears on our mobile screen when we install our application from the store. This is important because we want our icon to be professional and visually pleasing.

  1. <platform name = "android">  
  2.         <icon density = "ldpi" src = "www/res/icon/android/drawable-ldpi-icon.png" />  
  3.         <icon density = "mdpi" src = "www/res/icon/android/drawable-mdpi-icon.png" />  
  4.         <icon density = "hdpi" src = "www/res/icon/android/drawable-hdpi-icon.png" />  
  5.         <icon density = "xhdpi" src = "www/res/icon/android/drawable-xhdpi-icon.png" />  
  6.         <icon density = "xxhdpi" src = "www/res/icon/android/drawable-xxhdpi-icon.png" />  
  7.         <icon density = "xxxhdpi" src = "www/res/icon/android/drawable-xxxhdpi-icon.png" />  

8) Splash screens

The next line of code in our config.xml file is designed for our splash screen. The splash screen is what appears when the app is loading. This code has splash screens with the different densities that are available to us. These often are landscape and portrait. And we will also have a different orientation.

  1. <splash density = "land-ldpi" src = "www/res/screen/android/drawable-land-ldpi-screen.png" />  
  2. <splash density = "land-mdpi" src = "www/res/screen/android/drawable-land-mdpi-screen.png" />  
  3. <splash density = "land-hdpi" src = "www/res/screen/android/drawable-land-hdpi-screen.png" />  
  4. <splash density = "land-xhdpi" src = "www/res/screen/android/drawable-land-xhdpi-screen.png" />  
  5. <splash density = "land-xxhdpi" src = "www/res/screen/android/drawable-land-xxhdpi-screen.png" />  
  6. <splash density = "land-xxxhdpi" src = "www/res/screen/android/drawable-land-xxxhdpi-screen.png" />  
  7. <splash density = "port-ldpi" src = "www/res/screen/android/drawable-port-ldpi-screen.png" />  
  8. <splash density = "port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />  
  9. <splash density = "port-hdpi" src = "www/res/screen/android/drawable-port-hdpi-screen.png" />  
  10. <splash density = "port-xhdpi" src = "www/res/screen/android/drawable-port-xhdpi-screen.png" />  
  11. <splash density"port-xxhdpi" src = "www/res/screen/android/drawable-port-xxhdpi-screen.png" />  
  12. <splash density = "port-xxxhdpi" src = "www/res/screen/android/drawable-port-xxxhdpi-screen.png" />  
  13. </platform>  

Like android, we have platform for iOS, wp8(windows phones), ad windows.

9) Access

Now, the next few lines are coded for the URLs which our app is permitted to access. We allow our app to access http, https, telephone, SMS, etc. We also allow access to the Android marketplace or the iOS marketplace. If we have an embedded web browser within our app where the user might be able to put into URL navigate, this can be especially important.

  1. <access origin = "*" />  
  2. <allow-intent href = "http://*/*" />  
  3. <allow-intent href = "https://*/*" />  
  4. <allow-intent href = "tel:*" />  
  5. <allow-intent href = "sms:*" />  
  6. <allow-intent href = "mailto:*" />  
  7. <allow-intent href = "geo:*" />  
  8. <platform name = "android">  
  9.     <allow-intent href = "market:*" />  
  10. </platform>  
  11. <platform name = "ios">  
  12.     <allow-intent href = "itms:*" />  
  13.     <allow-intent href = "itms-apps:*" />  
  14. </platform>  

In the next section, we will learn about the Adobe PhoneGap Build.


No comments:

Post a Comment