Framework7 - Ambiente

In questo capitolo, discuteremo su come installare e configurare Framework7.

Puoi scaricare Framework7 in due modi:

Scarica dal repository Github Framework7

È possibile installare Framework7, utilizzando Bower come mostrato di seguito -

bower install framework7

Dopo aver installato correttamente Framework7, è necessario seguire i passaggi indicati di seguito per utilizzare Framework7 nella propria applicazione:

Step 1 - Devi installare gulp-cli per creare versioni di sviluppo e dist di Framework7 utilizzando il comando seguente.

npm install gulp-cli

Il cli sta per Command Line Utility per Gulp.

Step 2 - Il Gulp deve essere installato globalmente utilizzando il seguente comando.

npm install --global gulp

Step 3- Successivamente, installa il gestore di pacchetti NodeJS, che installa i programmi del nodo che semplificano la specifica e il collegamento delle dipendenze. Il seguente comando viene utilizzato per installare npm.

npm install

Step 4 - La versione di sviluppo di Framework7 può essere creata utilizzando il seguente comando.

npm build

Step 5- Dopo aver creato la versione di sviluppo di Framework7, inizia a creare l'app dalla cartella dist / utilizzando il comando seguente.

npm dist

Step 6 - Mantieni la cartella della tua app nel server ed esegui il seguente comando per navigare tra le pagine della tua app.

gulp server

Scarica la libreria Framework7 da CDN

Un CDN o Content Delivery Network è una rete di server progettati per fornire file agli utenti. Se si utilizza un collegamento CDN nella propria pagina Web, si sposta la responsabilità di ospitare i file dai propri server a una serie di quelli esterni. Questo offre anche un vantaggio che se un visitatore della tua pagina web ha già scaricato una copia di Framework7 dalla stessa CDN, non dovrà essere scaricata nuovamente. È possibile includere i seguenti file CDN nel documento HTML.

I seguenti CDN vengono utilizzati in un file iOS App layout -

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

Viene utilizzato per includere la libreria CSS iOS di Framework7 nella tua applicazione.

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

Viene utilizzato per includere gli stili di colore relativi a Framework7 iOS nell'applicazione.

I seguenti CDN vengono utilizzati in Android/Material App Layout -

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

Viene utilizzato per includere la libreria JS Framework7 nell'applicazione.

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

Viene utilizzato per includere lo stile dei materiali Framework7 nella propria applicazione.

Stiamo utilizzando le versioni CDN della libreria durante questo tutorial. Usiamo il server AMPPS (AMPPS è uno stack WAMP, MAMP e LAMP di Apache, MySQL, MongoDB, PHP, Perl e Python) per eseguire tutti i nostri esempi.

Esempio

L'esempio seguente mostra l'uso di un'applicazione semplice in Framework7, che visualizzerà la casella di avviso con il messaggio personalizzato quando si fa clic sulla barra di navigazione.

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

Quindi, crea un'altra pagina HTML, ad es envirmnt_about.html come mostrato di seguito -

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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice HTML sopra come framework7_environment.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/framework7_environment.html e l'output viene visualizzato come mostrato di seguito.
Quando si fa clic sulla barra di navigazione, verrà visualizzata la casella di avviso con il messaggio personalizzato.

↰ Previous page Next page ↱

Framework7 - Ambiente

Scarica la libreria Framework7 da CDN

Esempio

Produzione

Componenti Framework7

Framework7 clic veloci

Framework7 Styling

Modelli Framework7

Tutorial di Framework7

Framework7 Risorse utili