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.
- A URL.
developers access the Designer Workbench with this method.
- A link in the Extensibility
Custom developers access the Designer Workbench with
from an out-of-the-box installation of an application, you are limited
in the changes that you can make. Work with Customer Support
when changing an out-of-the-box installation using the Designer Workbench.
includes multi-tabbed editors and views. Use these view to work with:
- Data sources
- Project files
- Screen layouts
- Component hierarchy
- Component properties
- Code templates
The UI of the Designer Workbench is built using
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.
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:
|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
|text||The display text of the component.|
|acronym||The acronym for the component. It is used for auto-naming variable
|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
Properties can be added to a Property Registry for global access. A 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
Designer workbench tools of the web UI framework
The Designer Workbench has many tools for the web UI framework. You can find a repository
of those tools and their uses here.
table shows the tools to use for the different tasks that you can
perform using the Designer Workbench:
|If you want to…||Use this tool…|
|Create a new screen.||New button|
|Save a new screen.||Save button|
|Undo changes that you made to the screen.||Undo button|
|Redo changes to the canvas that you just undid.||Redo button|
|Add widgets to a screen.||Palette tab|
|Create data sources for sending data to input and output XML files.
Mashup layer files use these data sources.
|Add file access to a control.||Files tab|
|Configure the directory path to the project that will use the changes
from the Designer Workbench.
|Files tab (Options button)|
|Immediately update your main project with changes that you make using
the Designer Workbench.
|Files tab (Notify project check box)|
|View the workspace for the screen that you are creating by adding
|View a directory-type listing of all the widgets on the canvas
|Collapse the Tree View to show just the top screen item
Collapse Tree View
|Expand the Tree View to show all of the screen items.||
|View a list the properties of the screen and any widget that is
|Add a property to a widget.||Properties view (Add tab)|
Set the data binding of a widget.
Add the bindingData property and then extend the AbstractBindingMgr class. The implementation
|Properties view (Add tab)|
Check if a screen has any errors or warnings and see if a fix is available, using the Check
For example, if you have not localized all of the controls in the current screen, the Check
Create mashup layer files.
This button displays the Configure Mashups dialog box.
code for the screen.
|More button (View Source menu option)|
View an encoded string of user preferences that are stored as cookies (like the project directory
If you clear all of your browser cookies, you can use this user preference information to restore
|More button (Export Preferences menu option)|
This button displays the Localization panel dialog box.
You must first save the screen before you can localize any widgets.
|More button (Localize Screen menu option)|
|Load libraries into the Designer Workbench. To do this, you must add
an include file.
|More button (Manage Libraries menu option)|
|Generate code from the Code Template Generator window that you can use
to update mashup, Struts, JSB, resource, resource permission, and menu files.
|Generate Code button|