Framework7 & PhoneGap – Getting Started

Tweet about this on TwitterShare on LinkedIn0Share on Google+1Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Framework7 & PhoneGap – Getting Started

In this blog post, we will be building a Boilerplate for Framework7 & PhoneGap. We will also look at PhoneGap build for deploying our newly created Framework7 app.

Contents

Code @ Github 

Prerequisites

To build a Hybrid app using PhoneGap, you need to be aware of

1. Git & GitHub

2. PhoneGap Setup and build

Framework7

Framework7 is a

Full Featured HTML Framework For Building iOS7 Apps

But the same can be used to build apps for Android and other Mobile OS. Out of box the theme looks very very close to the iOS7 components. If you are fine with it, you can use the same CSS else, you can modify accordingly.

The Framework7 project (hosted on GitHub) has CSS preprocessor – LESS support. And for markup templating – JADE.

If you are planning to consume the existing application as-is, you need not worry much. It will be mostly plucking components from the Kitchen-sink.

We will setup Framework7 & PhoneGap separately. Then we will integrate the required components.

Step 1 : Clone Framework7

First, make sure the prerequisite steps are completed. Then create a new folder and name it pgFW7 (sounds like a fighter jet right?, pun intended). The name is short for PhoneGap Framework7.

Next, we will clone the Framework7 repo from Github. Open terminal/prompt and CD into this folder and run

git clone git@github.com:nolimits4web/Framework7.git

This will get us the source code for Framework7 components. Then execute

cd Framework7 && npm install

to install all the dependencies. Then build and run the project using

grunt build && grunt server

gulp build && gulp server

By default you will be redirected to  http://localhost:3000/kitchen-sink/. This is the kitchen sink, consists of all the components that comes along with Framework7.

Along with this, there is a simple 2 page application like a base template. Navigate to

http://localhost:3000/dist/

to see the sample application. We are going to use this sample app as our base template. The code for this can be found at /Framework7/dist.

For production apps use app from dist» folder, it also contains latest and most stable version of Framework7 and also minified versions of scripts and css.

Step 2 : Create and clone a Github repo

If you are planning to use PhoneGap build to build a hybrid Mobile App, we need to dump all the code in a Github repo and submit the git URL.

Create a new Github project (pgFW7App). Next, CD back to pgFW7 folder. And then clone the repo by running

git clone https://github.com/<<username>>/pgFW7App.git

Step 3 : Scaffold a PhoneGap project

Next, We will scaffold a new PhoneGap project. Back to terminal/prompt & make sure you are at the root folder (pgFW7 folder) and run

phonegap create myAwesomeFW7app

This will scaffold us a simple PhoneGap project.  The final folder structure of the project would be

Screen Shot 2014-04-01 at 4.50.52 pm

Step 4 : Integrate Framework7 with PhoneGap

First lets clean up the pgFW7/myAwesomeFW7app/www folder. Navigate to pgFW7/myAwesomeFW7app/www. Then delete the following

  • css folder
  • img folder
  • js folder
  • index.html file

Do not delete the config.xml file.

Then copy the contents of pgFW7/Framework7/dist folder to pgFW7/myAwesomeFW7app/www. Next open the www/index.html file and  add the below script tag

 <script type="text/javascript" src="cordova.js"></script>

above the line

<script type="text/javascript" src="js/framework7.js"></script>

This is required for the PhoneGap build to run smoothly.

Step 5 : Update PhoneGap app properties

Open pgFW7/myAwesomeFW7app/www/config.xml. Update the name tag to myAwesomeFW7app and description tag to something you like and also the author tag as you want. The name tag will be the name of your app when this code is processed through PhoneGap build.

Step 6 : Test the PhoneGap app

Lets CD into the myAwesomeFW7app folder. Then run

cordova platforms add ios

or

cordova platforms add android

This will create an iOS/android project inside the platforms folder. Next, build the app by running

cordova build ios or cordova build android  or  cordova build

This will build the project. To run the project execute

cordova emulate ios or  cordova emulate android

Note: For iOS you need to have latest xCode and ios-sim (sudo npm install -g ios-sim). And for Android, if you face issues, you can open the project using ADT. Refer prerequisites. 

And your output should be

Screen Shot 2014-04-01 at 5.14.52 pm Screen Shot 2014-04-01 at 5.15.02 pm Screen Shot 2014-04-01 at 5.15.15 pm Screen Shot 2014-04-01 at 5.15.34 pm

Step 7 : Copy project to the repo folder & commit the repo

Copy pgFW7/myAwesomeFW7app/www folder to pgFW7/pgFW7App. Yup, this is the only folder that is needed to build the app.

Now, using terminal/prompt, CD into pgFW7/pgFW7App folder. Run the following commands

git status

Screen Shot 2014-04-01 at 6.57.03 pm

git add -A

git commit -a -m "Initial Commit" 

git push origin master

Screen Shot 2014-04-01 at 6.59.17 pm

Step 8 : PhoneGap build the app

Navigate to  https://build.phonegap.com/apps  and click on + New App button. Then copy the git URL from the repo (https://github.com/<<username>>/pgFW7App.git) to the “paste .git repo” textbox. And the click on Ready to Build button.

This will trigger the build process & finally see a page like

Screen Shot 2014-04-01 at 7.10.46 pm

I don’t have the iOS developer key, so no iOS installer. But I have a Samsung Galaxy Note, so Bam!! And the app looks very sleek and awesome!

Yeoman Generator

A few days ago I quickly whipped out a Yeoman Generator to build Hybrid Apps using PhoneGap and Framework7. You can find the same here : generator-framework7-phonegap.

Using it is super simple. Create a folder where you want to scaffold the boilerplate. Open terminal/prompt and run

Windows Mac/*nix
npm i -g yo grunt bower generator-framework7-phonegap    sudo npm i -g yo grunt bower generator-framework7-phonegap

Once the installation is completed, run

yo framework7-phonegap

This will scaffold a Framework7-Phonegap boilerplate for you. The final folder structure would be like

You will find 2 Gruntfiles –

  1. Inside the framework7 folder – This is used to manage Framework7 dev
  2. At the root of the project – This is used to manage PhoneGap dev

Development Process

  • Step 1 : To start developing,  cd  into the framework7 folder and begin development. Refer Getting Started With Framework7.
  • Step 2 : Once you are done, run

This is to build your Framework7 dev to a distributable format. make sure you are running  grunt dist  from inside the framework7 folder

  • Step 3 – finally  cd  back to the root folder and run

to copy all the contents of the framework7/dist folder to www.

Note : All your development should happen inside the framework7 folder and then run  grunt dist . Next  cd  back to the root folder and run  grunt copy  to copy the contents of framework7/dist to www folder

From the root folder, run

to spin off a server. You can see the contents of www folder in your browser at  http://localhost:1881 .

Note : You will find cordova.js as a 404 resource during Framework7 dev as well as PhoneGap dev. This will be resolved during PhoneGap Build.

Now you can submit this www folder to PhoneGap Build. Simple right?

Next Steps

You can also build an integrated Boilerplate, where you can make live changes to the Framework7 LESS & JADE files & the www folder simultaneously instead of copy pasting every time.

You can go through the PhoneGap plugins and create your own apps. I have created a sample app using Contacts API and jQuery Mobile. You can try out the same with Framework7 List & Form components.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+1Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Ashvin Suthar

    Try this

    Framework7.AngularJS v2.0.beta

    Join the chat at https://gitter.im/ashvin777/framework7.angular

    Full Featured Mobile HTML Framework For Building iOS & Android Apps with the Power of AngularJS.

    Full Documentation

    https://github.com/ashvin777/framework7.angular/

    Kitchen Sink App

    http://ashvin777.github.io/framework7.angular/kitchen-sink-material/#!/home.html

    Demo App

    http://ashvin777.github.io/framework7.angular/examples/#!/home.html

    Install

    From Bower

    bower install framework7-angularjs
    From NPM

    npm install framework7-angularjs

  • Abhinav Jaiswal

    Hello I just now started working with Framework7. I downloaded the setup and extracted it as you said above. While navigating from index.html to any other page say about, form, etc desktop it is showing error. “XMLHttpRequest cannot load file:///E:/R%20n%20D/Framework7-1.4.0/dist/form.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.”

    Can anyone please help me to resolve this ?

    • Zakaria

      use class=”externel link” to replace class=”link”
      But it just a way to avoid the problem not solove it

  • Jonathan Michael Luna

    Any tips on getting Framework7 set up in a rails app?

  • Evan

    i got this ERROR,

    BUILD FAILED

    Total time: 22.317 secs

    /Users/Evan/Downloads/myApp4/myFourthApp/platforms/android/cordova/node_modules/q/q.js:126
    throw e;
    ^
    Error code 1 for command: /Users/Evan/Downloads/myApp4/myFourthApp/platforms/android/gradlew with args: cdvBuildDebug,-b,/Users/Evan/Downloads/myApp4/myFourthApp/platforms/android/build.gradle,-Dorg.gradle.daemon=true
    ERROR building one of the platforms: Error: /Users/Evan/Downloads/myApp4/myFourthApp/platforms/android/cordova/build: Command failed with exit code 1
    You may not have the required environment or OS to build this project
    Error: /Users/Evan/Downloads/myApp4/myFourthApp/platforms/android/cordova/build: Command failed with exit code 1
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:134:23)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1015:16)
    at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

    I’m stuck on it for a couple of hours, would u like to help me pls :)

  • vitor

    I took a complete project framework7 + phonegap in git.

    I cared for the eclipse, after running

    06-18 01: 07: 38 961: E / Web Console (323): TypeError: Result of expression ‘this [d] .classList’ [undefined] is not an object. at file: ///android_asset/www/js/framework7.min.js: 19

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Can you try using the Yeoman generator above?

      • Abraham Montelongo

        Arvind, I was having problems with the mainView.router.load… specially in the router.
        and creating a Framework7 project, so I watch the version packaged in yeoman generator, it is 0.8.0. And the new documentation at for this framework at this moment is for 1.0.7. So maybe we need to update it. thank you Arvind!

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Yes, This was created quite a long time ago. If you want, you can submit a PR with the updated code on Github. Thanks.

  • vitor

    Hello!
    It would be possible to provide you an example design using phonegap / framework7? I can not follow his example
    = (

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hey vitor, what part of the example are you facing difficulty with?

      • vitor

        Arvind Ravulavaru

        I have an external site that uses framework7, works perfectly.

        So I created a cord design, and it efficient access this site at (webview).

        but I got an error:

        Web Console (273): TypeError: Result of expression ‘this [0] .classList’ [undefined] is not an object. at http: //www.xxxx/js/framework7.min.js 22

        He opens my website, but does not load the js framework7 (other .js as jquery) loads normally.

        What could it be?

        Also auditioned catching the dist files, and putting the ‘www’ folder to access the index.html, I got the same error.

  • Chek

    Hey, I am stuck at the beginning. On grunt build. Fatal error: Unable to find local grunt.

    Is the grunt file not in the github repo?
    Thanks for the help.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Chek, you mean the Yeoman generator?

      • Chek

        I really don’t know! sorry. I am just following the steps as provided and when I do the grunt build I get the response fatal error grunt file not found. I am pretty new to this (hence doing a tutorial)

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Try running

          • Chek

            I’ve done that. It seems to be installed correctly but I am still getting the same error on grunt build

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            After you have scaffolded the project, did you CD into the folder where the GruntFile.js is located? And after that you are running grunt build?

          • Chek

            I’m not sure what you mean by scaffolded the project. I have git cloned the project. cd Framework7. Done the npm install, have made sure I have grunt installed correctly.

            I can’t find the GruntFile.js anywhere.

            grunt build

            Fatal error: Unable to find local grunt.

            If you’re seeing this message, either a Gruntfile wasn’t found or grunt

            hasn’t been installed locally to your project. For more information about

            installing and configuring grunt, please see the Getting Started guide:

            http://gruntjs.com/getting-started

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Gotcha! Just checked with the Framework7 repo. Looks like they have moved from Grunt to gulp. Fixed the tutorial. Thanks!

          • Chek

            Thanks for updating!

  • Student

    Hello
    i have a some questions.
    i’m trying do design of my app. I’m trying do app likes viber whatsapp. And using phonegap,sipjs,asterisk and node js. Is it possible???
    And it has to working html quick on android. And i tried some demoapps of framework7. They don’t connect to database.
    How to do mobile app with database on framework7?
    This framework is front-end framework???
    Also can i use node js on template of framework7?.
    Can i use mongodb to framework7???
    i’m beginner of javascript. So i don’t understand some things. Pls help me and give some advice. Thanks

  • WackierSnail88

    It sounds like your are trying to make the process more complicated than it should be.

    Do we need to run all those commands? (arrggghh)

    If its a(n) HTML framework, wouldn’t it be easier if we could just download a folder and drop in our project?
    then reference it.

    Thank you for the time you spent anyway.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks WackierSnail88. It is just a preference. You can choose whatever approach you are comfortable with.

      • WackierSnail88

        I know you gurus like to use the command prompt. But people like me are scared of that. Lol.
        Which folders should I copy to my Xcode – PhoneGap Project?
        Here is the screenshot of the project structure
        Thanks alot

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          LOL! I hardly know a few commands to live with.

          You know at some point I was also scared to work with the command prompt. You know what I did, i wrote a few commands and felt what I was scared of. To be honest its nothing!

          There is a first time for everything. I recommend you trying out the command prompt for a change. Just for kicks, implement the generator and scaffold the above app. Feel free to shoot as many questions as you have, I am more than happy to help.

          Still if you think the command prompt is trouble, I will share a zip file of the final scaffolded app. What say?

          Thanks.

  • ProductArchitect

    Nice tutorial! However, it seems you left out a vital step at the beginning: ‘grunt build’ right after ‘npm install’. Otherwise there’s no CSS so the page looks rather awkward. :-)

    Also, I would guess that ‘file and the below script tag’ is missing the word ‘add’.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks @ProductArchitect:disqus. Fixed the mentioned issues!

  • Jimmie
  • Dick

    Tried to create a PhoneGap app with the help of this guide, but pgFW7 / myAwesomeFW7app / www / config.xml does not exist. Instead, there config file outside of www folder. Is it because I have the latest version of PhoneGap and Cordova or is it something else, and what should I do?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Dick, config.xml is a Phonegap build requirement. When you upload your code to Phone build service, it will look for this file, to start processing your code. As long as this file is present in the uploaded package, it should work fine.

      My preference, for the sake of consistency is to keep the config.xml at the same level as index.html. That is inside the www folder.

      Hope this answers your question. Thanks.

      • Dick

        Thanks Arvind. But reaction to something. I have the latest version of PhoneGap (3.6) but still it says 3.5 in the config file when I create PhoneGap project.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Hello Dick, That is fine. Because, when your run

          The CLI will clone this : https://github.com/phonegap/phonegap-app-hello-world repo and download the boiler plate project from here.

          And you can find the root cause of version variation here : https://github.com/phonegap/phonegap-app-hello-world/blob/master/www/config.xml#L27

          Thanks.

          • Dick

            Phonegap wants me to update to 3.6 but may ignore it then. Thought it could be the reason for this.

            http://stackoverflow.com/questions/26730264/phonegap-geolocation-permission-denied/26738275#26738275

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            You can replace the version with the below

            I guess the root cause of the issue is that the Phonegap build is not able to find the config,xml which defines the permissions.

            The easiest way to check is, when you upload your code to phonegap build, you should see a list of plugins in the Plugins tab as shown in the image below.

            Thanks.

          • Dick

            Hi!
            I find geolocation inside the plugin list. Do you have any idea what that might be the problem? You can email me!

            Thanks!

  • Simon

    When I add a Cordova platform, I get an error. “Error: ENOENT, No such file or directory ‘/Users/username/Documents/plugins/ios.json'” When I look at the path, I see that it does not add it to the correct folder in the terminal, I find myself in .

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hi Simon,

      Can you please share a bit more background on the project, how did you set up etc.

      Thanks.

      • Simon

        Hi!
        Everything has worked perfectly in the past when I made ​​this tutorial. But now when I try to add “Cordova add iOS platform” becomes something wrong. Folder platforms settles in Document instead of Documents / app / myAwesomeFW7app. I have navigated to the myAwesmeFW7app but it still choose to put the folder in the Document folder.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Can you try creating a new project in a new location and test it?

          • simon

            Hi Arvind!
            I have tried to create a new project in the documents folder several times but can of course try to create a project on the desktops.

            Thanks

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Hey Simon, Can you try on the desktop and let me know if it works?

            Thanks.

          • Simon

            It works!

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Great!

  • Lorenzo De Nobili

    Maybe it’s a silly question but… no need to use ‘onDeviceReady’ phonegap function?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      It is always better to write your logic inside one. Just to avoid surprises.

      • Lorenzo De Nobili

        Can you help me providing an example implementing ondeviceready in the js structure of framework7?

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          You can try this:

          If you need more info let me know.

          Thanks.

  • johnq111

    Hey there – thanks for this setup! Truly easy. But was wondering if anyone has had any usability issues with any of the Framework7 form elements on Android (Chrome/Chorme Beta). I haven’t tested in a PhoneGap wrapper but I couldn’t get the radios, smart selects, and a few other things to work. Anyone else?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello John, Thanks!! I justed tested a few stuff on Android (Samsung Galaxy Note I) Chrome app and it seems to work fine. Do you have a page that is causing the issue? I can take a look. Thanks.

      • johnq111

        I don’t have a page. I was referring to using the kitchen sink http://www.idangero.us/framework7/kitchen-sink/ with current versions of mobile Chrome.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Kitchen sink works fine too. Any specific feature?

          • johnq111

            I was only referring to radio buttons and smart selects. I don’t see the radio check icon move when tapped on to another option and smart selects don’t swap the check to the tapped option either. I have a 2 year old Android running 4.2 but I wouldn’t think the phone would cos that because the touch event is still working everywhere else…

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Hmm strange.. Have you tried raising a bug with FW7? IDK for some reason this looks like a device specific issues (I could be totally wrong!). Thanks.

          • ninguno

            Hi Arvind, thanks for your suggestions. I just saw OnsenUI and it seems promising. I have to test it on a real device so it doesn’t happen the same thing about radiobuttons as F7. I think Onsen lacks of gallery widgets (that F7 has) but looks like a good framework..

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Hello ninguno. That is true. I don’t this that would be a problem. Because, if you use jQuery version or the Angular version, there are components already available. At best, you may need to tweak the look and feel to match your app. Don’t you think so?

          • ninguno

            Yes Arvind I think that should be possible. I just need to pick the right gallery component to avoid any surprises regarding compatibility and performance on smartphones.

        • ninguno

          I’m having the same issue with radio buttons. I tap on them but no mark will be visible. I could see them on Chrome Desktop, but my cordova app with the files from this tutorial won’t let me use radio button nor slider.
          Considering I’m using version 1.0.6 of the framework it’s disturbing this issue is still alive.
          I just saw one thread on F7’s site where nolimits4web suggests to turn off fastClicks when creating Framework7(); The opener said it solved the problem but did nothing for me.
          It’s sad because I had big expectations on this framework and tried to convince people to use it on a future project but I don’t want to deceive anyone if this F7 goes crazy.

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Hello ninguno. I am not sure about the future plan of F7. You can may be raise an issue with the F7 team itself about this.

            May I ask what kind of applications are you targeting, I can probably suggest another framework.

          • ninguno

            Hi Arvind, I was interested in F7’s built-in pop-ups, sidebars, panels, image galleries and widgets in general which seem better at first place than ratchet (my current choice). I guess I have no particular kind of applications. I’d use a cordova framework for any application which doesn’t need native background processing.

            I read about Ionic and looks like it will grow fast but I heard F7 had a better set of widgets and stability so I wanted to try it first. I also loved its test page.

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Ah ok.. I see where you are getting at. I would recommend trying Ionic or OnsenUI. Onsen UI has a jQuery version of it too. Let me know what you think of that.

  • dfg

    Awesome Tutorial………Thank you so mush…!!!!!!!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks dfg!

  • http://www.mobilidade.fm Will

    Awesome tutorial. Worked flawlessly. Thank you very much, Arvind.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Will!

  • Sepehr

    Hi Arvind,
    I have the phonegap + framework7 working, thanks to your tutorial.
    I have a problem.
    when I add a plugin to phonegap like geolocation like this:
    $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
    when I want to build my app & run the emulator I get this error:

    The following build commands failed:
    CompileC build/myTestApp.build/Debug-iphonesimulator/myTestApp.build/Objects-normal/i386/CDVCompass.o myTestApp/Plugins/org.apache.cordova.device-orientation/CDVCompass.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler

    CompileC build/myTestApp.build/Debug-iphonesimulator/myTestApp.build/Objects-normal/i386/CDVAccelerometer.o myTestApp/Plugins/org.apache.cordova.device-motion/CDVAccelerometer.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler

    CompileC build/myTestApp.build/Debug-iphonesimulator/myTestApp.build/Objects-normal/i386/CDVLocation.o myTestApp/Plugins/org.apache.cordova.geolocation/CDVLocation.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler

    (3 failures)

    Error: /Applications/MAMP/htdocs/mobileApps/kojahatestapp/myTestApp/platforms/ios/cordova/run: Command failed with exit code 65

    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)

    at ChildProcess.EventEmitter.emit (events.js:98:17)

    at maybeClose (child_process.js:753:16)

    at Process.ChildProcess._handle.onexit (child_process.js:820:5)

    By any chance do you know why I am getting this error?
    Thanks a lot :)

    • Sepehr

      Sorry I guess I posted this twice! :( I can’t seem to find a way to delete it. Sorry.

      • http://thejackalofjavascript.com/ Arvind Ravulavaru

        Hello Sepehr. Thanks! No issues I clean up the duplicate comment.

        I have not faced an issue like this so far, can you try updating Xcode and PhoneGap versions to the latest and try again?

        Thanks.

  • Sepehr

    Hi Arvind,
    I have the phonegap + framework7 working, thanks to your tutorial.
    I have a problem.
    when I add a plugin to phonegap like geolocation like this:
    $ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
    when I want to build my app & run the emulator I get this error:

    The following build commands failed:
    CompileC build/myTestApp.build/Debug-iphonesimulator/myTestApp.build/Objects-normal/i386/CDVCompass.o myTestApp/Plugins/org.apache.cordova.device-orientation/CDVCompass.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler

    CompileC build/myTestApp.build/Debug-iphonesimulator/myTestApp.build/Objects-normal/i386/CDVAccelerometer.o myTestApp/Plugins/org.apache.cordova.device-motion/CDVAccelerometer.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler

    CompileC build/myTestApp.build/Debug-iphonesimulator/myTestApp.build/Objects-normal/i386/CDVLocation.o myTestApp/Plugins/org.apache.cordova.geolocation/CDVLocation.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler

    (3 failures)

    Error: /Applications/MAMP/htdocs/mobileApps/kojahatestapp/myTestApp/platforms/ios/cordova/run: Command failed with exit code 65

    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)

    at ChildProcess.EventEmitter.emit (events.js:98:17)

    at maybeClose (child_process.js:753:16)

    at Process.ChildProcess._handle.onexit (child_process.js:820:5)

    By any chance do you know why I am getting this error?
    Thanks a lot :)

  • Jeff Maynard

    Arvind
    I re-dd the install (as per your instructions) and it seems OK now…
    s

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      @disqus_yn0PW8Snn5:disqus Thanks! I was typing a long message how it is working fine me :) Good to hear that it is working now!

      • Jeff Maynard

        Arvind
        thanks again for your help.
        I will now build a nice boilerplate for use in Cordova so I can convert most of my existing apps to IOS7 look-and-feel.
        cheers

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          That sounds great! Also do check out the fw7 yeoman generator for boilerplate-ting your apps. Cheers!

  • Jeff Maynard

    UPDATE
    I have disabled Ajax but the links now load full page – so, for example, a link in the sidebar does not fill the sidebar but the entire screen…
    this ruins the iPhone/ipad functionality!
    any ideas???
    thanks

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello @disqus_yn0PW8Snn5:disqus, I don’t think I get the issue. Can you please post an example or share the code?

      Quick Tip : When you run the app in the browser, you can open developer tools and see if there are any resource missing (cordova.js is an exception) and or script errors.

      • Jeff Maynard

        Arvind
        I want to use Framework7 to develop a self-contained HTML-based App )which I will wrap in cordova before submitting to app Store). I have a number of Apps developed like this; Framework7 is the best IOS7-style template I have found.
        Because it uses Ajax it will not load local pages; I set the ajaxLinks option and this does load local pages but not correctly. With Ajax a link in, say, the sidebar will open the new page only in the sidebar; with ajaxLinks set the link opens in the entire window. That is what I am seeking to stop (and work the same was as server hosted pages).
        Many thanks for your help

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Hello Jeff. Are you referring to this template : http://www.idangero.us/framework7/examples/split-view?

          • Jeff Maynard

            Arvind
            yes, that is the template I wish to use. The sidebar is only filled with the referred page when linked to a server. If I use the ajaxLinks setting the referred page is loaded from a local file but it replaces the entire window not just the sidebar.
            Thanks for your help

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            @Jeff were you able to resolve the issue?

          • Jeff Maynard

            Yes (thanks for asking!). I jut went back to the start and installed as per your instructions and everything is now OK.
            Except I am struggling to get the page call backs working – using the two-pane template I want to execute a function when the right pane (the one with no head section) is loaded.
            cheers

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Can you share the code? I can take a dig at it.

          • Jeff Maynard

            I am using FW7 single.html template so most of my content is in pages without head sections etc.

            from my home page I call the page conditions.html thus:

            Current River Thames conditions*

            The page conditions.html just needs to call a single function coded in index.html. I cannot get the function to run automatically when conditions.html is opened. So, thus far, I am having to provide a button to click:

            Tap for current conditions

            it would be a better user experienced if the function just ran when conditions.html is called

            thoughts appreciated

  • Jeff Maynard

    Followed all your instructions and Framework7 installed and easy to go. The one issue I am struggling with is disabling Ajax. Even following the instructions I cannot get it to work – grateful for any guidance eon this issue…
    thanks

  • Bruno Seixas

    I wasnt sure where to ask so here it goes… ;p
    Do you suggest a particular Chart Framework? I am looking into http://d3js.org/
    The goal is to have simple charts in a hybrid mobile app. An open source choice is mandatory.

    Thanks in advance =)

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      D3 is good. But I am not sure if you want to create a chart from scratch or you want to consume out-of-the-box. Quick google search on “D3 charts” was not that positive in terms of different types of charts.

      I would suggest Google Charts or jqplot. The array of charts is huge and there are solutions to make them responsive as per device as well as make them respond to touch events.

      • Bruno Seixas

        Sorry for not being more clearer.
        I am looking for a chart framework, out-of-the-box, for a mobile hybrid app.
        Usually I go with Highcharts for desktop/responsive app but I am not sure if I can use it in this particular scenario.

        I know the other ones but I havent tried them out in a mobile app, hence my question to you 😉
        Will give it a go with d3 (the charts they offer would be sufficient I think) and if possible I would try out another one just to have something to compare (code and performance wise).

        Once again thanks :)

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Sure. Do let me know how it turns out!

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Checkout http://fastly.github.io/epoch. Chart Library on top of D3

          • Bruno Seixas

            Thanks 😉 I also found this http://www.chartjs.org/
            Seems good also =)

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Nice find. Thanks for sharing!

  • Bruno Seixas

    I am using the tab-bar example and it seems the slider has some issues. I used PhoneGap build to make the .apk
    While testing in Chrome/Emulator everything works fine but in Android It only shows a line. Any idea why? I have double check the html code.

    Another question:
    – Does Framework7 need fastClick.js?

    And finally, have you tried Ratchet (http://goratchet.com/)?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      @disqus_iN6qlRgNbk:disqus Did you test on ADT Emulator? Which version of Android is the device you are installing the app on.
      AFAIK, FW7 also need fastClick.js to reduce the 300ms delay.
      Yup, tried Ratchet. Same as Bootstrap but for mobile devices.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Bruno, Did you test on ADT Emulator? Which version of Android is the device you are installing the app on.
      AFAIK, FW7 also need fastClick.js to reduce the 300ms delay.
      Yup, tried Ratchet. Same as Bootstrap but for mobile devices.

      • Bruno Seixas

        I tried it in a real Android device.

        After experimenting with Ratchet, Ionic and Framework7 I am inclined to use Ratchet (mainly because it´s an agnostic framework, leaving me with the possibility to use Backbone/Angular or Ember) and it just gives a good start. Although it´s like you said once in a comment, in the end it depends on the app and the dev experience (If I already knew Angular then I probably would pick Ionic).

        I would like to share an article:
        http://wolfslittlestore.be/2014/03/bootstrap-ratchet-what-this-means-for-the-future-of-web-ui/

        Seems like a possible scenario. What do you think?

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          IMHO, Ratchet is good for apps where you want to build and customize a lot of front end design part from scratch (similar to the uses of Bootstrap for a RWD site). There is no doubt how powerful ratchet is, but as mentioned earlier it depends on your requirements.

          If the app design consists of standard Mobile UI components, I would pick frameworks like FW7/Ratchet etc, which do not have a tight backed integration with services. Where I can pluck the components from their library and start using them with some changes to the CSS.

          And to be more specific, if I am not implementing routes and controllers, I would not even pick angular/backbone as a client side framework. I would use custom build jQuery only for AJAX, John Resig micro templating to manage templates on the client side.

          Again, these are different ways you can approach the app development. It all boils down to the requirement, time lines, customizations etc.

          And about the android installation issue, run it through a ADT emulator: http://thejackalofjavascript.com/phonegap-3-cli-setup-mac-windows/

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Did you checkout Google Web Starter Kit? http://thejackalofjavascript.com/web-starter-kit/

          • Bruno Seixas

            I havent seen with “real eyes” but seems a good alternative but again..it´s another one in a world of alternatives. I would like to share this podcast:

            New Hotness Exhaustion | CR 107
            http://201406.jb-dl.cdn.scaleengine.net/coderradio/2014/cr-0107-432p.mp4

            If you have the time, listen =)

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Will do. Thanks!

          • Bruno Seixas

            This is one the main reasons I really like your blog, I like how you
            think. I find myself with a similar vision. There is no need to bring “big
            guns” such as JS MVC frameworks just for the sake of using them. In one of
            my latest projects one part of the UI had a very dynamic UI, but it
            wasnt a SPA, just a particular part. A javascript “class” using jQuery,
            AJAX, Storage, Underscore and Handlebars did the job nicely.

            About the Android thing…Shouldn´t it be working well in a real Android device? I
            can try the emulator but usually I just pass the .apk to the device
            (takes a couple more minutes indeed but for now it´s ok).

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Always against overkill. Technology needs to be used to solve a problem, not create one :)

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Always against overkill. Technology needs to solve problems, not create them :)

  • ET

    PhoneGap 3.5.0 not supported, how can I fix this?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      @ET At what stage of development are you facing this issue?

      • ET

        Just with Step 8…building the app in Adobe PhoneGap Build

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Looks like PhoneGap build 3.5.0 is not yet available on PhoneGap build.
          You can always add or any other version of PhoneGap to run the build.

          • ET

            Where exactly can I add that code? I’m a bit of a beginner.

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Pls check : http://docs.build.phonegap.com/en_US/introduction_upgrading_2_9_to_3_1.md.html
            There is a sample config.xml at ~bottom of the page.

          • ET

            Added the preference to the config….but still no luck. Is it just a matter of saving it?

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            I am assuming that you have

            1. Added the preference tag to the config.xml, saved it to your local
            2. Pushed the updated config.xml to the GitHub
            3. From inside PhoneGap build, issued another build

            And it is still not working?

          • ET

            Got it! THANKS!

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Happens :)
            Is it working now?

          • ET

            Forgot to repush

  • Kelvin

    When I try to clone Framwork7 it gives me:
    “Permission denied (publickey).
    fatal: Could not read from remote repository.”

  • Bruno Seixas

    Really big thanks for sharing your work.
    I am starting to research Mobile Hybrid apps and your tutorials are pure gold.
    Well written, great examples and the comments are also helpful.

    Thanks from Portugal 😉

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      @disqus_iN6qlRgNbk:disqus Good to hear that!! Glad I could be of help. Thanks!

  • http://twitter.com/TechLifeBlog Tech Life Blog

    When I run: “grunt server” I am getting a “-bash: grunt: command not found” why is this?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Looks like the npm install that was run inside the Framework7 folder did not go well. Can you try running npm install inside the Framework7 folder again?

      Else you can install grunt globally like

      [windows] npm i -g grunt grunt-cli
      [*nix] sudo npm i -g grunt grunt-cli

      Thanks,
      Arvind.

  • Todd

    Thanks for doing this writeup. Framework7 and Ionic seem similar. Do you have a preference on which framework that you would use?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Todd!
      IMO :

      Ionic – If I have to integrate my app with an existing REST service (makes life easy with Angularjs out of box)
      Framework7 – More of a UI related stuff & preferably device related task like showing a list of contacts etc.

      I would rather build a Talking Tom app with Framework7 than Ionic and I would rather build BBC News Services App with Ionic than Framework7.

      This is totally my idea, but you can use any Framework for your needs & customize accordingly.

      Thanks.

      • Todd

        Arvind, this makes sense to me. Thanks for providing your opinion of the strengths of each framework and what kind of app benefits the most from these strengths.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Glad I could be of help. Thanks Todd!