Framework7 – Overview

Framework7 is a free and open source framework for mobile HTML. It is used for developing hybrid mobile apps or web apps for iOS and Android devices.

Framework7 was introduced in the year 2014. The latest version 1.4.2 was released in February 2016 licensed under MIT.

Why Use Framework7?

• It is easier to develop apps for iOS and Android.
• The learning curve for Framework7 is very easy.
• It has many pre-styled widgets/components.
• It has built-in helper libraries.

Features

• Framework7 is an open source and free to use framework.

• Framework7 has easy and familiar jQuery syntax to get started without any delay.

• To control click delay for touch UI”s, Framework7 has built-in FastClick library.

• Framework7 has built-in grid system layout for arranging your elements responsively.

• Framework7 dynamically loads pages from templates via flexible router api.

Advantages

• Framework7 is not dependent on any third party library even for DOM manipulation. Instead, it has its own custom DOM7.

• Framework7 can also be used with Angular and React frameworks.

• You can start creating apps once you know HTML, CSS and some basic JavaScript.

• It supports faster development via Bower.

• It is easy to develop apps for iOS and Android without learning it.

Disadvantages

• Framework7 only supports platforms like iOS and Android.

• The online community support for Framework7 framework is less compared to iOS and Andriod.

Framework7 – Environment

In this chapter, we will discuss about how to install and setup Framework7.

You can download the Framework7 in two ways −

Download from Framework7 Github repository

You can install the Framework7, using Bower as shown below −

bower install framework7

After successful installation of Framework7, you need to follow the below given steps to make use of Framework7 in your application −

Step 1 − You need to install gulp-cli to build development and dist versions of Framework7 by using the following command.

npm install gulp-cli

The cli stands for Command Line Utility for Gulp.

Step 2 − The Gulp must be installed globally by using the following command.

npm install --global gulp

Step 3 − Next, install the NodeJS package manager, which installs the node programs that makes it easier to specify and link dependencies. The following command is used to install the npm.

npm install

Step 4 − The development version of Framework7 can be built by using the following command.

npm build

Step 5 − Once you build the development version of Framework7, start building the app from dist/ folder by using the following command.

npm dist

Step 6 − Keep your app folder in the server and run the following command for navigation between pages of your app.

gulp server

Download Framework7 Library from CDNs

A CDN or Content Delivery Network is a network of servers designed to serve files to users. If you use a CDN link in your web page, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of Framework7 from the same CDN, it won”t have to be re-downloaded. You can include the following CDN files into the HTML document.

The following CDNs are used in an iOS App layout −

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

It is used to include Framework7 iOS CSS Library to your application.

<link rel = "stylesheet" 
   href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

It is used to include Framework7 iOS related color styles to your application.

The following CDNs are used in Android/Material App Layout −

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

It is used to include Framework7 JS library to your application.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

It is used to include Framework7 Material styling to your application.

We are using the CDN versions of the library throughout this tutorial. We use AMPPS(AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples.

Example

The following example demonstrates the use of simple application in the Framework7, which will display the alert box with the customized message when you click on the navigation bar.

<!DOCTYPE html>
<html>
   
   <head>
      <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>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel">
                        <i class = "icon icon-bars"></i>
                     </a>
                  </div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "envirmnt_about.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Blog</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView(''.view-main'', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the ''pageInit'' event handler for all pages
         $$(document).on(''pageInit'', function (e) {
         
            //get page data from event data
            var page = e.detail.page;

            if (page.name === ''blog'') {
            
               // you will get below message in alert box when page with data-page attribute is equal to "about"
               myApp.alert(''Here its your About page'');
            }
         })
      </script>
   </body>

</html>

Next, create one more HTML page i.e. envirmnt_about.html as shown below −

envirmnt_about.html

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left">
         <a href = "#" class = "back link">
            <i class = "icon icon-back"></i>
            <span>Back</span>
         </a>
      </div>
      
      <div class = "center sliding">My Blog</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel">
            <i class = "icon icon-bars"></i>
         </a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "blog" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <h2>My Blog</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
      </div>
   </div>
</div>

Output

Let us carry out the following steps to see how the above given code works −

• Save the above HTML code as framework7_environment.html file in your server root folder.

• Open this HTML file as http://localhost/framework7_environment.html and output is displayed as shown below.

• When you click on the navigation bar, it will display the alert box with the customized message.