Trying to get to grips with Polymer and the whole Material Design side of things. I have used this at work and it runs correctly, however when I am attempting to do things on my own at home it never works properly... Even if I am installing the examples from Polymer themselves, ie:
polymer init polymer-1-application
For example in the title I have given the paper-card component which just doesn't seem to work. I have gotten the app-header/app-toolbar up and running but that was by copying and pasting other code in.
Please see code below (I am only going to include the important bits and pieces, please assume all of the tags are correct)
index.html
<!doctype html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="elements/newProj-header-bar.html">
<link rel="import" href="elements/newProj-card.html">
<style>/* CSS HERE */</style>
</head>
<body unresolved>
<newProj-header-bar></newProj-header-bar>
<newProj-card></newProj-card>
</body>
</html>
new-Poj-header-bar.html (all code included)
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<dom-module id="newProj-header-bar">
<template>
<style>
:host {
display: block;
background: #115f9b;
color: white;
}
</style>
<app-header slot="header" reveals shadow effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>Adam's App</div>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="create"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>
</app-header>
</template>
<script>
Polymer({
is: 'newProj-header-bar',
properties: {
},
});
</script>
</dom-module>
newProj-card.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<dom-module id="newProj-card">
<template>
<style>
:host {
display: block;
}
</style>
<paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</template>
<script>
Polymer({
is: 'newProj-card',
properties: {
},
});
</script>
EDIT (14/06/17)
I changed the naming conventions to not have any capital letters as Pascal L suggested, however things still aren't working. I even tried with using paper-material, but no dice.
I will now show you the bower.json for paper-card to see if it something to do with incompatible versions or something...
Looking for my bower.json file I found that I have a "bower.json" but also a ".bower.json" along with the standard ".gitignore" file... the dotted one seems to have a bit more info, but not sure what is going on or why two files...
paper-card/bower.json
{
"name": "paper-card",
"private": false,
"main": "paper-card.html",
"ignore": [
"README.md"
],
"dependencies": {
"paper-shadow": "Polymer/paper-shadow#master",
"paper-ripple": "Polymer/paper-ripple#master"
}
}
.bower.json
{
"name": "paper-card",
"private": false,
"main": "paper-card.html",
"ignore": [
"README.md"
],
"dependencies": {
"paper-shadow": "Polymer/paper-shadow#master",
"paper-ripple": "Polymer/paper-ripple#master"
},
"homepage": "https://github.com/andytuwm/paper-card",
"version": "0.1.5",
"_release": "0.1.5",
"_resolution": {
"type": "version",
"tag": "0.1.5",
"commit": "092df7a4e6766a6acc26d42447811fcf2a844998"
},
"_source": "https://github.com/andytuwm/paper-card.git",
"_target": "^0.1.5",
"_originalSource": "paper-card",
"_direct": true
}
Hi you must rename your newProj-card Component to new-proj-card since Html does not allow uppercase letters as tag names.
Related
I've followed polymer guide to create a new page: https://www.polymer-project.org/2.0/start/toolbox/create-a-page. But when I click on the nav menu item "New view" I get "Oops you hit a 404. Head back to home." instead of my new view. I tried to edit the existing pages and everything seems to work fine, but my new page isn't. My files are exactly like the tutorial, I checked it a lot.
my-app.html:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<link rel="lazy-import" href="my-view1.html">
<link rel="lazy-import" href="my-view2.html">
<link rel="lazy-import" href="my-view3.html">
<link rel="lazy-import" href="my-new-view.html">
<link rel="lazy-import" href="my-view404.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-drawer-layout:not([narrow]) [drawer-toggle] {
display: none;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<app-location
route="{{route}}"
url-space-regex="^[[rootPath]]">
</app-location>
<app-route
route="{{route}}"
pattern="[[rootPath]]:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<app-drawer-layout fullbleed narrow="{{narrow}}">
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<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>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-new-view name="new-view"></my-new-view>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
class MyApp extends Polymer.Element {
static get is() { return 'my-app'; }
static get properties() {
return {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
routeData: Object,
subroute: String,
// This shouldn't be neccessary, but the Analyzer isn't picking up
// Polymer.Element#rootPath
rootPath: String,
};
}
static get observers() {
return [
'_routePageChanged(routeData.page)',
];
}
_routePageChanged(page) {
// If no page was found in the route data, page will be an empty string.
// Default to 'view1' in that case.
this.page = page || 'view1';
// Close a non-persistent drawer when the page & route are changed.
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
}
_pageChanged(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true);
}
_showPage404() {
this.page = 'view404';
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
</dom-module>
my-new-view.html:
<!-- Load the Polymer.Element base class -->
<link rel="import" href="../bower_components/polymer/polymer-element.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 viewwww</h1>
</template>
<script>
// Your new element extends the Polymer.Element base class
class MyNewView extends Polymer.Element {
static get is() { return 'my-new-view'; }
}
//Now, register your new custom element so the browser can use it
customElements.define(MyNewView.is, MyNewView);
</script>
</dom-module>
Seams all are fine like you have pointed polymer-project 's page but the only thing you need to correct. If you like to import your pages with lazy-import you need to move this lines between <dome-module> and <template>, something like:
...
<!--import all necessary library ABOVE as you did and PLUS below -->
<link rel="import" href="../lazy-imports-mixin.html">
...
<dom-module id="my-app">
<link rel="lazy-import" group="lazy" href="my-view1.html">
<link rel="lazy-import" group="lazy" href="my-view2.html">
<link rel="lazy-import" group="lazy" href="my-view3.html">
<link rel="lazy-import" group="lazy" href="my-new-view.html">
<link rel="lazy-import" group="lazy" href="my-view404.html">
<template>
...
And extend this element of Polymer.LazyImportsMixin :
class MyApp extends Polymer.LazyImportsMixin(Polymer.Element) {...
Please refer lazy-load syntax from here
Or you may simply import the pages at same place but without lazy-import like:
<link rel="import" href="my-view1.html">
<link rel="import" href="my-view2.html">
<link rel="import" href="my-view3.html">
<link rel="import" href="my-new-view.html">
<link rel="import" href="my-view404.html">
It's actually the function _pageChanged that does the importing, the lazy import stuff is just there to trick the linter.
That being said I can't see why it wouldn't work unless it's an issue with the server.
If you browse to your my-new-view.html page does that 404? If so the page is not being served. Also look in your console to see if it's throwing an error.
I guess the error is in function __Pagechanged and linked functions. See: it depends on name of your pages my- 'page '... I guess you should your page as 'my-number_of_page_-view ' or rewrite start code
I'm currently using the app-layout elements (Version 0.10.4), specifically app-toolbar.
When creating a div with the "main-title" attribute tied to it, it does not "work." I'm not exactly sure, if it might be what I imported.
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/app-layout/app-layout.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
or it could possibly be that I'm using app-toolbar wrong.
<body>
<app-header-layout>
<app-header effects="waterfall" reveals>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
</app-toolbar>
</app-header>
<main>
</main>
</app-header-layout>
</body>
All feedback is appreciated, thanks!
Your imports look correct to me. Given that the docs don't fully describe what main-title does, it's possible that you're assuming the wrong behavior for the attribute. Note that main-title expands the title's width across the toolbar. See the demos below.
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="app-layout/app-layout.html">
</head>
<body>
<style is="custom-style">
app-toolbar {
background-color: #4285f4;
color: white;
margin-bottom: 10px;
}
.my-title {
border: solid 1px red;
}
</style>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title" main-title>With <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div class="my-title">Without <code>main-title</code></div>
<paper-icon-button icon="account-circle"></paper-icon-button>
</app-toolbar>
</body>
I want to create my own <menu-item> element to remove some boilerplate code. I wrapped <paper-icon-item> in my own element in the following way:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-item/paper-icon-item.html">
<dom-module id="menu-item">
<template>
<paper-icon-item>
<iron-icon icon="[[icon]]" item-icon></iron-icon>
<content></content>
</paper-icon-item>
</template>
</dom-module>
<script>
Polymer({
is: "menu-item",
properties: {
icon: { type: String }
}
});
</script>
The problem when using my <menu-item> is, however, that it behaves differently as to writing the template code directly in the HTML file. I suspect that the item is missing some interaction capabilities with the menu to function properly, but I can't figure it out. I tried using behaviors Polymer.IronControlState and Polymer.IronButtonState just like the paper item does, but no luck.
What am I missing to make my <menu-item> behave like a regular <paper-item>?
Answer
Following code is largely copied from the paper-icon-item.html.
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-behaviors/iron-control-state.html">
<link rel="import" href="bower_components/iron-behaviors/iron-button-state.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/default-theme.html">
<link rel="import" href="bower_components/paper-item/paper-item-behavior.html">
<link rel="import" href="bower_components/paper-item/paper-item-shared-styles.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<dom-module id="menu-item">
<template>
<style include="paper-item-shared-styles"></style>
<style>
:host {
#apply(--layout-horizontal);
#apply(--layout-center);
#apply(--paper-font-subhead);
#apply(--paper-item);
#apply(--paper-icon-item);
}
.content-icon {
width: var(--paper-item-icon-width, 56px);
#apply(--layout-horizontal);
#apply(--layout-center);
}
</style>
<div id="contentIcon" class="content-icon">
<iron-icon icon="{{ico}}" item-icon></iron-icon>
</div>
<content></content>
</template>
<script>
Polymer({
is: 'menu-item',
properties: {
ico: {
type: String,
value: "icons:stars"
}
},
behaviors: [
Polymer.PaperItemBehavior
]
});
</script>
</dom-module>
On Extending Elements
I think the simplest way of changing the template of an element is by just copying it, modifying the template and its name. This approach is not without problems, it becomes very difficult to keep the new element up to date with changes in the original one. I am really craving for a better solution!.
On Using Behaviors
You should try to avoid consuming both an element and a behavior used by that element at the same time, you might get into trouble. For example the reason your menu-item doesn't look proper is because the paper-item inside it doesn't acquire the attribute focused. The paper-item doesn't acquire that particular attribute is because its parent element menu-item has the focus, menu-item has the focus because both menu-item and paper-item have tabindex="0" set on them. Why do both these elements have it set on them?, it is because of Polymer.IronControlStateBehavior in both of them.
I'm following this tutorial to build a Material Design app with Polymer.
http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#6
when I implement this i get this error
TypeError: Cannot read property 'save' of undefined
this error is happening in the dataChanged function
anyone know why?
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">
<polymer-element name="codelab-app">
<template>
<link rel="stylesheet" href="styles.css">
<core-drawer-panel id="drawerPanel" responsiveWidth="600px">
<core-header-panel drawer>
<core-toolbar>Menu</core-toolbar>
</core-header-panel>
<core-header-panel main>
<core-toolbar>
<paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>
<span flex>My notes</span>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<paper-fab icon="icons:add" on-click="{{showNewNoteInput}}"></paper-fab>
</core-toolbar>
<div class="content">
<paper-input id="newNoteInput"
floatingLabel
label="Add a new note"
on-change="{{add}}"
value="{{newNote}}"></paper-input>
<template repeat="{{data}}" >
<div center horizontal layout class="item">
<paper-checkbox checked="{{done}}" on-change="{{dataChanged}}"></paper-checkbox>
<div flex class="card">
<p>{{body}}</p>
</div>
</div>
<core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>
</div>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
Polymer('codelab-app', {
data: [],
add: function() {
if (this.newNote) {
this.data.unshift({
body: this.newNote,
done: false
});
this.$.newNoteInput.style.display = 'none';
this.$.newNoteInput.value = null;
}
},
toggleDrawer: function() {
this.$.drawerPanel.togglePanel();
},
ready: function() {
this.$.newNoteInput.style.display = 'none';
},
showNewNoteInput: function() {
this.$.newNoteInput.style.display = 'block';
},
dataChanged: function() {
this.$.storage.save();
}
});
</script>
</polymer-element>
You are looping the creation of a static ID tag, and because you shouldn't have duplicates of an ID, it is throwing an error.
Lines causing the issue:
<template repeat="{{data}}" >
<core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>
I am starting to use Polymer 1.0: the only thing I tried is a simple template like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"></link>
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" hidden="{{!star}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name:String,
star:Boolean
}
});
</script>
<pres-test name="withStar" star>
<h1>Example1:</h1>
<img src="http://placekitten.com/g/200/180" alt="image"></img>
</pres-test>
<pres-test name="withoutStar">
<h2>Example:</h2>
<img src="http://placesheen.com/100/100"></img>
<p>No star icon :()</p>
</pres-test>
</body>
</html>
This code works fine on Chrome and Opera, except that even if I don't put the boolean star in pres-test, it still shows the star.
In Firefox and IE, it just shows the h1 and img in the pres-test.
In Safari it seems that it doesn't understand the tags like dom-module, template or pres-test, since it first displays what is in the dom-module, then what is in pres-test, without adapting to the variables.
I looked for the compatibility of Polymer, but I only found it for the version 0.5.
Am I doing something wrong, or is it just not compatible with these browsers?
Only Chrome supports having custom element definitions inline in your main document. Other browsers currently do not have full and proper implementations of the new and upcoming standard.
Take the pres-test element definition and move it into its own HTML file, then import it.
Also, you only need to import one of the webcomponents.js polyfills - and for Polymer 1.0, you'll want to use webcomponents-lite.js.
All said and done you'll have two files:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="pres-test.html">
<title>Polymer test1</title>
</head>
<body unresolved>
<pres-test name="withStar" star>
<h1>Example1:</h1>
<img src="http://placekitten.com/g/200/180" alt="image"></img>
</pres-test>
<pres-test name="withoutStar">
<h2>Example:</h2>
<img src="http://placesheen.com/100/100"></img>
<p>No star icon :()</p>
</pres-test>
</body>
</html>
pres-test.html:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/iron-icons/iron-icons.html">
<dom-module id="pres-test">
<template>
<content></content>
<p>This is my name:<h3>{{name}}</h3></p>
<iron-icon icon="star" style$="{{getStarStyle(star)}}"></iron-icon>
<img src="http://placehold.it/300x100"></img>
</template>
</dom-module>
<script>
Polymer({
is:'pres-test',
properties:{
name: {
type: String
},
star: {
type: Boolean,
value: false
}
},
getStarStyle: function(star) {
return star ? '' : 'display: none';
}
});
</script>