Page History
Servoy NGClient uses a client side MVC library called AngularJS, which provides all the means for building webcomponents.
Inside Angular we have something called directives which basically wraps/fold an blob of html into one new html tag, soFor example, Servoy NGClient uses an AngularJS based web component textfield
from the servoydefault
package by letting Servoy generate a AngularJS directive (for resolving the custom HTML tag) like:
Code Block | ||
---|---|---|
| ||
<datafield<servoydefault-textfield dataProviderID="model.orderid" /> |
expands to something likewhich Angular resolves run-time to:
Code Block | ||
---|---|---|
| ||
<div class="xyz"><input type="text" ng-model="model.orderid"></div> |
an A directive like "datafield" textfield
is the basic building block for a webcomponent, see "Create Components" section at: http://angularjs.org (especially see the component.js tab there)
A The component name must follow the angular naming restrictions imposed by angular directives. When using a directive in the html it resolves to the directive name by converting from snake-case to camelCase, for example when defining a directive with name 'myDir' one must use it in ht html as 'my-dir' see 'Matching Directives' section of https://docs.angularjs.org/guide/directive.
Inside each webcomponent Angular arranges for automatically takes care of the binding between model and displayview, for in the example above the ng-model
parameter sync on the textfield
binds the field value with value of the input
element to the orderid in the model (scope).
Every webcomponent consists out of at least 3 parts/files:
- Specification (.spec file) defines all properties and types (internally called beanInfo)
- Angular template (.html file) contains the html with directives like for example ng-model or "ng-click" handler to webcomponent logic
- LogicClient side logic (.js file) part does the adding of directive, and likely contains controller javascirpt to-do for example remote calls and expose api functions
- optionally icon to be used in Servoy developer palette
- optionally resources like css/images used by your components
Tip |
---|
When starting building webcomponents, the default webcomponents provided by Servoy could serve as an example. |