Twitter: raymondcamden


Address: Lafayette, LA, USA

Modifying the PhoneGap Template in 3.0

07-24-2013 7,983 views Mobile, JavaScript, HTML5 11 Comments

A few months back I wrote a quick blog entry on how you can modify the default www template used when creating new PhoneGap projects. While not a problem for most people, I tend to create a crap load of PhoneGap projects so I can test various mission critical important features. So it bugs me when I have to go in and remove the pretty, but useless to me, boilerplate code. Currently there is an open bug to allow for something along these lines at the command line, but in the meantime, you may be wondering where the default template exists now.

Previously the installation instructions for PhoneGap included downloading the zip. In that zip you could find the template directory used by news app.

In the post-3.0 world this is a bit different. After you've done you installation via npm, you can find the bits at:

/Users/ray/.cordova/lib/www/phonegap/3.0.0/www

Obviously this folder would be slightly different for Windows, and obviously the 3.0.0 will be different as time goes on.

Here is my much superior default template that I humbly offer to the PhoneGap team for their consideration.

Related Blog Entries

11 Comments

These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • dan #
    Commented on 07-26-2013 at 7:33 PM
    On your start screen the words Phonegap and device is running are in uppercase characters. this is not the case in the html file.

    When I made an app every word displayed on the screen was uppercase, none should have been. What do I change to remave this feature.
  • Commented on 07-26-2013 at 7:40 PM
    I believe it is just the CSS doing that.
  • Commented on 07-26-2013 at 7:41 PM
    Yeah I just checked, the CSS from index.css is doing that.
  • dan #
    Commented on 07-26-2013 at 9:15 PM
    thanks!
  • dan #
    Commented on 08-20-2013 at 5:18 AM
    Raymond, I have managed to get a basic Phonegap 3 app running on an iPad and I would like to try adding plugins such as the accelerometer. Unfortunately I have not had any success. It is not that I have made a mistake but simply I have no idea of what I am doing. I have not been able to find a simple tutorial explaining the first five basic starting steps when using Phonegap 3.

    I have used the command line to add the accelerometer to a project and the plugin directory was populated but I have no idea of how to make it all work together.

    I am also confused by the way references refer to Cordova and Phonegap - they seem to be different things which are not interchangeable but references seem to do that.

    I would appreciate it if you can direct me to a simple example which I can use as a starting point .

    thanks in advance.
  • Commented on 08-20-2013 at 5:53 AM
    "I have used the command line to add the accelerometer to a project and the plugin directory was populated but I have no idea of how to make it all work together."

    Once you add the plugin, you then follow the API for the accelerometer docs. Have you read them yet?

    "I am also confused by the way references refer to Cordova and Phonegap - they seem to be different things which are not interchangeable but references seem to do that."

    Can you give a specific example of where this is holding you up now?
  • dan #
    Commented on 08-21-2013 at 4:26 AM
    thanks for the reply.

    with reference to "you then follow the API for the accelerometer docs"are these at ..... plugins/org.apache.cordova.core.device-motion/docs/ or are you referring to another set of documents.

    When I open README files that have gone into the plugins folder

    I find mainly references to cordova , such as


    cordova-plugin-device-motion README file

    “Standalone plugin to be used together with cordova-pluman, to install into cordova native projects.”

    It then Talks about cordova native projects.




    When I open the docs/acceleration/acceleration.md file it talks about cordova as follows:-

    Full Example
    ------------

    <!DOCTYPE html>
    <html>
    <head>
    <title>Acceleration Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //



    my platform/ios/www contains both cordova.js and phonegap.js

    while the index.html file only mentions phonegap.js


    When I try to open the plugin …. /test/index.html in safari I get the error message:- Apache Cordova did not initialise.


    I hope this gives some insight about my confusion (or ignorance)
  • Commented on 08-21-2013 at 5:45 AM
    "with reference to "you then follow the API for the accelerometer docs"are these at ..... plugins/org.apache.cordova.core.device-motion/docs/ or are you referring to another set of documents.
    "

    I'm talking about the PhoneGap Docs - http://docs.phonegap.com/en/3.0.0/cordova_accelero....
  • dan #
    Commented on 08-21-2013 at 6:06 AM
    Thanks for that.
    I had found a similar set of docs but they were .../2.0.0/...
    I had not seen this one.
  • dan #
    Commented on 08-23-2013 at 6:01 AM
    Hello again Raymond, I used to docs you referred to and got the plugin working on an iPad

    BUT

    the plugin app replaced one already on the iPad. The icon for the older app disappeared and the plugin test app icon appeared in its place.

    The same thing happens when I run the two apps in the Xcode simulator.

    when i reinstalled the original app on the iPad it replaced the plugin test app.

    I could not put both on the iPad at the same time. Their files are in different directories on the mac.


    The first time I run either app it crashes. When I retry to run it everything works OK.



    Any clues? Dan
  • dan #
    Commented on 08-23-2013 at 6:18 AM
    Sorry

    I think I have found my error

    Dan