फ्रेमवर्क 7 - पर्यावरण

इस अध्याय में, हम फ्रेमवर्क 7 को कैसे स्थापित करें और सेटअप करें, इस बारे में चर्चा करेंगे।

आप दो तरीकों से फ्रेमवर्क 7 डाउनलोड कर सकते हैं -

फ्रेमवर्क 7 जीथब रिपॉजिटरी से डाउनलोड करें

आप फ्रेमवर्क 7 को स्थापित कर सकते हैं, बावर का उपयोग करके जैसा कि नीचे दिखाया गया है -

bower install framework7

फ्रेमवर्क 7 की सफल स्थापना के बाद, आपको अपने आवेदन में फ्रेमवर्क 7 का उपयोग करने के लिए नीचे दिए गए चरणों का पालन करना होगा -

Step 1 - आपको इंस्टॉल करने की आवश्यकता है gulp-cli निम्नलिखित कमांड का उपयोग करके फ्रेमवर्क 7 के विकास और डिस्टर्ब संस्करणों के निर्माण के लिए।

npm install gulp-cli

CLI Gulp के लिए कमांड लाइन उपयोगिता के लिए खड़ा है।

Step 2 - निम्न आदेश का उपयोग करके विश्व स्तर पर Gulp स्थापित किया जाना चाहिए।

npm install --global gulp

Step 3- इसके बाद, NodeJS पैकेज मैनेजर स्थापित करें, जो नोड प्रोग्राम स्थापित करता है जो निर्भरता को निर्दिष्ट और लिंक करना आसान बनाता है। Npm को स्थापित करने के लिए निम्न कमांड का उपयोग किया जाता है।

npm install

Step 4 - फ्रेमवर्क 7 का विकास संस्करण निम्न कमांड का उपयोग करके बनाया जा सकता है।

npm build

Step 5- जब आप फ्रेमवर्क 7 के विकास संस्करण का निर्माण करते हैं, तो निम्न कमांड का उपयोग करके ऐप को डिस्ट / फोल्डर से बनाना शुरू करें ।

npm dist

Step 6 - सर्वर में अपना ऐप फ़ोल्डर रखें और अपने ऐप के पृष्ठों के बीच नेविगेशन के लिए निम्न कमांड चलाएं।

gulp server

CDN से फ्रेमवर्क 7 लाइब्रेरी डाउनलोड करें

एक सीडीएन या कंटेंट डिलीवरी नेटवर्क उपयोगकर्ताओं को फाइल परोसने के लिए डिज़ाइन किया गया सर्वर का एक नेटवर्क है। यदि आप अपने वेब पेज में एक CDN लिंक का उपयोग करते हैं, तो यह आपके अपने सर्वर से फ़ाइलों को होस्ट करने की जिम्मेदारी बाहरी लोगों की एक श्रृंखला पर ले जाता है। इससे एक फायदा यह भी होता है कि यदि आपके वेबपेज पर कोई विज़िटर पहले से ही सीडीएन से फ्रेमवर्क 7 की कॉपी डाउनलोड कर चुका है, तो उसे दोबारा डाउनलोड नहीं करना पड़ेगा। आप HTML दस्तावेज़ में निम्न CDN फ़ाइलों को शामिल कर सकते हैं।

निम्नलिखित CDN एक में उपयोग किए जाते हैं iOS App layout -

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

इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 आईओएस सीएसएस लाइब्रेरी को शामिल करने के लिए किया जाता है।

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

इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 आईओएस संबंधित रंग शैलियों को शामिल करने के लिए किया जाता है।

निम्नलिखित CDN का उपयोग किया जाता है Android/Material App Layout -

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

इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 जेएस लाइब्रेरी को शामिल करने के लिए किया जाता है।

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

इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 मैटीरियल स्टाइलिंग को शामिल करने के लिए किया जाता है।

हम इस ट्यूटोरियल में लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं। हम अपने सभी उदाहरणों को निष्पादित करने के लिए AMPPS (AMPPS एक WAMP, MAMP और Apache, MySQL, MongoDB, PHP, Perl & Python) सर्वर का उपयोग करते हैं।

उदाहरण

निम्न उदाहरण फ्रेमवर्क 7 में सरल अनुप्रयोग के उपयोग को प्रदर्शित करता है, जो नेविगेशन बार पर क्लिक करने पर अनुकूलित संदेश के साथ अलर्ट बॉक्स प्रदर्शित करेगा।

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

इसके बाद, एक और HTML पेज बनाएं envirmnt_about.html जैसा कि नीचे दिखाया गया है -

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>

उत्पादन

ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -

ऊपर दिए गए HTML कोड को इस तरह सेव करें framework7_environment.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/framework7_environment.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब आप नेविगेशन बार पर क्लिक करते हैं, तो यह अनुकूलित संदेश के साथ अलर्ट बॉक्स प्रदर्शित करेगा।