Identify SWT and JFace widgets on picture

Question

I created this mockup (see below), using the usual java look and feel, which I know as user. Now I want to implement this mockup, by using SWT, JFace, Eclipse RCP.

Notes:

The NVV/RMV/KVG/RKH on the left should behave according to the accordion pattern
The Tabs NVV, RMV, KVG are parent Tabs of Module, Manage Layouts Tabs.
The Tree Menu on the left opens Tabs on the right

Questions:

Which SWT/ JFace Classes should I use, to implement this mockup?
Do you see any problems in this mockup? (regarding different Implementation, usability etc.)

Mockup

You have that NVV/RMV... headers on the left side. What should be their behaviour? — Adam Arold, Jul 30 '12 at 07:56
The NVV/RMV/KVG/RKH should behave according to the accordion pattern, as implemented here: http://www.normansblog.de/demos/simple-jquery-accordion/ — Skip, Jul 30 '12 at 08:30
ExpandBar is for you then. It is not resizing itself though. — Adam Arold, Jul 30 '12 at 08:55
The accordion you showed me is changing its height. The ExpandBar's height is precalculated as far as I know. — Adam Arold, Jul 30 '12 at 09:03
Ah, you mean the JS implementation :) I understand, thank you! — Skip, Jul 30 '12 at 09:08

Adam Arold · Accepted Answer · 2012-07-30T08:17:57.450

Most of the widgets you specified are readily available in the Eclipse RCP framework.

First of all you should check out some tutorials here: vogella tutorials

In addition to that I strongly advise you to use WindowBuilder so you can design GUIs rather easily: WindowBuilder

For the tab folders (NVV/RMV...) on the top you can use TabFolder and TabItem like this:

     tabFolder_1 = new TabFolder(this, SWT.NONE);
     tbtmNvv = new TabItem(tabFolder_1, SWT.NONE);
     tbtmNvv.setText("NVV");
     tbtmRmv = new TabItem(tabFolder_1, SWT.NONE);
     tbtmRmv.setText("RMV");

this stands for the parent Composite in my code. TabFolders work by placing a Control inside them just don't forget to call the setControl method to make its content visible. TabFolders can be nested into each other. Alternatively you can use RCP View-s for your top level tabs.

For the table in the middle you can use JFace components namely the TableViewer like this:

    tableViewer = new TableViewer(tabFolder_1, SWT.BORDER | SWT.FULL_SELECTION);
    table = tableViewer.getTable();
    table.setLinesVisible(true);
    table.setHeaderVisible(true);
    tbtmRmv.setControl(table);

    tableViewerColumn = new TableViewerColumn(tableViewer, SWT.NONE);
    tblclmnMyCol = tableViewerColumn.getColumn();
    tblclmnMyCol.setWidth(100);
    tblclmnMyCol.setText("My col");

If you want to know how to bind data to your tables you should check out the tutorials I mentioned above.

For accordions you can use the ExpandBar like this:

    expandBar = new ExpandBar(this, SWT.NONE);

    xpndtmItem = new ExpandItem(expandBar, SWT.NONE);
    xpndtmItem.setText("Item 1");

    xpndtmItem_1 = new ExpandItem(expandBar, SWT.NONE);
    xpndtmItem_1.setText("Item2");

or a TreeViewer:

    treeViewer = new TreeViewer(composite, SWT.BORDER);
    tree = treeViewer.getTree();
    tree.setHeaderVisible(true);
    tree.setLinesVisible(true);

You can also place TreeViewers in your ExpandBar.

As for the layout I usually stick with GridLayout which is a good all-rounder.

Briefing you on how to use those components/layouts is out of the scope of an SO answer I'm afraid, but you can always check the tutorials I linked, they will help you in your endeavours in Eclipse RCP.

Identify SWT and JFace widgets on picture

1 Answers1