Framework7 - Environnement

Dans ce chapitre, nous discuterons de la façon d'installer et de configurer Framework7.

Vous pouvez télécharger le Framework7 de deux manières -

Télécharger à partir du référentiel Github Framework7

Vous pouvez installer le Framework7, en utilisant Bower comme indiqué ci-dessous -

bower install framework7

Après une installation réussie de Framework7, vous devez suivre les étapes ci-dessous pour utiliser Framework7 dans votre application -

Step 1 - Vous devez installer gulp-cli pour créer des versions de développement et dist de Framework7 à l'aide de la commande suivante.

npm install gulp-cli

Le cli signifie Command Line Utility pour Gulp.

Step 2 - Le Gulp doit être installé globalement à l'aide de la commande suivante.

npm install --global gulp

Step 3- Ensuite, installez le gestionnaire de packages NodeJS, qui installe les programmes de nœuds qui facilitent la spécification et la liaison des dépendances. La commande suivante est utilisée pour installer le npm.

npm install

Step 4 - La version de développement de Framework7 peut être générée à l'aide de la commande suivante.

npm build

Step 5- Une fois que vous avez créé la version de développement de Framework7, commencez à créer l'application à partir du dossier dist / à l'aide de la commande suivante.

npm dist

Step 6 - Conservez votre dossier d'application sur le serveur et exécutez la commande suivante pour la navigation entre les pages de votre application.

gulp server

Télécharger la bibliothèque Framework7 à partir de CDN

Un CDN ou Content Delivery Network est un réseau de serveurs conçu pour servir des fichiers aux utilisateurs. Si vous utilisez un lien CDN dans votre page Web, il transfère la responsabilité de l'hébergement des fichiers de vos propres serveurs vers une série de serveurs externes. Cela offre également un avantage: si un visiteur de votre page Web a déjà téléchargé une copie de Framework7 à partir du même CDN, il n'aura pas à être retéléchargé. Vous pouvez inclure les fichiers CDN suivants dans le document HTML.

Les CDN suivants sont utilisés dans un iOS App layout -

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

Il est utilisé pour inclure la bibliothèque CSS Framework7 iOS à votre application.

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

Il est utilisé pour inclure les styles de couleur liés à Framework7 iOS à votre application.

Les CDN suivants sont utilisés dans Android/Material App Layout -

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

Il est utilisé pour inclure la bibliothèque Framework7 JS dans votre application.

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

Il est utilisé pour inclure le style du matériel Framework7 dans votre application.

Nous utilisons les versions CDN de la bibliothèque tout au long de ce didacticiel. Nous utilisons AMPPS (AMPPS est une pile WAMP, MAMP et LAMP d'Apache, MySQL, MongoDB, PHP, Perl & Python) pour exécuter tous nos exemples.

Exemple

L'exemple suivant illustre l'utilisation d'une application simple dans le Framework7, qui affichera la boîte d'alerte avec le message personnalisé lorsque vous cliquez sur la barre de navigation.

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

Ensuite, créez une autre page HTML ie envirmnt_about.html comme indiqué ci-dessous -

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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code HTML ci-dessus sous framework7_environment.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/framework7_environment.html et la sortie s'affiche comme indiqué ci-dessous.
Lorsque vous cliquez sur la barre de navigation, il affichera la boîte d'alerte avec le message personnalisé.

↰ Previous page Next page ↱

Framework7 - Environnement

Télécharger la bibliothèque Framework7 à partir de CDN

Exemple

Production

Composants Framework7

Framework7 Clics rapides

Style Framework7

Modèles Framework7

Tutoriel Framework7

Framework7 Ressources utiles