diff --git a/docpad.js b/docpad.js index 3ac3d033e..0825e1fdc 100644 --- a/docpad.js +++ b/docpad.js @@ -12,6 +12,10 @@ module.exports = { "layoutsPaths": [ "layouts" ], + "regenerateDelay": 0, + "watchOptions": { + "catchupDelay": 0 + }, "plugins": { "cleanurls": { "trailingSlashes": true, @@ -73,6 +77,26 @@ module.exports = { .on('add', function(model) { model.setMetaDefaults({ 'layout': 'default' }); }); + }, + gsDocs: function() { + return this.getCollection('html') + .findAllLive({ extension: 'md' }) + }, + getStartedDocs: function() { + return this.getCollection('gsDocs') + .findAllLive({url: {$startsWith:'getting-started/' }}, [{ relativeBase: 1 }]) + }, + referenceDocs: function() { + return this.getCollection('gsDocs') + .findAllLive({url: {$startsWith:'references/' }}, [{ relativeBase: 1 }]) + }, + tutorialDocs: function() { + return this.getCollection('gsDocs') + .findAllLive({url:{$startsWith:'tutorials/'}}, [{ relativeBase: 1 }]) + }, + pgbDocs: function() { + return this.getCollection('gsDocs') + .findAllLive({url:{$startsWith:'phonegap-build/'}}, [{ relativeBase: 1 }]) } } }; diff --git a/docs/1-getting-started/0-index.html.md b/docs/1-getting-started/0-index.html.md index f39b6b1f6..3aca83649 100644 --- a/docs/1-getting-started/0-index.html.md +++ b/docs/1-getting-started/0-index.html.md @@ -4,4 +4,9 @@ url: getting-started layout: subpage --- -Getting started content here \ No newline at end of file +The getting started guides are provided to help new users get up and running as quickly as possible with the least amount of +setup and time. + +Once you've completed the getting started section, be sure to head over to the [tutorials](/tutorials) +and [references](references) sections where you'll be able to dig into more advanced mobile app development related topics +and find numerous useful resources. diff --git a/docs/1-getting-started/1-install-phonegap/1-desktop.html.md b/docs/1-getting-started/1-install-phonegap/1-desktop.html.md index fe92d4fb3..b3eb42c2e 100644 --- a/docs/1-getting-started/1-install-phonegap/1-desktop.html.md +++ b/docs/1-getting-started/1-install-phonegap/1-desktop.html.md @@ -24,7 +24,7 @@ Select your operating system to continue: ### Mac OS X Installation -1. Download the latest [Mac OS X Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.0/PhoneGapDesktop.dmg). +1. Download the latest [Mac OS X Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.1/PhoneGapDesktop.dmg). 2. Double-click the downloaded file to run the installer. You will initially be prompted with a license agreement to accept: ![](/images/license-agreement.png) @@ -40,7 +40,7 @@ install the __PhoneGap Developer App__ to your mobile device for previewing the ### Windows Installation -1. Download the latest [Windows Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.0/PhoneGapSetup-win32.exe). +1. Download the latest [Windows Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.1/PhoneGapSetup-win32.exe). 2. Double click the downloaded file to run the installer. You will be prompted with the PhoneGap Desktop Setup Wizard: ![](/images/win-desktop1.png) diff --git a/docs/1-getting-started/1-install-phonegap/2-cli.html.md b/docs/1-getting-started/1-install-phonegap/2-cli.html.md index 58a5fe708..71fe7e51d 100644 --- a/docs/1-getting-started/1-install-phonegap/2-cli.html.md +++ b/docs/1-getting-started/1-install-phonegap/2-cli.html.md @@ -19,14 +19,14 @@ CLI this option may be best going forward.
**NOTE:** The getting started steps vary based on the initial PhoneGap tool you install here in step 1. For the rest of the steps be sure to choose either the **Desktop** or **CLI** tab at the top accordingly.
-###Requirements +### Requirements There are a few simple requirements you'll need prior to installing the PhoneGap CLI: - [node.js](http://nodejs.org/) - a JavaScript runtime to build your JavaScript code - [git](http://git-scm.com) - used in the background by the CLI to download assets. It comes pre-installed on some operating systems. To see if you already have it installed, type `git` from the command line. -###Install Steps +### Install Steps 1. Install the [PhoneGap CLI](https://www.npmjs.com/package/phonegap) via `npm` with the following command from the Terminal app (Mac) or Command Prompt (Win).
diff --git a/docs/1-getting-started/3-create-your-app/1-desktop.html.md b/docs/1-getting-started/3-create-your-app/1-desktop.html.md index 293a2d476..df62c39df 100644 --- a/docs/1-getting-started/3-create-your-app/1-desktop.html.md +++ b/docs/1-getting-started/3-create-your-app/1-desktop.html.md @@ -17,7 +17,7 @@ your first PhoneGap project. This project will be a PhoneGap mobile app with the in just a few simple steps. -###Create Default PhoneGap Project +### Create Default PhoneGap Project The PhoneGap desktop tools include a default Hello World project for beginners to start with. It's proven to be the quickest and easiest way to understand the basics of building a mobile PhoneGap app so let's start there: 1. Click the plus sign and select **Create new PhoneGap project** as shown below: diff --git a/docs/1-getting-started/3-create-your-app/2-cli.html.md b/docs/1-getting-started/3-create-your-app/2-cli.html.md index 8df9101d5..df9014aac 100644 --- a/docs/1-getting-started/3-create-your-app/2-cli.html.md +++ b/docs/1-getting-started/3-create-your-app/2-cli.html.md @@ -16,7 +16,7 @@ to your computer and the [PhoneGap Developer App](/getting-started/2-install-mob your first PhoneGap project. This project will be a PhoneGap mobile app with the ability to run on multiple devices and across operating systems in just a few simple steps. -###Create Default PhoneGap Project +### Create Default PhoneGap Project The PhoneGap CLI has a default Hello World project for beginners to start with. It's proven to be the quickest and easiest way to understand the basics of building a mobile PhoneGap app so let's start by creating the default project with the CLI. diff --git a/docs/1-getting-started/4-preview-your-app/2-cli.html.md b/docs/1-getting-started/4-preview-your-app/2-cli.html.md index aff8c9bde..27fe08b50 100644 --- a/docs/1-getting-started/4-preview-your-app/2-cli.html.md +++ b/docs/1-getting-started/4-preview-your-app/2-cli.html.md @@ -9,6 +9,7 @@ tabs: - label: CLI url: getting-started/4-preview-your-app/cli next: 1-getting-started/5-going-further.html.md +menuHide: true --- The PhoneGap CLI has a `serve` command that starts a small web server to host your project where it can then be consumed by the PhoneGap Developer App diff --git a/docs/2-tutorials/0-index.html.md b/docs/2-tutorials/0-index.html.md index ddf099a87..532de1024 100644 --- a/docs/2-tutorials/0-index.html.md +++ b/docs/2-tutorials/0-index.html.md @@ -4,4 +4,18 @@ url: tutorials layout: subpage --- -Using Sprite Sheets content here +#### Mobile App Development Phases + +Creating a mobile app can require several stages which can be categorized in the following phases: + +- Configuring +- Developing +- Debugging +- Optimizing +- Distributing + +In this section of our docs, we aim to provide information and resources to help you deal with the most challenging +topics in each stage of the app building cycle. This section is a continuous work in progress as the challenges mobile +developers face are ever changing. Be sure to check back often to learn more. + + diff --git a/docs/2-tutorials/1-configure/0-index.html.md b/docs/2-tutorials/1-configure/0-index.html.md index e6ba09715..edb5e7207 100644 --- a/docs/2-tutorials/1-configure/0-index.html.md +++ b/docs/2-tutorials/1-configure/0-index.html.md @@ -1,8 +1,12 @@ --- title: Configure Guides -url: configure +url: tutorials/configure layout: subpage -write: false --- -Configure landing page here +The tutorials in this section are aimed at helping you with specific configuration topics or challenges you may face +once you've dug in and started building your own apps. + +These are the guides you should look to for information on specific platform configuration and more advanced configuration +topics. + diff --git a/docs/2-tutorials/1-configure/1-icons.html.md b/docs/2-tutorials/1-configure/1-icons/1-ios.html.md similarity index 94% rename from docs/2-tutorials/1-configure/1-icons.html.md rename to docs/2-tutorials/1-configure/1-icons/1-ios.html.md index 07ec76cf1..936eeedcd 100644 --- a/docs/2-tutorials/1-configure/1-icons.html.md +++ b/docs/2-tutorials/1-configure/1-icons/1-ios.html.md @@ -1,8 +1,14 @@ --- -title: Icons -url: configure/icons +title: iOS Icons +url: tutorials/configure/icons/ios layout: subpage -write: false +tabs: + - label: iOS + url: tutorials/configure/icons/ios + - label: Android + url: tutorials/configure/icons/android + - label: Windows + url: tutorials/configure/icons/win --- ## Icon Configuration diff --git a/docs/2-tutorials/1-configure/1-icons/2-android.html.md b/docs/2-tutorials/1-configure/1-icons/2-android.html.md new file mode 100644 index 000000000..36249ced3 --- /dev/null +++ b/docs/2-tutorials/1-configure/1-icons/2-android.html.md @@ -0,0 +1,102 @@ +--- +title: Android Icons +url: tutorials/configure/icons/android +layout: subpage +tabs: + - label: iOS + url: tutorials/configure/icons/ios + - label: Android + url: tutorials/configure/icons/android + - label: Windows + url: tutorials/configure/icons/win +--- + +## Icon Configuration + +This section shows how to configure the icons that represent your mobile application. + +## Configuring Icons in config.xml + +When working in the PhoneGap CLI you can define app icon(s) via the `` element (`config.xml`). + +If you do not specify an icon then the default logo included in the project is used (when available). + + + +src: (required) specifies the location of the image file, relative to your project directory + +platform: (optional) target platform + +width: (optional) icon width in pixels + +height: (optional) icon height in pixels + +density: (optional) android specific, specifies icon density + +The following configuration can be used to define single default icon +which will be used for all platforms. + + + +For each platform you can also define a pixel-perfect icons set to fit +different screen resolutions. + +#### Android + + + + + + + + +
**TIP:** See this [Android Developer Iconography Guide](http://developer.android.com/design/style/iconography.html) for more details.
+ +#### iOS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +#### Windows Phone8 + + + + + + + +#### Windows8 + + + + + + + + diff --git a/docs/2-tutorials/1-configure/1-icons/3-win.html.md b/docs/2-tutorials/1-configure/1-icons/3-win.html.md new file mode 100644 index 000000000..ec35e189c --- /dev/null +++ b/docs/2-tutorials/1-configure/1-icons/3-win.html.md @@ -0,0 +1,102 @@ +--- +title: Windows Icons +url: tutorials/configure/icons/win +layout: subpage +tabs: + - label: iOS + url: tutorials/configure/icons/ios + - label: Android + url: tutorials/configure/icons/android + - label: Windows + url: tutorials/configure/icons/win +--- + +## Icon Configuration + +This section shows how to configure the icons that represent your mobile application. + +## Configuring Icons in config.xml + +When working in the PhoneGap CLI you can define app icon(s) via the `` element (`config.xml`). + +If you do not specify an icon then the default logo included in the project is used (when available). + + + +src: (required) specifies the location of the image file, relative to your project directory + +platform: (optional) target platform + +width: (optional) icon width in pixels + +height: (optional) icon height in pixels + +density: (optional) android specific, specifies icon density + +The following configuration can be used to define single default icon +which will be used for all platforms. + + + +For each platform you can also define a pixel-perfect icons set to fit +different screen resolutions. + +#### Android + + + + + + + + +
**TIP:** See this [Android Developer Iconography Guide](http://developer.android.com/design/style/iconography.html) for more details.
+ +#### iOS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +#### Windows Phone8 + + + + + + + +#### Windows8 + + + + + + + + diff --git a/docs/2-tutorials/1-configure/2-splash-screens.html.md b/docs/2-tutorials/1-configure/2-splash-screens.html.md index 55aa00892..ab1edf5a6 100644 --- a/docs/2-tutorials/1-configure/2-splash-screens.html.md +++ b/docs/2-tutorials/1-configure/2-splash-screens.html.md @@ -1,19 +1,16 @@ --- title: Splash Screens -url: configure/splash-screens +url: tutorials/configure/splash-screens layout: subpage -write: false --- -## Splash Screen Configuration - ## Configuring Splash Screens in config.xml In the top-level `config.xml` file (not the one in `platforms`), add configuration elements like those specified here. # Example configuration -Please notice that the value of the "src" attribute is relative to the project directory and not to the *www* directory. +The value of the "src" attribute is relative to the project directory and not to the *www* directory. You can name the source image whatever you like. The internal names in the app are determined by Cordova. ### Android diff --git a/docs/2-tutorials/1-configure/3-config-xml-properties.html.md b/docs/2-tutorials/1-configure/3-config-xml-properties.html.md index 5a207411c..b4f55fcf4 100644 --- a/docs/2-tutorials/1-configure/3-config-xml-properties.html.md +++ b/docs/2-tutorials/1-configure/3-config-xml-properties.html.md @@ -1,6 +1,6 @@ --- title: Config.xml Properties -url: configure/config-xml-properties +url: tutorials/configure/config-xml-properties layout: subpage write: false --- diff --git a/docs/2-tutorials/1-configure/4-ios-status-bar-handling.html.md b/docs/2-tutorials/1-configure/4-ios-status-bar-handling.html.md index 7dd2e338b..24d874bfd 100644 --- a/docs/2-tutorials/1-configure/4-ios-status-bar-handling.html.md +++ b/docs/2-tutorials/1-configure/4-ios-status-bar-handling.html.md @@ -1,6 +1,6 @@ --- title: iOS Status Bar Handling -url: configure/ios-status-bar-handling +url: tutorials/configure/ios-status-bar-handling layout: subpage write: false --- diff --git a/docs/2-tutorials/1-configure/5-using-hooks.html.md b/docs/2-tutorials/1-configure/5-using-hooks.html.md index 5b4f93ffe..478c998eb 100644 --- a/docs/2-tutorials/1-configure/5-using-hooks.html.md +++ b/docs/2-tutorials/1-configure/5-using-hooks.html.md @@ -1,9 +1,8 @@ --- title: Using Hooks -url: configure/using-hooks +url: tutorials/configure/using-hooks layout: subpage write: false -order: 5 --- Hooks are scripts (snippets of code) that the CLI executes at certain points in your application build process. They allow you to extend the diff --git a/docs/2-tutorials/2-develop/0-index.html.md b/docs/2-tutorials/2-develop/0-index.html.md index 9286a16eb..f0114bbbf 100644 --- a/docs/2-tutorials/2-develop/0-index.html.md +++ b/docs/2-tutorials/2-develop/0-index.html.md @@ -1,7 +1,12 @@ --- title: Develop Guides -url: develop +url: tutorials/develop layout: subpage --- -Develop Guides content here +The tutorials in this section are aimed at helping you with specific development topics or challenges once you've gotten your +feet wet in the getting started section and have started building your own apps. + +These are the guides you should look to for information on more advanced topics and to provide you a deeper knowledge base. + + diff --git a/docs/2-tutorials/2-develop/1-embed-webview/1-ios.html.md b/docs/2-tutorials/2-develop/1-embed-webview/1-ios.html.md index 6a1dfa242..831f5092c 100644 --- a/docs/2-tutorials/2-develop/1-embed-webview/1-ios.html.md +++ b/docs/2-tutorials/2-develop/1-embed-webview/1-ios.html.md @@ -1,16 +1,16 @@ --- title: "Embedding the Webview" -url: develop/1-embed-webview/ios +url: tutorials/develop/1-embed-webview/ios github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/2-tutorials/2-develop/1-embed-webview/1-ios.html.md layout: subpage tabs: - label: iOS - url: develop/1-embed-webview/ios + url: tutorials/develop/1-embed-webview/ios - label: Android - url: develop/1-embed-webview/android + url: tutorials/develop/1-embed-webview/android --- -##Creating Apps with PhoneGap and iOS Native Components +## Creating Apps with PhoneGap and iOS Native Components Before getting started you should read [this blog post](http://phonegap.com/blog/2015/03/12/mobile-choices-post1/) about choosing a mobile strategy. As a quick refresher, the type of app we're referring to here includes a blend of native controls and one or more webviews. One common use case implemented in many popular @@ -279,12 +279,12 @@ See this [video](https://www.youtube.com/watch?v=eTV-tNzWxGc) to understand how ### Option 2: Combining iOS Native and WebView Components from Scratch In this section we'll cover the manual approach to combining iOS native components with Cordova webview components. -###Reference App +### Reference App We'll use this [sample application](https://github.com/phonegap/phonegap-sample-hybrid-ios) for reference throughout the tutorial. It contains two views; a Cordova view and a native view. The final sample app will have a button on the Cordova webview that will add an item to a table control in the native view to represent a bookmark to show how to communicate between the web and native views. -###Lesson 1: Create a Default Cordova iOS Project +### Lesson 1: Create a Default Cordova iOS Project Most developers use the PhoneGap or Cordova CLI to create their projects, and while it is possible to use it for this approach, it's not recommended since we are only working with the iOS platform project itself. Instead, we'll use the [cordova-ios](https://github.com/apache/cordova-ios) project. This is the same project used from the CLI when you add the iOS platform. @@ -308,7 +308,7 @@ on iOS so you can receive log messages): `$ plugman install --platform ios --project . --plugin cordova-plugin-console` -###Lesson 2: Set up the Storyboard +### Lesson 2: Set up the Storyboard 1. Open the `HybridIOSApp.xcodeproj` file in Xcode (requires Mac OS). This is the base native project we're extending. 2. Create an iOS storyboard to lay out each screen as a 'scene'. Ensure you have the `Classes` folder of your `HybridIOSApp` @@ -388,7 +388,7 @@ set the entry point as well that needs to be removed. Open **AppDelegate.m** and Hello Cordova app and the native view is currently blank. We will change that in the next lesson. -###Lesson 3: Adding to the Native View +### Lesson 3: Adding to the Native View In this lesson we'll set up a table in our native view to allow for items to be added to it and displayed when a button is clicked from the Cordova WebView. To set up our native view to display a table, we'll also need to define a custom `UITableViewController` class for our logic. @@ -466,14 +466,14 @@ over to the left to align it as shown below: return cell; } -###Run it! +### Run it! Now stop and run your application in the emulator or on your iPhone. You should see a blank table now for the Native **History** view as shown here: Running empty In the next lesson we'll show how you can add items to this table from a WebView button control by communication via a plugin. -###Troubleshoot +### Troubleshoot If you have any errors upon run, double check your code updates above against the sample project and ensure your Storyboard matches. You should also specifically check to ensure your Native View Controller outlets look the same as in this screenshot below and the **View -> Table View** is shown as an Outlet. @@ -486,7 +486,7 @@ Your app name should be set as the scheme, and the iPhone 6 simulator or your ow ![](/images/target.png) -###Lesson 4: Web to Native Communication +### Lesson 4: Web to Native Communication The way to communicate between the Cordova and native iOS views is via a Cordova plugin. Let's create our own custom plugin now and we'll see how we can gain access to the `TableViewController` to add an item to the table. @@ -515,7 +515,7 @@ message back, but you could also pass the error status along with a message or a For a list of the different result types, see [this doc](http://cordova.apache.org/docs/en/edge/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide). -###Create a Cordova Plugin +### Create a Cordova Plugin Start creating your custom plugin by going to the **Xcode File -> New -> File** menu and selecting Cocoa Touch. Ensure to choose the `CDVPlugin` as the subclass for your new plugin and name it something like `MyHybridPlugin` and save into your **Classes** folder. @@ -595,7 +595,7 @@ and parameters (the string to add to the native table view): -###Use the Plugin +### Use the Plugin 1. Now open your Cordova **index.js** file located in the project under the `www/js` folder and add a method on the JavaScript side called `addBookmark` that will call the `addBookmark` method in the plugin via the `exec` call (highlighted in red). @@ -645,6 +645,6 @@ native view. Keep adding items and see them added into your native table view!
The full [sample project](https://github.com/phonegap/phonegap-sample-hybrid-ios) for this guide can be found in the [PhoneGap GitHub repository](https://github.com/phonegap/phonegap-sample-hybrid-ios) for further reference.
-###Conclusion +### Conclusion While it may not be the most aesthetically pleasing looking app, it illustrates how easily you can combine native and webview elements to get you thinking about more options in approaching this for your own hybrid app development! diff --git a/docs/2-tutorials/2-develop/1-embed-webview/2-android.html.md b/docs/2-tutorials/2-develop/1-embed-webview/2-android.html.md index 04b1edfa9..8509b029c 100644 --- a/docs/2-tutorials/2-develop/1-embed-webview/2-android.html.md +++ b/docs/2-tutorials/2-develop/1-embed-webview/2-android.html.md @@ -1,32 +1,32 @@ --- title: "Embedding the Webview" -url: develop/1-embed-webview/android +url: tutorials/develop/1-embed-webview/android github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/2-tutorials/2-develop/1-embed-webview/2-android.html.md layout: subpage tabs: - label: iOS - url: develop/1-embed-webview/ios + url: tutorials/develop/1-embed-webview/ios - label: Android - url: develop/1-embed-webview/android + url: tutorials/develop/1-embed-webview/android --- -##Creating Apps with PhoneGap and Android Native Components +## Creating Apps with PhoneGap and Android Native Components In this guide we'll walk through the basic steps needed to create a native hybrid Android app that has elements of both native Android components and a Cordova webview. For more information about why you might choose this approach, read [this blog post](http://phonegap.com/blog/2015/03/12/mobile-choices-post1/). -###Requirements: +### Requirements: - [Android Studio](http://developer.android.com/tools/studio/index.html) - [Plugman](https://github.com/apache/cordova-plugman) -###Reference App +### Reference App We'll use this [sample application](https://github.com/phonegap/phonegap-sample-hybrid-android) for reference throughout the tutorial. It contains two views; a Cordova view and a native view. The final sample app will have a button on the Cordova webview that will add an item to a list in the native view to show how to communicate between the web and native views. The sample also uses a couple other Cordova plugins to show how they're installed and for further reference use. -###Step 1: Create a Base Cordova Project +### Step 1: Create a Base Cordova Project Most developers use the PhoneGap or Cordova CLI to create their projects, however for this type of project it's not recommended since we are only working with the Android platform project specifically and we don't want to rebuild or overwrite the platform level code each time we run. Instead we'll use the [cordova-android](https://github.com/apache/cordova-android) project itself. (This is the same project used from the CLI when you add the @@ -51,7 +51,7 @@ base project you cloned or unzipped locally to create the default **Hello Cordov Copying template files... Android project created with cordova-android@4.1.0-dev -###Step 2: Add Plugins +### Step 2: Add Plugins 2. Next use [plugman](https://github.com/apache/cordova-plugman) to add any desired plugins. Plugman is the tool used to work with Cordova plugins when we're not using a CLI specifically. While still on the command line, `cd` into the root project created above: @@ -65,30 +65,30 @@ we're not using a CLI specifically. While still on the command line, `cd` into t $ plugman install --platform android --project . --plugin cordova-plugin-device $ plugman install --platform android --project . --plugin nl.x-services.plugins.toast -###Step 3: Import the project into Android Studio +### Step 3: Import the project into Android Studio Go to **File -> Import Project** and select the root **HybridAndroidApp** project created above. Allow the Gradle Sync to occur by clicking Ok in the dialog that pops up: - ![](../../../images/gradle-ok.png) + ![](/images/gradle-ok.png)
Stop and run the app now to ensure you see the default Hello Cordova app running and the DEVICE READY message before moving on.
-###Step 4: Create a layout for a native view +### Step 4: Create a layout for a native view Next create a layout resource file to represent a native list view. The layout resource is an xml file that defines how a view will look. It will be used in the `MyListActivity.java` Class created in the next step. To create a layout, right click on the **res** folder in the project navigator on the left and then select the **New -> Android Resource Directory** option. In the dialog popup, select **layout** for the Directory name and Resource type and leave Source set to **main**. - ![](../../../images/res-folder.png) + ![](/images/res-folder.png) - ![](../../../images/layout-folder.png) + ![](/images/layout-folder.png) Now right click on the new **layout** folder in the project navigator and select **New -> Layout Resource** file. Put in a name of `activity_list` and leave the Root element and Directory name as is. - ![](../../../images/layout-resource.png) + ![](/images/layout-resource.png) Paste in the following content to represent a simple list view. We'll use this list view to add items when pressing a button from the Cordova view: @@ -103,7 +103,7 @@ Paste in the following content to represent a simple list view. We'll use this l /> -###Step 5: Create a Native List Activity +### Step 5: Create a Native List Activity Now we need a native `Activity` class to represent the logic behind this view. Based on the android docs, an activity is a single, focused thing a user can do. Almost all activities interact with the user, so the `Activity` class takes care of creating a window for your UI. Create a new Java Class called `MyListActivity` in your project's `java/` folder at the same level as the @@ -146,7 +146,7 @@ a window for your UI. Create a new Java Class called `MyListActivity` in your pr Note the line `setContentView(R.layout.activity_list);`. This is the line where we specify the layout view to associate with this `Activity`. -###Step 6: Add to the AndroidManifest.xml +### Step 6: Add to the AndroidManifest.xml In this step we'll add our new `Activity` to the `AndroidManifest.xml`. Open the `AndroidManifest.xml` in the root of your project (or it may be listed in Android Studio under a **manifests** folder depending on your view) and insert @@ -159,9 +159,9 @@ an <activity> element for `MyListActivity` in the <application> elem -###Step 7: Cordova to Native Communication +### Step 7: Cordova to Native Communication -###Hybrid Plugin +### Hybrid Plugin In this section we'll use a custom plugin to communicate between the native and cordova views. You can go through the steps below to create your own plugin, or install or clone it from [here](https://github.com/hollyschinsky/HybridBridgePlugin.git) for use or if you want to skip the plugin creation process for now and move on to [Step 8](#step8). @@ -171,7 +171,7 @@ In this section we'll use a custom plugin to communicate between the native and -####Plugin Create Steps (Optional) +#### Plugin Create Steps (Optional) 1. Create a new folder somewhere outside of your hybrid android project named **HybridBridgePlugin** with two subdirectories named `src` and `www`. 2. Next, navigate into the `www/js` folder and create a JavaScript file for the plugin interface named `HybridBridge.js`. Insert the following code: @@ -287,7 +287,7 @@ and create the Java interface for the plugin in a file named `HybridBridge.java` Your final plugin structure should look like the following: - ![](../../../images/plugin-structure.png) + ![](/images/plugin-structure.png) 4. Now, open your terminal and cd into the root of your hybrid android project. Install your new plugin with the following syntax and using the path to your own hybrid plugin after the `--plugin` option: @@ -299,7 +299,7 @@ and create the Java interface for the plugin in a file named `HybridBridge.java` $ plugman install --platform android --plugin https://github.com/hollyschinsky/HybridBridgePlugin.git --project . -###Step 8: Use the Hybrid Plugin +### Step 8: Use the Hybrid Plugin 1. Open `/assets/www/index.html` and modify the `app div` block to include the new `input` and `button` HTML elements shown below: @@ -353,15 +353,15 @@ and create the Java interface for the plugin in a file named `HybridBridge.java` } -###Step 9: Run it! +### Step 9: Run it! Run it now from Android Studio and choose either an emulator or device target. Here it is running in a Nexus 5 emulator. Enter text and click Add Item to ensure it's working correctly. Click the other buttons to display device info, show a toast message etc, taking advantage of the other plugins added to the project. - ![](../../../images/hybrid-android-run.png) + ![](/images/hybrid-android-run.png) -###Step 10: Troubleshooting +### Step 10: Troubleshooting If you run into any issues, start by checking logcat (the device console for Android) to look for errors. You can use the `logcat` window from Android Studio or run it from the command line with: diff --git a/docs/2-tutorials/2-develop/1-frameworks-tools-workflow-guidelines.html.md b/docs/2-tutorials/2-develop/1-frameworks-tools-workflow-guidelines.html.md deleted file mode 100644 index a8b14e650..000000000 --- a/docs/2-tutorials/2-develop/1-frameworks-tools-workflow-guidelines.html.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Frameworks/Tools/Workflow Guidelines -url: develop/frameworks-tools-workflow-guidelines -layout: subpage -write: false ---- - -Frameworks/Tools/Workflow Guidelines content here diff --git a/docs/2-tutorials/2-develop/9-hello-world-explained.html.md b/docs/2-tutorials/2-develop/2-hello-world-explained.html.md similarity index 97% rename from docs/2-tutorials/2-develop/9-hello-world-explained.html.md rename to docs/2-tutorials/2-develop/2-hello-world-explained.html.md index 57d3ca71a..32bcf470a 100644 --- a/docs/2-tutorials/2-develop/9-hello-world-explained.html.md +++ b/docs/2-tutorials/2-develop/2-hello-world-explained.html.md @@ -1,6 +1,7 @@ --- title: Hello World Explained -url: develop/hello-world-explained +url: tutorials/develop/hello-world-explained +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/2-tutorials/2-develop/2-hello-world-explained.html.md layout: subpage --- diff --git a/docs/2-tutorials/2-develop/5-pluggable-webviews.html.md b/docs/2-tutorials/2-develop/5-pluggable-webviews.html.md deleted file mode 100644 index 2c0eae9fb..000000000 --- a/docs/2-tutorials/2-develop/5-pluggable-webviews.html.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Pluggable Webviews -url: develop/pluggable-webviews -layout: subpage -write: false ---- - -Pluggable Webviews content here diff --git a/docs/2-tutorials/2-develop/2-storage-options.html.md b/docs/2-tutorials/2-develop/5-storage-options.html.md similarity index 100% rename from docs/2-tutorials/2-develop/2-storage-options.html.md rename to docs/2-tutorials/2-develop/5-storage-options.html.md diff --git a/docs/2-tutorials/2-develop/6-push-notifications.html.md b/docs/2-tutorials/2-develop/6-push-notifications.html.md old mode 100644 new mode 100755 index 67005ec3f..5daf8adc5 --- a/docs/2-tutorials/2-develop/6-push-notifications.html.md +++ b/docs/2-tutorials/2-develop/6-push-notifications.html.md @@ -1,8 +1,210 @@ --- title: Push Notifications -url: develop/push-notifications +url: tutorials/develop/push-notifications +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/2-tutorials/2-develop/6-push-notifications.html.md layout: subpage -write: false --- -Push Notifications content here +You can use the **PhoneGap Developer App** paired with the **PhoneGap CLI** to immediately preview your app on a device without installing platform SDKs, registering devices, or compiling code. The PhoneGap CLI starts a small web server to host your project and returns the server address for you to pair with from the PhoneGap Developer App running on your mobile device. + +Starting with **PhoneGap CLI** release 6.2.0 and **PhoneGap Developer App** release 1.6.2, you can now test push notification functionality without needing to set up a [Google Cloud Messaging (GCM) ](https://developer.android.com/google/gcm/index.html) project for Android or an [Apple Push Notification Service (APNs)](https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Chapters/ApplePushService.html) certification for iOS. + +
Double check to ensure you're running your device and computer on the same network before continuing.
+ +### Create Default PhoneGap Push Project + +1. Enter the following command from your terminal: + + $ phonegap create myApp --template phonegap-template-push + + This will create a folder named myApp in the current path location with a default project name of Hello World and id of com.phonegap.helloworld. + + You can also specify a name and identifier to ensure the project is unique but still contains the default Hello World code project by specifying them as qualified parameters as shown below: + + $ phonegap create myApp --id "org.myapp.sample" --name "appSample" --template phonegap-template-push + +2. Verify that you see the following output in your console after you run the command: + + Creating a new cordova project. + + Retrieving phonegap-template-push using npm... + +3. Change into the new project directory with the cd command: + + $ cd myApp/ + +4. Check to be sure you see the following set of files and folders shown below: + + config.xml hooks platforms plugins www + +5. `cd` into the ***www*** folder and look around at the files and subfolders in there, this is the content of your app, with the entry point being the index.html file. + + $ cd www/ + +
**TIP:** Details about the rest of the files and folders created in the root project will be covered in guides further along. For now just focus on the ***www*** folder and its contents.
+ +6. Type `$ phonegap serve`. You will receive the server address the app is being hosted on in the output received in the console (`192.168.1.11:3000` in this example): + + $ phonegap serve + [phonegap] starting app server... + [phonegap] listening on 192.168.1.11:3000 + [phonegap] + [phonegap] ctrl-c to stop the server + [phonegap] + +7. Now go to your mobile device where the PhoneGap Developer App is running, enter the server address on the main screen and tap **Connect**. + + PhoneGap Developer App, iOS + + +
**NOTE:** Tap directly on the server address displayed in the terminal screen of the PhoneGap Developer app to change it to match yours. The value filled in by default is only a sample.
+ + You should see the connection occur followed by a success message as shown below. If you receive an error of any kind, ensure + once again that you are connected to the same network on both your and computer. You could also check the + [issue tracker](https://github.com/phonegap/phonegap-app-developer/issues) and [PhoneGap Google Groups](https://groups.google.com/forum/#!forum/phonegap) + list for further help. + + Developer App, connection success + + The first time you run an app inside the **PhoneGap Developer App** that requests the permission to receive push notifications you will see the following dialog: + + Developer App, push permission request + + Please click on the `OK` button to give the app the required permission. Subsequent runs of the application will not show you this permission dialog. + + Once the PhoneGap Developer app connects and loads your mobile application, it should be displayed for preview as shown below: + + Developer App, push registration + + The grey `Requesting Registration ID` line under the PhongGap Bot should turn into a green `Registered` line and you should see the following in your terminal session. + + [phonegap] [console.log] registration event: APA91bE1MmeTc92igNoi5OkDWUV + +
Obviously, your registration ID will be different but you get the picture.
+ +### Sending Your First Push + +1. Open a new terminal window and enter the following command if you are testing on iOS: + + $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload '{ "aps": { "alert": "Hello World" } }' + + or enter the following command if you are testing on Android: + + $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service gcm --payload '{ "data": { "title": "Hello", "message": "World"} }' + + replacing the deviceID with the one you received from the registration event in the previous step. + +2. This will result in a push notification being received by the app. + + Developer App, push received + + +### Sending Your Second and Third Pushes + +1. Now minimize the **PhoneGap Desktop App**. + +2. From your terminal window, enter the following command if you are testing on iOS: + + $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload '{ "aps": { "alert": "Hello World" } }' + + or enter the following command if you are testing on Android: + + $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service gcm --payload '{ "data": { "title": "Hello", "message": "World"} }' + + replacing the deviceID with the one you received from the registration event in the previously. + +3. This will result in a push notification being received by the app while it is in the background. + + Developer App, push received background + +4. Now, lock your device. + +5. From your terminal window, enter the following command if you are testing on iOS: + + $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload '{ "aps": { "alert": "Hello World" } }' + + or enter the following command if you are testing on Android: + + $ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service gcm --payload '{ "data": { "title": "Hello", "message": "World"} }' + + replacing the deviceID with the one you received from the registration event in the previously. + +6. This will result in a push notification being received by the app while the device is locked. + + Developer App, push received locked + +### Explaining Push + +Now open the **www/index.js** file and we'll take a deep dive into what is going on. All of the code required to register and receive push notifications is in the `onDeviceReady` function. + +#### Initialization + +First we need to initialize the push notification system. The `init` function sets up the communication path with the remote push service and requests a registration ID. You will need to do this each time your app starts. Don't worry about requesting a registration ID each time your app starts. The phonegap-plugin-push code is smart enough to use cached registration ID if available. + + var push = PushNotification.init({ + "android": { + "senderID": "XXXXXXXX" + }, + "ios": { + "sound": true, + "vibration": true, + "badge": true + }, + "windows": {} + }); + +
**NOTE:** You may notice the `senderID` is set to *XXXXXXXX*. That is okay as the **PhoneGap Developer App** will intercept this request and use the correct value. When you build an app for yourself you will need to get a `senderID` when you setup a project with Google to use GCM.
+ +#### Registration + +Next we'll setup an event handler for the registration event. Once the app has successfully registered with the remote push service, our event handler will be called. The event handler is called with one parameter, a data object containing one property; the registrationId received from the remote push service. + +Then we'll get the value of the saved `registrationId` from `localStorage`. If the old registration ID does not match the newly received registration ID we need to do two things. First, save the new `registrationId` into `localStorage`. Second, send the registration ID to your push service. + +
**NOTE:** The implementation for this second step is left up to the user and not relevant for the purposes of this guide.
+ +You'll see that the `registration` event handler updates the HTML to visually display that the app is now registered. It does this by setting the CSS display attribute to none on the initial <p> element that was shown and instead shows the Registered element in index.html by setting its display attribute to block. + + push.on('registration', function(data) { + console.log('registration event: ' + data.registrationId); + + var oldRegId = localStorage.getItem('registrationId'); + if (oldRegId !== data.registrationId) { + // Save new registration ID + localStorage.setItem('registrationId', data.registrationId); + // Post registrationId to your app server as the value has changed + } + + var parentElement = document.getElementById('registration'); + var listeningElement = parentElement.querySelector('.waiting'); + var receivedElement = parentElement.querySelector('.received'); + + listeningElement.setAttribute('style', 'display:none;'); + receivedElement.setAttribute('style', 'display:block;'); + }); + +#### Error Handling + +Next we'll setup an event handler for the `error` event. If anything goes wrong with registration the error event will be fired. + + push.on('error', function(e) { + console.log("push error = " + e.message); + }); + +#### Receiving notifications + +Finally, we'll setup an event handler for the notification event, called only when the app receives a push notification while running in the foreground. This event handler function will have one data object parameter that could contain multiple properties, including title and message. + + push.on('notification', function(data) { + console.log('notification event'); + navigator.notification.alert( + data.message, // message + null, // callback + data.title, // title + 'Ok' // buttonName + ); + }); + +
**NOTE:** When your app is running in the background the above event handler is not called until the user clicks on the notification in the notification shade.
+ +For more information on how to use Push Notifications see the [documentation](https://github.com/phonegap/phonegap-plugin-push/blob/master/README.md) at the [PhoneGap Push Plugin repository](https://github.com/phonegap/phonegap-plugin-push/). diff --git a/docs/2-tutorials/3-optimize/0-index.html.md b/docs/2-tutorials/3-optimize/0-index.html.md index 33cc1641d..d12269f49 100644 --- a/docs/2-tutorials/3-optimize/0-index.html.md +++ b/docs/2-tutorials/3-optimize/0-index.html.md @@ -1,8 +1,15 @@ --- title: Optimize Guide -url: optimize +url: tutorials/optimize layout: subpage -write: false --- -Optimize Guide content here +### App Optimization Tips + +- [CSS animations perform better than JavaScript](https://developers.google.com/web/fundamentals/design-and-ui/animations/css-vs-javascript) + on mobile devices +- Aim for 60 frames per second to give your app a native feel without jank (dropped/delayed frames causing lag) +- Use hardware acceleration where possible to boost speed of animations +- Minimize reflows +- Manage Image Sizes +- Handle Click Delay diff --git a/docs/2-tutorials/3-optimize/1-click-delay-handling.html.md b/docs/2-tutorials/3-optimize/1-click-delay-handling.html.md index 8b11c7367..6d2b1bf39 100644 --- a/docs/2-tutorials/3-optimize/1-click-delay-handling.html.md +++ b/docs/2-tutorials/3-optimize/1-click-delay-handling.html.md @@ -1,11 +1,10 @@ --- title: Click Delay Handling -url: optimize/click-delay-handling +url: tutorials/optimize/click-delay-handling layout: subpage -write: false --- -##Problem +## Overview When beginning mobile development, you may notice that your app feels sluggish when tapping UI elements on the screen. This is due to a click delay caused by mobile web browsers supporting a *double tap to zoom* event. Once the first tap is interpreted, the browser @@ -44,5 +43,4 @@ support it [here](http://caniuse.com/#feat=css-touch-action). [Onsen UI](http://onsen.io/) and [Kendo UI Mobile](http://demos.telerik.com/kendo-ui/mobile-listview/index). - **TODO: Add an example video of the issue** - + diff --git a/docs/2-tutorials/3-optimize/2-hardware-acceleration.html.md b/docs/2-tutorials/3-optimize/2-hardware-acceleration.html.md index f50270e6d..e9fb3752f 100644 --- a/docs/2-tutorials/3-optimize/2-hardware-acceleration.html.md +++ b/docs/2-tutorials/3-optimize/2-hardware-acceleration.html.md @@ -1,26 +1,33 @@ --- title: Hardware Acceleration -url: optimize/hardware-acceleration +url: tutorials/optimize/hardware-acceleration layout: subpage -write: false --- + +### Overview Hardware acceleration refers to offloading some processing from the CPU to the GPU (Graphics Processing Unit) to make your application run faster. The GPU is meant for the heavy computation needed when rendering graphics and has thousands of threads over a CPU, thus making your application run quite a bit faster when -used right. Implementing it the correct way is key with the limited memory available on the GPU since exceeding it can cause your application to crash. +used properly. The GPU is typically used for apps requiring 3D Rendering, WebGL and Canvas and not enabled for everything +since enabling it is costly, especially for devices with limited batteries. Implementing it the correct way is key with the +limited memory available on the GPU since exceeding it can cause your application to crash. -Developers often choose to use hardware acceleration in their hybrid mobile applications is for creating smoother, more native-like transitions -and animations. The GPU would not be used automatically for those since it's really meant for 3D Rendering, WebGL and Canvas but there's a trick -that can be used to tap into it when the application demands a smoother experience. +#### How to Apply +The browser will choose to hardware accelerate CSS transitions on elements that have their own compositing layer +Applying a CSS property that requires a compositing layer is a trick you can use to ensure hardware acceleration is used +if there's a particular part of your application you feel needs it. A 3D transform is a property that can be added to an +element to move the processing from the CPU to the GPU, for instance: -#### The Trick -The trick (hack) is to apply a 3D transform to your element to move the processing from the CPU to the GPU. -You can do this by applying a simple CSS `translate3d` with values set to 0's as shown below. - transform: translate3d(0,0,0); - -### Additional References: -+ http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ -+ https://dev.opera.com/articles/css-will-change-property/ -+ http://www.infoq.com/interviews/arel-hybrid-mobile-development + .accelerateMe { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +
+ +
+} + diff --git a/docs/2-tutorials/3-optimize/3-minimize-reflows.html.md b/docs/2-tutorials/3-optimize/3-minimize-reflows.html.md index a4c6be3fd..7a1818b6b 100644 --- a/docs/2-tutorials/3-optimize/3-minimize-reflows.html.md +++ b/docs/2-tutorials/3-optimize/3-minimize-reflows.html.md @@ -1,15 +1,13 @@ --- -title: Minimize Reflows -url: optimize/minimize-reflows +title: Repaints, Reflows and Animations +url: tutorials/optimize/minimize-reflows layout: subpage -write: false --- -### Problem: +### Overview: Setting properties that cause a change to layout (`display`, `float`) or visibility (`width`, `height`, `color`, `outline`) will trigger a **reflow** or **repaint** and can greatly affect your application performance. -#### In Summary - A *reflow* is caused by a change to a property affecting the layout of the page and causes the browser engine to recompute the dimensions and position of the element as well as trigger a reflow on each on of the element's children, ancestors and elements after it. @@ -17,7 +15,6 @@ the element's children, ancestors and elements after it. - A *repaint* is caused by a change to a property affecting visibility and is costly since the browser must verify the visibility of all other nodes in the DOM tree. - #### What causes a reflow? + Resizing the window + Changing the font @@ -36,7 +33,6 @@ useful [CSS Triggers Reference]([http://csstriggers.com](http://csstriggers.com) Be cautious of manipulating DOM elements that cause reflows and repaints. If you're adding animations, stick to animating `transform` and `opacity` properties for better mobile web browser performance. - ### 10 Best Practices to Minimize Reflows 1. Avoid setting multiple inline styles; avoid setting styles individually. @@ -50,10 +46,5 @@ Be cautious of manipulating DOM elements that cause reflows and repaints. If you 9. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this. 10. Avoid unnecessary complex CSS selectors - descendant selectors in particular. -### Additional Reading (and source credits): -- [Reflows & Repaints: CSS Performance making your JavaScript Slow?](http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/) -- [Minimizing Browser Reflows](https://developers.google.com/speed/articles/reflow) -- [Avoiding unneccessary Paints](http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints) -- [How Bad is DOM Interaction](http://andyshora.com/how-bad-is-dom-interaction-javascript.html) diff --git a/docs/2-tutorials/3-optimize/4-image-handling.html.md b/docs/2-tutorials/3-optimize/4-image-handling.html.md index 28fd6ed2d..eb89a6334 100644 --- a/docs/2-tutorials/3-optimize/4-image-handling.html.md +++ b/docs/2-tutorials/3-optimize/4-image-handling.html.md @@ -1,8 +1,7 @@ --- title: Image Handling -url: optimize/image-handling +url: tutorials/optimize/image-handling layout: subpage -write: false --- Image optimization should be done for any mobile hybrid application you're creating, yet the details of how to do it are often unknown diff --git a/docs/3-references/0-index.html.md b/docs/3-references/0-index.html.md index 607d2ac88..8b649a5c6 100644 --- a/docs/3-references/0-index.html.md +++ b/docs/3-references/0-index.html.md @@ -1,3 +1,11 @@ --- -write: false +title: References +url: references +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/0-index.html.md +layout: subpage --- + +The guides in this section cover all of the PhoneGap-specific tooling and are meant to be used as references. If you're +new to PhoneGap, we recommend starting with the [Getting Started guides](/getting-started) first for a more complete +understanding. + diff --git a/docs/3-references/browser-support/0-index.html.md b/docs/3-references/browser-support/0-index.html.md index 6f06002e1..82f6e8d41 100644 --- a/docs/3-references/browser-support/0-index.html.md +++ b/docs/3-references/browser-support/0-index.html.md @@ -1,8 +1,8 @@ --- -title: PhoneGap Desktop Browser Support +title: PhoneGap Browser Support url: references/browser-support +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/browser-support/0-index.html.md layout: subpage -expand: browser-support --- PhoneGap apps are built with web technologies providing the benefit of allowing you to use your desktop browser diff --git a/docs/3-references/browser-support/2-plugin-support.html.md b/docs/3-references/browser-support/2-plugin-support.html.md index 16e38dab4..2365fd724 100644 --- a/docs/3-references/browser-support/2-plugin-support.html.md +++ b/docs/3-references/browser-support/2-plugin-support.html.md @@ -3,7 +3,6 @@ title: Plugin Support url: references/browser-support/plugin-support github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/browser-support/2-plugin-support.html.md layout: subpage -expand: browser-support --- The browser platform includes the ability to use any of the [Apache Cordova core plugins](/plugin-apis/) in your apps without disrupting your development. The level of support for them will vary depending on the type of functionality the plugin exposes. In some cases the browser version of the plugin may return mock data, and in other cases diff --git a/docs/3-references/browser-support/3-multi-device.html.md b/docs/3-references/browser-support/3-multi-device.html.md index 9a87bad07..072b6bc09 100644 --- a/docs/3-references/browser-support/3-multi-device.html.md +++ b/docs/3-references/browser-support/3-multi-device.html.md @@ -3,7 +3,6 @@ title: Multi-Device Testing url: references/browser-support/multi-device github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/browser-support/3-multi-device.html.md layout: subpage -expand: browser-support --- ### Multiple Platform Support diff --git a/docs/3-references/browser-support/4-custom-plugins.html.md b/docs/3-references/browser-support/4-custom-plugins.html.md index 279990b52..ca4d7ea1a 100644 --- a/docs/3-references/browser-support/4-custom-plugins.html.md +++ b/docs/3-references/browser-support/4-custom-plugins.html.md @@ -3,7 +3,6 @@ title: Custom Plugins url: references/browser-support/custom-plugins github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/browser-support/4-custom-plugins.html.md layout: subpage -expand: browser-support --- With the browser platform target support in PhoneGap, you also have the ability to write code handling for it specifically diff --git a/docs/3-references/browser-support/5-caution-next-steps.html.md b/docs/3-references/browser-support/5-caution-next-steps.html.md index 549162c02..6cd2fc1ca 100644 --- a/docs/3-references/browser-support/5-caution-next-steps.html.md +++ b/docs/3-references/browser-support/5-caution-next-steps.html.md @@ -3,7 +3,6 @@ title: Caution / Next Steps url: references/browser-support/caution-next-steps github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/browser-support/5-caution-next-steps.html.md layout: subpage -expand: browser-support --- When you are developing an app to be consumed on a mobile device, it should go without saying that the best environment for testing diff --git a/docs/3-references/browser-support/usage/1-desktop.html.md b/docs/3-references/browser-support/usage/1-desktop.html.md index 144b766b6..79bf8d2da 100644 --- a/docs/3-references/browser-support/usage/1-desktop.html.md +++ b/docs/3-references/browser-support/usage/1-desktop.html.md @@ -8,7 +8,6 @@ tabs: url: references/browser-support/usage/desktop - label: CLI url: references/browser-support/usage/cli -expand: browser-support ---
You should ensure you have the [latest version](/getting-started/1-install-phonegap/desktop) of PhoneGap Desktop diff --git a/docs/3-references/browser-support/usage/2-cli.html.md b/docs/3-references/browser-support/usage/2-cli.html.md index 5e3b8ac67..dca3ac283 100644 --- a/docs/3-references/browser-support/usage/2-cli.html.md +++ b/docs/3-references/browser-support/usage/2-cli.html.md @@ -8,7 +8,6 @@ tabs: url: references/browser-support/usage/desktop - label: CLI url: references/browser-support/usage/cli -expand: browser-support ---
You should ensure you have installed the latest version of the PhoneGap CLI by running `$ npm update -g phonegap@latest`
diff --git a/docs/3-references/desktop-app/0-index.html.md b/docs/3-references/desktop-app/0-index.html.md index f6212703f..eb7501143 100644 --- a/docs/3-references/desktop-app/0-index.html.md +++ b/docs/3-references/desktop-app/0-index.html.md @@ -1,8 +1,8 @@ --- -title: PhoneGap Desktop Reference +title: PhoneGap Desktop url: references/desktop-app +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/0-index.html.md layout: subpage -expand: desktop --- ### Overview diff --git a/docs/3-references/desktop-app/1-install/1-mac.html.md b/docs/3-references/desktop-app/1-install/1-mac.html.md index 402cb613a..631cab5b4 100644 --- a/docs/3-references/desktop-app/1-install/1-mac.html.md +++ b/docs/3-references/desktop-app/1-install/1-mac.html.md @@ -1,9 +1,8 @@ --- -title: Mac Installation +title: Installation url: references/desktop-app/install/mac github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/1-install/1-mac.html.md layout: subpage -expand: desktop tabs: - label: Mac url: references/desktop-app/install/mac @@ -12,7 +11,7 @@ tabs: --- -1. Download the latest [Mac OS X Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.0/PhoneGapDesktop.dmg). +1. Download the latest [Mac OS X Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.1/PhoneGapDesktop.dmg). 2. Double-click the downloaded file to run the installer. You will initially be prompted with a license agreement to accept: ![](/images/license-agreement.png) diff --git a/docs/3-references/desktop-app/1-install/2-win.html.md b/docs/3-references/desktop-app/1-install/2-win.html.md index 598826cc4..c5fd45133 100644 --- a/docs/3-references/desktop-app/1-install/2-win.html.md +++ b/docs/3-references/desktop-app/1-install/2-win.html.md @@ -1,9 +1,8 @@ --- -title: Windows Installation +title: Installation url: references/desktop-app/install/win github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/1-install/2-win.html.md layout: subpage -expand: desktop tabs: - label: Mac url: references/desktop-app/install/mac @@ -11,7 +10,7 @@ tabs: url: references/desktop-app/install/win --- -1. Download the latest [Windows Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.0/PhoneGapSetup-win32.exe). +1. Download the latest [Windows Installer](https://github.com/phonegap/phonegap-app-desktop/releases/download/0.3.1/PhoneGapSetup-win32.exe). 2. Double click the downloaded file to run the installer. You will be prompted with the PhoneGap Desktop Setup Wizard: ![](/images/win-desktop1.png) diff --git a/docs/3-references/desktop-app/10-troubleshoot-faq.html.md b/docs/3-references/desktop-app/10-troubleshoot-faq.html.md index 5f11028ad..d51c3c231 100644 --- a/docs/3-references/desktop-app/10-troubleshoot-faq.html.md +++ b/docs/3-references/desktop-app/10-troubleshoot-faq.html.md @@ -1,9 +1,8 @@ --- -title: Troubleshooting and FAQ +title: FAQ/Troubleshoot url: references/desktop-app/troubleshoot-faq github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/10-troubleshoot-faq.html.md layout: subpage -expand: desktop --- ### Building / Compiling the PhoneGap Desktop diff --git a/docs/3-references/desktop-app/2-create-project.html.md b/docs/3-references/desktop-app/2-create-project.html.md index f9f6fa2cd..fa83ee73c 100644 --- a/docs/3-references/desktop-app/2-create-project.html.md +++ b/docs/3-references/desktop-app/2-create-project.html.md @@ -3,7 +3,6 @@ title: Create a Project url: references/desktop-app/create-project github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/2-create-project.html.md layout: subpage -expand: desktop --- There are multiple ways to create a project using PhoneGap Desktop; via the **Plus (+)** button, from the **File** menu or by drag diff --git a/docs/3-references/desktop-app/3-open-project.html.md b/docs/3-references/desktop-app/3-open-project.html.md index fc8fc28a3..7809bbe51 100644 --- a/docs/3-references/desktop-app/3-open-project.html.md +++ b/docs/3-references/desktop-app/3-open-project.html.md @@ -1,9 +1,8 @@ --- -title: Open an Existing Project +title: Open a Project url: references/desktop-app/open-project github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/3-open-project.html.md layout: subpage -expand: desktop --- There are multiple ways to open an existing project in PhoneGap Desktop, similar to project creation. Once your project is loaded into diff --git a/docs/3-references/desktop-app/4-active-vs-inactive.html.md b/docs/3-references/desktop-app/4-active-vs-inactive.html.md index 3bc4c12f7..bc983ad92 100644 --- a/docs/3-references/desktop-app/4-active-vs-inactive.html.md +++ b/docs/3-references/desktop-app/4-active-vs-inactive.html.md @@ -1,9 +1,8 @@ --- -title: Active vs Inactive Projects +title: Active vs Inactive url: references/desktop-app/active-vs-inactive github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/4-active-vs-inactive.html.md layout: subpage -expand: desktop --- diff --git a/docs/3-references/desktop-app/5-pair-with-dev-app.html.md b/docs/3-references/desktop-app/5-pair-with-dev-app.html.md index b2aa47bcf..640dfbc61 100644 --- a/docs/3-references/desktop-app/5-pair-with-dev-app.html.md +++ b/docs/3-references/desktop-app/5-pair-with-dev-app.html.md @@ -1,9 +1,8 @@ --- -title: Preview your App +title: Preview an App url: references/desktop-app/pair-with-dev-app github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/5-pair-with-dev-app.html.md layout: subpage -expand: desktop --- You can use the **PhoneGap Developer App** paired with **PhoneGap Desktop** to immediately preview your app on a device without installing platform SDKs, diff --git a/docs/3-references/desktop-app/6-remove-project.html.md b/docs/3-references/desktop-app/6-remove-project.html.md index 38df3b73c..4bacec246 100644 --- a/docs/3-references/desktop-app/6-remove-project.html.md +++ b/docs/3-references/desktop-app/6-remove-project.html.md @@ -3,7 +3,6 @@ title: Remove a Project url: references/desktop-app/remove-project github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/6-remove-project.html.md layout: subpage -expand: desktop --- Removing a project in PhoneGap Desktop simply unloads it from the list of projects, it doesn't actually delete any files from diff --git a/docs/3-references/desktop-app/7-update-version/1-mac.html.md b/docs/3-references/desktop-app/7-update-version/1-mac.html.md index 5f5bd13c1..8246aaa80 100644 --- a/docs/3-references/desktop-app/7-update-version/1-mac.html.md +++ b/docs/3-references/desktop-app/7-update-version/1-mac.html.md @@ -1,9 +1,8 @@ --- -title: Update PhoneGap Desktop on Mac +title: Update Version url: references/desktop-app/7-update-version/mac github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/7-update-version/1-mac.html.md layout: subpage -expand: desktop tabs: - label: Mac url: references/desktop-app/7-update-version/mac diff --git a/docs/3-references/desktop-app/7-update-version/2-win.html.md b/docs/3-references/desktop-app/7-update-version/2-win.html.md index 5f884459b..a34513fcc 100644 --- a/docs/3-references/desktop-app/7-update-version/2-win.html.md +++ b/docs/3-references/desktop-app/7-update-version/2-win.html.md @@ -1,9 +1,8 @@ --- -title: Update PhoneGap Desktop on Windows +title: Update Version url: references/desktop-app/7-update-version/win github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/7-update-version/2-win.html.md layout: subpage -expand: desktop tabs: - label: Mac url: references/desktop-app/7-update-version/mac diff --git a/docs/3-references/desktop-app/8-edit-settings.html.md b/docs/3-references/desktop-app/8-edit-settings.html.md index 52d63ac69..28acb48c3 100644 --- a/docs/3-references/desktop-app/8-edit-settings.html.md +++ b/docs/3-references/desktop-app/8-edit-settings.html.md @@ -3,7 +3,6 @@ title: Edit Settings url: references/desktop-app/edit-settings github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/8-edit-settings.html.md layout: subpage -expand: desktop --- You can use the settings dialog to change user configurable settings for PhoneGap Desktop. diff --git a/docs/3-references/desktop-app/9-view-server-log.html.md b/docs/3-references/desktop-app/9-view-server-log.html.md index 667c5b8ee..492f48e46 100644 --- a/docs/3-references/desktop-app/9-view-server-log.html.md +++ b/docs/3-references/desktop-app/9-view-server-log.html.md @@ -1,9 +1,8 @@ --- -title: Viewing the Server Log +title: Server Log url: references/desktop-app/view-server-log github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/desktop-app/9-view-server-log.html.md layout: subpage -expand: desktop --- The server log displays messages about the status of the active project and can be a useful tool when testing your app. diff --git a/docs/3-references/developer-app/0-index.html.md b/docs/3-references/developer-app/0-index.html.md index 5bff706c7..34d2b8ea8 100644 --- a/docs/3-references/developer-app/0-index.html.md +++ b/docs/3-references/developer-app/0-index.html.md @@ -1,8 +1,8 @@ --- -title: PhoneGap Developer App Reference Guide +title: PhoneGap Developer url: references/developer-app +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/0-index.html.md layout: subpage -expand: dev-app --- ### Overview diff --git a/docs/3-references/developer-app/1-install/1-ios.html.md b/docs/3-references/developer-app/1-install/1-ios.html.md index 7937d20de..210171060 100644 --- a/docs/3-references/developer-app/1-install/1-ios.html.md +++ b/docs/3-references/developer-app/1-install/1-ios.html.md @@ -1,9 +1,8 @@ --- -title: iOS Device Installation +title: Installation url: references/developer-app/install/ios github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/1-install/1-ios.html.md layout: subpage -expand: dev-app tabs: - label: iOS url: references/developer-app/install/ios diff --git a/docs/3-references/developer-app/1-install/2-android.html.md b/docs/3-references/developer-app/1-install/2-android.html.md index 6c579cc37..436b89e04 100644 --- a/docs/3-references/developer-app/1-install/2-android.html.md +++ b/docs/3-references/developer-app/1-install/2-android.html.md @@ -1,9 +1,8 @@ --- -title: Android Device Installation +title: Installation url: references/developer-app/install/android github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/1-install/2-android.html.md layout: subpage -expand: dev-app tabs: - label: iOS url: references/developer-app/install/ios diff --git a/docs/3-references/developer-app/1-install/3-win.html.md b/docs/3-references/developer-app/1-install/3-win.html.md index 203ff47d6..24422f7b6 100644 --- a/docs/3-references/developer-app/1-install/3-win.html.md +++ b/docs/3-references/developer-app/1-install/3-win.html.md @@ -1,9 +1,8 @@ --- -title: Windows Device Installation +title: Installation url: references/developer-app/install/win github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/1-install/3-win.html.md layout: subpage -expand: dev-app tabs: - label: iOS url: references/developer-app/install/ios diff --git a/docs/3-references/developer-app/2-previewing-app.html.md b/docs/3-references/developer-app/2-previewing-app.html.md index 214d9258e..442c32f3c 100644 --- a/docs/3-references/developer-app/2-previewing-app.html.md +++ b/docs/3-references/developer-app/2-previewing-app.html.md @@ -3,7 +3,6 @@ title: Preview an App url: references/developer-app/previewing-app github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/2-previewing-app.html.md layout: subpage -expand: dev-app --- The PhoneGap Developer app is used to preview apps on your devices without the need for SDK's or compiling code. It's paired with your PhoneGap diff --git a/docs/3-references/developer-app/3-gestures.html.md b/docs/3-references/developer-app/3-gestures.html.md index 6c115b686..68bfe8af9 100644 --- a/docs/3-references/developer-app/3-gestures.html.md +++ b/docs/3-references/developer-app/3-gestures.html.md @@ -3,7 +3,6 @@ title: Gestures url: references/developer-app/gestures github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/3-gestures.html.md layout: subpage -expand: dev-app --- There are a couple of supported gestures you should be aware of when using the PhoneGap Developer app. diff --git a/docs/3-references/developer-app/4-update-version.html.md b/docs/3-references/developer-app/4-update-version.html.md index 44ffec7e6..8e77b06ab 100644 --- a/docs/3-references/developer-app/4-update-version.html.md +++ b/docs/3-references/developer-app/4-update-version.html.md @@ -1,23 +1,22 @@ --- -title: Updating PhoneGap Developer Version +title: Update Version url: references/developer-app/update-version github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/update.html.md layout: subpage -expand: dev-app --- -###iOS +### iOS 1. Open the iTunes App Store icon from the home screen on your device. 2. Tap the **Updates** button at the bottom of the screen 3. The list shown will indicate which apps have updates available and allow you to update PhoneGap Developer if a new version is available. -###Android +### Android 1. Open the Google Play Store by tapping on the icon from the home screen. 2. Hit the menu button (three lines) located at the top right hand side of the screen and select **My Apps**. 3. The list shown will indicate which apps have updates available and allow you to update PhoneGap Developer if a new version is available. -###Windows Phone +### Windows Phone 1. Open the Windows Store by tapping on the icon from the home screen. 2. Tap the 3 dots menu on the lower right, then choose *settings* from the drop-down. 3. Look for the App updates section and tap on the switch next to **Update apps automatically** to allow auto-update for all of your apps. Otherwise diff --git a/docs/3-references/developer-app/5-debugging.html.md b/docs/3-references/developer-app/5-debugging.html.md index 867477c78..da6a50f98 100644 --- a/docs/3-references/developer-app/5-debugging.html.md +++ b/docs/3-references/developer-app/5-debugging.html.md @@ -3,7 +3,6 @@ title: Debugging url: references/developer-app/debugging github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/5-debugging.html.md layout: subpage -expand: dev-app --- The intended audience for the PhoneGap Developer app is typically beginner-level and just getting started with PhoneGap. For diff --git a/docs/3-references/developer-app/6-custom-build/ios-custom-build.html.md b/docs/3-references/developer-app/6-custom-build/ios-custom-build.html.md index 0a74c8f64..0d8664486 100644 --- a/docs/3-references/developer-app/6-custom-build/ios-custom-build.html.md +++ b/docs/3-references/developer-app/6-custom-build/ios-custom-build.html.md @@ -1,9 +1,8 @@ --- -title: Custom iOS Build +title: Custom Build url: references/developer-app/custom-build/ios github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/6-custom-build/ios-custom-build.html.md layout: subpage -expand: dev-app tabs: - label: iOS url: references/developer-app/custom-build/ios diff --git a/docs/3-references/developer-app/6-custom-build/win-custom-build.html.md b/docs/3-references/developer-app/6-custom-build/win-custom-build.html.md index 2fdb2723b..70af67b36 100644 --- a/docs/3-references/developer-app/6-custom-build/win-custom-build.html.md +++ b/docs/3-references/developer-app/6-custom-build/win-custom-build.html.md @@ -1,9 +1,8 @@ --- -title: Custom Windows Phone Build +title: Custom Build url: references/developer-app/custom-build/win github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/6-custom-build/win-custom-build.html.md layout: subpage -expand: dev-app tabs: - label: iOS url: references/developer-app/custom-build/ios diff --git a/docs/3-references/developer-app/7-troubleshoot-faq.html.md b/docs/3-references/developer-app/7-troubleshoot-faq.html.md index 83fb12940..7dcc2cde0 100644 --- a/docs/3-references/developer-app/7-troubleshoot-faq.html.md +++ b/docs/3-references/developer-app/7-troubleshoot-faq.html.md @@ -1,9 +1,8 @@ --- -title: FAQ / Troubleshooting +title: FAQ/Troubleshooting url: references/developer-app/troubleshoot-faq github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/developer-app/7-troubleshoot-faq.html.md layout: subpage -expand: dev-app --- ### Which plugins are supported by the PhoneGap Developer app? @@ -34,6 +33,7 @@ expand: dev-app - [Status Bar](https://www.npmjs.com/package/cordova-plugin-statusbar) - [Vibration](https://www.npmjs.com/package/cordova-plugin-vibration) - [Content Sync](https://www.npmjs.com/package/phonegap-plugin-contentsync) + - [Push Notifications](https://www.npmjs.com/package/phonegap-plugin-push)
If you're using a plugin in your project that is not shown in this list, it will not work with the PhoneGap Developer App out of the box. However, you can create your own [custom build of the PhoneGap Developer app](/references/developer-app/custom-build/ios) @@ -186,3 +186,8 @@ expand: dev-app alert(fileName, 'Line:', lineNumber, 'Error:', e.message); }; ``` + +### Sending Push Notifications to the PhoneGap Developer App + +To learn how to send push notifications to your app being served by the **PhoneGap Developer App** see this [Developer Guide](/tutorials/develop/push-notifications/). + \ No newline at end of file diff --git a/docs/3-references/phonegap-cli/0-index.html.md b/docs/3-references/phonegap-cli/0-index.html.md index a4071d1b6..0e76ccbff 100644 --- a/docs/3-references/phonegap-cli/0-index.html.md +++ b/docs/3-references/phonegap-cli/0-index.html.md @@ -1,8 +1,8 @@ --- -title: PhoneGap CLI Reference Guide +title: PhoneGap CLI url: references/phonegap-cli +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/0-index.html.md layout: subpage -expand: cli --- ### Overview @@ -33,6 +33,7 @@ The sections covered in this reference include: - [Using Templates](/references/phonegap-cli/templates) - [Cordova-specific Commands](/references/phonegap-cli/cordova) - [Updating CLI Version](/references/phonegap-cli/update) +- [Sending Push Notifications](/references/phonegap-cli/push)
**NOTE:** The PhoneGap CLI is built as a layer on top of the Apache Cordova CLI, so any command that can be used in Cordova is also supported by the PhoneGap CLI. This guide will detail the *additional* features that distinguish the PhoneGap diff --git a/docs/3-references/phonegap-cli/install.html.md b/docs/3-references/phonegap-cli/1-install.html.md similarity index 96% rename from docs/3-references/phonegap-cli/install.html.md rename to docs/3-references/phonegap-cli/1-install.html.md index 9aab42ba8..e17e81746 100644 --- a/docs/3-references/phonegap-cli/install.html.md +++ b/docs/3-references/phonegap-cli/1-install.html.md @@ -1,9 +1,8 @@ --- -title: Installing the CLI +title: Installation url: references/phonegap-cli/install -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/install.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/1-install.html.md layout: subpage -expand: cli --- There are a few basic requirements you'll need prior to installing the PhoneGap CLI: @@ -20,7 +19,7 @@ Run the following command to install the latest version of the PhoneGap CLI: $ npm install -g phonegap ``` -####Installing a Specific Version +#### Installing a Specific Version You can install a specific version of the [PhoneGap CLI](https://www.npmjs.com/package/phonegap) via `npm` by specifying the version number after the `@` symbol: ```bash $ npm install -g phonegap@5.1.1 diff --git a/docs/3-references/phonegap-cli/create.html.md b/docs/3-references/phonegap-cli/2-create.html.md similarity index 96% rename from docs/3-references/phonegap-cli/create.html.md rename to docs/3-references/phonegap-cli/2-create.html.md index 2e95a1f1d..2d014163d 100644 --- a/docs/3-references/phonegap-cli/create.html.md +++ b/docs/3-references/phonegap-cli/2-create.html.md @@ -1,9 +1,8 @@ --- -title: Creating an App +title: Create an App url: references/phonegap-cli/create -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/create.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/2-create.html.md layout: subpage -expand: cli --- diff --git a/docs/3-references/phonegap-cli/serve.html.md b/docs/3-references/phonegap-cli/3-serve.html.md similarity index 93% rename from docs/3-references/phonegap-cli/serve.html.md rename to docs/3-references/phonegap-cli/3-serve.html.md index d26d68906..c235b5369 100644 --- a/docs/3-references/phonegap-cli/serve.html.md +++ b/docs/3-references/phonegap-cli/3-serve.html.md @@ -1,9 +1,8 @@ --- -title: Serving an App +title: Serve an App url: references/phonegap-cli/serve -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/serve.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/3-serve.html.md layout: subpage -expand: cli --- The `serve` command is used to start up a local web server to host the application for the diff --git a/docs/3-references/phonegap-cli/update.html.md b/docs/3-references/phonegap-cli/4-update.html.md similarity index 93% rename from docs/3-references/phonegap-cli/update.html.md rename to docs/3-references/phonegap-cli/4-update.html.md index 7cb2b62c6..9b2f37b48 100644 --- a/docs/3-references/phonegap-cli/update.html.md +++ b/docs/3-references/phonegap-cli/4-update.html.md @@ -1,9 +1,8 @@ --- -title: Updating the CLI Version +title: Update Version url: references/phonegap-cli/update -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/update.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/4-update.html.md layout: subpage -expand: cli --- ### Manually Update diff --git a/docs/3-references/phonegap-cli/5-push.html.md b/docs/3-references/phonegap-cli/5-push.html.md new file mode 100755 index 000000000..fc3d8ed5f --- /dev/null +++ b/docs/3-references/phonegap-cli/5-push.html.md @@ -0,0 +1,29 @@ +--- +title: Push Notifications +url: references/phonegap-cli/push +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/5-push.html.md +layout: subpage +--- + + The `push` command is used to send push notifications for the + PhoneGap Developer app to consume. Available since version 6.2.0. + +### Usage +```bash +phonegap push [options] +``` + +### Options + Some options are available for specifically setting the device to send to, the type of service to use and the data to send to the application. + +```bash +--deviceID device ID (required) +--service target service, "gcm", "apns" or "apns-sandbox" (required) +--payload JSON object to be sent via push service (required) +``` + +### Examples +```bash +$ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service gcm --payload '{ "data": { "title": "Hello", "message": "World"} }' +$ phonegap push --deviceID APA91bE1MmeTc92igNoi5OkDWUV --service apns --payload '{ "aps": { "alert": "Hello World", "badge": 5 } }' +``` diff --git a/docs/3-references/phonegap-cli/templates.html.md b/docs/3-references/phonegap-cli/6-templates.html.md similarity index 91% rename from docs/3-references/phonegap-cli/templates.html.md rename to docs/3-references/phonegap-cli/6-templates.html.md index 91023c68a..a78d2e63e 100644 --- a/docs/3-references/phonegap-cli/templates.html.md +++ b/docs/3-references/phonegap-cli/6-templates.html.md @@ -1,9 +1,8 @@ --- title: Templates url: references/phonegap-cli/templates -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/templates.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/6-templates.html.md layout: subpage -expand: cli --- Use the `template list` command to get a listing of the templates available for creating your applications with the `create` command. diff --git a/docs/3-references/phonegap-cli/remote-usage.html.md b/docs/3-references/phonegap-cli/7-remote-usage.html.md similarity index 94% rename from docs/3-references/phonegap-cli/remote-usage.html.md rename to docs/3-references/phonegap-cli/7-remote-usage.html.md index f80d85387..03e1ffbb4 100644 --- a/docs/3-references/phonegap-cli/remote-usage.html.md +++ b/docs/3-references/phonegap-cli/7-remote-usage.html.md @@ -1,9 +1,8 @@ --- -title: Use with PhoneGap Build +title: Remote Usage url: references/phonegap-cli/remote-usage -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/remote-usage.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/7-remote-usage.html.md layout: subpage -expand: cli --- The PhoneGap `remote` commands are used for executing commands against the PhoneGap Build service in the cloud rather than relying on a locally diff --git a/docs/3-references/phonegap-cli/cordova.html.md b/docs/3-references/phonegap-cli/8-cordova.html.md similarity index 90% rename from docs/3-references/phonegap-cli/cordova.html.md rename to docs/3-references/phonegap-cli/8-cordova.html.md index 4808d89b7..1113714b2 100644 --- a/docs/3-references/phonegap-cli/cordova.html.md +++ b/docs/3-references/phonegap-cli/8-cordova.html.md @@ -1,9 +1,8 @@ --- -title: Using cordova Commands +title: Cordova Commands url: references/phonegap-cli/cordova -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/cordova.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/8-cordova.html.md layout: subpage -expand: cli --- There are some cases where the PhoneGap CLI and Cordova CLI have similar commands but behave differently. The PhoneGap `serve` command is diff --git a/docs/3-references/phonegap-cli/help.html.md b/docs/3-references/phonegap-cli/9-help.html.md similarity index 93% rename from docs/3-references/phonegap-cli/help.html.md rename to docs/3-references/phonegap-cli/9-help.html.md index fd0518e36..73ed58c42 100644 --- a/docs/3-references/phonegap-cli/help.html.md +++ b/docs/3-references/phonegap-cli/9-help.html.md @@ -1,9 +1,8 @@ --- title: Help Options url: references/phonegap-cli/help -github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/help.html.md +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/phonegap-cli/9-help.html.md layout: subpage -expand: cli --- You can use the PhoneGap CLI to get general or specific help in a number of ways. You can use it as a command with any combination of diff --git a/docs/3-references/plugin-apis.html.md b/docs/3-references/plugin-apis.html.md index 29058da7a..6672e0629 100644 --- a/docs/3-references/plugin-apis.html.md +++ b/docs/3-references/plugin-apis.html.md @@ -1,6 +1,7 @@ --- title: Plugin APIs -url: plugin-apis +url: references/plugin-apis +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/3-references/plugin-apis.html.md layout: subpage --- diff --git a/docs/4-phonegap-build/0-index.html.md b/docs/4-phonegap-build/0-index.html.md new file mode 100644 index 000000000..db4187146 --- /dev/null +++ b/docs/4-phonegap-build/0-index.html.md @@ -0,0 +1,28 @@ +--- +title: PhoneGap Build +url: phonegap-build +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/0-index.html.md +layout: subpage +--- + +**PhoneGap Build** is a cloud service for **compiling PhoneGap applications**. + +Adobe PhoneGap provides a way for users to create mobile applications using technologies such as HTML, CSS, and Javascript. Applications created with PhoneGap can be distributed to various vendor app stores (ex: Apple App Store) and installed on a end-user's device like any other native application. Each vendor provides a different toolchain, and each PhoneGap release is compatible with a specific set of tools.bThis is where PhoneGap Build comes into help. + +Here are some of the benifits **PhoneGap Build** provides: + +### Managed Compilation and Signing (No SDKs) + +Local development involves installing and maintaining multiple native SDKs as well as the Cordova/PhoneGap SDK. PhoneGap Build takes this headache away! Get app-store ready apps without the headache of maintaining native SDKs. PhoneGap Build will always be build against the required SDK for the platform you are targeting. + +### Multiple Supported Platforms + +Target iOS, Android, Windows (Phone) all with a single codebase. As a web-service, PhoneGap Build may be used from any OS. + +### Work With Your Team + +Work collaboratively by adding team members and create roles within your PhoneGap Build projects. + +### Quicker Development Cycle + +Use Hydration to get faster debug and build cycles. With Hydration, updates to your application be pushed directly to your testers' previously installed apps, ensuring everyone is working on the most up-to-date version. diff --git a/docs/4-phonegap-build/1-getting-started.html.md b/docs/4-phonegap-build/1-getting-started.html.md new file mode 100755 index 000000000..dec6e4d3b --- /dev/null +++ b/docs/4-phonegap-build/1-getting-started.html.md @@ -0,0 +1,59 @@ +--- +title: Getting Started +url: phonegap-build/start +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/1-getting-started.html.md +layout: subpage +expand: build +--- + +1. [What Do I Upload?](#what_do_i_upload) +2. [How Do I Configure My Application?](#configure_application) +3. [How Do I Structure My Application?](#structure_application) +4. [Where can I Get Help?](#help) + + +### 1. What Do I Upload? + +#### Preparing the Assets + +PhoneGap and PhoneGap Build use an open packaging model that follows the [W3C Widget Packaging specification](http://www.w3.org/TR/widgets/). This consists of a `config.xml` file, and your web assets (html, js, css, images, etc). You should not be uploading native application code files (.c, .h, .m, java, etc). See the [PhoneGap Hello World Application](https://github.com/phonegap/phonegap-template-hello-world) for a basic example. This application is also explained in more detail [here](/develop/hello-world-explained). + +#### Don't include phonegap.js or plugin files + +PhoneGap Build will inject `phonegap.js`, `cordova.js` (identical sources), and any files required by your plugins. This is because these files differ depending on the versions of PhoneGap and any plugins you are using. + + + +For maximum sizes of zip uploads, see the plans page. + + +### 2. How Do I Configure My Application? + +You'll need an application configuration file, or `config.xml`, in your app package to configure how your app is built. This includes PhoneGap version, icons and splash screens, platforms, and much more. See the [configuration section](../configuring/) for more on the config.xml file. + + +### 3. How Do I Structure My Application? + +PhoneGap Build's only requirement for your application structure is that the `config.xml` and `index.html` is in the top level of your application. Other than that +you can structure your application as dictated by your workflows. + +As your application may contain files or directories not required in your application (unused splash screens, bower packages, grunt artifacts, un-compiled less files etc.) we support a +special file called `.pgbomit`. + +`.pgbomit` is a file that you can create and add to a directory that signifies to PhoneGap Build that it SHOULD NOT +include the contents of that directory as source for the native applciation. This folder, however, can be +used to store any files needed during the PhoneGap Build process **up to the compile step**. + +A typical use case is for a directory containing the icons and splashcreens for an app. Place `.pgbomit` in that directory and none of those files/directories will be included in the binary app package, **except** those copied and used for icons and splashscreens for a specific platform. + +Please note that the `.pgbomit` file is a placeholder file only, it is not read and its only function is to highlight a directory. It is *not* like .gitignore or other file types that can contain patterns. + + +### 4. Where can I get help? + +Please search all communication channels prior to posting questions to help us reduce repetition and keep the forums useful and efficient! Here's some channels: + +- Search our old [community forum](https://community.phonegap.com) +- For help on developing your application (plugins, APIs, platform quirks, etc), see the [Adobe PhoneGap Forum](https://forums.adobe.com/community/phonegap/) +- For help specifically using the PhoneGap Build Service (website, API, build errors), post to the [Adobe PhoneGap Build Forum](https://forums.adobe.com/community/phonegap/) +- [Stackoverflow](http://www.stackoverflow.com) \ No newline at end of file diff --git a/docs/4-phonegap-build/2-configuring/0-index.html.md b/docs/4-phonegap-build/2-configuring/0-index.html.md new file mode 100755 index 000000000..80800c13d --- /dev/null +++ b/docs/4-phonegap-build/2-configuring/0-index.html.md @@ -0,0 +1,73 @@ +--- +title: Configuring +url: phonegap-build/configuring +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/2-configuring/0-index.html.md +layout: subpage +--- + +PhoneGap and PhoneGap Build are built upon the Apache Cordova Project. Spend some time at [docs.cordova.io](http://docs.cordova.io) to get more familiar with how PhoneGap and Cordova applications are configured. + +At the root, PhoneGap applications are configured using a `config.xml` file at the root of your application (at the same level as your main `index.html` file). + +The `config.xml` file follows the [W3C widget specification](http://www.w3.org/TR/widgets/). It allows developers to easily specify metadata about their applications. You can see a sample `config.xml` with our [PhoneGap Start](https://github.com/phonegap/phonegap-start/blob/master/www/config.xml) application. + +We're continually adding features to our `config.xml` support to give PhoneGap Build developers more power to customize their apps. If there are any specific features you'd like to see support for, [please let us know](http://forums.adobe.com/community/phonegap/build). + +1. [Essential Properties](#props) +2. [Example config.xml](#example) + + +### Essential Properties + +<widget> + +The widget element must be the root of your XML document - it lets us +know that you are following the W3C specification. When using PhoneGap +Build, ensure you have the following attributes set on your widget +element. It supports the following attributes: + +- **id**: the unique identifier for your application. To support all supported platforms, this *must* be reverse-domain name style (e.g. `com.yourcompany.yourapp`) +- **version**: for best results, use a major/minor/patch style version, with three numbers, such as `0.0.1` +- **versionCode**: (optional) when building for Android, you can set the versionCode by specifying it in your *config.xml*. For more information on Android's versionCode attribute, see [the Android documentation](http://developer.android.com/guide/publishing/versioning.html). + +<name> + +The name of the application. + +<description> + +A description for your application. + +<platform> +You can have zero or more of these elements present in your config.xml. Set the name attribute to one of `ios`, `android`, or `windows`. If you specify none, all platforms will be built. Example usage: + + + + + + +### Example Config.xml + + + + + + + PhoneGap Example + + + An example for phonegap build docs. + + + + Hardeep Shoker + + + + + + diff --git a/docs/4-phonegap-build/2-configuring/access-elements.html.md b/docs/4-phonegap-build/2-configuring/access-elements.html.md new file mode 100755 index 000000000..7107cc527 --- /dev/null +++ b/docs/4-phonegap-build/2-configuring/access-elements.html.md @@ -0,0 +1,70 @@ +--- +title: Access Elements +url: phonegap-build/configuring/access-elements +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/2-configuring/access-elements.html.md +layout: subpage +--- + +
+As of Cordova iOS 4.x, Cordova Android 4.x, and Cordova Windows 4.x, whitelist management was moved from the core Cordova project to the `cordova-whitelist-plugin`, including the addition of the `allow-navigation` and `allow-intent` elements. You must add this plugin to enable and restrict network access in your application. + + + +[See the cordova-whitelist-plugin repository for up to date documentation](https://github.com/apache/cordova-plugin-whitelist). The following documentation here is for pre-4.0 applications only. +
+ + +--- + +### Whitelist (Pre Cordova 4.x) + +The access element provides your app with access to resources on other domains - in particular, it allows your app to load pages from external domains that can take over your entire webview. + + + + + + +
<access> +

+ Your application can contain zero or many access elements. +

+

+ origin: The domain of where the resource lives. +

+

+ subdomains (optional): Whether to allow subdomains on the host + specified in the origin paramter. +

+
+ + A blank access tag - `` - denies access to any external resources. A wildcard - `` - allows access to any external resource. + +## Example Usage: + + + + + + + PhoneGap Example + + + An example for phonegap build docs. + + + + Hardeep Shoker + + + + + + + The behaviour of the access element is heavily dependent on the platform you're deploying to - we have a [blog post](http://phonegap.com/blog/2012/03/20/access-tags/) with more information. It is also likely to vary between different releases of PhoneGap - we'll work to maintain sane defaults and configurability for PhoneGap Build users. diff --git a/docs/4-phonegap-build/2-configuring/config-file-element.html.md b/docs/4-phonegap-build/2-configuring/config-file-element.html.md new file mode 100755 index 000000000..72b894401 --- /dev/null +++ b/docs/4-phonegap-build/2-configuring/config-file-element.html.md @@ -0,0 +1,77 @@ +--- +title: Modifying Manifests +url: phonegap-build/configuring/config-file-element +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/2-configuring/config-file-element.html.md +layout: subpage +--- + +PhoneGap Build aims to take away the pains of configuring SDKs and compiling native applications so you can focus on writing great code. As part of this, we obfuscate management of the platform configuration files -- namely your [Android Manifest](http://developer.android.com/guide/topics/manifest/manifest-intro.html) (AndroidManifest.xml) and your [iOS Property List](https://developer.apple.com/library/iOS/documentation/General/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html) (Info.plist). We configure these files based on the preferences you specify in your app's config.xml file. However, the specifications of these xml files are constantly changing, and it would be impossible for us to expose all of the possible configurations through the use of simple preferences. So for those cases that we haven't covered, you can contribute xml directly to your Android Manifest and iOS Propertly List files, via the `config-file` element (beta feature). + + +The `config-file` spec is based on the [config-file element in PhoneGap's plugin.xml spec](http://docs.phonegap.com/en/3.3.0/plugin_ref_spec.md.html#Plugin%20Specification_config_file_element), though has a slightly different implementation. + + + Go Skiing + + + +* **`platform`**: currently supported values are `ios` (Info.plist) and `android` (AndroidManifest.xml) +* **`parent`**: on iOS this will be the plist key you wish to modify; on android this will be an xpath string resolving to the parent of the xml element inside of which your xml will be injected +* **`mode`**: `add`, `replace`, `merge`, or `delete` -- how to modify the parent element. `add` will append to the inner xml of the parent, `replace` will completely overwrite the parent's inner xml with your declaration, `merge` will attempt to find elments of the same name and merge their attributes, and `delete` will search for elements matching the specifed name and attributes and delete them. + +### iOS + +As an example on iOS, if you wish to restrict the orientation of an application, you can use the orientation preference in config.xml, where + + + +will translate to the following in your iOS Property List: + + UISupportedInterfaceOrientations + + UIInterfaceOrientationPortrait + UIInterfaceOrientationPortraitUpsideDown + + +But suppose you don't want to allow PortraitUpsideDown? So specify your own xml for this property instead: + + + + UIInterfaceOrientationLandscapeOmg + + + +To check and debug the resulting Property List file, simply rename your .ipa file to .zip, unzip it, and examine the Info.plist file. + + +### Android + +**Important: When targeting Android with the config-file element, you'll need to declare the android xml namespace in the widget element of your config.xml, otherwise your document will not pass our xml validation:** + + + +For an Android example suppose you want to modify the screen sizes supported by your application, through the supports-screens element in the Android Manifest. Here is the default in a PhoneGap Build AndroidManifest.xml: + + + +To disable support for all but normalScreens, set them to false: + + + + + +Your xml will be merged with the default manifest xml, and when conflicts occur, your specified values will take precedence. To check and debug the resulting Android Manifest, you can use the [Android apk-tool](https://code.google.com/p/android-apktool/) to unpack your compiled apk, and examine the AndroidManifest.xml. + + +If you have any questions about using this beta feature, [don't hesitate to ask](http://community.phonegap.com/nitobi). diff --git a/docs/4-phonegap-build/2-configuring/icons-and-splash.html.md b/docs/4-phonegap-build/2-configuring/icons-and-splash.html.md new file mode 100755 index 000000000..221b582a6 --- /dev/null +++ b/docs/4-phonegap-build/2-configuring/icons-and-splash.html.md @@ -0,0 +1,200 @@ +--- +title: Icons and Splash +url: phonegap-build/configuring/icons-and-splash +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/2-configuring/icons-and-splash.html.md +layout: subpage +--- + +- [Icons](#icons) +- [Splash Screens](#splashes) + +### Specifying platform + +Icons and splashes are usually platform specific. There are two ways to specify an icon or splash is for a particular platform. The first way is by specifying a `platform` attribute: + + + +The second way (recommended) is by putting the icon or splash inside a platform tag: + + + + + +Both these fragments will result in the icon being used for iOS. + + +# Icons + +The simplest icon configuration is a single default `icon.png`: + + + +The default icon must be named `icon.png` and must reside in the root of your application folder. If no other icon configurations are specified, each platform will attempt to use this file as the default icon. To define platform specific icons please use the guide provided below. Icon files should be the file formats specified in the examples below, other file types are not guaranteed to work across platforms. + + + +- **src**: (required) specifies the location of the image file, relative to your `www` directory +- **width**: (optional) but recommended to include, width in pixels +- **height**: (optional) but recommended to include, height in pixels +- **platform**: (optional) the target platform (`ios`, `android`, or `windows`) + + +### iOS + +We support classic, retina, iPhone 5 and iPad displays. + +The names below reflect the names of the destination files when they are added to the application. During app submittal you may get feedback that has a reference to these filenames. + +#### iOS 7.0+ + + + + + + + + + + + + + + + + + + + + +#### iOS 6.1 + + + + + + + + + + + + + + + + + +### Android + +We support all Android resource qualifiers. Commonly used qualifiers refer to device density and language. + + + + + + + + +A list of these qualifiers can be viewed on Table-2 [here](http://developer.android.com/guide/topics/resources/providing-resources.html). Note that compound qualifiers (eg. "port-xhdpi") have to +be in the same order as viewed on this table. + +### Windows Phone 8 (cordova-wp8) + +We support two icons for Windows Phone, a regular icon and a tile image. + + + + +### Windows Phone 8.1+ (cordova-windows) + +As of PhoneGap Release cli-6.0.0, the Windows Phone 8.1 package is built using cordova-windows. Here are the supported icons: + + + + + + + + + + + +# Splash Screens + +You can have zero or more of these elements present in your `config.xml`. This element can have `src`, `platform`, `width` and `height` attributes, just like the `` element above. Like icon files, your splash screens should be saved as `png` files. + + + +### Usage and Additional Information: + +Unless otherwise specified in a config.xml, each platform will try to use the default `splash.png` during compilation. To define platform specific splash screens please use the guide provided below. + +Splash files should be the file formats specified in the examples below. Any other file type is not guaranteed to work across platforms. + +### Warning: +If you do not supply the `platform` attribute, the referenced image will be copied to ALL platforms, increasing the size of their application packages. + +### Default + +The default splash must be named `splash.png` and must reside in the root of your application folder. + + + +Please note that in the past splash screens were specified with the `gap:splash` element and the platform specified with `gap:platform`. This is still supported but we recommend moving to `splash` and `platform`. + +### iOS + +We support classic, retina, iPhone 5 and iPad displays; the following will define splash screens for each of those. Standard iPads have two different splash screens, portrait, landscape. Retina iPads have two additional splash screens, retina portrait and retina landscape. + +The names below reflect the names of the destination files when they are added to the application. During app submittal you may get feedback that has a reference to these filenames. + + + + + + + + + + + + + + + + + + + + + +### Android + +We support all Android resource qualifiers. Commonly used qualifiers refer to device orientation, language and density. + + + + + + + + + +A list of these qualifiers can be viewed on Table-2 [here](http://developer.android.com/guide/topics/resources/providing-resources.html). Note that compound qualifiers (eg. "port-xhdpi") have to +be in the same order as viewed on this table. + +Patch-9 backgrounds are supported. All patch-9 files have to have a ".9.png" suffix. + +### Windows Phone 8 (cordova-wp8) + + Windows Phone supports a single splash image and can be defined as below. Unlike the other supported platforms, Windows Phone splash screen should be in `jpg` format + + + +### Windows Phone 8.1 (cordova-windows) + + Windows Phone 8.1 supports a single png splash as defined here + + + + diff --git a/docs/4-phonegap-build/2-configuring/plugins.html.md b/docs/4-phonegap-build/2-configuring/plugins.html.md new file mode 100755 index 000000000..80fcee336 --- /dev/null +++ b/docs/4-phonegap-build/2-configuring/plugins.html.md @@ -0,0 +1,152 @@ +--- +title: Plugins +url: phonegap-build/configuring/plugins +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/2-configuring/plugins.html.md +layout: subpage +--- + +To extend the native functionality exposed by the PhoneGap native-app container, PhoneGap Build supports most PhoneGap or Cordova plugins. + +Plugins can be from our repostiory, npm or from a public git repository. + +Plugins need to be implemented differently for each platform, and may not be supported across all PhoneGap platforms. If you're deploying across multiple platforms, ensure that the experience degrades gracefully for users who do not have the plugin available. + +If you would like to contribute a plugin to the PhoneGap Build repository, please see the [Contributing Plugins ](developer_contributing_plugins.md.html) documentation. To submit a plugin to npm please view their documentation. + +### Including a plugin in your project + +There are two steps to including a plugin in your project: + +1. Importing the native code using the config.xml +2. Referencing the JavaScript code for the plugin + + +#### Importing the native code + +To import the native code into your PhoneGap Build project, you will need to add the correct `` or deprecated `` tag to your config.xml file. + +If you omit the `spec` (or `version`) tag of a npm or PhoneGap Build plugin, your app will always be built with the latest version of the plugin. It will be updated automatically the next time you update your application code after a plugin is updated, which may cause unexpected behaviour. For more info on plugin versioning, click here. + +- [<plugin> tag](#plugin) +- [<gap:plugin> tag](#gap-plugin) +- [Plugin source](#plugin-source) +- [Plugin version/location](#plugin-version) +- [Plugin parameters](#plugin-params) +- [Usage example](#usage-example) + + +#### <plugin> + +- **name**: Plugins should be referenced by the plugin ID which is normally in a reverse domain format (ex: com.phonegap.plugins.barcodescanner). Optional if the plugin is git-backed. +- **spec**: Optional, but we highly recommend locking your plugin version, as mentioned above. For git-backed plugins this will specify the git repository. If the attribute contains a full URL then it is assumed it is a git plugin. +- **source**: Optional, can either be "pgb", "npm" or "git". Defaults to "npm" (or "git" if a git URL is detected). +- **params**: Plugins may require parameters for configuration properties. Here is a detailed explanation. + + +#### <gap:plugin> + +- **name**: Plugins should be referenced by the plugin ID which is normally in a reverse domain format (ex: com.phonegap.plugins.barcodescanner). +- **version**: Optional, but we highly recommend locking your plugin version, as mentioned above. For git-backed plugins this will specify the git repository. If the attribute contains a full URL then it is assumed it is a git plugin. +- **source**: Optional, can either be `pgb`, `npm` or `git`. Defaults to `pgb` (or `git` if a git URL is detected). +- **params**: Plugins may require parameters for configuration properties. Here is a detailed explanation. + + +#### Plugin Source + +Plugins can be included from either our repository, located here, at npm or from a public git repository. + +If source is not present then the default value for this attribute is `npm` or `git` depending if it can auto-detect a git backed repo format. For instance the plugin lines below all reference the same plugin in the npm repository. + + + + +If the `spec` attribute is a git location then the source is defaulted to "git". The lines below will reference the same plugin. + + + + +To include a plugin from the PhoneGap Build repository specify `pgb` in the source attribute. + + + +The param fragments are handled identically regardless of the source of the plugin. + + +#### Plugin Version / Location + +Here is the most simplistic way of using a versioned plugin. The `spec` attribute is the recommended way to specify the version. `spec` is used so as to be compatibile with the Cordova CLI, which uses a `spec` attribute to describe the version or location of the plugin. + + + +PhoneGap Build also supports `fuzzy versions`. + +You can use the tilde `~` operator to specify fuzzy versions, this will ensure that you have the latest version of a plugin with the same major version. + +For example, you could replace the tag above with: + + + +which would load the latest 2.x version, but not anything with a different major/initial version number. + +The following version tag: + + + +would load the latest 2.x version so long as x is greater or equal to 2. + +And finally, this version tag: + + + +would load the latest 2.2.x version so long as x is greater or equal to 3. + + +#### Plugin Parameters + +Plugins may require configuration information to be present; this can be done with adding children to the tag: + + + + + + + Make sure to check the documentation of the plugin to see if parameters are necessary. + + +#### Usage Example + +Here is a config.xml that includes the Barcode Scanner plugin from npm as an example: + + + + + + + PhoneGap Example + + + An example for phonegap build docs. + + + + Hardeep Shoker + + + + + + + +### Referencing the JavaScript code + +If a plugin utilizes the js-module element to direct cordova to load the plugin javascripts, then no <script> references will be necessary to load a plugin. This is the case for the core cordova plugins, but 3rd party plugins will be implementation-dependent. Refer to the plugin's documentation to determine if you'll need to manually include the javascript. + +If you do need to manually include the plugin javascript, it would look like the following: + + + + +Whether the script tag is required or not, **do not include the actual plugin files in the zip or repository which you submit to PhoneGap Build**. These files will be injected by PhoneGap Build, and including them may cause problems. diff --git a/docs/4-phonegap-build/2-configuring/preferences.html.md b/docs/4-phonegap-build/2-configuring/preferences.html.md new file mode 100755 index 000000000..ca9cc2754 --- /dev/null +++ b/docs/4-phonegap-build/2-configuring/preferences.html.md @@ -0,0 +1,140 @@ +--- +title: Preferences +url: phonegap-build/configuring/preferences +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/2-configuring/preferences.html.md +layout: subpage +--- +PhoneGap utilizes the `` tag to customize your application configuration. All `` tags in your config.xml are copied to the platform-specific configuration files, which means that any preferences [supported by the PhoneGap framework](http://docs.phonegap.com/en/edge/config_ref_index.md.html#The%20config.xml%20File), or by any plugins you are using, will work on PhoneGap Build. + +**Note**: make sure you select your PhoneGap version when looking at the PhoneGap docs page. + +In addition, PhoneGap Build supports some of its own custom preferences, used for things like selecting the PhoneGap version, platform sdk version targeting, and others. These custom preferences are listed below. + +If you want to see more detail about what exactly these custom preferences are doing, most of them are translated using the [open-source confetti library](http://github.com/phonegap-build/confetti). Check out the templates directory if you want to dig in. + +### Multi-Platform +- [phonegap-version](#phonegap-version) +- [orientation](#orientation) +- [fullscreen](#fullscreen) + +### iOS Only +- [target-device](#target-device) +- [prerendered-icon](#prerendered-icon) +- [detect-data-types](#detect-data-types) +- [exit-on-suspend](#exit-on-suspend) +- [deployment-target](#deployment-target) + +### Android Only +- [android-build-tool](#android-build-tool) +- [android-minSdkVersion](#android-minSdkVersion) +- [android-maxSdkVersion](#android-maxSdkVersion) +- [android-targetSdkVersion](#android-targetSdkVersion) +- [android-installLocation](#android-installLocation) +- [android-windowSoftInputMode](#android-windowSoftInputMode) + +### Windows Only (cli-6.1.1 and above) +- [windows-arch](#windows-arch) +- [windows-identity-name](#windows-identity-name) + +### Examples +- [Full sample config.xml](#example) +- [Platform selection](#platform-selection) + + +### Multi-Platform +
**phonegap-version**: The version of PhoneGap / Cordova used. For a list of currently supported PhoneGap versions, and a breakdown of the individual platform versions, [go here](https://build.phonegap.com/current-support). +
+ +
**orientation**: Device orientation; possible values are default, landscape, or portrait. Please note that default means both landscape and portrait are enabled. If you want to use each platform's default settings (usually portrait only), remove this tag from your config.xml file.
+ +
**fullscreen**: Makes your app full screen, with values true or false. This hides the status bar at the top, and is false by default. Note: may not be supported by newer versions of iOS, but users can use +the [config-file element on phonegap build](http://phonegap.com/blog/2014/01/30/customizing-your-android-manifest-and-ios-property-list-on-phonegap-build/), and set UIViewControllerBasedStatusBarAppearance to false and UIStatusBarHidden to true.
+ +### iOS Only +
**target-device**: For targeting a specific device; possible values are handset, tablet, or universal. Note that this currently only applies to iOS builds; by default all builds are universal.
+ +
**prerendered-icon**: This will cause iOS to not apply its gloss to the app's icon on the user's home screen; possible values are true or false, default is false.
+ +
**detect-data-types**: Controls whether certain data types (such as phone numbers and dates) are automatically turned into links by the system. Defaults to "true" (as does the system web view). In preference to this, try using meta-tags: + ``` + + + ``` +And use detect-data-types if meta tags don't work for you.
+ +
**exit-on-suspend**: If set to true, app will terminate when suspended, for example when home button is pressed; default is false.
+ +
**deployment-target**: This sets the IPHONEOS_DEPLOYMENT_TARGET in the build, which tranlsates to the MinimumOSVersion in the ipa Propertly List.
+ +### Android Only +
**android-build-tool**: Minimum Android SDK version. Corresponds to the usesSdk attributes in the AndroidManifest.xml file - more details are in [the Android documentation](http://developer.android.com/guide/topics/manifest/uses-sdk-element.html). Defaults to 14 (Android 4.0, 4.0.1, 4.0.2).
+ +
**android-minSdkVersion**: Minimum Android SDK version. Corresponds to the usesSdk attributes in the AndroidManifest.xml file - more details are in [the Android documentation](http://developer.android.com/guide/topics/manifest/uses-sdk-element.html). Defaults to 14 (Android 4.0, 4.0.1, 4.0.2).
+ +
**android-maxSdkVersion**: Maximum Android SDK version. Corresponds to the usesSdk attributes in the AndroidManifest.xml file - more details are in [the Android documentation](http://developer.android.com/guide/topics/manifest/uses-sdk-element.html). Unset by default.
+ +
**android-targetSdkVersion**: +Corresponds to the usesSdk attributes in the AndroidManifest.xml file -- an integer designating the API Level that the application targets. If not set, the default value equals that given to minSdkVersion. More details are in [the Android documentation](http://developer.android.com/guide/topics/manifest/uses-sdk-element.html#target). Unset by default.
+ +
**android-installLocation**: Where an app can be installed - defaults to internalOnly (as the Android SDK). auto or preferExternal allow the app to be installed on an SD card - this can lead to unexpected behavior. More details available in [the Android documentation](http://developer.android.com/guide/appendix/install-location.html).
+ +
**android-windowSoftInputMode**: How the main window of the activity interacts with the window containing the on-screen soft keyboard. More details, and possible values, available in [the Android documentation](http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft).
+ +### Windows Only +
**windows-arch**: Select the architecture that your build targets. Valid values are `anycpu`, `arm`, `x86`, and `x64`.
+ +
**windows-identity-name**: Set the App Idenity Name in your App Manifest, necessary for publishing to the App Store. This preference must match the App Identity Name from your *Windows Dev Center Account -> App Management -> App Identity*.
+ + + +### Example Config.xml + + + + + PhoneGap Example + + An example for phonegap build docs. + + + wildabeast + + + + + + + + + + + + + + + + + + + + + + + +### Platform Selection + +By default, preferences are for all platforms. To specify a preference to be for a single platform you can place any preference inside a platform tag. + + + + + + + + + +This fragment will make the iOS app be available in landscape orientation while the android app will be in portrait mode. diff --git a/docs/4-phonegap-build/3-signing/1-ios.html.md b/docs/4-phonegap-build/3-signing/1-ios.html.md new file mode 100755 index 000000000..a60b6e99c --- /dev/null +++ b/docs/4-phonegap-build/3-signing/1-ios.html.md @@ -0,0 +1,94 @@ +--- +title: Signing +url: phonegap-build/signing/ios +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/3-signing/1-ios.html.md +layout: subpage +tabs: + - label: iOS + url: phonegap-build/signing/ios + - label: Android + url: phonegap-build/signing/android + - label: Windows + url: phonegap-build/signing/windows +--- + +- [Creating your key on Mac](#mac-users) +- [Creating your key on Windows](#windows-users) +- [Register Devices](#register-devices) +- [Create Provisioning Profile](#create-provisioning-profile) +- [Submit to Build](#submit-to-build) + +**Note: it is Phonegap Build's policy not to retrieve signing keys for users, for legal reasons. Back them up.** + +*** + +### Mac Users + +#### Convert the iPhone Developer Certificate to a P12 file on Mac OS + +You'll first need to obtain an Apple Developer Certificate. See apple documenation for this. + +Next you'll export it to the P12 keystore format. To do this on Mac® OS: + +1. Open the Keychain Access application (in the Applications/Utilities folder). +2. If you have not already added the certificate to Keychain, select File > Import. Then navigate to the certificate file (the .cer file) you obtained from Apple. +3. Select the Keys category in Keychain Access. +4. Select the private key associated with your iPhone Development Certificate. The private key is identified by the iPhone Developer: public certificate that is paired with it. +5. Command-click the iPhone Developer certificate and select, Export "iPhone Developer: Name...". +![Keychain export](/images/phonegap-build/keychain-export.png) +6. Save your keystore in the Personal Information Exchange (.p12) file format. +7. You will be prompted to create a password that is used when you use the keystore to sign applications or transfer the key and certificate in this keystore to another keystore. +![keychain password](/images/phonegap-build/keychain-password.png) + +*** + +### Windows Users + +#### Convert an Apple developer certificate to a P12 file on Windows + +To develop apps via Build, you must use a P12 certificate file. You generate this certificate based on the Apple iPhone developer certificate file you receive from Apple. + +1. Download and install [OpenSSL](http://slproweb.com/products/Win32OpenSSL.html) + +2. Convert the developer certificate file you receive from Apple into a PEM certificate file. To do this, run the following command-line statement from the [OpenSSL](http://slproweb.com/products/Win32OpenSSL.html) bin directory: + +`openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM` + +3. If you are using the private key from the keychain on a Mac computer, convert it into a PEM key: + +`openssl pkcs12 -nocerts -in mykey.p12 -out mykey.pem` + +4. You can now generate a valid P12 file, based on the key and the PEM version of the iPhone developer certificate: + +`openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12` + +### Register devices + +1. Visit [Apple Developer Portal](https://developer.apple.com/ios/manage/provisioningprofiles/index.action). +2. Go to Device section. Under Manage tab, provide Device Name and [Device ID](https://developer.apple.com/ios/manage/devices/howto.action) (40 hex characters) + +### Create Provisioning Profile + +1. Visit [Apple Developer Portal](https://developer.apple.com/ios/manage/provisioningprofiles/index.action). +2. Go to Provisioning section. Create new profile under Development tab. +3. Fill the form with Profile Name, Certificates (as per .cer above), App ID and your development device. + +### Submit to Build + +Go to your Account > Edit Setting > Signing Keys' tab: + +![Edit Account](/images/phonegap-build/edit_account_settings.png) + +Click 'add a key...' and supply your previously generated p12: + +![Add Key](/images/phonegap-build/ios_add_key.png) + +### Unlocking the key. + +Go to your Account > Edit Setting > Signing Keys' tab: + +![Edit Account](/images/phonegap-build/edit_account_settings.png) + +Click 'lock' button and supply the certificate password you used to export your cert. + +![Unlock key](/images/phonegap-build/ios_unlock.png) \ No newline at end of file diff --git a/docs/4-phonegap-build/3-signing/2-android.html.md b/docs/4-phonegap-build/3-signing/2-android.html.md new file mode 100755 index 000000000..e4f9a0d14 --- /dev/null +++ b/docs/4-phonegap-build/3-signing/2-android.html.md @@ -0,0 +1,64 @@ +--- +title: Signing +url: phonegap-build/signing/android +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/3-signing/2-android.html.md +layout: subpage +tabs: + - label: iOS + url: phonegap-build/signing/ios + - label: Android + url: phonegap-build/signing/android + - label: Windows + url: phonegap-build/signing/windows +--- + +- [Generating a private key](#generating-a-private-key) +- [Submitting your key to build](#submitting-your-key-to-build) +- [Unlocking your key](#unlocking-your-key) + +**Note: it is Phonegap Build's policy not to retrieve signing keys for users, for legal reasons. Back them up.** + +*** + +### Generating a private key + +1. [Download and install Java](http://www.java.com/en/download/index.jsp). + +2. Set Java_Home directory (http://docs.oracle.com/cd/E19182-01/820-7851/inst_cli_jdk_javahome_t/index.html). + +3. Open the command prompt (cmd.exe) as an Administrator, then Run the following command: `$ keytool -genkey -v -keystore [keystore_name].keystore -alias [alias_name] -keyalg RSA -keysize 2048 -validity 10000` + +4. Keytool will ask for keystore password. Enter password and confirm: +![Keystore Password](/images/phonegap-build/android_keystore_pass.png) + +5. Next, keytool will ask for additional information. Supply appropriately: +![Keystore Password 2](/images/phonegap-build/additional_info.png) + +6. Next, keytool will ask password for Alias. Return if it's the same as keystore password. Othewise enter password and confirm: +![Alias password](/images/phonegap-build/alias_password.png) + +7. Your signing key is now ready to submit: +![Submit signing key](/images/phonegap-build/keystore_ready.png) + +### Submitting your key to Build + +Go to your Account > Edit Setting > Signing Key's tab. +![Edit signing keys](/images/phonegap-build/edit_account_settings.png) + +Click 'add a key...', ensuring you use the same alias used when you generated your key. +![Add info](/images/phonegap-build/add_key.png) + +### Unlocking your key + +Go to your Account > Edit Setting > Signing Key's tab: +![Signing Keys](/images/phonegap-build/edit_account_settings.png) + +Click unlock button and supply the the certificate password (from step #6 above) and the keystore password (from step #4 above) + +![Unlocking](/images/phonegap-build/unlock_key.png) + +Lastly, either set your key to be default using the checkbox in the keys list, or in your individual application's details, select the key you've uploaded and unlocked. + +*** + +[More info](http://developer.android.com/tools/publishing/app-signing.html#cert) diff --git a/docs/4-phonegap-build/3-signing/3-windows.html.md b/docs/4-phonegap-build/3-signing/3-windows.html.md new file mode 100755 index 000000000..9408ef6e5 --- /dev/null +++ b/docs/4-phonegap-build/3-signing/3-windows.html.md @@ -0,0 +1,44 @@ +--- +title: Signing +url: phonegap-build/signing/windows +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/3-signing/3-windows.html.md +layout: subpage +tabs: + - label: iOS + url: phonegap-build/signing/ios + - label: Android + url: phonegap-build/signing/android + - label: Windows + url: phonegap-build/signing/windows +--- + + +- [Windows 10 (Universal) Signing](#windows): `phonegap-version cli-6.1.1` and greater +- [Windows Phone 8.0/8.1 Signing](#winphone8): `phonegap-version cli-6.0.0` and below + + +### Windows 10 (Universal) Signing + +Windows builds have a slightly more involved signing process than the previous Windows Phone Publisher ID method, which was a simple GUID setting. A .pfx certificate file is now required to sign your app and distribute it to the App Store. [This article on MSDN](https://msdn.microsoft.com/en-us/library/windows/desktop/jj835832%28v=vs.85%29.aspx) explains how to create a PFX store file. Ensure the Subject Name of your signing certificate matches the Windows Publisher ID from your [Microsoft Developer Account](https://developer.microsoft.com/en-us/dashboard/account/management). + +Go to your [PhoneGap Build Account Settings](https://buildstage.phonegap.com/people/edit), select the **Signing Keys** tab, upload your **Windows 10** pfx key and unlock it, and select it when building your application. + +**In addition:** + +1. The `author` field in your config.xml must match the Publisher Display Name from *Windows Dev Center -> Account Settings*, i.e: + + ```<author>Adobe Systems Canada Inc</author>``` + +2. A new config.xml preference `windows-identity-name` has been introduced to set the App Idenity Name in your App Manifest. This preference must match the App Identity Name from your *Windows Dev Center Account -> App Management -> App Identity*: + + ```<preference name="windows-identity-name" value="PhonegapBuild.PGBDeveloper" />``` + + +### Windows Phone 8.0/8.1 Signing + +1. Log into the [Windows Dev Center](http://dev.windows.com), and click **Dashboard** in the top right. +2. Click **Account Settings**. +3. Copy the **Windows Publisher ID** field. +4. Add the Publisher ID to your Signing Keys in your [PhoneGap Build Account Settings](https://build.phonegap.com/people/edit). +5. Build your app using the newly added Windows Publisher ID, selected in a dropdown in your App details. +6. Upload the resulting xap/appx file to the Windows Dev Center. diff --git a/docs/4-phonegap-build/4-debugging/0-index.html.md b/docs/4-phonegap-build/4-debugging/0-index.html.md new file mode 100755 index 000000000..f19b9ef67 --- /dev/null +++ b/docs/4-phonegap-build/4-debugging/0-index.html.md @@ -0,0 +1,56 @@ +--- +title: Debugging +url: phonegap-build/debugging +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/4-debugging/0-index.html.md +layout: subpage +--- + +PhoneGap is an embedded webview, and both Android and iOS provide tools for debugging web applications running on mobile devices. These tools allow you to inspect HTML and CSS, as well as run and debug Javascript code. + +- [**iOS**: Safari Web Inspector](#safari-web-inspector) +- [**Android**: Chrome Developer Tools](#chrome-developer-tools) +- [**Windows Phone**: Visual Studio Web Debugging Tools](#visual-studio-debug-tools) +- [Weinre Remote Debugger](weinre) +- [Debugging Crashes and Native Exceptions](#crashes-and-native-exceptions) + +### Safari Web Inspector + +Steps: + +1. Connect your iOS device to your computer +2. Launch Safari +3. Launch your PhoneGap application on your iOS Device +4. Open Safari's **Develop** menu, and you should see your iOS Device listed. +5. Select your PhoneGap Webview listed under your device. + +More info can be found on the [Apple Developer Website](https://developer.apple.com/safari/tools/). + +### Chrome Developer Tools + +1. [Ensure Developer Options are enabled on your Android test device](http://developer.android.com/tools/device.html#developer-device-options). +2. Launch Google Chrome Web Browser. +3. Navigate to chrome://inspect in Chrome. +4. Select your PhoneGap Application running on your device, and the Developer tools will launch. + +### Visual Studio Debug Tools + +[See the Microsoft Blog Post](https://blogs.msdn.microsoft.com/visualstudioalm/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio/). + +### Crashes and Native Exceptions + +If your PhoneGap application is crashing or freezing, or if the Javascript Console shows no errors, you may need to use the Native SDKs in order to debug your application: + +#### iOS + +- [Debugging Deployed iOS Apps](https://developer.apple.com/library/ios/qa/qa1747/_index.html) +- There may also be third party applications which allow you to view your **iOS Device Console**. + +#### Android + +- Download and install the Android SDK. Attach your device to your computer, and run `adb logcat` to view your device logs and watch for Exceptions. + + +#### Windows Phone + +- See [Microsft Visual Studio](https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx). + diff --git a/docs/4-phonegap-build/4-debugging/weinre.html.md b/docs/4-phonegap-build/4-debugging/weinre.html.md new file mode 100755 index 000000000..ade98faea --- /dev/null +++ b/docs/4-phonegap-build/4-debugging/weinre.html.md @@ -0,0 +1,141 @@ +--- +title: Weinre +url: phonegap-build/debugging/weinre +github_url: https://github.com/phonegap/phonegap-docs/blob/master/docs/4-phonegap-build/4-debugging/weinre.html.md +layout: subpage +--- + +The open-source Weinre project is available for remotely debugging Javascript applications. A Weinre instance is hosted on PhoneGap Build, or you can run your own instance locally: + +- [Using PhoneGap Build's Debug Server](#phonegap-build-debug-server) +- [Running your own local Debug Server](#running-a-local-debug-server) + +### PhoneGap Build Debug Server + +This section shows how to use standard Web Inspector tools available from the + PhoneGap Build site +to debug PhoneGap apps while they are running on your device. See the PhoneGap Build section for details on how to provide the site with project code, and how to get the resulting compiled apps onto your device. + +To enable debugging from within the list of existing __Apps__, click on the name of the application to view its details. Click on the __Settings__ tab, then select the __Enable debugging__ check box: + +![](/images/phonegap-build/pgbuild_dbg_select.png) + +Once the debugging option is selected and you build the project, the __Debug__ button appears along with other options to update code and rebuild the project. When you preview the app on the device, perhaps by scanning the QR code as described in the PhoneGap Build section, pressing __Debug__ opens a web page that allows you to communicate with the app as it runs on the device: + +![](/images/phonegap-build/pgbuild_dbg_remote.png) + +Pressing the listed target gives you access to the app's internal state. The debugger may occasionally lose its connection if you pause the app or if the device goes into a standby mode. In that case, the __Remote__ tab may present a new target with which to re-establish the connection. + +Once connected, the __Elements__ tab allows you to view the app's full DOM tree as it executes: + +![](/images/phonegap-build/pgbuild_dbg_elements.png) + +You can use this interface to modify the application as it runs. For example, the default PhoneGap app generated by the CLI (see The Command-line Interface) presents a slowly blinking status message beneath the icon: + +![](/images/phonegap-build/pgbuild_dbg_blink.png) + +Selecting various elements from the DOM tree in the debug view highlights them on the device if visible, which may help you locate the relevant code: + +