Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved


Chapter 6 Custom Controls : Defining Custom Controls

Defining Custom Controls
There are two key items that a developer needs to provide for the definition of a custom control.
Figure 128 provides a look at how the ControlWrapper exposes the implementation of a third-party library as a Custom Control within Forms.
Figure 128 Custom Control Architecture
 
Figure 129 provides a description of the various design-time and runtime artifacts that go into a Components Library project.
Figure 129 Component Library Project
Working with the Component Library File
A special folder of type Components is used to store component library files. A library file defines a set of custom controls which are available in the Forms Designer palette.
The option to create the Components special folder is presented at the time of new project creation.
The detailed steps for defining custom controls are as follows:
1.
Click File > New > BPM Developer Project. The New BPM Developer Project dialog opens.
2.
Specify the Project name and select the BPM check box as the Destination Environments. Click Next.
3.
The Form Component Library option is provided on the Asset Type Selection page. Specify the asset types as displayed in the following figure.
 
Figure 130 Asset Type Selection Page
4.
The Asset Type Selection page provides the following two options for creating a component library project:
Click Finish: creates a new project with a Components special folder. The <library>.library file is created in the Components special folder.
Click Next: displays a wizard page that guides you to create a new component library project.
a.
Specify Folder and Filename on the Business Object Model page and click Next.
b.
Specify Folder and Library filename on the Component Library page and click Next.
c.
Specify Folder details on the Set Special Folders page and click Finish. This is an optional step. You can also click Finish in the preceding step. Creates a new project with a Components special folder. The .library file is created based on the details provided in the wizard.
You can designate a normal folder as a Components special folder as well, using a similar 'Special Folders > Use as Components Folder' technique as with other special folder types.
The contents of the Components special folder are:
.library file: the .library file contains the configuration information for a set of custom controls. For example: MyComponents.library.
icons folder: the icons folder contains sample design-time icons for the custom controls.
5.
Right-click the <library>.library file, and select Open. The library file is opened in the Component Library Editor for editing.
An overview of the various parts of the Component Library Model is provided in Figure 131.
Figure 131 Component Library Model
The editor supports editing of the .library file, and provides an easy way to specify the configuration details for each custom control definition.
6.
The library element can have the following child elements:
7.
Event Type: select the Library element, right-click, and select New Child > Event Type. A new Event Type element is added.
A new External Resource element is added. An External Resource defined at the Library level applies to all Control Types defined in the Library. It gets loaded into the page if the form uses at least one control type from the library.
8.
Figure 132 Library Editor Properties View
 
9.
10.
External Resource: select the Control Type element, right-click and select New Child > External Resource. A new External Resource element is added. An External Resource defined at the Control Type level is guaranteed to be loaded into the page only when a form uses this control type from the library.
Property: select the Control Type element, right-click and select New Child > Property. A new Property element is added.
11.
Working with the ControlWrapper
To add a reference to a ControlWrapper class:
1.
Create a folder in the Presentation Resources folder and place the .js file with the JavaScript wrapper implementation in this folder.
2.
3.
Click the picker provided for the Relative URI property. The Pick Resource dialog lists the JavaScript files available in the Presentation Resources folder.
Figure 133 Pick Resource Dialog.
You have to select the Relative URI property sheet entry in order to activate the cell editor. Once activated, the '...' button will open the resource picker dialog.
4.
Using the Custom Control
Once the custom component definition is complete, the project with the component library file has to be added as a project reference in a Forms project. The icons for the custom components are displayed in the Form Designer palette.
The Form Designer supports the following functionality when working with custom controls:
1.
2.
3.
4.
5.
6.
7.

Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved