A glue-component is a Vue component used to display the RenderState representation of a ViewNode. The glue- prefix signifies that the component will take three specific properties and that its purpose is to display the node.
The properties that all Glue components must take are:
| Name | Type | Purpose |
|---|---|---|
| viewtree | Map | The current state of the service transaction containing all visible and active ViewNodes as RenderState and also any additional text keys and data constraints required for rendering the Service Transaction. |
| nodeid | String | The ID of the node that the glue-component is being asked to render. |
| node | RenderState object | The RenderState object that the glue-component will render. |
Glue Component vs Widget
The terms ‘glue component’ and ‘widget’ are used fairly interchangably as the primary way to specify which glue component to use for a ViewNode is to specify the named of the glue component (without the glue- prefix) as the ‘widget’ attribute on the configured Service Form Item (SFI).
Within the glue layer there is a special component called ‘widget’ this component resolves the specific glue component that should be used for a ViewNode and invokes the glue component.
As the ‘widget’ attribute is not a mandatory when configuring an SFI this ‘widget’ component makes the decisions about which glue component should be used. The resolved glue component that is selected by the widget component for display is therefore also referred to as the ‘widget’
gluebase Mixin
The gluebase mixin is defined in the glue layer and provides a base for building glue components. By using the gluebase mixin the required props (viewtree, nodeid, node) will be defined for the component and a number of utility methods for interacting with the RenderState and context.
The simples JavaScript implementation for a glue component is as follows. This is equivalent to the default implementation that will be used if no specific JavaScript file is provided.
Vue.component("${vueComponent}", {
mixins: [gluebase],
template: "${vueTemplate}"
});The gluebase mixin is provided to the component so that it inherits all the base functionality.
Glue Component Composition
The above JavaScript example shows the ${vueComponent} and ${vueTemplate} variables within the JavaScript implementation.
The values for these varables come from the name and content of the .vue files used to define the template for the glue component.
e.g., Create a new file in the /resources/vueglue/template director named glue-my-component.vue with the following content.
<div>This will render</div>To specify a JavaScript implementation for this component add a glue-my-component.js file in the same directory. If this file is not present the default.js in that directory will be used for the JavaScript implementation.
When the default implementation is used the name of the file and content are injected into the ${vueComponent} and ${vueTemplate} variables.
e.g., the resulting Vue component sent to the browser in this case would be.
Vue.component("glue-my-component", {
mixins: [gluebase],
template: "<div>This will render</div>"
});Any directory’s underneath the resources/vueglue/template template folder can have their own default.js file to enable similar components to share implementations.
