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

تعلمنا في الدرس السابق تثبيت وتهيئة وانشاء تطبيق 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
   
   

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

عند نشر التطبيق على الانترنت سيتم فقط تحميل الصفحات والعناصر المسجلة للـ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"
   ]

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