A new JVx Application Style with Vaadin
Every Java developer heard "Write once run anywhere" more than once. But exactly this is what JVx stands for.
Write your application only once and run it on your desktop, as Java application in your browser, as Java Webstart application or as HTML5 application in your browser. Oh, and why not... run it as native application on your mobile devices. Everything is possible and was successfully tested with JVx.
As a rule, don't create more than one application for all that platforms. And there's no need to change your source code, to run your application on one or all of those platforms. One code base for all platforms!
If you'll create a simple application, it will look like one of these:
 JVx SwingUI (Browser) |
 JVx SwingUI (Desktop) |
The left screenshot shows a JVx application started as Java application in your Browser. On the right is the same application as desktop version. This was cool some years ago, but isn't nowadays - isn't it?
Nowadays you need a modern web application that runs in your browser without plugins.
We don't think so, because web UIs should be simple and clean.
What do you think about following screenshot:
JVx VaadinUI
Trust me, it's not a fake. It's the same application as above, but started with JVx' VaadinUI and a different application style. Isn't it amazing?
Are you curious? Interested in other screenshots?
No problem:
 Contacts |
 Application Login |
(Thanks to Vaadin Dashboard demo application for the inspiration)
I'm thrilled and what about you?
As I told you, all screenshots were from the same application and without code changes! This is possible because of JVx' single sourcing principle. One great feature and a big advantage of JVx is that it doesn't hide the underlying technology from you. If you want use technology specific components or features, just do it. But be aware, if you use technology dependent things you should check the technology first, to be still technology independent and avoid problems!
Sounds confusing?
A simple example should explain what I meant. In our example we'll show a standard Vaadin window in our application.
Window winLogin = new Window();
winLogin.setContent(new CssLayout());
winLogin.setPrimaryStyleName("jvxwindow");
winLogin.setWidth("200px");
winLogin.setHeight("200px");
winLogin.center();
//access the underlying vaadin resource and add the window
((UI)((UILauncher)getApplication().getLauncher()).getResource()).addWindow(winLogin);
We are still technology independent but above code only works with Vaadin! You always have access to the "real" resource via getResource() but the returned object dependes on the used technology. In our example, the UI.
Another example of technology mixing, directly from our Vaadin integration:
UIMenuBar mbSettings = new UIMenuBar();
UIMenu menSettings = new UIMenu();
menSettings.setImage(UIImage.getImage("/images/gear.png"));
UIMenuItem meniChangePassword = new UIMenuItem("Change password");
meniChangePassword.eventAction().addListener(this, "doShowChangePassword");
menSettings.add(meniChangePassword);
mbSettings.add(menSettings);
vlayout.addComponent(((WrappedMenuBar)mbSettings.getResource()).getMenuBar());
We created a Menu with JVx and added the menu to a standard Vaadin VerctialLayout. The advantage is that we can use JVx' event concept instead of Vaadin' listener concept. How?
Did you see following statement:
This means every click on the menu item calls the method doShowChangePassword of object this. If you want the same result with Vaadin listeners, you have to do following:
MenuBar.Command cmdChangePassword = new MenuBar.Command()
{
public void menuSelected(MenuItem selectedItem)
{
doShowChangePassword();
}
}
MenuBar.MenuItem miSettings = menubar.addItem("Settings", null, null);
miSettngs.addItem("Change password", null, cmdChangePassword);
Technology mixing works in both directions. It's so great!
One of the best features of JVx with Vaadin is the usage of CSS. It has never been easier to style your application. Set CSS directly via css file or programmatically via Vaadin API.
Expect amazing results!
Development | rjahn | 30/03/2013 | 
Comments (0)
RSS-Feed