VisionX, JVx and native Vaadin
If you create an application with VisionX, it's always a JVx based application. You get all advantages of JVx and its GUI independency, but sometimes the GUI indepency is not important and you want to use native GUI controls in your JVx application because JVx doesn't contain the GUI control or you need a commercial control. This is a very simple use-case and it's not a problem to mix JVx components with native components. We have different examples, with different GUI technologies, for this use-case.
Here are some links:
- User defined Components
- JavaFX, JVx, CalendarFX and Exchange Server
- JVx Reference, Custom Components
- JVx Reference, Resource and UIResource
But we don't have a link for our Vaadin implementation. But no problem, here it is!
Simply create a new application with VisionX and a dummy screen like this one:
Simple screen
The screen contains a simple table and two editors. Nothing special. Now we want to add a custom Vaadin component in the empty space. It doesn't matter which component you use. Every vaadin component or AddOn component can be used. JVx doesn't do specific things, it's only an UI abstraction layer.
So, lets add an Accordion to the screen:
Integrated Accordion
The Accordion component is a standard Vaadin component, simply added to the screen. But more... Do you see the "Show Vaadin Notification" Button? This is a standard JVx component. So we mix native vaadin components with standard JVx components and get the full power of both. One advantage of the JVx components is that the automatic translation works without additional hacks, or what about JVx' layouts, event handling, ...
Interested in the source code?
No worries, it's super simple to understand 
Lets have a look at the custom code:
butNotification.eventAction().addListener(new IActionListener()
{
public void action(UIActionEvent arg0) throws Throwable
{
Notification noti = new Notification("Message",
"Description", Type.WARNING_MESSAGE);
noti.setDelayMsec(2000);
noti.show(Page.getCurrent());
}
});
UIFormLayout flJVxPanel = new UIFormLayout();
UIPanel panJVxPanel = new UIPanel();
panJVxPanel.setLayout(flJVxPanel);
panJVxPanel.add(butNotification);
if (getApplication().getLauncher().isWebEnvironment())
{
Accordion acc = new Accordion();
acc.setHeight(100.0f, Unit.PERCENTAGE);
for (int i = 1; i < 8; i++)
{
if (i >= 2)
{
final Label label = new Label("Welcome sheet!", ContentMode.HTML);
label.setWidth(100.0f, Unit.PERCENTAGE);
final VerticalLayout layout = new VerticalLayout(label);
layout.setMargin(true);
acc.addTab(layout, "Tab " + i);
}
else
{
groupPanelOverview.add(panJVxPanel);
acc.addTab(((Component)panJVxPanel.getResource()), "Tab " + i);
}
}
groupPanelOverview.add(new UICustomComponent(acc), formLayout1.getConstraints(0, 2, -1, -1));
}
The Accordion source code was copied from Vaadin Sampler:
sample.setHeight(100.0f, Unit.PERCENTAGE);
for (int i = 1; i < 8; i++) {
final Label label = new Label(TabSheetSample.getLoremContent(), ContentMode.HTML);
label.setWidth(100.0f, Unit.PERCENTAGE);
final VerticalLayout layout = new VerticalLayout(label);
layout.setMargin(true);
sample.addTab(layout, "Tab " + i);
}
So, what are the most interesting parts in our code?
First, we add the JVx panel to another JVx panel. This is important to get support for translation. If it's not important for your, simply ignore the line:
The groupPanelOverview is a simple UIGroupPanel with UIFormLayout:
UIGroupPanel groupPanelOverview = new UIGroupPanel();
groupPanelOverview.setText("Overview");
groupPanelOverview.setLayout(formLayout1);
groupPanelOverview.add(labelName, formLayout1.getConstraints(0, 0));
groupPanelOverview.add(editOverviewName, formLayout1.getConstraints(1, 0));
groupPanelOverview.add(labelDescription, formLayout1.getConstraints(0, 1));
groupPanelOverview.add(editOverviewDescription, formLayout1.getConstraints(1, 1, -1, 1));
Our JVx button will be added to the native vaadin Accordion with following code:
We don't add the JVx component itself, we use the wrapped resource. This is a simple vaadin component: com.vaadin.ui.Button
And finally, we add the Accordion as custom component to our JVx group panel:
This code:
is important for VisionX because the vaadin components aren't available in Swing, so we use this check for the supported environment.
So far, we mixed native vaadin components with JVx components. It's super easy to use, isn't it?
But it's also possible to use CSS for JVx components:
Css style for Button
The button got the friendly style, which is defined in Vaadin CSS. Check some examples.
To add the friendly style class to the JVx button, simple add:
This example is using predefined CSS from vaadin. It's also possible to set custom styles in your own css file. Simple follow this instructions.
This article covered the integration of native vaadin components into an existing JVx application with all advantages of vaadin.
Development | rjahn | 10/01/2018
RSS-Feed