Framework7 - Çevre

Bu bölümde, Framework7'nin nasıl kurulup kurulacağını tartışacağız.

Framework7'yi iki şekilde indirebilirsiniz -

Framework7 Github deposundan indirin

Framework7'yi aşağıda gösterildiği gibi Bower kullanarak kurabilirsiniz -

bower install framework7

Framework7'nin başarılı bir şekilde kurulmasından sonra, uygulamanızda Framework7'yi kullanmak için aşağıda verilen adımları izlemeniz gerekir -

Step 1 - Yüklemeniz gerekiyor gulp-cli Aşağıdaki komutu kullanarak Framework7'nin geliştirme ve dağıtma sürümlerini oluşturmak için.

npm install gulp-cli

Cli Gulp için Komut Satırı Utility kısaltmasıdır.

Step 2 - Gulp aşağıdaki komut kullanılarak global olarak kurulmalıdır.

npm install --global gulp

Step 3- Daha sonra, bağımlılıkları belirlemeyi ve bağlamayı kolaylaştıran düğüm programlarını yükleyen NodeJS paket yöneticisini yükleyin. Aşağıdaki komut npm'yi kurmak için kullanılır.

npm install

Step 4 - Framework7'nin geliştirme sürümü aşağıdaki komut kullanılarak oluşturulabilir.

npm build

Step 5- Framework7'nin geliştirme sürümünü oluşturduktan sonra , aşağıdaki komutu kullanarak uygulamayı dist / klasöründen oluşturmaya başlayın .

npm dist

Step 6 - Uygulama klasörünüzü sunucuda tutun ve uygulamanızın sayfaları arasında gezinmek için aşağıdaki komutu çalıştırın.

gulp server

Framework7 Kitaplığını CDN'lerden İndirin

Bir CDN veya İçerik Dağıtım Ağı, kullanıcılara dosya sunmak için tasarlanmış bir sunucular ağıdır. Web sayfanızda bir CDN bağlantısı kullanırsanız, dosyaları barındırma sorumluluğunu kendi sunucularınızdan bir dizi harici sunucuya taşır. Bu ayrıca, web sayfanıza gelen bir ziyaretçi aynı CDN'den Framework7'nin bir kopyasını zaten indirmişse, yeniden indirilmesi gerekmeyeceği bir avantaj sunar. Aşağıdaki CDN dosyalarını HTML belgesine dahil edebilirsiniz.

Aşağıdaki CDN'ler bir iOS App layout -

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

Uygulamanıza Framework7 iOS CSS Kitaplığı eklemek için kullanılır.

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

Uygulamanıza Framework7 iOS ile ilgili renk stillerini eklemek için kullanılır.

Aşağıdaki CDN'ler Android/Material App Layout -

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

Uygulamanıza Framework7 JS kitaplığı eklemek için kullanılır.

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

Uygulamanıza Framework7 Material stilini eklemek için kullanılır.

Bu eğitim boyunca kütüphanenin CDN versiyonlarını kullanıyoruz. Tüm örneklerimizi yürütmek için AMPPS (AMPPS, Apache, MySQL, MongoDB, PHP, Perl ve Python'un bir WAMP, MAMP ve LAMP yığınıdır) sunucusudur.

Misal

Aşağıdaki örnek, Gezinti çubuğuna tıkladığınızda özelleştirilmiş mesajla birlikte uyarı kutusunu görüntüleyen Framework7'de basit uygulamanın kullanımını göstermektedir.

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

Sonra, bir tane daha HTML sayfası oluşturun yani envirmnt_about.html aşağıda gösterildiği gibi -

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>

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

Yukarıdaki HTML kodunu farklı kaydedin framework7_environment.html sunucunuzun kök klasöründeki dosya.
Bu HTML dosyasını http: //localhost/framework7_environment.html olarak açın ve çıktı aşağıda gösterildiği gibi görüntülenir.
Gezinme çubuğuna tıkladığınızda, özelleştirilmiş mesajla birlikte uyarı kutusu görüntülenecektir.