Docking Framework with JVx application (Swing)

rjahn — Wed, 15 Mar 2017 14:28:26 +0000

In last weeks, we got some inguiries about Docking support in JVx. Our answer was always the same:

JVx itself doesn't offer a Docking API because there are many docking frameworks available and it's super easy to integrate one of them.

But this wasn't the expected answer (for most people) because it wasn't clear enough or it wasn't believed. We said that the integration of any existing library or framework is super easy and super fast because it's usually not more effort than the integration in any other source code. But still....

Let's add some numbers

Integration in our existing JVx application
10 minutes (only one screen) and 30 minutes (the whole desktop)

Docking Framework Evaluation
3 hours (Test code, examples, ...)

Implementing Docking Features
6 hours (because of missing documentation and/or incomplete examples)

So, the integration took not more than 10 minutes, but the missing knowledge of Docking Frameworks was expensive. But this had nothing to do with JVx because getting know-how with frameworks or tools are always expensive.

We tried two different docking frameworks, but found much more: Stackoverflow question

We didn't consider commercial frameworks and inactive projects. Also GPL solutions weren't an option for us.

The first candidate was FlexDock because "the screenshot was impressive".
Our first demo was working but we didn't find any documentation (only one inofficial getting started). The demo application was complete enough but we had some problems because the framework uses a static context for component registration and this was a no-go. The API was simple but unclear/inconsistent in many situations.

We tried the next framework and this was Docking Frames. The last update of this framework was Feb 2017 and documentation is available. The tutorials are good and more than enough. The framework itself is super powerful but the API.... (oh my good). There is a core API and a common API. You shouldn't use the core API and work with common API instead. After some hours we had all our features working, but the documentation is soo complex and all examples are really complex. Long story, short: Very powerful but not easy to understand.

We took a simple demo application and tried to replace a Split Panel, in one of our screens, with dockable panels. After this was done, we replaced the whole MDI desktop (internal fames) with a dockable desktop (dockable panels).

The result is shown in different videos:

Docking Framework integration (simple Screen)

Docking Framework integration (frame and tab mode)

And the whole use-case, with replaced MDI desktop:

Docking Framework integration (desktop mode)

And, finally I want to show you the source code of our changes:

/** the data table. */
private NavigationTable tableElegantdock =new NavigationTable();
/** the details group. */
private UIGroupPanel groupPanelElegantdock =new UIGroupPanel();
/** the docking control. */
private CControl ccontrol;
private void initializeUI() throws Throwable

{

    ...
    ccontrol = new CControl();

    ccontrol.putProperty(StackDockStation.TAB_PLACEMENT, TabPlacement.TOP_OF_DOCKABLE);

    DefaultSingleCDockable dock1 = new DefaultSingleCDockable("data");

    dock1.setTitleText("Data");

    dock1.setMinimizable(false);

    dock1.setExternalizable(false);

    dock1.add((Component)tableElegantdock.getResource());
    DefaultSingleCDockable dock2 = new DefaultSingleCDockable("detail");

    dock2.setTitleText("Details");

    dock2.setMinimizable(false);

    dock2.setExternalizable(false);

    dock2.add((Component)groupPanelElegantdock.getResource());
    CGrid cgrid = new CGrid(ccontrol);

    cgrid.add(0,  0,  1,  1, dock1);

    cgrid.add(1,  0,  1,  1, dock2);

    ccontrol.getContentArea().deploy(cgrid);

    dock1.setVisible(true);

    dock2.setVisible(true);
    add(new UICustomContainer(ccontrol.getContentArea()), UIBorderLayout.CENTER);

The relevant code for JVx integration (will only work for JVx' swing UI):

dock1.add((Component)tableElegantdock.getResource())

Use the JVx resource (JPanel) and add it as component.

dock2.add((Component)groupPanelElegantdock.getResource());

Use the JVx resource (JPanel with a TitledBorder) and add it as component.

add(new UICustomContainer(ccontrol.getContentArea()), UIBorderLayout.CENTER)

Adds the dock control to the screen as custom container. This class connects a standard Container with JVx UI.

I won't publish the code for the desktop replacement because it's the same again with different variable names.

Blog @ SIB Visions » Docking

Docking Framework with JVx application (Swing)