Using Event with Polymer

Categories: HTML5; Tagged with: ; @ October 15th, 2015 22:26

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">
        <div id="container">
        <paper-button on-tap="onAddToCart"><iron-icon icon="icons:shopping-cart"></iron-icon>AddToCart</paper-button>

            is: 'item-detail',

            properties: {
                item_id: {
            onAddToCart: function(e) {
      'eventAddToCart', {item_id: this.item_id});

Event Listener:

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

<dom-module id="main-app">
        <item-detail id="item_detail" item_id="{{current_detail_id}}"></
            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);

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

Categories: AndroidDevelopment NotesHTML5; Tagged with: ; @ July 21st, 2015 23:14

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


There’re lots of tools/platforms to build an app from HTML5 project, such as, 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 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


HTML5 学习笔记: localStorage/sessionStorage

Categories: FrontEndHTML5; Tagged with: ; @ March 17th, 2012 19:17

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

localStorage.userName = data;  // Save data
var lastName = localStorage.userName; // Get data from local sotrage




// Proudly powered by Apache, PHP, MySQL, WordPress, Bootstrap, etc,.