Designer workbench of the web UI framework for application developers

The Designer Workbench allows you to use WYSIWYG tools to build new screens for an application. It has tools similar to the Extensibility Workbench, which is used to change the screens of an out-of-the-box installation of an application.

You can access the Designer Workbench in two ways:

A URL.
Application developers access the Designer Workbench with this method.
A link in the Extensibility Workbench.
Custom developers access the Designer Workbench with this method.

Note: Although you can access the Designer Workbench from an out-of-the-box installation of an application, you are limited in the changes that you can make. Work with IBM® Customer Support when changing an out-of-the-box installation using the Designer Workbench.

Functional overview

The user interface layout of the Designer Workbench includes multi-tabbed editors and views. Use these view to work with:

Widgets
Data sources
Project files
Screen layouts
Component hierarchy
Component properties
Code templates

Technical overview

The UI of the Designer Workbench is built using the Ext JS JavaScript framework. The UI elements of a screen are stored in a file in the JSON metadata format. This metadata is used to generate extension config objects, which you can edit in Ext JS. Ext JS supports editing config objects only for creating or changing UI components.

Palette components reside in a component registry. The component class extends the sci.ide.DefComponent class. Use the following attributes of the sci.ide.DefComponent class to add a new component to the component registry of the Designer Workbench:

Attribute	Description
id	The unique ID of the component that is used to distinguish between all the components available in the Designer Workbench.
type	The registered type of the component. It is usually the xtype of the component.
text	The display text of the component.
acronym	The acronym for the component. It is used for auto-naming variable instances.
iconCls	The css icon class that is used as the component icon.
category	The category under which the component is grouped. To add the component to the Design Workbench, it should be grouped under Controls, Panels or Others. If a new category needs to be created, that category must be registered.
named	A boolean property that defaults to true if the component extends sci.ide.DefComponent. When a named component is added to a screen, an auto-generated sciId property is added to it.
applyDefaults	This method accepts the model (an object containing properties associated with a component) of the component being created as its argument and applies the default properties of the component to the model.
getProperties	This method returns a collection (Ext.util.MixedCollection) of all property definitions for the component. The id of the property is the key which is mapped to a property definition. Properties can be added to a Property Registry for global access. A property definition is a JavaScript object with the following attributes: id The unique identifier of a property. If the property is present in Ext docs then it may be the same as the config option for the Component constructor. type The data type of the property definition. isArray A boolean value that indicates if the current property is an array. getDefaultValue A method that returns the default value of the property. getDefObject A method that provides the property definition to the caller. getValues A method that returns an array of all the possible values of the property.
resolveLink	This method should be implemented if the component being added is a container, i.e., it can accept any other Designer Workbench component/container. It is used to decide if the component being added can be accepted as a child.
validate	This method accepts the model of the component as the argument and verifies if the component is in error state. If the model is found to be in error (inconsistent set of properties and values), then it may show errors, warnings or suggest corrections (if available).