Polymer as Metaworks3's template engine

[jinyoung]

<dom-module id="user-view" java=“org.uengine.kernel.User”>
  <template>
    <div>[[name]]</div>
  </template>

  <script>

    mw3.Polymer({
      is: ‘user-view’
     }); // this lets define the methods, properties automatically

  </script>
</dom-module>

if user omits the java attribute, the id will be used as the java classname:

<dom-module id="org.uengine.kernel.User">
  <template>
    <div>[[name]]</div>
  </template>

  <script>

    mw3.Polymer({
      is: ‘org.uengine.kernel.User’
     }); // this lets define the methods, properties automatically

  </script>
</dom-module>

or, by the extended Polymer from metaworks, you only need to mark the module as metaworks, <— this looks best!

<dom-module id="org.uengine.kernel.User” metaworks>
  <template>
    <div>[[name]]</div>
  </template>

  <script>

     Polymer({
      is: ‘org.uengine.kernel.User’
     }); // this lets define the methods, properties automatically

  </script>
</dom-module>

or

<dom-module id="org.uengine.kernel.User” metaworks noscripts>
  <template>
    <div>[[name]]</div>
    <paper-button on-tab=“{{_update}}”>
  </template>
</dom-module>

By using Polymer, metaworks doesn’t need to manage:

1. template engine
2. object instance system (data binding)
3. even we don’t manage the metaworks.js at all. !!

[jinyoung]

but we have to implement these metaworks-specific features:

1. AutowiredFromClient
2. Auto binding by Returning Object's Class hierarchy.
3. Reducing data when the object is uploaded by option.

[jinyoung]

Inheritance - https://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

<polymer-element name="icon-button" extends="basic-button">
  <template>
    <span>
      <i class="icon"></i><shadow></shadow>
    </span>
  </template>
  <script>
    Polymer('icon-button', {
  ready: function () {
    // gets called once component is ready
    console.log('icon-button ready');

    // call parent `ready` handler
    this.super();
  }
});
  </script>
</polymer-element>

[Note] 'polymer-element' has been changed to 'dom-module'

[jinyoung]

Anatomy of Polymer

1. Polymer entry point

   #polymer-micro.html
   window.Polymer = function (prototype) {
   if (typeof prototype === 'function') {
   prototype = prototype.prototype;
   }
   if (!prototype) {
   prototype = {};
   }
   prototype = desugar(prototype);
   var customCtor = prototype === prototype.constructor.prototype ? prototype.constructor : null;
   var options = { prototype: prototype };
   if (prototype.extends) {
   options.extends = prototype.extends;
   }
   Polymer.telemetry._registrate(prototype);
   var ctor = document.registerElement(prototype.is, options);
   return customCtor || ctor;
   };

[jinyoung]

How to find DOM elements which are specific Java class -

document.querySelector("class.name")