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 pcensed 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 pbraries.

Features

Framework7 is an open source and free to use framework.

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

To control cpck delay for touch UI s, Framework7 has built-in FastCpck pbrary.

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 pbrary 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 pke iOS and Android.

The onpne 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 apppcation −

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

npm install gulp-cp

The cp stands for Command Line Utipty 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 pnk 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 Depvery Network is a network of servers designed to serve files to users. If you use a CDN pnk in your web page, it moves the responsibipty 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 −

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

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

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

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

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

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

It is used to include Framework7 JS pbrary to your apppcation.

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

It is used to include Framework7 Material stypng to your apppcation.

We are using the CDN versions of the pbrary 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 apppcation in the Framework7, which will display the alert box with the customized message when you cpck 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>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <span class = "statusbar-overlay"></span>
      <span class = "panel-overlay"></span>
      
      <span class = "panel panel-right panel-reveal">
         <span class = "content-block">
            <p>Contents goes here...</p>
         </span>
      </span>
      
      <span class = "views">
         <span class = "view view-main">
            <span class = "navbar">
               <span class = "navbar-inner">
                  <span class = "center spding">My App</span>
                  <span class = "right">
                     <a href = "#" class = "pnk icon-only open-panel">
                        <i class = "icon icon-bars"></i>
                     </a>
                  </span>
               </span>
            </span>
            
            <span class = "pages navbar-through toolbar-through">
               <span data-page = "index" class = "page">
                  <span class = "page-content">
                     <p>This is simple apppcation...</p>
                     <span class = "pst-block">
                        <ul>
                           <p>
                              <a href = "envirmnt_about.html" class = "">
                                 <span class = "item-content">
                                    <span class = "item-inner">
                                       <span class = "item-title">Blog</span>
                                    </span>
                                 </span>
                              </a>
                           </p>
                        </ul>
                     </span>
                  </span>
               </span>
            </span>
            
            <span class = "toolbar">
               <span class = "toolbar-inner">
                  <a href = "#" class = "pnk">First Link</a>
                  <a href = "#" class = "pnk">Second Link</a>
               </span>
            </span>
         </span>
      </span>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initiapze the app
         var myApp = new Framework7();

         // If your using custom DOM pbrary, 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

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

<span class = "pages">
   <span data-page = "blog" class = "page">
      <span class = "page-content">
         <span 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>
         </span>
      </span>
   </span>
</span>

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 cpck on the navigation bar, it will display the alert box with the customized message.