In the previous three installments of this series, I introduced you to Eclipse, the Eclipse Standard Widget Toolkit (SWT), and the JFace GUI tool kits used to construct Eclipse and standalone rich GUIs. I also introduced many of the basic GUI controls, container types, and layout managers. I then I showed you how you can combine these controls into simple working applications. I also detailed how you can provide those applications with a menu system. Finally, I demonstrated how you can follow best practice by creating a library of methods and classes to ease GUI development.
Here, we complete our survey of the various widgets in the
org.eclipse.swt.widgets and org.eclipse.swt.custom packages (unless otherwise noted, the controls I discuss are in the widgets package). For background, it is assumed you have read at least the first installment of this series, "How to create a simple SWT application."Introduction
I will discuss several GUI controls in the following sections. These controls are demonstrated by a single application program called BarApp. As in earlier installments, BarApp is an extension of the BasicApplication class where the control creation methods exist. Several screenshots of this application will be used to show the features of the different controls.Figure 1 below shows all the controls we will discuss, including several ToolBars and a CoolBar. At the extreme left are three bordered Composites (containing a Label) -- each of which is inside a pane of a SashForm. This SashForm is itself inside a bordered Composite in a larger SashForm. Near the middle left is a vertical ToolBar with the Open Tracker button at the top. On the top right are four horizontal ToolBars (inside two CBanners) -- of which only two can be seen; the first two use text labels, the second two use images (the same one). All of the ToolBars and CBanners are inside a single Composite in the outer SashForm. This structure can best be seen by the control hierarchy shown in Listing 1.
Figure 1. BarApp example
http://www.ibm.com/developerworks/opensource/library/os-jface4/index.htmlListing 1. Control Hierarchy for the BarApp application
0: BarApp {}
1: SashForm {}
2: Composite {}
3: SashForm {}
4: Composite {}
5: Label {Left Pane}
4: Composite {}
5: Label {Center Pane}
4: Composite {}
5: Label {Right Pane}
2: Composite {}
3: ToolBar {}
4: ToolItem {Open Tracker}
4: ToolItem {Check}
4: ToolItem {Drop}
4: ToolItem {}
4: ToolItem {Radio 1}
4: ToolItem {Radio 2}
4: ToolItem {Radio 3}
4: Label {}
3: CBanner {}
4: ToolBar {}
5: ToolItem {Press 1}
5: ToolItem {Check}
5: ToolItem {Drop}
5: ToolItem {}
5: ToolItem {Radio 1}
5: ToolItem {Radio 2}
5: ToolItem {Radio 3}
5: Label {}
4: ToolBar {}
5: ToolItem {Push 2}
5: ToolItem {Check}
5: ToolItem {Drop}
5: ToolItem {}
5: ToolItem {Radio 1}
5: ToolItem {Radio 2}
5: ToolItem {Radio 3}
5: Label {}
3: CBanner {}
4: ToolBar {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: Label {}
4: ToolBar {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: ToolItem {}
5: Label {}
3: CoolBar {}
4: CoolItem {Drop}
4: CoolItem {Drop}
4: CoolItem {Drop}
4: CoolItem {Drop}
4: CoolItem {Drop}
4: Button {Press Me 1}
4: Button {Press Me 2}
4: Button {Radio 1}
4: Button {Radio 2}
4: Button {Radio 3}
3: Link {This is a link!}
3: Composite {}
4: Button {File}
4: Button {Directory}
4: Button {Color}
4: Button {Font}
|
ToolBars, CoolBars, and Trays
ToolBars are similar to the Menu control described in the second installment of this series, "How to use combo, list, table, and tree controls." ToolBars contain ToolItems that may have text or images that act like buttons. In general, either an image (AKA icon) or text is used, but not both. If only an image is used, the ToolItem needs to have a ToolTip (phrase or sentence of help information) that will be presented when the mouse is over the ToolItem to explain the function the image.ToolBars must be defined as one of two mutually exclusive styles:
HORIZONTAL-- Horizontally orientedVERTICAL-- Vertically oriented
FLAT-- Show the items in a flat lookWRAP-- Wrap the items into multiple rowsRIGHT-- Right-(vs. left)-align the itemsSHADOW_OUT-- Show a shadow
CHECK-- The item can be persistently selected (checked).DROP_DOWN-- The item (typically) displays a drop-down menu.PUSH-- The item acts like a button that causes an immediate action (the most common form).RADIO-- Only one of the items with this type can be selected.SEPARATOR-- Acts as a separator (often a bar) between groups of items; this item has no function.
Listing 2. Methods to create ToolBars
protected ToolBar createVToolBar(Composite parent, int style) {
return new ToolBar(parent, style | SWT.VERTICAL);
}
protected ToolBar createHToolBar(Composite parent, int style) {
return new ToolBar(parent, style | SWT.HORIZONTAL);
}
|
Listing 3. Method to create a ToolItem
protected ToolItem createToolItem(ToolBar bar, int style, String text,
Image image, String tooltip,
SelectionListener listener) {
if (image != null && (text == null && tooltip == null)) {
throw new IllegalArgumentException("image only items require a tool tip");
}
ToolItem ti = new ToolItem(bar, style);
if (image != null) {
ti.setImage(image);
}
else {
if (text != null) {
ti.setText(text);
}
}
if (tooltip != null) {
ti.setToolTipText(tooltip);
}
if (listener != null) {
ti.addSelectionListener(listener);
}
return ti;
}
|
Most operating systems provide a special form of tool bar often associated with the system status area called a Tray. You cannot construct a Tray; you must use
Display.getSystemTray() to access the Tray. Like with ToolBars, trays containTrayItems. TrayItems have no style options and generally work like the PUSH ToolItem form.A CoolBar is like a ToolBar, except that the user can rearrange the CoolItems in the bar by dragging dividers between CoolItems. CoolBars also allow more control of how the CoolItems in the bar are wrapped and the order in which its items are displayed. CoolBars only support the
FLAT (or NONE) styles. CoolItems only support the DROP_DOWN style. Unlike ToolItems, CoolItems have associated controls that actually implement the items' GUI. Without this control, the CoolItem has no function and typically no visual realization. This control should have a ToolTip.The following two listings show the code to create CoolBars and CoolItems, respectively. Note that only horizontal CoolBars can be created.
Listing 4. Method to create a CoolBar
protected CoolBar createCoolBar(Composite parent, int style) {
return new CoolBar(parent, style);
}
|
Listing 5. Method to create a CoolItem
protected CoolItem createCoolItem(CoolBar bar, int style, String text,
Image image, SelectionListener listener) {
CoolItem ci = new CoolItem(bar, style);
if (text != null) {
ci.setText(text);
}
if (image != null) {
ci.setImage(image);
}
return ci;
}
|
The following listing shows how to use this code to create a CoolItem and an associated control. In this example, a menu that pops up when the CoolItem's control is selected, as shown in Figure 2 below. Note that the CoolItem, the button, and the menu all use the CoolBar as the parent. Also note that the text of the CoolItem is not shown; only the associated control is shown.
Listing 6. Example creation of a CoolItem
CoolBar cb = createCoolBar(..., SWT.FLAT);
: // other CoolItems
CoolItem ci = createCoolItem(cb, SWT.FLAT, "Drop", null, null);
Button b = createButton(cb, SWT.PUSH, "Press Me 1", null, new SelectionAdapter() {
public void widgetSelected(SelectionEvent se) {
menu.setVisible(true);
}
});
ci.setControl(b); // associate Button with CoolItem
Menu m = new Menu(cb);
createMenuItem(m, SWT.PUSH, "Item 1", null, '1', true, null);
createMenuItem(m, SWT.PUSH, "Item 2", null, '2', true, null);
createMenuItem(m, SWT.PUSH, "Item 2", null, '3', true, null);
: // other CoolItems
|
Figure 2. CoolItem example
SashForms
Oftentimes, you might want to devote a varying amount of screen space to some part of your applications GUI. In the third installment of this series, "How to use TabFolder, Canvas, and StyledText," I showed how this can be done with TabFolders. In this installment, I show an alternate method using SashForms.A SashForm shows several (often two) controls with a dividing Sash between them. You can move this sash to divide the screen space between the controls. Note that in most cases, the controls in a SashFrom are Composites. For best usability, the Composites should have borders to make the Sash more visible. SashForms may be nested in other SashForms (directly seems to work the best) to create quite intricate methods to divide space. SashForm is in the
custompackage.SashForms must be defined as one of two mutually exclusive styles:
HORIZONTAL-- Horizontally oriented elementsVERTICAL-- Vertically oriented elements
SMOOTH style that, when present, makes the movement of the sash more fluid.The following listing shows the code to create SashForms.
Listing 7. Methods to create SashForms
protected SashForm createSashForm(Composite parent, int style) {
SashForm sf = new SashForm(parent, style);
return sf;
}
protected SashForm createVSashForm(Composite parent) {
return createSashForm(parent, SWT.VERTICAL);
}
protected SashForm createHSashForm(Composite parent) {
return createSashForm(parent, SWT.HORIZONTAL);
}
|
Figures 3 and 4 below show SashForms in action. Figure 3 shows the outer SashForm moved to the right. Figure 4 shows the inner SashForm adjusted to make the center Composite larger. Compare these two figures to Figure 1, which shows the preconfigured position of the Sashes with the outer Sash at 20 percent and the inner Sashes as 33 percent.
Figure 3. SashForm example 1
Figure 4. SashForm example 2
CBanners
CBanners are a special Composite with a custom, predefined layout. They support three controls: Left, Right, and Bottom, all of which are optional; having a Left and Right is typical. Often these controls are ToolBars. CBanners are used in Eclipse to make the main tool area just below the main menu. CBanner is in thecustom package.Like a SashForm, CBanners provide a divider that can be easily moved to divide the space between the Left and Right controls. CBanner has a
setSimple(boolean) method that controls the shape of the divider. If false, the divider takes a widely curved form.The following listing shows the code to create CBanners.
protected CBanner createCBanner(Composite parent) {
return new CBanner(parent, SWT.NONE);
}
|
Figure 5 shows a simple and a complex CBanner.
Figure 5. CBanner example
Links
Links are similar toPUSH buttons, but look more like the text links in a Web browser. Links only support text content. A Link can have plain text or a HTML A tag as its content (of the form some text message). If the A tag syntax is used, the Link looks like a Web link; otherwise, it looks like a Label. Note that Link is available in Eclipse V3.1.The following listing shows the code to create Links.
Listing 8. Method to create a Link
protected Link createLink(Composite parent, String text,
SelectionListener listener) {
Link l = new Link(parent, SWT.NONE);
if (text != null) {
l.setText(text);
}
if (listener != null) {
l.addSelectionListener(listener);
}
return l;
}
|
Figure 6 shows a Link outlined in red.
Figure 6. Link example
Trackers
Sometimes when you resize or move a control, you want to give the user feedback while doing it. A Tracker is used for this purpose. It creates a temporary outline (actually the border of a transparent window over your GUI) that can be moved and sized via keyboard or mouse. When a Tracker is closed, the application typically moves or resizes the associated control to match the position and size of the Tracker. The application can also continuously move or resize the controls to follow the Tracker.The following listing shows the code to create a Tracker.
Listing 9. Methods to create Trackers
protected Tracker createTracker(Composite parent, int style) {
return createTracker(parent, style, null, null);
}
protected Tracker createTracker(Composite parent, int style,
ControlListener cl, KeyListener kl) {
Tracker t = new Tracker(parent, style);
if (cl != null) {
t.addControlListener(cl);
}
if (kl != null) {
t.addKeyListener(kl);
}
return t;
}
|
Figure 7 shows a tracker for the Check button that has been expanded over the right part of the GUI.
Figure 7. Tracker example
Dialogs
The BasicApplication class displays a MessageBox to confirm exiting. This MessageBox is one example of a set of standard dialogs that SWT provides. Some of the other more useful ones are:- FileDialog -- Allows the user to select a file
- DirectoryDialog -- Allows the user to select a directory
- FontDialog -- Allows the user to select a font
- ColorDialog -- Allows the user to select a color value
The following listing shows the code to create all four Dialog types.
Listing 10. Method to created assorted Dialogs
FileDialog fd = new FileDialog(getShell(), SWT.OPEN);
fd.setText("Sample File Dialog");
String path = fd.open();
DirectoryDialog dd = new DirectoryDialog(getShell(), SWT.NONE);
dd.setText("Sample Directory Dialog");
String path = dd.open();
ColorDialog cd = new ColorDialog(getShell(), SWT.NONE);
cd.setText("Sample Color Dialog");
RGB rgb = cd.open();
FontDialog fd = new FontDialog(getShell(), SWT.NONE);
fd.setText("Sample Font Dialog");
FontData d = fd.open();
|
Figures 8-11 show the various Dialogs in action.
Figure 8. File Dialog example
Figure 9. Directory Dialog example
Figure 10. Color Selection example
Figure 11. Font Selection example
댓글 없음:
댓글 쓰기