Framework7 => Download,Install, Hello World.

0
User Management System
Learn Kotlin, Retrofit, MVVM and MySQL using this all-in-one app. It is designed to be beginner friendly.

THis is our first framework tutorial. In the video, I show you guys how to download and install framework7. We then make a simple hello world app. The app will have two buttons. When the buttons are clicked we show alert dialogs.

Questions this Project answers.

  • Framework7 download and install.
  • Getting started with framework7.
  • Framework7 hello world.

Libraries Used

These are the third parties used in this project.

Screenshot
  • Here's the screenshot of the project. Framework7 Hello World
Tools used

Language: Javascript,HTML,CSS

Framework: Framework7

IDE: PHPStorm.

Topic: Framework7 download and install.

Source Code

Lets have a look at the source code.

index.html

  • Our index.html file.
  • We reference materializecss just at the end of our body.
  • We also reference our javascript script at the base of the body.
<!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">
    <link rel="stylesheet" href="assets/css/my-app.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>

main.js

  • Our javascript file.
  • We write custom javascript code here.
  • We initialize Framework7  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('Cyan Clicked');
        });
        $$('#tealBtn').on('click', function () {
            myApp.alert('Teal Clicked');
        });
    }
}

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

Video Tutorial

Below is the video version of this tutorial. https://www.youtube.com/watch?v=3XhDNbq3Oyc

Download

  • Download the Project below.

Download

How to Download and Run.

  1. Download the project above.
  2. You'll get a zipped file,extract it.
  3. You'll have three files : html,css and javascript.
  4. Place them in a folder and run the index.html file.That's it.

More

  • Visit our channel for more examples like these.
  • Lets share tips and ideas in our Facebook Page.

 

Learn Android Retrofit using our course

Android MySQL Retrofit2 Multipart CRUD,Search,Pagination rating

When I was a 2nd year Software Engineering student, I buillt a now defunct online tool called Camposha(from Campus Share) using my then favorite language C#(ASP.NET) to compete OLX in my country(Kenya). The idea was to target campus students in Kenya. I got a few hundred signups but competing OLX proved too daunting. I decided to focus on my studies, learning other languages like Java,Python,Kotlin etc while meanwhile publishing tutorials at my YouTube Channel ProgrammingWizards TV which led to this site(camposha.info). Say hello or post me a suggestion: oclemmi@gmail.com . Follow me below; Github , and on my channel: ProgrammingWizards TV

We will be happy to hear your thoughts

Leave a reply

sixty five − = 56

Reset Password
Compare items
  • Total (0)
Compare
0
Shopping cart