SWT-based Sash and FormLayout-based custom separation forms

This article does not conduct in-depth research on SWT, but just introduces some tips. You can familiarize yourself with some SWT widgets and Layout by building a custom separated form.

Those who have used Swing should know that there is a separate form in Swing called JSplitPane, which can provide two separate forms: Left and Right, or up and down, in addition, you can adjust the size of two forms by dragging the bar in the middle. The drag bar also provides a button to directly maximize a form or directly divide the two forms equally. The SashForm component corresponding to SWT can also implement left and right drag, but it does not provide the shortcut keys. It is not easy to implement this function by inheriting SashForm, here I use the Sash and FormLayout of SWT to implement a split form similar to Swing JSplitPane.

Let's take a look at our final implementation:

 

Well, let's start designing the split form together. First, perform a simple analysis:

1. We need two Composite to store components of different forms;

2. We need a drag-and-drop lever to use the Sash component provided by SWT;

3. A Composite that stores buttons, and must be synchronized with the drag bar during the drag process;

4. The left-side and up-and-down separation modes are provided.

 

Everything starts with dragging, so what is Sash? The SWT document says this:

Instances of the specified er represent a selectable user interface object that allows the user to drag a rubber banded outline of the sash within the parent control.

Styles:

HORIZONTAL, VERTICAL, SMOOTH

Events:

Selection

That is to say, Sash can drag and drop in its Parent container and generate the feedback of the stripe line, including the Selection event. So we can design it like this. We can receive the Selection event of Sash and adjust the size of the Left or right or the upper and lower forms to meet our needs. How can we calculate the size of two forms? It is best to start with the layout component. Using the powerful FormLayout of SWT, You can flexibly implement rich layout effects.

Why is FormLayout used? What functions does it provide? I will only give a brief introduction here. For details, refer to SWT documents or other network documents. You can use FormLayout and the corresponding FormData to locate the components in the layout and the relative offset. The relative distance and offset are determined by defining top/bottom/left/right of FormData, the class is FormAttachment. With FormLayout and the corresponding FormData, this provides the foundation for layout calculation of the form after we drag Sash. How can we set FormData for each component in SplitPane?For example:

 

① Left form. The distance from the left side of the parent container is 0. For the right side, see SashBar.
② Right form. The distance from the right side of the parent container is 0. For the left side, see SashBar.
③ Sash, that is, our drag bar. On the left side, see SashBar and shift 5 pixels to the left (so that Sash will stack on SashBar). On the right side, there is no reference and the width is set to 3.
④ SashBar, that is, the Composite storing buttons, has no reference between left and right (the reference distance between left and right should be dynamically determined when receiving the Selection event of Sash ), the distance from the top of the parent container is 50% of the total height, and the height of half SashBar is shifted upwards. This ensures that SashBar is centered vertically.

After the layout is defined, the next thing to do is to feedback the Selection event of Sash to the FormData of SashBar, because SashBar is the reference center of all other components and is centered around it.

1 sash. addSelectionListener (new SelectionListener (){
2 public void widgetdefaselecselected (SelectionEvent e ){
3 widgetSelected (e );
4}
5
6 public void widgetSelected (SelectionEvent e ){
7 FormData data = (FormData) sashBar. getLayoutData ();
8 Rectangle rect = sashBar. getParent (). getBounds ();
9
10 data. left = null;
11 if (rect. width-e. x <= 7 ){
12 data. right = new FormAttachment (100, 0 );
13 return;
14}
15 data. right = new FormAttachment (e. x, rect. width, 7 );
16
17 sashBar. setLayoutData (data );
18 sashBar. getParent (). layout ();
19}
20 });

 

Each time the Sash Selection event is triggered, the FormData of SashBar is taken out, and the rectangular area of the parent form is obtained. Then, the right part of the FormData of SashBar is reset. the numerator of FormAttachment is set to the X axis coordinate of the mouse, the denominator is set to the width of the rectangular area of the parent container, and the offset to the right is 7 pixels, because e. x is the x axis coordinate of Sash, and the right side of SashBar should be closer to the right side of Sash (Sash is in the middle of SashBar ). In addition, we should ensure that SashBar is not dragged out of the right area, so when the rect is determined. width-e. when x is less than 7, set the right side of SashBar to the limit value on the right side of the parent container, and you cannot move it any more.

In this way, the SplitPane is basically complete, and the rest is how to provide the content of the two forms. I used to define a ContentProvider interface. Two abstract methods are used to construct the content of two forms by the Implementation class. The return value is the ratio of the two windows during initialization. For example, the Left window returns 4, if there is a window that returns 5, the number of windows accounts for 4/9, and the number of right windows accounts for 5/9:

1 public static interface ISashPanelContentProvider {
2
3 public int positiveContent (Composite parent );
4
5 public int negativeContent (Composite parent );
6
7}

 

Through the above method, I believe you should know the basic design concept. Is it very simple? As long as we use our imagination, there are still many useful extension components that can be made. The rest of SplitPane is to improve the peripheral work, such as upper and lower layers, left and right layers, initialization and construction. These functions have been completed in my source code project. I will write this article here, click here to download the source code.