In this tutorial we will see how to compile Framework7 app with Apache Cordova.

In the process we will write a simple Framework7 app that will render a material dialog when a button is clicked. Then we will install it in our emulator

But first we need to introduce some terms that we will be using in this and a series of tutorials.

What is Framework7 ?

Framework7 – is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel.

Use Framework7 if you want to build iOS or Android Cordova app or web app that looks like and feels as great native iOS and Google Material apps.

With Framework7 all you need to make it work is a simple HTML layout and attached framework’s CSS and JS files! Framework7 doesn’t force you to write some custom tags that will be converted by JavaScript to something else. It doesn’t force you to write and describe all your content in JavaScript (or JSON). Just plain HTML and you always get exactly the same that you expect to get when you write this HTML.

We are Building a Vibrant YouTube Community

We have a fast rising YouTube Channel of friends. So far we’ve accumulated more than 2.6 million agreggate views and more than 10,000 subscribeers. Here’s the Channel: ProgrammingWizards TV.

Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.

Here’s this tutorial in Video Format.

What is Apache Cordova?

Apache Cordova allows for building native mobile applications using HTML, CSS and JavaScript.

Cordova CLI

CLI normally stands for Command Line Interface. The Cordova CLI is a tool that allows us perform several tasks like creating, building and running Cordova applications on the emulator.

These days various frameworks and libraries come with their own CLIs given that most of the times we write these apps with nothing more than a text editor, not some sophisticated IDE.

So CLI makes it convenient to perform these recurring tasks.

However before running any command-line tools, you need to install SDKs for each platform you wish to target.

In this case am targeting android which is the most popular mobile platform.

Installing Cordova

  1. Download and install Node.js. Following installation, you should be able to invoke node or npm on your command line.
  2. Install the cordova utility. In Unix, prefixing the additional sudo command may be necessary to install development utilities in otherwise restricted directories:

In windows use this:

npm install -g cordova

In Unix:

sudo npm install -g cordova

Create Cordova Application

CD(Change Directory) to the folder you want to create Cordova application and run the following command:

cordova create greeter com.example.greeter Greeter

The first argument specifies a greeter directory to be generated for your project. Its www subdirectory will house your application’s home page, along with various resources under css, js, and img, which follow common web development file-naming conventions.

The other two arguments are optional:

  1. the com.example.greeter argument provides your project with a reverse domain-style identifier.
  2. the Greeter provides the application’s display text.

We’ll have folder created called Greeter with the following files and folders:

Write Our Framework7 Code

If you move over to the www folder you can see that we have the following familiar structure with index page, css and js files.

 

First you’ll need to download and add framework7 js and css file that we will reference. Check here for instructions.

You can now edit these css, html and javascript as part of your application code.

In our case we will replace these files with our Framework7 code.

Here’s our index.html

<!DOCTYPE html>
<html>
  <head>
    <!--META ATTRIBUTES-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>Camposha.info</title>

    <!-- REFERENCE CSS-->
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">

  </head>
  <body>

    <!-- VIEWS-->
    <div class="views">

      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main">

        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">

            <!-- We have home navbar without left link-->
            <div class="center sliding">Awesome App</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only"> <i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>

        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">

          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page">

            <!-- Scrollable page content-->
            <div class="page-content">
              <div class="content-block-title"><h1>Welcome To Camposha.</h1></div>
              <div class="content-block">
                <div class="content-block-inner">
                  <h5>Camposha.info is a tutorials website.</h5>
                  <P> We do Java,Javascript,C#, Python, PHP among other web technologies.</P>
                </div>
              </div>

              <div class="content-block-title">Buttons</div>
              <div class="content-block">
                <div class="row">
                  <div class="col-50"><a href="#" id="cyanBtn" class="button button-raised button-fill color-cyan">Cyan</a></div>
                  <div class="col-50"><a href="#" id="tealBtn" class="button button-raised button-fill color-teal">Teal</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner"><a href="#" class="link">Next</a><a href="#" class="link">Previous</a></div>
        </div>
      </div>
    </div>

    <!-- REFERENCE SCRIPTS-->
    <script type="text/javascript" src="assets/js/framework7.min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
  </body>
</html>

And our Javascript here:

/*
 -Initialize your app
 -Export selectors engine
 */
var myApp = new Framework7();
var $$ = Dom7;

var mainClass=function()
{
    this.initializeApp=function()
    {
        $$('#cyanBtn').on('click', function () {
            myApp.alert('Hello Greeter here');
        });
        $$('#tealBtn').on('click', function () {
            myApp.alert('Hello Greeter with Text and Custom Title','Mr. Greeter');
        });

    }
}

m=new mainClass();
m.initializeApp();

Add Platform

We now need to move to our project’s folder:

cd greeter

Then we can add the target platform. We are targeting android in this case so specify the following and enter:

cordova platform add android

Note that you need to have the platform’s sdk installed for this to be successful. If you don’t have android installed just go download android studio and install, it will install associated SDK.

Other platforms can also be targetted by Cordova:

cordova platform add ios
cordova platform add blackberry10
cordova platform add firefoxos

You will see something like this:

 

Now navigate over to the platforms, then android and you’ll see something like this:

 

We’ve actually added some android files to our project.

It’s now time to build our android application to generate an APK that can be installed in the emulator or device.

Build Our App

Now to build our application we need to use the following command:

cordova build android

This will build our android application to produce an APK. This may take from either half a second to five minutes depending on your machine specifications. Most of the time however, subsequent builds are normally faster than first time builds.

You will see logs like this:

 

Clearly you can see it’s pointing us where we can find our APK.

And indeed if I navigate over that folder I find my APK.

Install APK to device or Emulator

Start you emulator. I recommend you use faster emulators like Nox Player, BlueStacks, Genymotion etc. The fastest of them which I normally use is Nox Player. It has a start up time of around a minute in my machine.

Drag the APK into your emulator and we have the following

Here you can see our framework7 android app is installed in our emulator

 

Then we click our app here it is:

The we click a button to show our framework7 dialog:

We can even change to landscape mode:

Best regards.