Уважаемое сообщество Полимеров,
Мне сложно изучать полимер и читать документы и руководства в Интернете.
Я опытный разработчик серверных C++ и Java. Но мои отношения с интерфейсом и веб-разработкой никогда не были гладкими.
Возможно, это связано с тем, что веб-разработка продолжает меняться очень быстро, а в документации и руководстве предполагается, что у пользователя есть багаж опыта работы с предыдущей веб-платформой.
Несколько лет назад мне пришлось реализовать веб-интерфейс для встроенного блока, над которым работала моя команда. Я сделал веб-компонент, используя bootstrap и AngularJs. Мне очень понравился этот побочный проект, и я был свежим воздухом по сравнению с написанием C++ для встроенной платформы. Мне также очень понравилось, как AngularJs применил шаблон MVC к веб-странице.
Перенесемся в настоящее: теперь полимеры Google и веб-компоненты - это новые модные тенденции.
Ознакомился с руководством по полимеру и немного прочитал о веб-компонентах. Я считаю, что повторно использовать веб-компоненты - это отличная идея. Просто просмотрите огромную библиотеку существующих веб-компонентов, выберите то, что вам нужно. В теории звучит неплохо ... за исключением ... новичка вроде меня весь день не удавалось правильно использовать ни один веб-компонент.
Я считаю, что документов не хватает, а пример кода - неточным. Приведу простой пример. Один из веб-компонентов, который я хочу использовать, - это iron-pages
. Отличный веб-компонент, и это именно то, что мне нужно!
Я прочитал документацию по iron-pages
и посмотрел демонстрацию на webcomponents.org, и теперь самое время ее использовать. Вот только я не могу заставить эту штуку работать.
Вот как раз то, что я сделал в командной строке с помощью polymer-cli
mkdir my-app
cd my-app
polymer init
Я выбрал полимер-2-аппликацию
Я пробую свое приложение
polymer serve --open
Ура, на странице отображается Привет, мое приложение!
Затем я пытаюсь использовать веб-компонент iron-pages
. Поэтому мне нужно загрузить этот компонент с помощью bower
bower install --save PolymerElements/iron-pages
Демонстрационная версия для iron-pages
указана в списке здесь вместе с примером кода. Но пример кода не соответствует тому, что должно появиться в веб-компоненте ... или, по крайней мере, тому, что я читал до сих пор в руководствах по использованию веб-компонента.
В этом примере кода нет тега. Есть тег, которого там быть не должно. Я уверен, что опытный веб-разработчик знает, как восполнить пробел ... но не я.
Я изо всех сил старался адаптировать этот образец кода iron-pages
к моему файлу src/my-app-app/my-app-app.html
.
Вот мой код:
<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">
<link rel = "import" href = "../../bower_components/iron-pages/iron-pages.html">
<dom-module id = "my-app-app">
<template>
<style>
:host {
display: block;
}
iron-pages {
width: 100%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}
iron-pages div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
iron-pages div:nth-child(1) {
background-color: var(--google-blue-500);
}
iron-pages div:nth-child(2) {
background-color: var(--google-red-500);
}
iron-pages div:nth-child(3) {
background-color: var(--google-green-500);
}
</style>
<h2>Hello [[prop1]]!</h2>
<iron-pages selected = "0">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
</template>
<script>
/**
* @customElement
* @polymer
*/
class MyAppApp extends Polymer.Element {
static get is() { return 'my-app-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-app-app'
}
};
}
}
window.customElements.define(MyAppApp.is, MyAppApp);
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
</script>
</dom-module>
iron-pages
не отображаются на веб-странице. Консоль разработчика на Chrome показывает ошибку, которую я пытаюсь выполнить addEventListener для нулевого указателя. Итак, я попытался закомментировать часть addEventListener. Я ожидаю, что по-прежнему увижу один из iron-pages
, даже если я не могу щелкнуть мышью, чтобы переключаться между страницами. Но железные страницы по-прежнему не появляются.
Я был бы признателен, если бы один из вас, опытных веб-разработчиков, просветил меня. У меня есть другие примеры других веб-компонентов, которые я не мог использовать идеально, например, app-toolbar
, я не мог заставить появиться iron-icon
... даже если я установил железный значок. В любом случае, я был бы счастлив, если бы смог начать с подключения моего iron-pages
.
Привет, обратные кавычки вокруг irgon-страниц на самом деле не в моем коде. Я сделал ошибку, когда форматировал свой пост для stackoverflow. Я поправил свой пост.
Удалите кавычки и используйте как: bower install --save PolymerElements/iron-pages
вместо: bower install --save PolymerElements/'iron-pages'
А также все одинарные кавычки в вашем коде 'iron-pages'
просто используйте iron-pages
<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">
<link rel = "import" href = "../../bower_components/iron-pages/iron-pages.html">
<dom-module id = "my-app-app">
<template>
<style>
:host {
display: block;
}
iron-pages {
width: 100%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}
iron-pages div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
iron-pages div:nth-child(1) {
background-color: var(--google-blue-500);
}
iron-pages div:nth-child(2) {
background-color: var(--google-red-500);
}
iron-pages div:nth-child(3) {
background-color: var(--google-green-500);
}
</style>
<h2>Hello [[prop1]]!</h2>
<iron-pages selected = "0">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
<script>
/**
* @customElement
* @polymer
*/
class MyAppApp extends Polymer.Element {
static get is() { return 'my-app-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-app-app'
}
};
}
}
window.customElements.define(MyAppApp.is, MyAppApp);
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
Привет, обратные кавычки вокруг irgon-страниц на самом деле не в моем коде. Я сделал ошибку, когда форматировал свой пост для stackoverflow. Я поправил свой пост. Спасибо что подметил это. Но мой образец все еще не работает.
Вот пример с железной страничкой: codepen.io/cappittall/pen/gdgyeQ
Спасибо @HakanC. После сравнения вашего образца с моим кодом, опубликованным в моем исходном посте, я обнаружил, что для того, чтобы заставить железные страницы работать, мне также нужно импортировать «бумажные вкладки». Это смешно, я думал, что веб-компонент автоматически импортирует все свои зависимости. Консоль отладки разработчика Chrome также не показывала никаких ошибок. Единственный способ заставить его работать - это сравнить с вашим рабочим образцом.
@RichardT paper-tabs
не является зависимостью от iron-pages
, и ваш исходный пример не включает paper-tabs
. Причина, по которой это не работает, связана с тем, что вы используете document.querySelector
.
@RichardT Я страдал от того же в прошлом, но то, что я могу рассказать вам о своем опыте, - это что-то простое. В Polymer есть компоненты, которые вы можете видеть, и те, которыми вы можете управлять, даже если они ничего не показывают на экране. Итак, один из них - железные страницы, компонент, который позволяет вам обмениваться представлениями между вызовами событий.
Вы получаете нулевой указатель, потому что устанавливаете событие вне вашего класса. Никакого кода не должно быть, кроме регистрации класса (customElements.define ...)
Обычно в Polymer вы должны устанавливать слушателей в готовом обратном вызове.
Custom element lifecycle here: https://www.polymer-project.org/2.0/docs/devguide/custom-elements
В твоем случае:
ready() {
super.ready();
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
}
Не знаю, откуда у вас эти обратные кавычки, но их быть не должно. Не в твоем импорте ни в стихии, ни в стиле.