Our new UI implementation for JVx is code complete. We did implement all necessary JVx interfaces and many cool features. Compared to our old web UI, based on GXT (extJS), the new one is back to the roots - back to Java. We use Vaadin 7 as rendering engine and are happy with the Apache 2.0 license.

The old web UI didn't have a tree implementation and the chart engine was based on Flash. Our new JVx Vaadin UI has a tree implementation and it supports Vaadin charts. Oh and another cool thing is the out-of-the-box support for mobile devices. This wasn't really cool with old web UI.

I wanna show you some screenshots with a really cool JVx application:

Charts

Tree

The application is a JVx application but with some CSS.
The same application - as desktop version, looks like a standard swing application (started with Swing launcher):

Charts (swing)

Tree (swing)

We didn't change the source code of the application to run it as Vaadin application and as Swing application. The only difference was the configuration via web.xml for Vaadin and start parameters for swing.

The source code of JVx Vaadin UI is available, but we need some time to review the code before we release the binaries.

Most of you know JVx as a full-stack application framework. You use it for creating backend applications or for your ERP applications. It offers different UI implementations for Desktops, Mobile Devices and Web Browsers. It has so many productivity features and now there is one more:

Yes, you read right - a whole application!

How it looks like?

JVx as Vaadin Portlet

It's not a fake, it's the well known Contacts screen from our Showcase application. We didn't change the source code to run the screen as Portlet! As you can see, we didn't use menus or toolbars, only one screen. A Portlet should be simple because Liferay offers menus and site navigation.

How it works?

Use your existing application, bundle it together with JVx.vaadin and configure the Portlet Launcher in your deployment descriptor. You need some additional configuration files for liferay, but there's no difference between your current Portlets and a Portlet for a JVx application.

Everything you need is Open Source and released under Apache License 2.0, but we don't have detailed documentation at the moment. Support us with your contribution!

Boost your productivity

If you develop a lot of different Portlets for your customers and won't waste time for XML file creation, simply use VisionX. It has a WYSIWYG UI editor and creates your database model on-the-fly. It is your pain killer!

It offers Liferay Portlet creation with 4 mouse clicks. Don't create everything manually and save time - Use VisionX!

VisionX Screen Design

We've used VisionX to demonstrate the creation of above contacts screen. We spent 5 minutes to create a complete application, with database model, user management and Liferay Portlet deployment. We were amazingly fast!

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.

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:

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:

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!

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

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...

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 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...

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

The integration of Exchange servers is or could be very important for ERP applications. If you use Exchange to manage your contacts, appointments, task, etc. wouldn't it be great to manage or integrate your data in your application(s), directly without copying?

The problem is not the integration in your application, the problem is how you get data from your Exchange server. There are some commercial Java products available but you don't need commercial products since Microsoft offers EWS Java API. The API is very simple and communicates via SOAP to your Exchange server. The documentation is good for a quick start but you have to read source code if you want to know some details.

We made it simple for your JVx applications to integrate an Exchange server, because we did implement storages for Contacts and Contact folders (more will follow). With our storages it's a breeze to enrich your application. Create a storage in your life-cycle object like all other storages:

That's enough to read and write contacts.

If you work with contact folders, simply use our storage for it:

Our storages support load-on-demand and filtering via Exchange functionality. The folder storage supports shared folders!

It's straight forward to create a master/detail relation between folders and contacts. We developed a simple sample application.

Exchange Contact Management

And the best for last: Our storages are licensed under Apache 2.0.

The source code is available in our new project: JVx Storages.

If you want to know how we created our Maven Archetype for JVx, simply check the source code. The project is Open Source and licensed under Apache 2.0.

The project contains a simple ANT build with two important targets. The first is start.complete. This target creates the archetype archive and deploys it to our sonatype repository. The second target is start.recreate. This target is very cool because it cleans the archetype project (mvn clean), installs the archetype in your local repository (mvn install) and creates a new project based on the installed archetype (mvn archetype:generate).

Usually, you have to use scripts, the command-line or external tools to do all your tests. We automated the whole process. Our build uses the maven integration for ant.

The integration tasks were a little bit strange but after some tests we made it working. The trick was that the build.xml and pom.xml files must be stored in separate folders. Otherwise project creation based on an archetype didn't work.

JVx is available in all public Maven repositories and we added a JVx Application Archetype that creates the whole project structure for you. Use our archetype and you'll get a full configured JVx' Application - in few seconds.

The archetype:

Use your preferred IDE to create your JVx project. The archetype will create 4 new Maven projects. The first project is the master project. It references 3 modules. The first module is the client, the second one is the server and the third one is a war module.

The client module/project contains all UI relevant classes like Application and Screens. The server module/project contains the business logic of your application. The war module/project creates a full functional web application archive (war) and allows you to publish your application with Eclipse WTP.

The client project contains a preconfigured JVx Application with one simple work-screen. It contains the class MainApplication which contains a main method. Simply start MainApplication and login with username (admin) and password (admin). The application doesn't need a database because it uses a XmlSecurityManager and an AbstractMemStorage. It only is an example application and not for production use!

Use the war project to create deployable war files. We've used it successfully with e.g. Tomcat. After deployment, simply open the application URL - http://localhost/firstapp - (replace firstapp with your application name) and login. The application is also available via JNLP - http://localhost/firstapp/application.jnlp.

If you want to test your desktop application with your application server, e.g. Tomcat with Eclipse WTP, simply change the connection in your application. The default connection is a DirectServerConnection. This means that client and server run in the same VM. If you change the connection to HttpConnection, a remote server will be used. An example is available in the application source code.

The JVx Application Archetype creates a full functional 3tier application. It's preconfigured to run as desktop application and with an application server like Tomcat. Don't think about project creation and directory conventions. It simply works!

Have a look at an example project:

Standard application

Eclipse projects

Watch following video to see how it works: