Вайрфрейминг - важный аспект любого процесса внешнего проектирования. Это в первую очередь позволяет разработчику определять и организовывать информацию таким образом, чтобы отображать иерархию всего процесса проектирования.
Вайрфрейминг позволяет разработчику легко приступить к процессу планирования приложения. Таким образом, это позволяет ему / ей создавать макеты в зависимости от того, как пользователь, как ожидается, будет перемещаться по приложению.

Что такое Polymer.js?

Polymer - это библиотека JavaScript, которая позволяет разработчикам создавать настраиваемые многоразовые элементы HTML с уценкой, что улучшает производительность приложения и делает его поддерживаемым.

В этой статье мы рассмотрим, как вы можете создать приложение, используя Polymer.js стартовый набор, а также одновременно добавить в приложение каркас. В настоящее время Polymer.js имеет 19 связанных элементов, и мы будем использовать некоторые из этих элементов в этом проекте.

Настроить приложение

  • Для начала зайдите на сайт ниже, чтобы убедиться, что ваша версия node.js поддерживает инструменты Polymer.


Www.polymer-project.org



запустите node --version, чтобы проверить версию вашего узла

  • запустите npm install npm@latest -g, чтобы обновить npm
  • запустите npm install -g bower, чтобы установить последнюю версию Bower. Bower - это менеджер пакетов, который управляет компонентами, содержащими HTML, CSS, JavaScript, шрифты и файлы изображений.
  • запустите npm install -g polymer-cli, чтобы установить полимер-cli, который является интерфейсом командной строки для проектов полимеров.
  • Откройте свой терминал, запустите команду mkdir my-app, чтобы создать новый каталог для начала.
  • Запустите cd my-app, чтобы получить доступ к каталогу
  • Запустите polymer init, чтобы инициализировать свой проект с помощью существующего шаблона начального набора.
  • Выберите polymer-2-starter-kit и нажмите ввод.

Создать новую страницу

На данный момент у вас уже есть приложение для начинающих, которое представляет собой заполнитель, содержащий три страницы шаблона. Вы можете изменить эти страницы, чтобы реализовать любой шаблон дизайна, который вам нужен.

Далее мы собираемся реализовать наш каркас.

  • Создайте новый файл с именем src/my-wire-frame.html и откройте его в редакторе.
  • Ваша структура каталогов должна выглядеть так, как показано ниже.

Добавить элемент в ваше приложение

Чтобы ваше приложение могло использовать элемент каркаса, вам необходимо добавить этот элемент в приложение. Выполните следующие шаги, чтобы добавить необходимое в my-wire-frame.html.

  • Каждый элемент должен импортировать полимерный элемент, добавить:
<link 
   rel="import"
   href="../bower_components/polymer/polymer-element.html"
/>
  • Добавьте стиль шрифта «тень в свет», добавив этот путь ссылки:
<link
   rel="stylesheet"
   href="https://fonts.googleapis.com/css?family=Shadows+Into+Light"
/>
  • Добавьте web-components-lite.js для поддержки импорта HTML, пользовательских элементов и шаблонов. Импорт HTML позволяет вам включать и повторно использовать HTML-документы через другие HTML-документы, а настраиваемые элементы позволяют вам определять свой собственный настраиваемый тег. Добавьте этот путь к сценарию:
<script src="../webcomponentsjs/webcomponents-lite.js></script>
  • Добавьте все необходимые пути импорта, необходимые для компонентов каркаса
  • Добавьте <dom-module>element с атрибутом id, соответствующим имени элемента в my-wire-frame.html file:
  • Добавить <template></template>
  • Внутри шаблона добавьте проводную карту, которая является типом формы:
    <wired-card class="form"> </wired-card>
  • Давайте добавим проводную панель меню, которая содержит нашу верхнюю панель, добавив этот фрагмент в проводную карту:
  • Добавьте этот фрагмент, который создает класс ES6 и связывает его с проводным элементом фрейма в dom-module прямо перед закрывающим ‹ /dom-module>.
  • Добавьте <my-wireframe name="wire-frame"></my-wire-frame> к элементу iron-pages в my-app.html. Это переключатель контента, который используется для циклического просмотра списка дочерних страниц, чтобы выбрать страницу для отображения на базовой странице.
  • Откройте файл polymer.json в текстовом редакторе и добавьте src/my-wire-frame.html в раздел фрагментов.
  • Запустите приложение с помощьюpolymer serve --open , вы должны получить следующий результат:

  • Теперь давайте добавим элемент проводного ввода в проводную карту.
  • Добавим проводной радиоэлемент.
  • Добавим элемент текстовой области.
  • Добавим проводной комбо-элемент.
  • Добавим элемент проводной кнопки.
  • Давайте добавим проводной тумблер.
  • Снова запустите приложение, и у вас должен быть такой пользовательский интерфейс:

  • Если вы внимательно понаблюдаете, вы обнаружите, что все элементы сгруппированы. Мы можем сделать несколько встроенных стилей, чтобы он выглядел хорошо. Эти стили можно добавить сразу после открывающего тега ‹/template›:
  • Ваш my-wire-frame.html файл должен содержать следующий код:
  • Наконец, перезапустите приложение или обновите страницу. Ваш каркас должен выглядеть так:

  • Прелесть этой технологии заключается в том, что каркас выглядит как нарисованный от руки эскиз, и он также реагирует, то есть вы можете перемещаться по нему, как если бы вы находились на своей изначально разработанной веб-странице.

Затем вас ждет руководство по созданию веб-приложений с помощью Polymer.js и Bootstrap.
Надеюсь, этот урок был вам полезен. Не стесняйтесь оставлять любые отзывы в разделе комментариев. Вы будете очень признательны. Удачного кодирования!