Designer workbench of the web UI framework for application developers

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 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).

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.

The following
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.
Data tab
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
widgets.
Canvas
View a directory-type listing of all the widgets on the canvas
(screen).
Tree View
Collapse the Tree View to show just the top screen item
(screen).
collapse

Collapse Tree View

Expand the Tree View to show all of the screen items.

expandExpand
Tree View

View a list the properties of the screen and any widget that is
selected.
Properties view
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
needs to be provided for the methods of the class as mentioned in the documentation for each method.
For more information, refer to the JavaScript
documentation for sc.plat.AbstractBindingMgr.

Properties view (Add tab)

Check if a screen has any errors or warnings and see if a fix is available, using the Check
results dialog box.

For example, if you have not localized all of the controls in the current screen, the Check
results dialog box displays a list of controls that have not been localized. To resolve this, click
the icon under the Fix? column, which directs you to the Localization Panel, where you can localize
the controls.

Diagnostics button

Create mashup layer files.

This button displays the Configure Mashups dialog box.

Mashups button
Display JavaScript source
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
and data source directory). This string can be copied and added to your JavaScript bookmarks.

If you clear all of your browser cookies, you can use this user preference information to restore
your original preferences.

More button (Export Preferences menu option)

Localize widgets.

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

Join The Discussion

Your email address will not be published. Required fields are marked *