A Web Components widget library

A Google like Web Component library.

Starting from today, I will develop a library of Web Components using Web Fragments (via WebfBug). I will try to extract user interface widgets from the google sites and transform them into Web Components.

The usage

First of all, I would like to decide how I’ll go to use this library, in other words which kind of html I would like use

<html>
<head>
   <link rel="import" src="wc/google.html"/>
</head>
<body>

<gbutton title="Test"/>
<gbutton title="Test1"/>
<gbutton type="dropdown">
  <item value="0" title="item1"/>
  <item value="1" title="item2"/>
</gbutton>
<gbutton type="checkbox" title="Test1" value="1"/>
<gbutton type="checkbox" title="Test2" value="0"/>
<gbutton type="choice">
  <item value="0" title="option 1"/>
  <item value="1" title="option 2"/>
</gbutton>
<gbutton text="dialog">
    <g-tooltip id="dialog" title="Dialog" subtitle="subtitle"></g-tooltip>
    <g-dialog modal="true" title="Dialog" subtitle="subtitle">
       <g-radio text="status"></g-radio>
    </g-dialog>
</gbutton>

<body>
</html>

The Web Components library

I will go to use x-tag because it implements Web Components and HTMLImports, it is very lightweight and it runs on actual browsers.

The Web Fragments

Webfbug, allow me to extract html fragments in many different ways, as plain html, as domplate or dust.js. However I will use my own template engine. It generates html by js code.
A template looks like:

t
.p('<DIV ').att("class","webf_c4e450b310fed6c629f500497f64558b).p('>')
.p(data.text)
.p('</DIV>');

It is not done to be very explicative, but p add some text, att add and attribute e cycles on arrays, g groups statements and c stays for conditional. all text are stored into an array. When the method append or add is called, the array is merged and html is generated.

The architecture

Since Web Components allows inheritance, I would like to use this feature. I will go to create a base abstarct Web Components implementing some common feature, then I will extend it to create other Web Components.

        xtag.register('webf', {
            lifecycle: { created: function() {} },
            events:{ },
            accessors: { },
            methods: {
                _created: function(data) {
                    // create the component
                },
                _build: function(data){
                    // create and return a template engine instance
                },
                _model: function(data){
                    // read data from the web component
                }
            }
        });

So every new components will extends webf.

        xtag.register('new-components', {
            extends: "webf",
...
        });

The UI behaviours

All User interface has generally the same behaviours, so I’ll abstract them in the following way

        xtag.register('gbutton', webf_features({
            extends: "webf", 
            lifecycle: { created: function() {} },
            events:{ },
            accessors: { },
            methods: {}           
        },WEBF_TRAVERSABLE,WEBF_BUTTON,...));

webf_features, add all the necessary generic code to manage declared behaviours (WEBF_TRAVERSABLE,WEBF_BUTTON), while the web component is only responsable to render the widget and performing implementations action.
In this example, the Web components will be traversable (the WEBF_TRAVERSABLE features adds the tabindex attribute) and it acts like a button (the WEBF_BUTTON add an action property and managing clicks).

if you want to see the actual state of art of this library look at here