Begin to set the appearance of the Rich UI editor as follows:
- From the main menu, click . The Preferences dialog
box is displayed.
- Expand EGL and Rich UI;
and then click Appearance. The Appearance page
is displayed, with three tabs: General, Browser
size, and Languages.
We describe each tab in turn. On completing the tabs, do as follows:
- If you want to return the settings on the Appearance pane
to the original product settings, click Restore Defaults.
- Click Apply to save your changes and remain
on the Preferences dialog box. Alternatively,
click OK to save the changes and exit the dialog
box; or click Cancel to cancel the changes
and exit the dialog box.
General tab
At the General tab, do as follows:
- In the Editor tab section, select Design, Source,
or Preview to indicate which tab to initially
use whenever you open the Rich UI editor.
- In the Widget creation section, indicate
whether the Rich UI editor must prompt you for a variable name each
time you drag a widget from the palette to the Design surface. If
you clear the checkbox, the Rich UI editor creates its own variable
name, which is the widget type name (for example, Button) followed
by a sequentially assigned integer. For example, the assigned names
might be Button1, Button2, Box1, and so forth.
- In the Transparency section, indicate how
to handle the transparency controls, which vary how widgets are displayed
in the Design tab of the Rich UI editor. The
transparency controls are particularly useful when you are working
on a Design surface with many widgets that are close together.
The
Design surface is composed of two layers. The bottom layer is the
web browser, which displays widgets, including initial text values.
The top layer is an editing overlay, including angle brackets at each
corner of each widget. The background of the top layer can have any
of the following characteristics: transparent, or a pattern of white
and transparent dots, or (on Windows platforms)
a white layer with a varying level of transparency.
The transparency
options provided in the
Appearance pane affect
the behavior of the Rich UI editor every time you open the editor.
However, when you are working in the editor, you can change the transparency
options that are in use for the editing session. The options are as
follows:
- Select or clear the check box Show transparency controls to
indicate whether to display the transparency controls. When you start
working with Rich UI, you are likely to prefer hiding the controls,
as is the default setting for this preference.
- Next, select one of the following transparency modes, which affect
the background of the top layer of the Design surface:
- Fully transparent means that the background
is transparent.
- Dotted transparency pattern means that
the background is a pattern of white and transparent dots. The refresh
rate of your monitor may cause the pattern to shimmer.
- On Windows platforms, Variable
transparency means that the background is a white layer
with a varying level of transparency. You vary the level by changing
the numeric value of a slider. The dotted transparency pattern described
earlier is roughly equivalent to the variable transparency pattern
at 38%.
- The checkbox named Enable semi-transparency while dragging allows
use of a temporary transparency mode as you drag a widget from the
palette to the Design surface or from one location on the Design surface
to another. Selecting the checkbox means that the temporary mode is
the dotted transparency pattern. Clearing the checkbox means that
your usual transparency mode remains in effect. The checkbox has no
effect if your usual transparency mode is the dotted transparency
pattern.
- In the Colors section, specify details
on the following issues:
- The border of the currently selected widget
- The potential drop locations for a widget being dragged from the
palette to the Design surface or from one location on the Design surface
to another
- The selected drop location, which is a potential drop location
over which the widget is hovering during a drag-and-drop operation
For the border and each location, you can click the adjacent
button to display a color dialog, where you can choose or refine a
color. Also, for the border and the selected drop location, you can
select (or clear) a check box to include (or exclude) the displayed
pattern.
- In the Performance section, select the
radio button that reflects your current need, whether for greater
responsiveness or for less usage of runtime resources such as memory.
One effect of selecting Optimize to use fewer resources is
that you increase the amount of time needed to display content when
you select the Design or Preview tab.
- In the Select the render engine to be used by the visual
editor section, do one of the following tasks:
- Select Mozilla XULRunner if you want to
use the Mozilla rendering engine to display widgets in your visual
editor. This engine is part of Firefox and other Mozilla applications.
(Note that Rich UI requires the Firefox version to be 3 or greater.)
- Select Microsoft Internet Explorer if you
want to use the Microsoft Internet
Explorer rendering engine.
- Select Webkit if you want to use the Webkit
rendering engine to display widgets in your visual editor. This engine is part of Safari
and other webkit based browsers.
- Select Chromium if you want to use the Chromium
browser to display widgets in your visual editor. This is required to display the widgets that use
web components or other modern JavaScript features.
Rendering Engine Limitations:- Mozilla XULRunner: Does not support on Windows 64bit.
- Microsoft Internet Explorer: It is only supported on Windows
- WebKit: Does not support on Windows
- Chromium: Chromium is not supported on Linux due to chromium swt bug. On Windows, the Limitations of Chromium are as follows:
- The backgroud of Gridlayout will not be displayed in the design.
- While dragging, the canvas will only show the outlines without content, which will
appear after dropping.
- One side of the widget's border may disappear.
Browser size tab
In the Browser
size tab, you set the browser size that is appropriate
for a specific kind of device such as a cell phone. Specifically,
you set options that are in effect whenever you open the Rich UI editor.
However, when you are working in the editor, you can change the browser-size
options for the file being edited.
The options are as follows:
- Select or clear the check box Browser size controls to
indicate whether to display the controls when a file is opened in
the Rich UI editor. When you start working with Rich UI, you are likely
to prefer hiding the controls, as is the default setting for this
preference.
- Change the numeric values of the sliders to specify the default
height and width in pixels. The default you set becomes the browser
size that is provided initially in the Rich UI editor. Similarly,
change the numeric values of the sliders to specify the minimum and
maximum height and width that are valid in any file open in the Rich
UI editor. You can change the maximum and minimum only by returning
to the Appearance page.
Languages tab
In the Languages tab,
you assign values that determine what messages to use when you run
Rich UI applications in the Preview tab of the Rich UI editor or in
an external browser. For details on the use of locales, see Use
of properties files for displayable text.
When you work
in the
Languages tab, you choose among locales
that are listed in the
Rich UI pane, as described
in
Setting preferences for Rich UI. Your tasks are as follows:
- In the Runtime messages locale list box,
select the locale for the EGL runtime messages, which are provided
by the EGL Runtime and are distinct from the messages included in
a properties file that you customize.
- In the Rich UI handler locale list box,
select the locale for the messages included in a properties file,
if any, that you customize.