Some days ago, I wrote about our eTV project. The blog post had some pictures but no more details. I want to tell you some details about this project because it's simply awesome.

The project was a research project of our framework team and was started just for fun. The use-case was simple: Our room had 4 walls and 3 were full with pictures and world maps. Only one wall was empty. Why not using a flat TV for showing different content like livestreams, comic strips, images.

The idea was great and some days later, the last wall was full. A nice 43" flat TV was mounted.

We thought that a RaspberryPi could bring the content to the TV because it's a small device and fits behind the TV. Java works without problems on the Pi and JVx as well.

After all hardware pieces were ready, it was time to think about the software because a sort of control center was needed to implement some features. The plan was to write a simple server which has a set of commands like: open website, show image, play livestream, execute command, upload file, download file.

The server was implemented as simple socket server, with JVx. It executes pre-configured commands and has some important control features: take screenshot, next - previous window, get window list, close window. The server has no GUI and is more or less a window/process manager.

The server has no GUI, but we need a GUI to control the server. We wrote a simple JVx application as remote control. The remote control application was deployed on a Jetty application server (on the RasPi, with vaadin UI) and as mobile JavaFX application. Jetty runs fine on the RasPi and our vaadin UI as well.

The TV with RaspberryPi, streaming a Video from YouTube:

eTV YouTube Stream

After we were ready with the server, we tried to create a simple JVx demo application to demonstrate JVx on embedded devices. It was funny to use eTV for live streams or to show images, but what about real-world use-cases?

The idea was about a JavaFX application, running on the RasPi. The application could be a monitoring app for a warehouse with a nice looking frontend and a backoffice view for administration. It's usual to have a nice looking frontend and a not so nice looking backoffice part.

We've implemented an application for a big assembly hall. The application is a styled JVx application but still 100% JVx. We've used VisionX to create the UI:

VisionX design mode		TV mode

The application in VisionX is not 100% the same as on the TV because of the screen resolution, but it's the same source code and VisionX works with this application. The application on the TV hides the application frame and only shows the screen content, but this is a supported feature.

The UI technology is not JavaFX! We tried to use JavaFX but it wasn't possible because the RasPi had performance problems with the amount of nodes. It wasn't possible to reduce the amount of used nodes with standard JavaFX controls. Overclocking the Pi didn't solve the problem.

We simply switched to Swing and didn't have any performance problems. So, the UI technology is good old Swing. It works great in combination with the RasPi and we think the result is also nice!

The application is a monitoring application for different events, like performance, effort, pressure, temperature, aerodynamics, alerts. We did connect a temp sensor and two buzzers to get a better real-world experience and because it was easy to support with a RasPi. Initial setup:

Initial setup

The backoffice/backend was deployed as web application (Jetty on RaspberryPi, JVx vaadin UI) because it should be possible to use it on tablets or smartphones without native apps:

Backend view

The same UI on mobile phones:

Mobile view

Mobile view (no menu)

The application is a 100% JVx application with Swing UI and vaadin UI. Everything runs directly on the RaspberryPi.

We've used the whole eTV system as showcase application at DOAG conference in November:

eTV @ DOAG 2015

The results of our "research project" are awesome and eTV is a ready-to-use product. We didn't code one line of code to support different UI technologies and didn't have problems with resolutions of tablets, smartphones or the TV (#responsive).

Thanks to JVx it was super easy to create an amazing application.

Our (research) projects with JavaFX are almost finished. We have awesome results and everything is production ready. The only drop of bitterness is the performance of JavaFX on desktops and mobile devices, but this can be improved by Oracle. It's not in our hands.

What do we have?

We have

• a complete JavaFX UI for JVx
• a custom application frame for mobile applications
• Live CSS manipulation of installed apps (needs debug build)
• Complete Project export for JavaFX mobile projects (JavaFXPorts based gradle project),
  integrated in upcoming VisionX 2.3
• Remote Work-screen loading (via VisionX)
• JVx server runs without limitations on mobile devices
• JVx client runs on mobile devices (for network clients)

How does it look like?

I have some screenshots from two applications. The first one is a standalone JVx application. The whole JVx framework runs on the mobile device. The app is a remote control for our eTV project (it's a brand new side project of our research team).

The app was inspired by MS Metro style ... Windows8 style ... Modern ... Universal ... Windows Store ... Windows apps.

The main screen has some buttons to control our eTV and some buttons open a "popup" with additional options:

eTV Dashboard		eTV Window view
eTV Gallery

The second app will be shown as Video, because we want to demonstrate how we use VisionX to create backoffice apps in under 5 minutes! The app itself isn't complex and does "nothing special", but the same mechanism works for complex applications like our Demo ERP system (read our Code once. Run anywhere post).

Our JavaFX mobile project was based on the great work of Gluon and their JavaFXPorts OpenSource project and also on RoboVM.

My first steps with WildFly swarm were very successful but I didn't solve my problem completely:

I tried to create a self-contained jar (fat jar) file from an existing war file, with minimal effort. The idea was that our product VisionX could create such jar files with some mouse clicks.

This wasn't possible because the project is in a very early phase, ANT wasn't supported and it wasn't planned.

I solved the problem for my use-case and published the result at github.

The project contains an Eclipse project with an ant task and a fully functional ANT build. It has a dependency to ivy, because ivy was used for dependency resolution. Ivy is not needed if you want to work with a copy of all dependencies, e.g. our VisionX will do this.

The code isn't production ready but it works like a charm. The test war file has 56MB and the created jar is around 78MB.

Just play around with the code

Our next VisionX release will support OpenShift. We wrote about OpenShift and our application test some weeks ago. It was so impressive that we did an integration in VisionX.
VisionX got additional menus and options for OpenShift and it handles complete communication. It's really end-user friendly. Usually, only developers can use OpenShift and create applications for the platform.

OpenShift platform was our preferred platform for VisionX because it has a complete REST API and a simple Java library. Many other platforms don't offer the same quality or are too complex for an integration. OpenShift itself has a simple frontend but it wasn't designed for end-users.

To realize ideas.

Why does and end-user need a website? ... to present itself or products.

Many end-users create Excel sheets or use app builders to realize ideas. The problem is often the deployment because and end-user can't deal with databases, application servers or PaaS providers. The same applies to startups.

VisionX is end-user friendly and enables innovation.

VisionX supports configuration of your OpenShift account. The only thing you need is an already activated OpenShift account. Simply register on OpenShift and that's it. The rest will be handled by VisionX. Don't create SSH keys or open tunnels to access your remote database or application server. VisionX will do all this tricky things for you.

We have a short Video for you. It demonstrates the OpenShift integration of VisionX. The first part shows configuration of a fresh OpenShift account. In the second part, we create a simple (unstyled) application and the last part is the deployment.

The whole video lasts 4:30 minutes. Have you ever created a full database application with menu, toolbar, user authentication, an input form and deployed in around 5 minutes?

Both products are code complete and JVx passed all tests. We're in the test phase with VisionX and do some smaller fixes, but it looks very stable.

We set the official release of VisionX 2.2 to August, 17th. We will release JVx 2.3 during the coming week (~ August, 7th).

VisionX 2.2 will come with some great new features like Java 8 + Multi-IDE support and our new MorphPanel.

MorphPanel?

It's a new UI component. You can use it to visualize a table of records (grid) and show record details as form in a tab area, as split panel, a popup or as replacement of your grid (= web mode).

It's soo useful. Usually you would create two or more screens for the same use-case but one screen with one MorphPanel is enough with VisionX 2.2.

A simple use-case: You have one master-data screen and want to show an edit screen for the records on double click or button click. You need one screen for showing master-data and another screen for the edit form. The master screen opens the edit screen with an additional parameter, to show the correct record in the edit screen... (boring).

Simply add a MorphPanel to your master-data screen, set Popup mode, design the popup and you're done. This is great for desktop applications and awesome for web applications!

Details and screenshots will follow!

Interested?

Get ready for VisionX 2.2.

Since last year we are offering an Eclipse Plugin that integrates  the JVx workflow into Eclipse. Now that EPlug 1.2 has been released, we believe it's long overdue to give you a guided tour of the experience that EPlug is offering.

Trial

We offer a free trial period so that you can test EPlug without any problems. The first time you start Eclipse with EPlug you will be asked if you'd like to only test EPlug, or if you'd like to select an already purchased Pro license.

When clicking the Trial button, a new trial license will be issued and you'll be able to evaluate EPlug with all features for 30 days.

'First Run' Wizard

One of the biggest usability improvements compared to previous versions is discoverability of how to use and activate EPlug. With the new version we have added a "First Run Wizard" which allows to directly activate EPlug on selected projects.

Usage

EPlug integrates seamlessly into Eclipse, but to use most of its features it has to be activated on each project you want to use it with. This can be done in the previously shown First Run Wizard, or by right-clicking a project and selecting "Activate EPlug" under "Configure".

From there on you will be able to use code completion, compile time checks and all the other features on this project.

Better and extended commands

A handful of commands are added by EPlug, which make it faster to navigate in JVx projects.

Go to complement class

It's often the case that you want to go from the server to the client class, or from the client to the server class. Most of the time in Eclipse this involves expanding trees and looking for the correct class in the Package Explorer. That is why we've implement the command "Go to complement class", which enables you to quickly jump from the server to client, or the other way round.

As you can see the command is available from the context menu, but you can also bind it to a key in the "Keys" preferences.

Open Declaration

The "Open Declaration" command, sometimes known by its key binding "F3", allows you to jump to the declaration of whatever is currently under the cursor. We've extended this command with the possibility to jump to the declaration of event handlers (actions), server methods and storage's. If the item underneath the cursor is not handled by our extension, the default "Open Declaration" command will be invoked.

The declaration:

Because we've extended the "Open Declaration" command, you can bind the "Open Declaration (EPlug)" command also to "F3" and enjoy faster navigating in your JVx files without any downsides.

DataBooks

The biggest and most important feature of EPlug is its support for data books. EPlug offers code completion, compile time checks and more for column names on remote and local data books.

Code completion

Everytime you want to get or set a value, or wire up an editor you will receive code completion suggestions with all column names that are in the databook, it doesn't matter if those are remote or added locally.

Compile time checks

Of course we also added compile time checks, which means that you can never mistype a column name ever again.

With the newest version, these compile time checks are even active while you type!

Text hovers

When hovering above a column name, a simple text hover will inform you about the type of the column.

Storage support

RemoteDataBooks require to have the correct name set so that the server side storage is found, of course we do also offer code completion, compile time checks, text hovers and hyperlinks for this.

The DataBook View

And last but for sure not least, with the newest version a feature has been added which I've been looking forward to for quite some time: The DataBook View. A view similar to the Outline view, which displays all databooks in the current file and all of its columns.

Actions/Events and server calls

Support for actions, events and server calls is the second big EPlug feature. For events and actions we support a very Lambda-like system that uses reflection and strings. Obviously the compiler was never able to understand this system and provide feedback or support for it, but with EPlug this has changed.

Code Completion

Whenever you want to wire up an event, you'll now receive code completion for all fitting methods in the used class.

Action methods:

Remote calls:

As you can see in upper image, we also provide a fast and convenient way to create methods if necessary.

Compile time checks

During compilation the actions, events and server calls are checked for their correctness, and if there is a problem it'll be reported to you.

You can also see the quick fixes for this problem, which do not only offer to create the missing method, but also suggesting methods with similar names in case a typo happened.

Text hovers, hyperlinks and refactoring support

Additionally EPlug provides text hover and hyperlink support, that means that you can now jump to the methods by using your mouse (Ctrl+Left Click) or the "Open Declaration (EPlug)" command. Refactoring support has also been added, which means that you can now rename action/event handlers without having to manually search for all uses and change those.

Resources

Dealing with resources can often be a pain in the neck, especially if you constantly have to look up the path and check if you're now using the correct image. Because we also felt these pains, we've added functionality to EPlug to make sure that working with resources becomes easy and painless.

Support for UIImage

Whenever you use UIImage methods, you can now enjoy code completion, previews of the images and compile time checks.

Preview:

Compile checks:

Generic resource completion

For all other resources, we do only offer a "generic" code completion system and no preview. Still, this is a huge help.

Comments

One of the more simple and not so obvious features of EPlug is that it allows to have code completion of the current class in comments, and also provides the JVx category separators.

Separator:

Action/call completion in comments:

VisionX support

Now we've arrive at the big final, support for VisionX. For all of you who do not know VisionX, it is our product for rapidly building applications from scratch or migrating already existing systems. It allows to build GUIs and the respective database backend within a matter of minutes. Even though VisionX allows you to build whole applications, from time to time you'll want to do something by hand and this is the great thing about VisionX, all projects and applications are automatically and by design already Eclipse projects. So all you need to do is import the project into Eclipse and start working on it. To improve this workflow further EPlug does offer various features.

Selection synchronization

The selection in Eclipse and VisionX can be automatically synchronized, so that whatever you're working on in the one application is also visible and selected in the other

Automatic applying of changes

VisionX will also automatically refresh its current view if you change a sourcefile in Eclipse, allowing to rapidly and verify changes in a workscreen without the need to manually reload the workscreen.

How and where to get it?

EPlug comes in two flavors, EPlug for JVx and EPlug for VisionX, both are available from the Eclipse Marketplace and can be installed and used freely for 30 days. Afterwards a license is necessary to keep using all features.

OpenShift is a PaaS product from Red Hat.
Read further details at Wikipedia or the product site.

It's of interest to us because it's easy to use, supports deployment of pre-created war files and it offers an application server (e.g. Tomcat, JBoss) and a database (MySQL, PostgreSQL) for your applications. OpenShift also has Vert.x as runtime platform if you won't use an application server. The configuration is super easy and your server is ready in around 5 minutes.

The access to your server is protected and you should use a specific client tool from RedHat for advanced configuration or an SSH client like putty.

The PaaS service is so nice because it's the perfect deployment platform for JVx applications. There's a free service for simple tests and maybe smaller applications because there are some limits for memory usage, CPU, and number of applications.

We made some tests with OpenShift and the result was as expected: Our applications did work without problems. Sure, the whole deployment procedure could be more end-user friendly but it wasn't designed for end-users without technical know-how, I guess. It's good enough for software developers or admins.

Our test

We created a new JVx application with VisionX (because it creates the database, has a GUI builder and creates the war file for us) and the application should run with VaadinUI on OpenShift. We didn't have any experience with OpenShift, but with other PaaS products, e.g. Heroku, Cloudbees, Jelastic, AWS.

First steps:

1. Registering an account (what else )
2. Creating a first application
3. Cartridge: Tomcat 7 (JBoss EWS 2.0)
4. Setting application name and domain
5. Adding MySQL 5.5 cartridge

Above steps were enough to run our OpenShift service(s).

Next was accessing the server via SSH client because we didn't install the RedHat client tool (We won't use client tools for cloud services - why the hell). Sure, we had to use another client tool for accessing the server via SSH, but it was working without installation: PuTTY (still strange). A nice web UI would be great... just my thoughts. We found a Java client but didn't test it.

So, what we did:

1. Creating private/public RSA keys with PuTTYgen
2. Configuring OpenShift (used the key from PuTTYgen TextArea because OpenShift didn't like other formats)
3. Testing connection

   Username was displayed in Application settings under SSH Code, e.g. ssh://<username>@app-domain.rhcloud.com/....
   Used the private key file for putty as key (Key authentication, without password)

Next task was, configuring the access to the database because SSH access was already working. It wasn't possible to access the database without tunnel - means, no direct (Internet) access from your client. This wasn't a real problem and PuTTY had support for port tunneling. Simply detected the IP address of the MySQL server. The hostname was set as environment variable and the command export displayed all variables. The variable OPENSHIFT_MYSQL_DB_HOST had all information and our tunnel was working. There's also a property for the MySQL Port but 3306 is default.

What was next?

Deployment.

This wasn't trivial because the platform expected source code and a maven project for automatic deployment. Wrong for us. But there's an official documentation for manual war deployment.

Short summary of steps

1. GIT clone
2. Delete src folder and pom.xml
3. GIT commit & push
4. Copy WAR file into webapps folder
5. GIT commit & push

You don't need git on your client, it's available in your terminal. But... as a developer, git is one of those standard tools...
It's also possible to upload the WAR file via SCP or SFTP...

Done...

Not really because our application was deployed without problems but it didn't work because the JDBC URL was wrong. We set the MySQL servername to localhost because of the tunnel!

Here's the original config.xml:

JVx has a nice feature which allows environment dependent settings and VisionX sets the environment automatically to prod. So, we simply changed the datasource to:

VisionX sets the environment to prod, if it creates a WAR file:

Sure, the solution isn't perfect because the MySQL hostname should be read from the environment variable.
Would be better:

But JVx doesn't support this syntax (right now) -> Feature Request.

Done. Really done.

The application works fine (Login as admin with password admin).

Here's a screenshot, for the case that our OpenShift service isn't running:

OpenShift ERP with JVx and VaadinUI

We've good news for you. Since our JavaFX UI has reached version 1.0, we thought it might be a good idea to integrate the UI into VisionX. It wasn't that easy because JavaFX needs Java8 and VisionX runs with Java7. It wasn't enough to switch the JVM because VisionX had Eclipse JDT under the hood and the used version wasn't Java8 ready and also some other libraries had problems with Java8.

It was a lot of work to support JavaFX but now it's done. We have Java8 support in VisionX and all referenced projects were updated. We don't have a public version for you right now because the new features need some additional tests. But we're very happy with the current status. Our development version is very stable and all features are still working.

We have a short screencast for you:

Our current VisionX releases have built-insupport for Eclipse, because every new application is also a complete Eclipse project. Simply import an application in your Eclipse IDE and use all features of your IDE to develop/modify the application.

We didn't support other IDEs like NetBeans or IntelliJ IDEA because Eclipse was our preferred IDE and it's still the most used IDE. But nowadays it makes sense to support the big 3. So, why not

Our next VisionX release will come with support for NetBeans and IntelliJ IDEA. Simply open the application and run it. No more manual project creation!

We made a short video which demonstrates our upcoming IDE support. First, an application was created in 1 minute and this application was used with NetBeans, IntelliJ and Eclipse - Open.Run.Done.

Here's the preview video:

Above video was made with current development version of VisionX and the next release, with version number 2.2, will be available in this summer.

The current update release of VisionX 2.2.135 is available for our customers or as trial. It's a smaller update release with two important new features:

• Vaadin 7.4.2

  We've bundled vaadin 7.4 with our application and you can use all available features of vaadin 7.4. We currently don't use new Grid component of vaadin 7.4 because it's not implemented in our vaadin UI. We'll replace the Table with Grid as soon as possible.

• Corporation view

  This awesome view is now available out-of-the-box. Simply enable the design via web application settings screen.

The rest are fixes for smaller bugs:

• Support for username/password in Oracle JDBC Url
• protected access instead of public, for DBAccess
• Support all web setting in live preview (corporation design, navigation, mobile)
• Support for loading resources form public content area
• Don't delete unknown events from source file
• Designer update for better free-form layouts

Have fun with VisionX 2.2.135.