Web Components Development Journal
Starting from today, I will write about all the stage of the development of the library.
Ajax data model
Web components may be used to create complex web services if used with ajax. So I create a web components to do ajax calls. The web component is called webf-ajax and here is how it can be used:
If the ajax component is inside a component implementing the WEBF_AJAXER feature, it uses the following methods from it:
Runtime data binding
Notice the attribute runtime="js:issueModel" for the g-layout tag, it binds the web components with the global variable issueModel while the runtime="action:.newItemAction" attribute binds the button action with the issueModel newItemAction method.
When you bind a web component with an object, the web component will has a new property:
_runtime = object referenced by the attribute runtime
Runtime could be binded as follow:
- webf:selector find a web components by the selector and binds it's _runtime
- action:function Define the component's action with a global function
- js:model Bind the component runtime with a global variable
- action:.function Define the component's action with a method of a parent runtime
- js:.model Bind the component runtime with a field of a parent runtime
The g-layout web component is enough good, but I would like to get more from it. Suppose you want a layout a from of this kind.
- -allow to define heights for cells
- -allow to define labels for cells
- -allow to define alignments to cells
- -allow rows inside a cell.
A simple web components to layout html nodes.
Can a web component have a complex data model? And how to interact with?
My library use differents approach to define datamodel for a web component.
This are a simple link web components
When I show a tooltip, none of the poup should be closed.
This feature, manage actions on web components, Some time it conflict with the windowManager. For Example if there is an opened menu when I click a button, the menu is not closed because the Action stops the event propagation. To avoid this, I call the _close method of the windowManager inside the action. With this behaviour, now Accordion should use the action features, but the action should use a selector to manage the click node, so I add a private component data field "actionSelector" which is a string selector or a funtion. I use it to find the node on which a click fires the action. Now the Accordion web component could use actions to toggle the panel. Since the action click method now can be executed using a selector, the this could be different from the actual component, so the _action method is called with new parameters "self" is the component itself and "node" is the actual node. Now you can add a "href" to change page.
A CSS TRICK footer menu Web Component
When a web component is created, not necessarily it should also be implemented (inside html generated). In fact dialogs, menu etc. shouldn't. They could be created and destroyed as needed. I Add a new Feature called WEBF_DELEGATE_CREATION. A component with this feature will be created and destroyed as needed.
I found a bug on the combo component. It didn't showed the popup menu. The combo dinamicaly creates a g-popup component. Since my template engine uses innerHTML to add code, The Inserted method was not called. I've to change a little in the WEBF_CONTAINER feature. Now it works:
Today I was thinking on how to let web components been stylezable.
A Menu bar is almost like a popup except that every items are showed inline. So I add a property direction to the popup component, the item will use this property to show horizontal or vertical.
It works, but a menu bar couldn't be closed, so I create a new component, g-menu-bar I try to extend a list component but it didn't work, so I create a brand new one.
Ok, but sub menu are showed on the right of the item. So I use the anchor. Anchor sayes how popup is showed. When I create a popup I decide which anchor to use. Ex. a popup inside an item is showed on the right. I simply add a check saying that the anchor of a popup inside a WEBF_HORIZONTAL_LIST is "top=bottom left=left".
A Menu bar
A little bug
I found I little bug on parent child relationship. I know it will be. now it seems ok.
To customize internally a web component, i will use a special attribute called istyle it act like the standard html style except that it applies to the implementation root node.
A Menu bar at full width (istyle="width: 100%")
More on Menu bar
I hide the feature WEBF_SELECTION from the Menu bar, because the menu item shouldn't remain selected after a click.
This are some strange cases
Menu with other components has menu items