Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

integrating phonegap

Avatar

Level 1

I'm trying to build a phonegap application using this guide: http://dev.day.com/docs/en/cq/current/developing/mobile/phonegap_integration.html (using CQ5.6.1).

I'm a total newbie, only having finished sys-admin and developer training last week, and having only a few days of CQ experience under my belt.

Unfortunately the guide above seems to be slightly out of date (for 5.6.1) and I've not successfully built a phonegap app.

Some of the instructions are not quite clear, e.g.

  • which node should the phonegap-exportTemplate property be set on?
  • how do I create and configure a config.xml file?

I think I've reproduced the configuration from teh guide using geometrixx-outdoors-mobile, contentsync and Phonegap Build.

The symptom that's manifesting that the Phonegap Build complains that there is no index.html file.

I've inspected the ZIP produced by content sync and the JCR /content/geometrixx-outdoors-mobile, /etc/designs/geometrixx-outdoors trees are there as well as a manifest that specifies 'indexPage'. It all looks like what I'd expect to see given my configuration. I'm just assuming that my configuration is not complete.

I can't find a reference for the manifest node/properties so I can't even inspect the API for clues.

Can anyone fill in the holes (in my understanding) of the guide above? Or point me in the right direction?

Thanks,

Nick

1 Accepted Solution

Avatar

Correct answer by
Employee

Hey Nick,

I created a *very* basic sample app to demonstrate the PhoneGap integration with AEM 5.6.1: https://github.com/blefebvre/aem-phonegap-sample

Instructions for installing and running the app have been included in the project README, so I won't repeat them here. To address your questions:

  • which node should the phonegap-exportTemplate property be set on?

phonegap-exportTemplate should be set on the cq:Page's jcr:content node that will serve as the entry point to your app - also the page you'll start the PhoneGap build workflow on. In my example this page is located at /content/bruce/app/app-content/jcr:content (view on Github).

  • how do I create and configure a config.xml file?

As of 5.6.1 there is no utility for managing a config.xml file in the UI, but there's nothing stopping you from creating one in the repository and including it via content sync into the app payload (view config.xml on Github).

The symptom that's manifesting that the Phonegap Build complains that there is no index.html file.

I've seen an issue where PG build does not respect the value of the content property in config.xml (i.e. <content src="content/bruce/app/app-content.html"/>), and have worked around this by including an index.html file in the app payload that simply redirects to your actual index page (view on Github).

Hope this helps. Feel free to follow up below or file an issue on the Github repo if you run into any problems.

View solution in original post

3 Replies

Avatar

Correct answer by
Employee

Hey Nick,

I created a *very* basic sample app to demonstrate the PhoneGap integration with AEM 5.6.1: https://github.com/blefebvre/aem-phonegap-sample

Instructions for installing and running the app have been included in the project README, so I won't repeat them here. To address your questions:

  • which node should the phonegap-exportTemplate property be set on?

phonegap-exportTemplate should be set on the cq:Page's jcr:content node that will serve as the entry point to your app - also the page you'll start the PhoneGap build workflow on. In my example this page is located at /content/bruce/app/app-content/jcr:content (view on Github).

  • how do I create and configure a config.xml file?

As of 5.6.1 there is no utility for managing a config.xml file in the UI, but there's nothing stopping you from creating one in the repository and including it via content sync into the app payload (view config.xml on Github).

The symptom that's manifesting that the Phonegap Build complains that there is no index.html file.

I've seen an issue where PG build does not respect the value of the content property in config.xml (i.e. <content src="content/bruce/app/app-content.html"/>), and have worked around this by including an index.html file in the app payload that simply redirects to your actual index page (view on Github).

Hope this helps. Feel free to follow up below or file an issue on the Github repo if you run into any problems.

Avatar

Level 10

I also wrote a basic How to get going with PhoneGap SDK and IntelliJ IDEA:

http://scottsdigitalcommunity.blogspot.ca/2013/11/creating-android-phonegap-application.html

Future article will talk about more complex PhoneGap apps and AEM.

Avatar

Level 10

I am tracking down CQ Eng to help you.