Framework7 - Lingkungan

Pada bab ini, kita akan membahas tentang cara menginstal dan mengatur Framework7.

Anda dapat mengunduh Framework7 dengan dua cara -

Unduh dari repositori Framework7 Github

Anda dapat menginstal Framework7, menggunakan Bower seperti yang ditunjukkan di bawah ini -

bower install framework7

Setelah berhasil menginstal Framework7, Anda harus mengikuti langkah-langkah yang diberikan di bawah ini untuk menggunakan Framework7 di aplikasi Anda -

Step 1 - Anda perlu menginstal gulp-cli untuk membangun versi pengembangan dan dist dari Framework7 dengan menggunakan perintah berikut.

npm install gulp-cli

The cli singkatan Command Line Utility untuk Gulp.

Step 2 - Gulp harus diinstal secara global dengan menggunakan perintah berikut.

npm install --global gulp

Step 3- Selanjutnya, instal manajer paket NodeJS, yang menginstal program node yang membuatnya lebih mudah untuk menentukan dan menghubungkan dependensi. Perintah berikut digunakan untuk menginstal npm.

npm install

Step 4 - Versi pengembangan Framework7 dapat dibangun dengan menggunakan perintah berikut.

npm build

Step 5- Setelah Anda membangun versi pengembangan Framework7, mulailah membangun aplikasi dari folder dist / dengan menggunakan perintah berikut.

npm dist

Step 6 - Simpan folder aplikasi Anda di server dan jalankan perintah berikut untuk navigasi antar halaman aplikasi Anda.

gulp server

Unduh Framework7 Library dari CDN

CDN atau Jaringan Pengiriman Konten adalah jaringan server yang dirancang untuk menyajikan file kepada pengguna. Jika Anda menggunakan tautan CDN di halaman web Anda, ini memindahkan tanggung jawab hosting file dari server Anda sendiri ke serangkaian server eksternal. Ini juga menawarkan keuntungan bahwa jika pengunjung halaman web Anda telah mengunduh salinan Framework7 dari CDN yang sama, itu tidak perlu diunduh ulang. Anda dapat menyertakan file CDN berikut ke dalam dokumen HTML.

CDN berikut digunakan dalam file iOS App layout -

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

Ini digunakan untuk menyertakan Framework7 iOS CSS Library ke aplikasi Anda.

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

Ini digunakan untuk menyertakan gaya warna terkait Framework7 iOS ke aplikasi Anda.

CDN berikut digunakan di Android/Material App Layout -

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

Ini digunakan untuk menyertakan pustaka JS Framework7 ke aplikasi Anda.

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

Ini digunakan untuk menyertakan penataan Material Framework7 ke aplikasi Anda.

Kami menggunakan versi CDN pustaka sepanjang tutorial ini. Kami menggunakan AMPPS (AMPPS adalah tumpukan WAMP, MAMP, dan LAMP dari server Apache, MySQL, MongoDB, PHP, Perl & Python) untuk menjalankan semua contoh kami.

Contoh

Contoh berikut mendemonstrasikan penggunaan aplikasi sederhana di Framework7, yang akan menampilkan kotak peringatan dengan pesan yang disesuaikan saat Anda mengklik bilah navigasi.

<!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>

Selanjutnya, buat satu halaman HTML lagi yaitu envirmnt_about.html seperti yang ditunjukkan di bawah ini -

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>

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode HTML di atas sebagai framework7_environment.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/framework7_environment.html dan output ditampilkan seperti yang ditunjukkan di bawah ini.
Ketika Anda mengklik bilah navigasi, itu akan menampilkan kotak peringatan dengan pesan yang disesuaikan.