Mobile web application with Polymer and Material Design (quick-start)
We’ll see how to create a mobile webapp for Android with Polymer (and a bit of “Material Design”).
Prepare the project
Remark: you need:
- bower http://bower.io/
- http-server https://www.npmjs.org/package/http-server or any other http server
In a directory (ie:
my-project) create 2 files:
with these contents:
And type (in terminal or console application) :
bower install, waiting …, you’re ready!
Step 01: Our first component
Specifications:: “I want a web app with a main panel and a menu panel”
first create (at the root of
my-project) a new html file named
So now, if you have followed, we will create a
Firstly, create a
components directory into
js directory, and a new html file named
My sample code is inspired from Polymer documentation http://www.polymer-project.org/docs/elements/core-elements.html# core-scaffold :
core-scaffold provides general application layout, introducing a responsive scaffold containing a header, toolbar, menu, title and areas for application content.
<span tool> tag allows the itle bar of the right panel.
You can test your web app now. Run your http sever (in my case, I run
http-server from my project directory and I open http://localhost:8080/ with Chrome). You get this:
If you reduce width of browser window, left panel disappear, and a button appears inside the header:
Click on the button, the left panel appears again (click outside the left panel to hide it):
But it’s ugly!. We will have to make it a little prettier, this is “step 02”.
You can find source code of this first step, here: https://github.com/metals/copper/tree/master/creation-steps/step-01.
Step 02: something prettier
We will try to do something nicer. I will use the colors shown here: http://www.google.com/design/spec/style/color.html# color-ui-color-palette
Beautify the left panel
At the same location of your component (
main-screen.html), create a css file
main-screen.css. Add a reference to this file in your component code:
Remark: you have to put
<link rel="stylesheet" href="main-screen.css"> inside
So, add some code to our css file:
content class to the div “content” in
And test your web app again:
It’s better! ;)
Beautify the right panel
core-header-panel are “difficult” to find because they are inside the Shadow DOM.
If you want to style these elements, you have to use this syntax:
::shadow with your selector (try
document.querySelectorAll("core-scaffold::shadow core-toolbar") with the browser console).
Then, add this to
And test your web app again:
But, there is not the shadow effect on the title bar of the right panel!!!.
<link rel="import" href="js/vendors/paper-shadow/paper-shadow.html"> to the
index.html file and update the
main-screen.html file with
<paper-shadow z="1"></paper-shadow> like that:
It’s “more Material Design” ;)
Before we go any further, let’s change two or three things. I want something “more reusable”. Change the code of the component (
Add attributes for title bars:
menuTitle will be displayed here:
mainTitle will be displayed here:
And now you can (re)use your component like that (in
You can find source code of this second step, here: https://github.com/metals/copper/tree/master/creation-steps/step-02.
Step 03: and now, some action
Now I want to display different content in the right panel, when I click on the items in the left pane. For this I will use the component
core-pages (see http://www.polymer-project.org/docs/elements/core-elements.html# core-pages).
We will once again change our component.
Firstly, add this
core-pages reference to
<link rel="import" href="js/vendors/core-pages/core-pages.html">.
Then, go back to our component (
main-screen.html) to change the code:
- when an item is selected, we call
- I added a custom attribute
- first item is selected :
- identify the component with
Add some code:
- add reference to
this.pages = this.$.pages;(
this.pagesbecomes a property of
- get the value (
numattribute) of the selected item:
- select the “wanted” page:
this.pages.selected = selectedItem.attributes.num.nodeValue;
You can try:
You can find source code of this third step, here: https://github.com/metals/copper/tree/master/creation-steps/step-03.
And now you can test it directly on your mobile: http://metals.github.io/copper/.
Warning: It’s better with Chrome for Android, especially about styling, because there are no ShadowDom support on Safari Mobile (see http://caniuse.com/shadowdom).Tweet