Using Event with Polymer

Dispatching Event:

<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" />

<dom-module id="item-detail">
    <template>
        <div id="container">
            <h3>{{item_id}}</h3>
        </div>
        <paper-button on-tap="onAddToCart"><iron-icon icon="icons:shopping-cart"></iron-icon>AddToCart</paper-button>
    </template>

    <script>
        Polymer({
            is: 'item-detail',

            properties: {
                item_id: {
                    type:Number,
                    value:-1
                }
            },
            onAddToCart: function(e) {
                console.log('adding...');
                this.fire('eventAddToCart', {item_id: this.item_id});
            }
        });
    </script>
</dom-module>

Event Listener:

<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="element/item-detail.html">

<dom-module id="main-app">
    <template>
        <item-detail id="item_detail" item_id="{{current_detail_id}}"></
    </template>
    <script>
        Polymer({
            is: 'main-app',

            listeners: {
                'item_detail.eventAddToCart': 'onAddToCart'
            },

            onAddToCart: function(e) {
                console.log('Event received' + e.detail.item_id);
                // this.addToCart(e.detail.item_id);
            }
        });
    </script>
</dom-module>

Apache Cordova: Package/Build iOS/Andorid App from Polymer HTML5 Project

Requirement: Build iOS/Android app using existing Polymer project.

Solution:

There’re lots of tools/platforms to build an app from HTML5 project, such as Trigger.io, Intel XDK, PhoneGap, Apache Cordova. I choosed Cordova to build my first html app;

1. Install Apache Cordova by npm:

   $ sudo npm install -g cordova

2. Create a Cordova project using cordova CLI;

   $ cordova create hello com.liguoliang.app HelloWorld

3. Navigate to the project folder, add platform:

   $ cordova platform add ios/android

4. Build project:

   $ cordova build

5. Emulate the app:

   $ cordova emulate ios/andorid

Note: It is required to install Xcode or Android SDK/Tools for simulating.  you may follow the Cordova CLI message to installed the required sdk/tool.

> Apache Cordova CLI Document

Polymer helloworld: create web component using dom-module

<link rel="import" href="../bower_components/polymer/polymer.html" />

<dom-module id="user-info">
    <template>
        <div id="container">
            Hi, <span>{{user_name}}</span>!
        </div>
    </template>

    <style>
        #container {
            font-size: 11px;
            color: gray;
        }

    </style>

    <script>
        Polymer({
            is: 'user-info',
            properties: {
                user_name: {
                    type:String,
                    value:"Mr.default"
                }
            }
        });
    </script>

</dom-module>

<link rel="import" href="components/user-info.html" />
<template is="dom-bind">
    <user-info user_name="Li"></user-info>
</template>

Flex vs HTML5: After 6 years doing Flex, am I moving to HTML5?

Short answer: no. But I’m investing in HTML5.

Checkout:

https://plus.google.com/109047477151984864676/posts/CVGJKLMMehs

HTML5 学习笔记: localStorage/sessionStorage

HTML5新增的功能之一: 本地存储. 类似于Flex 的SharedObject.

>>Demo及代码<<

ref: http://www.w3schools.com/html5/html5_webstorage.asp