The webf – Web Component

A Web Components widget library

The webf component is the root of all components I will go to create.

Actually it looks like:

        xtag.register('webf', {
            lifecycle: { created: function() {} },
            events:{ },
            accessors: {
                isWEBF : { get: function(){ return 1; } },
                _webfImpl$: { get: function(){ return $(this._webfImpl); } },
                _webfImpl: {
                    get: function(){
                        if (!this.__webfImpl) 
                            this.__webfImpl=$(this).children(".webf_resetter")[0];
                        return this.__webfImpl; }
                }
            },
            methods: {
                // wrapped functions of xtag equivalent
                addClass: // 
                removeClass: // 
                query: //

                // add a feature
                _add_feature: function(name,trg){},
                // add a feature before a given one
                _add_feature_before: function(name,trg,before){},
                                // add a feature after a given one
                _add_feature_after: function(name,trg,after){},
                // add a function to a given chain
                _chain_function: function(key, name, f, dontOverride){  },
                // add a function to a given chain
                _chain_function_before: function(key, name, f, dontOverride, before){},
                // add a function to a given chain
                _chain_function_after: function(key, name, f, dontOverride, after){},

                // this is the default creator for the component
                _created: function(data) {
                    try {
                        // Load the component Data Model 
                        var data=this._model(data);
                        // here features are added 
                        this._features(-1,data); 
                        // Generate the html component
                        var v=this.TAG(data);
                        v.append(this);
                        // here features are added
                        this._features(1,data,v);
                        return v;
                    } catch (e){
                        console.log(e);
                    }
                },
                // Apply features: this is implemented by webf_features 
                _features: function(ix){},
                // Create the template engine instance
                _build: function(data){
                    var t={
                       ....
                    };
                    return t;
                },
                // load the data model
                _model: function(data){
                    ...
                    return data;
                }
            }
        });

the _model method create an object containing data readed from the components. It can read data in differents ways.

  1. from attibutes of the web components
  2. from children
  3. from scripts of type “text/json”

all Web Componets found are stored in data.content.

<webf name="test"></webf>
data={
   name:"test"
}

<webf name="test"><item>item1</item><item>item2</item></webf>
data={
   name:"test",
   item: ["item1", "item2"] 
} 

<webf name="test"> 
<script type="text/json"> { "value": 1,
 "panel": {
 "title": "test"
 } } </script>
</webf> 

data={ 
 name: "test",
 value: 1,
 panel: {
 title: "test"
 } 
}

An actual web component implementation look like:

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
<template id="templateId">
</template>
<script type="text/javascript">
    (function() {
        xtag.register('templateId', webf_features({
            extends: "webf",
            lifecycle: {
                created: function() {
                    var data={};
                    this._created(data);
                                        // data.content contains sub components
                }
            },
            events:{
            },
            accessors: {
            },
            methods: {
                TAG:function(data, t){
                    var self=this;
                    var t=t ? t : this._build();
                    // html building  
                    return t;
                },
            }
        }, WEBF_TRAVERSABLE));
    })();

</script>
</body>

</html>