Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • PhoneGap By Example
  • Toc
  • feedback
PhoneGap By Example

PhoneGap By Example

By : Andrew Kovalenko
close
PhoneGap By Example

PhoneGap By Example

By: Andrew Kovalenko

Overview of this book

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. It is one of the first and fastest spreading tools to develop hybrid applications using CSS, JavaScript, and HTML, without losing the advantages of native applications. If you are already a web developer, this book will provide you with the skills you need to create, customize, test, and deploy hybrid mobile applications. Starting from the beginning, this book will cover how to set up your PhoneGap development environment, add mobile web frameworks and plugins, design and customize the application layout, and utilize the embedded features of the PhoneGap framework. By working through the steps in each chapter, you will quickly master a variety of mobile applications with totally different approaches. You will then learn how to develop a PhoneGap plugin with native interfaces for iOS and Android, as well as common approaches to test PhoneGap applications. With ample screenshots that show you how to build a phenomenal application, PhoneGap by Example will ensure your success with this cutting-edge mobile development framework for hybrid applications.
Table of Contents (12 chapters)
close
11
Index

The config.xml structure

Before proceeding to consider the specific settings for each mobile platform, let's look at the common configuration file config.xml. This file contains very important information on setting up our future applications.

By default, our config.xml file has the following contents:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.cybind.travelly" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Travelly</name>
    <description>
      A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" 
    href="http://cordova.io">
      Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

Where:

  • Widget: It's ID attribute provides the app's reverse-domain identifier, and the version provides its full version number.

    Tip

    Reverse domain name notation is a naming convention for the components, packages, and types used by a programming language, system, or framework.

  • Name: This specifies the app's formal name as it appears on the device's home screen and within app-store interfaces.
  • Description and author: This specifies metadata and contact information that may appear within app-store listings.
  • Content: This optional element defines the app's starting page in the top-level web assets directory.
  • Access: This defines the set of external domains the app is allowed to communicate with. In our case, we allow it to access any server.

Furthermore, there can be other options presented. Usually, they are added under the tag access. These elements are preference and feature.

Preference items can be global and multiplatform.

For example, the following two settings are global and apply to all supported platforms:

<preference name="Fullscreen" value="true" />
<preference name="Orientation" value="landscape" />

Where:

  • Fullscreen allows you to hide the status bar at the top of the screen
  • Orientation allows you to lock orientation and prevent the interface from rotating in response to changes in orientation

The following two settings apply to multiple platforms, but not all:

<preference name="TopActivityIndicator" value="gray" />
<preference name="AutoHideSplashScreen" value="false" />

Where:

  • TopActivityIndicator sets the color of the Activity Indicator
  • AutoHideSplashScreen specifies whether to hide the splash screen automatically or allow the programmer to do it in code

In this case, it is not necessary to add feature elements manually, because in the initial stage, we will use the cross-platform workflow, where we will use the command CLI plugin to add the device API. However, when we move to fine-tuning of each platform, we will add the feature elements, as shown in this example:

  <feature name="Device">
    <param name="ios-package" value="CDVDevice" />
  </feature>

  <feature name="Device">
    <param name="android-package" value="org.apache.cordova.device.Device" />
  </feature>
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete