اضافة صفحة جديدة

تعلمنا في الدرس السابق تثبيت وتهيئة وانشاء تطبيق polymer جديد ولاحظنا ان التطبيق الذي تم انشاءه يتكون من ثلاث صفحات فقط ! ماذا لو كان التطبيق لدينا يحتوي على العديد من الصفحات ؟

في هذا الدرس سنكمل السلسلة بعد انقطاع لفترة وجيزة بسبب الاعمال المرتبط بها وسيكون درس اليوم عن اضافة صفحة جديدة للتطبيق .


بداية سنلقي نظرة على هيكلة الملفات داخل التطبيق .

/
|---index.html
|---src/
|---bower_components/
|---images/
|---test/
  • index.html الصفحة الرئيسية للتطبيق الخاص بك .
  • src/ مكان العناصر المخصصة الخاصة بالتطبيق ” الصفحات والايقونة والتطبيق الرئيسي “
  • bower_components/ المكتبات والعناصر الاضافية الخاصة بالتطبيق والتي تم تحميلها من bower 
  • images/ للصور الثابتة الخاصة بالتطبيق 
  • test/ لاختبار عناصر الويب في تطبيقك .

انشاء عنصر لصفحتنا الجديدة :

  1. سنقوم بانشاء ملف جديد باسم my-new-view.html في المسار src .
  2. قم بفتح الملف الجديد الذي تم انشاءه وقم بنسخ هذا الكود داخل الملف :
    <link rel="import" href="../bower_components/polymer/polymer.html">
    
    <dom-module id="my-new-view">
    
      <!-- Defines the element's style and local DOM -->
      <template>
        <style>
          :host {
            display: block;
            padding: 16px;
          }
        </style>
        <h1>New view</h1>
      </template>
    
      <!-- Creates the element's prototype and registers it -->
      <script>
        Polymer({
          is: 'my-new-view',
          properties: {
            route: Object
          }
        });
      </script>
    
    </dom-module>
    

    الان قمنا بكتابة العنصر الجديد ونلاحظ انه بسيط ويحتوي فقط على تاق h1 لعرض النص “New View”

 


اضافة العنصر الجديد “الصفحة” الى التطبيق :

  1. افتح الملف src/my-app.html بمحرر  الاكواد .
  2. سنجد الصفحات التي تم اضفتها عند انشاء التطبيق اول مرة داخل <iron-pages> :
     <iron-pages role="main" selected="[[page]]" attr-for-selected="name">
        <my-view1 name="view1"></my-view1>
        <my-view2 name="view2"></my-view2>
        <my-view3 name="view3"></my-view3>
      </iron-pages>

    iron-pages : مسؤول عن صفحات التطبيق من حيث عرض الصفحة المختارة واخفاء الصفحات الاخرى .

  3. اضافة صفحتنا الجديدة داخل iron-pages :
      <my-new-view name="new-view"></my-new-view>

عند اضافة عنصر جديد لأول مرة مثلا كصفحة جديدة غالباً لانحتاج لاي عمليات import “اضافة” لهذا العنصر لأن polymer مبني على تحميل الصفحات عن طريق route .

الكود التالي والذي تم اضافته تلقائياً عن انشاء التطبيق سيقوم بتحميل الصفحات تلقائيا عن تغيير route ويمكنك التعديل عليه واستخدامه مع route المعقد !

  _pageChanged: function(page) {
    // load page import on demand.
    this.importHref(
      this.resolveUrl('my-' + page + '.html'), null, null, true);
  }

انشاء عنصر للقائمة الجانبية :

بعد ان قمنا باضافة الصفحة وتهيئتها نحتاج لاضافة عنصر قائمة جديد حتى يقوم بنقلنا للصفحة الجديدة .

  1. من نفس الملف الذي قمنا بتعريف الصفحة فيه وهو src/my-app.html .
  2. سنجد عنصر html الخاص بالصفحة الجانبية وهو <app-drawer> .
    <!-- Drawer content -->
    <app-drawer>
      <app-toolbar>Menu</app-toolbar>
      <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
        <a name="view1" href="/view1">View One</a>
        <a name="view2" href="/view2">View Two</a>
        <a name="view3" href="/view3">View Three</a>
      </iron-selector>
    </app-drawer>

    نلاحظ عناصر القائمة عبارة عن <a> تم تخصيصة باستخدام css style 

  3. اضف هذا العنصر اسفل القائمة :
        <a name="new-view" href="/new-view">New View</a>

    سيكون شكل الكود لديك مشابه لماهو موجود في الاسفل :

    ...
    <!-- Drawer content -->
    <app-drawer>
      <app-toolbar>Menu</app-toolbar>
      <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
        <a name="view1" href="/view1">View One</a>
        <a name="view2" href="/view2">View Two</a>
        <a name="view3" href="/view3">View Three</a>
        <a name="new-view" href="/new-view">New View</a>
      </iron-selector>
    </app-drawer>
    ...

    الان صفحتنا جاهزة للعرض باتباع هذا الرابط -> http://localhost:8080/new-view
    1470710656app-drawer-template-newview.png


تسجيل الصفحة في التطبيق :

عند نشر التطبيق على الانترنت سيتم فقط تحميل الصفحات والعناصر المسجلة للـbuilde فقط.

  1. افتح الملف polymer.json ،
  2. قم باضافة صفحتنا الجديدة src/my-new-view.html لقائمة fragments .
    "fragments": [
      "src/my-view1.html",
      "src/my-view2.html",
      "src/my-view3.html",
      "src/my-new-view.html"
    ]

    الى هنا انتهينا من طريقة اضافة صفحة جديدة وفي الدروس القادمة سنتعلم طريقة اضافة عناصر للتطبيق وايضاً نشرة على الويب .

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *