Posts tagged: vaadinUI

JVx with Vaadin 8.1 - Milestone 1

Post to Twitter

What a great Monday :)
All our Vaadin 7 projects were migrated to Vaadin 8.1 successfully. First snapshots are available and we also have nightly builds for you.

We use the v7 compat layer in our first migration phase because we want a smooth and not an all at-the-same-time migration. Everything works so far and we started the next phase of our migration plan: Cleanup.

We'll replace the v7 compat layer and use v8 features wherever it makes sense and is possible. This will take some time because we expect some hidden problems, but we'll solve the little problems for you :)

JVx Vaadin UI and Vaadin 8.1

Post to Twitter

Our JVx Vaadin UI is based on vaadin 7.7.9 right now. It works great but vaadin moves forward in big steps. The latest 8.1 release contains many new features and bugfixes. Not all fixes were backported to vaadin 7. This is bad but clear for us.

So we should switch to vaadin 8.1?

This isn't an easy task because vaadin 8 has some new APIs and vaadin moved some parts like FontAwesome to new AddOns. The ContextMenu AddOn was compatible up to vaadin 7, but 8 needs the new official ContextMenu AddOn. The data bindings will work with 8 but needs a compatibility layer.

But anyway, we decided to start the migration and will do everything step-by-step. The first task will do the update of all our vaadin projects to Java 8 and vaadin 8.1. The next step will do the integration of v7 compatibility layer and the following tasks will fix all other problems like ContextMenu, FontAwesome, changed APIs. It's a bigger project and we hopefully will be finished by the end of October.

This blog post is a notice for our vaadin UI users!

We'll keep you up to date :)

Vaadin 7.7

Post to Twitter

Vaadin 7.7.0 is out since 2016-08-24 and 7.7.1 since 2016-09-14.

We're happy to announce that our vaadin UI is based on vaadin 7.7.1 since 2016-09-16. Use our nightly builds or checkout the repository.

And the maven snapshots:

<dependency>
    <groupId>com.sibvisions.vaadin</groupId>
    <artifactId>jvxvaadin-client</artifactId>
    <version>1.5-SNAPSHOT</version>
</dependency>

<dependency>
    <groupId>com.sibvisions.vaadin</groupId>
    <artifactId>jvxvaadin-server</artifactId>
    <version>1.5-SNAPSHOT</version>
</dependency>

<dependency>
    <groupId>com.sibvisions.vaadin</groupId>
    <artifactId>jvxvaadin-themes</artifactId>
    <version>1.5-SNAPSHOT</version>
</dependency>

Your feedback is appreciated :)

Release day - Merry Christmas

Post to Twitter

Yesterday, we've released JVx 2.4, VaadinUI 1.4, HeadlessUI 1.1 and JVx vert.x 3.0.

Headless UI and JVx vert.x are maintenance updates because of JVx changes. JVx 2.4 is a bugfix release with some new cool features and VaadinUI is a performance tuning and bugfix release.

JVx and VaadinUI are available on Maven central. The other releases are hosted on SourceForge.

What's new in JVx 2.4?

  • Thread safety

    DataBook (MemDataBook, RemoteDataBook) are now Thread safe. It wasn't guaranteed before 2.4.

  • Support for Boolean and Arrays (Oracle)

    JVx' OracleDBAccess supports Boolean DataTypes via JDBC calls and Arrays as well. We wrapped the functionality in our existing API and it makes no difference for you. Arrays are wrapped as List of IBeans.

  • Parameter changed event in WorkScreen

    The WorkScreen class got a new event: eventParameterChanged. It enables notification about parameter changes.

  • New AbstractFactory

    We introduced AbstractFactory and changed all factory implementations. With AbstractFactory, it's possible to set custom factory properties. We use this new feature for vaadin UI. With new Vaadin UI it's possible to use the old Table or the new Grid implementation. Simply set a property for that.

  • API change: IFactory

    The invokeInThread method now returns the Thread instance.

  • FontAwesome support
  • Automatic Record translation

What's new in Vaadin 1.4?

  • Based on vaadin 7.5.7
  • FontIcon support
  • Grid support (experimental)

    Set the factory property: vaadin.component.legacy_table to true (via web.xml as init parameter or as URL parameter).

  • Lazy loading of LinkedCellEditor

    Before 1.4, all LinkedCellEditors were loaded immediate. This was a performance impact. With 1.4 this was changed and data will be loaded, when needed.

  • Performance tuning

    The performance is now about 5 times faster than before. We improved the performance because we reduced our CssExtension and reduced the database calls. You can feel the new performance :)

What's new in JVx vert.x 3.0?

It's based on Vert.x 3 and works with JVx 2.4.
(JVx vert.x is hosted on GitHub)

You can find all changes in the project Changelogs.
Happy coding!

eTV in Action

Post to Twitter

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

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

VisionX design mode

TV 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

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

Backend view

The same UI on mobile phones:

Mobile view

Mobile view

Mobile view (no menu)

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

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.

JVx' vaadinUI supports FontAwesome and VaadinIcons

Post to Twitter

Vaadin has support for FontIcons since release 7.2. The first supported FontIcon was FontAwesome. Vaadin has a nice description in their book.

It's straight forward:

button.setIcon(FontAwesome.SAVE);

Since June 2015 vaadin also supports their own Font Icons: Vaadin Font Icons.

In our JVx' VaadinUI, it wasn't possible to use FontIcons without accessing the real vaadin resource, e.g.

((com.vaadin.ui.Button)button.getResource()).setIcon(FontAwesome.SAVE);

With next release, we'll allow FontAwesome and VaadinIcons out-of-the-box, without accessing the ressource and without manual installation of font icons, because our UI has everything included.

It will be possible to write:

button.setImage(UIImage.getImage("FontAwesome.SAVE"));

or

button.setImage(UIImage.getImage("VaadinIcons.ARROW_CIRCLE_DOWN_O"));

This feature is not official because it's not technology independent, but it's already available in our nightly builds :)

JVx' Vaadin UI 1.3 is available

Post to Twitter

The next release of our JVx' vaadin UI is available. It's not a big update but an important one because vaadin was updated to 7.5.0 and we support CORS out-of-the-box. We also have some annotations for easier application deployment.

The best thing for most of you is that starting with 1.3 our vaadin UI can be found on maven central.

Simply add the dependency:

<dependency>
    <groupId>com.sibvisions.vaadin</groupId>
    <artifactId>jvxvaadin-server</artifactId>
    <version>1.3</version>
</dependency>

We also upload snaphsots of vaadin UI, starting with current 1.4 branch
Simply configure the repository:

<repository>  
    <id>sonatype-nexus-snapshots</id>    
    <name>Sonatype Snapshots</name>  
    <url>https://oss.sonatype.org/content/repositories/snapshots/</url>
</repository>

and use following dependency:

<dependency>
    <groupId>com.sibvisions.vaadin</groupId>
    <artifactId>jvxvaadin-server</artifactId>
    <version>1.4-SNAPSHOT</version>
</dependency>

The release files are also available on SourceForge.

The complete Changelog.

JVx' vaadinUI and CORS

Post to Twitter

CORS

All details about Cross-origin resource sharing.

Use-case

Embedd a vaadin application in your CMS (e.g. Joomla, Typo3). The CMS runs in an hosted environment without Java application server (standard and cheap web hosting).

Howto

There's an excellent blog post from vaadin. It's not rocket science to implement this, but you have to do it. We think this things could be done automatically and so we've added the support to our UI implementation for JVx.

It's really simple to use:

Add following parameter to your web.xml:

<init-param>
  <param-name>cors.origin</param-name>
  <param-value>http://www.hosteddomain.com</param-value>
</init-param>
   
<init-param>
  <param-name>pushmode</param-name>
  <param-value>automatic</param-value>
</init-param>
   
<async-supported>true</async-supported>

(be sure that async-support was enabled for all vaadin servlets/filters)

The cors.origin parameter can be a comma separated list.

And here's an example html file:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1" />
    <link rel="shortcut icon" type="image/vnd.microsoft.icon"
          href="./VAADIN/themes/jvx/favicon.ico" />
    <link rel="icon" type="image/vnd.microsoft.icon"
          href="./VAADIN/themes/jvx/favicon.ico" />

    <title>Embedded Vaadin application</title>

    <script type="text/javascript"
             src="./VAADIN/widgetsets/com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset/
                  com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset.nocache.js?05202015200542"></script>

  </head>
 
  <body scroll="auto">
 
    <div id="content">
      <script type="text/javascript" src="./VAADIN/vaadinPush.js?v=7.4.5"></script>
      <script type="text/javascript" src="./VAADIN/vaadinBootstrap.js?v=7.4.5"></script>

      <div id="MyEmbeddedUI" class="v-app">
        <div class="v-app-loading"></div>
        <noscript>You have to enable javascript in your browser to use an application
                  built with Vaadin.</noscript>
      </div>
      <script type="text/javascript">

      if (!window.vaadin)
      {
        alert("Failed to load the bootstrap javascript:
               ./VAADIN/vaadinBootstrap.js?v=7.4.5");
      }
   
      vaadin.initApplication("MyEmbeddedUI",
                             {"browserDetailsUrl": "ui/" + appname + params,
                              "serviceUrl": "ui/",
                              "theme":"jvx",
                              "versionInfo":{"vaadinVersion":"7.4.5",
                                             "atmosphereVersion":"2.2.4.vaadin5"},
                              "widgetset":"com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset",
                              "comErrMsg":{"caption":"Communication problem",
                                           "message":"Take note of any unsaved data,
                                                      and <u>click here</u> or press ESC to
                                                      continue.",
                                           "url":null},
                              "authErrMsg":{"caption":"Authentication problem",
                                            "message":"Take note of any unsaved data,
                                                      and <u>click here</u> or press ESC to
                                                      continue.",
                                            "url":null},
                              "sessExpMsg":{"caption":"Session Expired",
                                            "message":"Take note of any unsaved data,
                                                      and <u>click here</u> or press ESC key
                                                      to continue.",
                                            "url":null},
                              "vaadinDir":"./VAADIN/",
                              "standalone":false,
                              "debug":false,
                              "heartbeatInterval":300,
                              "comErrMsgDetails":true,
                              "authErrMsgDetails":true,
                              "sessExpMsgDetails":true});
      </script>
    </div>
  </body>
</html>

And the rest of our web.xml:

<servlet>
  <servlet-name>EmbeddedUI</servlet-name>
  <servlet-class>com.sibvisions.rad.ui.vaadin.server.VaadinServlet</servlet-class>
  <init-param>
    <param-name>UI</param-name>
    <param-value>com.sibvisions.rad.ui.vaadin.impl.VaadinUI</param-value>
  </init-param>
  <init-param>
    <param-name>widgetset</param-name>
    <param-value>com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset</param-value>
  </init-param>
  <init-param>
    <param-name>main</param-name>
    <param-value>com.sibvisions.apps.MyEmbeddedApplication</param-value>
  </init-param>
  <init-param>
    <param-name>Launcher.uifactory</param-name>
    <param-value>com.sibvisions.rad.ui.vaadin.impl.VaadinFactory</param-value>
  </init-param>
  <init-param>
    <param-name>pushmode</param-name>
    <param-value>automatic</param-value>
  </init-param>

  <async-supported>true</async-supported>  </servlet>
</servlet>

<servlet-mapping>
  <servlet-name>EmbeddedUI</servlet-name>
  <url-pattern>/*</url-pattern>
</servlet-mapping>

The application was deployed in ROOT context of Tomcat8.

If you have a different context, simply change the URLs: browserDetailsUrl, serviceUrl and vaadinDir (see html page).

The CORS support is not available in our latest vaadinUI release (1.2), because its a very new feature. Simply use our nightly builds for testing.

Happy embedding.

Application Coder

Post to Twitter

This article is about our new Research project: Application Coder.

The application is a very simple Java Code Editor. It shows a tree with Java files and has a Code Editor for modifying files. The code editor is the popular Ace Editor and we use Eclipse JDT for java compilation. The application was written as standard JVx application with vaadin UI.

We made tests as single-page vaadin application, embedded with iframes and embedded with div areas. All versions work without problems but the last one is preferred. If you embedd a vaadin application with divs, it's a little bit tricky because you have to configure the client-side on your own, but you get full access to the whole html page. This wouldn't be possible if you use an iframe because you can't access the main html page.

Some cool features of our editor are: error annotations and error markers. And the best feature is our LIVE Preview of code changes!

Annotations and marker

Annotations and marker


Watch this video:

Application coder


The application coder is not only a Java code editor, it was designed especially for JVx applications, because it groups client code and business logic. The preview also starts a JVx application and LIVE preview reloads the application.

Our coder application has a push mechanism and reloads every preview window automatically and immediate after compilation.

Above video shows multiple instances of our coder application, embedded in divs and it's possible to drag around and resize the applications (thanks to jquery-ui).

The application is a perfect showcase of JVx because it's not a database application as many other JVx applications. We've used vaadin, jquery-ui and vaadin-addons to create a great UX. JVx is technology independent and open for other technologies.

Vaadin application frame design

Post to Twitter

Many of you probably know our application frame, for web applications: One application, different styles

We had a MDI variant for legacy applications with internal frames for screens. This is useful for applications with many screens and many records. The internal frames help to compare records from one screen with records from other screens.

For modern user interfaces, we use the SDI option. It looks fresh and simple and is great for applications with a small number of screens, because a scrolling menu is not nice - sure it will scroll if needed.

But what about application with e.g. 60 screens. Is MDI the only option? Yes and No, because we didn't have a variant for that kind of applications.... but now we have.

It's a mix of MDI and SDI, with a little bit CI:

Application frame SDI with menu

Application frame SDI with menu

The application frame is still the same as before, but with a different option. The name of the option is corporation, because the UI is meant for applications with many screens. It's still SDI with modal popups, because it shouldn't be too legacy!

Oh, do you see the small buttons on top/right? We use the FontAwesome feature of vaadin 7.2. We're already using vaadin 7.4.2 for our JVx vaadin UI!

We now have one application frame for many different application styles (I don't talk about visual attributes). The application frame is responsive and works well on mobile devices.