Widget Component Implementation

To create a new widget component from scratch, you need to create some Java classes.

Widget component class has no logic and contains component properties and their getters and setters. This class is inherited from WAbstractComponent which define some properties (key, description, height, width and others). These fields are common and suitable for most types of components. Component Class allows to define additional component properties and their getters and setters.

Please note that any setter in class successor of WAbstractComponent should fire event with information about changes. Here is an example:

Example: Setter for property value:

These events are necessary for processing changes of values in visual parts of the component.

Make sure you implemented clone() method. Some kinds of properties requires additional steps in cloning, in this case you can do they here. But usually implementation looks like this:

Example: clone() method for WNewComponent, which is inherited from WAbstractComponent:

Do not forget to implement getComponentGroup() method. It determines a component group for a new component. It is suggested that it will be custom group, but here you can make a choice from other groups.

Example: Default implementation for getComponentGroup(). It is suitable almost always:

Context wrapper for widget component. This class should be inherited from WAbstractContext. It provides the possibility to work with widget component as with Context. For example to represent component properties in Properties Editor. Implementing of this class is mainly related to defining variables. Override createVariableDefinitions() method to add variable definition to this context.

Example: Implementation for createVariableDefinitions():

Use addDefaultVariableDefinition(VariableDefinition vd) only for default property of the component. For other properties use addVariableDefinition(VariableDefinition vd).

Renderer Class is used to represent widget component in Swing style. It is inherited from DefaultSwingComponentRenderer which define some common behavior and functionality for different renderer implementations. For example it has component field that will be used in each Element Renderer.

Renderer Class should implement createRenderer() method. Here you can create Swing Component, configure it and add listeners to handle events. If some property changes require executing additional actions, you can override componentPropertyChanged(String property) method.

Example: Creating renderer for Progress Bar:

Example: Using componentPropertyChanged(String property) method for executing additional actions after property change:

Renderer Support Class is optional. It is inherited from DefaultEditorComponentRendererSupport. Its implementation can be useful if you need to force renderer to represent property changes in relevant element in GUI Builder. In most cases it is not necessary, because DefaultEditorComponentRendererSupport implements automatic invocation of corresponding getter in element and setter in representation object. If automatic reaction is not suitable for some property, you can override componentPropertyChanged(String property) method and implement your own handler.

Main Plugin Class provides access to component classes. It should be inherited from ComponentPlugin. You will need to override at least some of the methods to provide component functionality.

• getWComponent() should return Component Class

• getSwingRenderer() should return Renderer Class

• getEditorRendererSupport() should return Renderer Support Class. Optional. Overriding of this method is necessary only if you implement Renderer Support Class.

• getId() should return component ID. Optional. Default implementation uses plugin ID from descriptor to generate component ID.

• Methods doStart() and doStop() can be overridden at your discretion.

New widget component needs an icon to be represented. Iotellect GUI Builder uses PNG fixed-sized (20x20) images as component icons. So you can add such image to the component JAR file and use it by WAbstractComponent constructor. Please note that iconId parameter should be the same as icon file name without extension.

To create a plugin descriptor for your custom component, edit the following in demo component plugin.properties file:

• Change the last word in id attribute of the <plugin> tag to the ID of new plugin. The ID should contain only lowercase letters, digits and underscores. For example, if your desired plugin ID is xyz, set ID attribute to com.tibbo.aggregate.common.plugin.component.xyz

• Change class attribute of <plugin> tag to full name of Main Plugin Class

• Enter component description in the body <doc-text> tag

• Change id attribute of the <extension> tag to the new plugin ID

Edit the following in the Gradle build.gradle file:

• Change project name and name of the destination file (plugin JAR file)

• Run build.gradle using Gradle to build plugin JAR file

• Copy the JAR file to %Iotellect Server Installation Folder/plugins/component when Iotellect Server is not running

• Copy the JAR file to %Iotellect Client Installation Folder/plugins/component when Iotellect Client is not running

• Start Iotellect Server and Iotellect Client

• Create new widget and edit it via GUI Builder

• Find new component in Custom Components toolbar tab

Was this page helpful?

Tell us more

Send

Thank you!