Time for action – using layouts

Now that the ClockWidget has been created, multiple instances can be added into the ClockView.

1. Modify the createPartControl method in the ClockView class to create three ClockWidget instances, and assign them to local variables:

   final ClockWidget clock1 = new ClockWidget(parent, SWT.NONE);
   final ClockWidget clock2 = new ClockWidget(parent, SWT.NONE);
   final ClockWidget clock3 = new ClockWidget(parent, SWT.NONE);

2. Run the target Eclipse instance, and show the Clock View. Three clocks will be shown, counting in seconds:
   
3. At the start of the ClockView class's createPartControl method, create a new RowLayout with SWT.HORIZONTAL, and then set it as the layout on the parent Composite:

   public void createPartControl(Composite parent) {
     RowLayout layout = new RowLayout(SWT.HORIZONTAL);
     parent.setLayout(layout);

4. Run the code again now, and the clocks will be in a horizontal row:
   
5. Resize the view; the clocks will flow into different rows:
   

   Note

   The RowLayout has a number of fields that can affect how widgets are laid out:

   • center: If components are centered (vertically or horizontally)
   • fill: If the entire size of the parent should be taken up
   • justify: If the components should be spaced so that they reach the end
   • pack: If components should get their preferred size or be expanded to fill space
   • wrap: If the components should wrap at the end of the line

   There are also options to control any pixel spacing between elements (spacing) and any margins at the edge (marginHeight and marginWidth, or ones that can be specified individually such as marginTop, marginBottom, marginLeft, and marginRight).

6. Every SWT widget has an optional layout data object, which is specific to the kind of layout being used by its containing parent. In the ClockView method createPartControl, add a RowData object to the clocks with a different size:

   clock1.setLayoutData(new RowData(20,20));clock2.setLayoutData(new RowData(50,50));clock3.setLayoutData(new RowData(100,100));

7. Open the Clock View, and the clocks will be shown in increasing size:
   

What just happened?

A Composite is capable of handling multiple widgets, and the job of deciding where to put these components is performed by the associated LayoutManager. The standard layout managers include FillLayout, RowLayout, GridLayout, FormLayout, and CellLayout. The default for Eclipse views is to use a FillLayout, though a manually created Composite has no associated layout by default.

Both FillLayout and RowLayout create a horizontal or vertical set of widgets with controlled sizes. The FillLayout is the default for views and expands the size of the widgets to the space available. RowLayout will set the component's sizes to their default as calculated by computeSize(0,0).

Layout managers have different properties, such as SWT.HORIZONTAL and SWT.VERTICAL, and to change how elements are wrapped if the row gets full. The documentation for each layout manager has information as to what it supports.

Layout data objects are used to specify different values for objects within the Composite. The preceding example looked at the RowData options.

The corresponding FillData class for the FillLayout has no public fields. Other layout managers such as GridLayout have more extensive customization options in the GridData class. Remember that when changing a LayoutManager, the associated layout data objects will need to be modified accordingly.

Pop quiz: understanding views

Q1. What is the parent class of any view in the Eclipse 3.x model?

Q2. How do you register views with the Eclipse workbench?

Q3. Which two arguments are passed into every SWT widget and what are they for?

Q4. What does it mean for a widget to be disposed?

Q5. How do you draw a circle on a Canvas?

Q6. What listener do you have to register to execute drawing operations?

Q7. What happens if you try and update an SWT object from outside a UI thread?

Q8. How do you update SWT components from a different thread?

Q9. What value is SWT.DEFAULT used for?

Q10. How do you specify a specific size for a widget in a RowLayout?

Have a go hero – drawing hour and minute hands

Now that the clock view is animating a second hand, do the same calculation for the hour and minute hands. Minutes will be calculated the same way as seconds; for hours, multiply the hours by 5 to map onto the same path.

Draw lines for every five minutes using the drawLine method. Some simple math will be required to calculate the start and end points of the line.

Finally, draw the text lettering for the numbers in the right locations. The drawText method can be used to place a string at a particular place. Use this to print out the current time in the center of the clock, or print out the date.