This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information

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 (Browser)

 
JVx SwingUI (Desktop)

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.

Does anybody know what MDI means and do you think MDI is convenient for modern web applications?

We don't think so, because web UIs should be simple and clean.

What do you think about following screenshot:

JVx VaadinUI

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

Contacts

 
Application Login

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.

//com.vaadin.ui.Window
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:

VerticalLayout vlayout = new VerticalLayout();

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:

meniChangePassword.eventAction().addListener(this, "doShowChangePassword");

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 menubar = new MenuBar();

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!

JVx with JavaFX and Vaadin and Exchange appointments

Wow, what a title :)

Some weeks ago, I blogged about JVx with Exchange servers. The project now supports Appointments and Tasks.

To demonstrate some features, we created an application that integrates powerful frameworks. We took Vaadin with Calendar AddOn, JavaFX' webview and integrated all together in a standard JVx application.

Take a look:

JVx + JavaFX + Vaadin + Exchange

JVx + JavaFX + Vaadin + Exchange



Did you notice that the calendar is a JavaFX WebView?

Our exchange storages still use the EWS Java API but now with some tweaks.
More information will follow in other posts...

Welcome - JVx Vaadin UI

I'm happy to show you first impressions of our upcoming Vaadin UI for JVx :)

What is JVx Vaadin UI?

It's cool. It's modern. It's fantastic. It's the replacement of our GXT WebUI and it's back to the roots - back to Java.
Simply use your existing JVx applications and use Vaadin as UI technology.

Not clear enough?

Develop your application with JVx and start the application as Desktop application with Swing or simply run the same application with Vaadin. There's no need to change your application if want another UI technology!

GXT WebUI vs. VaadinUI?

The big difference between our existing WebUI (based on GXT) and Vaadin UI is that you can extend your application easily with Vaadin AddOns, if you want. Use the whole Vaadin universe to enrich your web application, but use JVx to be UI technology independent. There's no need to code JavaScript.

The license of Vaadin is great for business applications and 3rd party extensions.

We'll post more details about our Vaadin UI, but now it's time for some impressions. We used our good old showcase application with a picture of Hans:

JVx with Swing

JVx with Swing

 
JVx with Vaadin

JVx with Vaadin

Above images show exactly the same JVx application. The Vaadin version still looks like a desktop application and we're planning a new application style for web applications because MDI is not really cool in browsers...

JVx with Codenvy (Cloud-IDE)

What is Codenvy?

In short, an IDE as online service or - with buzzwords - a cloud IDE. Some of the first questions were:

  • Who needs a cloud IDE?
  • Does a cloud IDE has enough features?

The answer to the first question could be: Developers without knowledge of environments. A cloud IDE simply runs, preconfigured with a compiler, preconfigured with a VCS, preconfigured build and or CI, deployment with one or two mouse clicks. If a developer does not know how he could configure all this things manually or with his IDE, he is a potential user of cloud IDEs.

As real software developer, you love your desktop IDE because it has all features... but some years ago, before we had Eclipse, Netbeans, IntelliJ or other IDEs, we used text editors and started compilers with scripts. I mean that features are relative because they will be more - it's a matter of time and number of users.

Another question was: Does it make sense to develop in the cloud?

It depends :)
If you develop web applications for end-users, you won't have problems with SLAs or confidentiality agreements? If you develop applications for business customers, you have to comply with contracts and data privacy. If you develop database applications, you must use a database available in the cloud.

If you develop in the cloud you should host everything in the cloud or make everything available in the cloud.

If you use a desktop IDE, you are the boss of updates and plugins. If you use a cloud IDE, the provider is the boss and updates whenever it's important or changes functionality whenever he wants. But you are always up-to-date.

An IDE in the cloud should be available on any device but is this important? Do you develop with your mobile device while sitting in your living room?

One fact is, that development in the cloud, is not as fast as local development (of course, if your environment is set up properly). Every task takes time and the performance of a Browser with Javascript is not really comparable to a native application, even if you you use Chrome. And another big disadvantage is that you can't change the environment. If you want to try different compilers, a different maven version or if you need a completely different project layout you'll have bad luck with cloud IDEs. If you want a new feature or different packages, you have to ask the provider for support.

I think that cloud IDEs are not an option for "pro" developers, but not every developer is a pro developer or needs much knowledge about complex environments. If a developer is more or less a "user", a cloud IDE will be an option.

What is a "user" developer?
(It's nothing bad!)

A developer without knowledge of environment configurations, without knowledge of build/CI systems. A developer that does not develop libraries or frameworks. Often a "pro" developer is also a "user" developer.

What has all this to do with JVx?

The creation of JVx applications should be as simple as possible and it should still be as simple as possible with cloud IDEs. Since we fully support Maven and have a JVx archetype, the creation of JVx applications - with standard IDEs - is very comfortable and super fast. We decided to try-out Codenvy because it looked very professional and had a clean GUI (similar to Eclipse). We tried Orion and had a bad feeling because it was a little bit hard to find out how it works, and finally it doesn't support pure Java projects (it currently supports JavaScript). The current Orion (2.0) IDE is more like a (very modern) remote file editor with JavaScript syntax highlighting and syntax check.

If a developer decides to use a cloud IDE, the IDE should be easy to use without a high learning curve (c'mon it's an IDE not a new programming language).

Our experiment with Codenvy

The IDE is free for open source projects (great for JVx) and so it was perfect for our tests. Our plan was to create a simple JVx application and run it in the cloud.

The IDE supports some project types and all are based on Maven because the build system uses Maven. It's possible to use preconfigured runtime platforms like Cloudbees. One problem is that it's not possible to create a project from scratch and add a target later. You must choose your target during project creation. Another problem is that it's not possible to use runtime platforms with Multi-module maven projects.

We decided to use the integrated runtime platform and didn't use another runtime platform. Not perfect but was OK for our tests.

We created a Multi-module Maven project and configured our modules. This was very easy with the IDE and build worked like a charm. Other problems were different restrictions dependent on your project type. It is not possible to Run a Multi-module maven project. It's possible to change the project type via properties, but that's not a good solution because it was not designed for tweaking. The next strange thing was that the UI has a lot of reload problems (endless reloads) and you have to close and open your project(s) to get full UI features for your project. The Run menu was not updated automatically.

The biggest problem was that the build system didn't build our project as usual or known from desktop IDEs. We had to find out how it works to deploy our application. The right build order solved our deployment issues.

At the end the deployment worked and it was possible to develop with the cloud IDE. One really big problem was that the integrated Java Editor did not show problems or code completition for our project. It worked with different project types but not with ours.

The IDE was easy to use because of many restrictions and assumptions how development should be, but it's absolutely not comparable with current desktop IDEs. Not because of missing features, it's because of given structures (predefined structures are important but sometimes they must be changeable).

At the end of our experiment, we had a working JVx application - developed in the cloud and deployed in the cloud.
Our project is available on github with some installation and usage instructions.

The result looks like:

JVx and Codenvy

JVx and Codenvy