Posts tagged: vaadinUI

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.

News mix

Post to Twitter

The next release of JVx is coming!

It'll be version 2.2. We have 2 open tickets for this release but both are refactoring tasks, nothing too important. We're already feature complete.

It'll be an awesome release because we have a lot of performance improvements and some really cool features like lazy loading of BLOBs (binary content). The server implementation is now IoT ready and it's pluggable. Support for Lambda expressions with full backwards compatibility for our listener handling. And we have support for application monitoring, style definitions, streamed upload of large files, and much more.

We plan the release for the end of this week.

Our VaadinUI was based on vaadin 7.1.15 and 7.4 was released some days ago. We're happy to announce support for vaadin 7.4.

The repository of JVx' vaadin UI already contains 7.4 libraries and everything is available for you. We don't have an official release right now, because we do some tests and afterwards we'll release a new version of our UI. We don't have a date for you but hopefully in March.

We currently don't use the new Grid component, but we'll replace the current table implementation asap.

The last information is about the next release of VisionX 2.2 preview. It will contain JV' vaadin UI for vaadin 7.4 and some new features like exporting an application for embedded devices (run the application on embedded devices like Raspberry Pi, without application server - "Micro applications").

Oh, finally... Check our github page, because we have new projects for you.

JVx and JavaFX (fasten your seat belts)

Post to Twitter

Today is a great day, because I'm able to write about our latest Research Project.
It has to do with JavaFX and JVx - what else.

If you remember one of my blog postings in 2013, you know that we tried to implement our JVx UI with JavaFX. Long story, short: Not possible with one master thesis.

But... we always try to reach our goals and it's an honor to tell you that we're back on the track.

Our JavaFX UI is one of the coolest things on this IT planet.

It's cool because of JavaFX. It's APIs are still not perfect and the overall performance could be better but it has so many awesome things. Two of them are styling via CSS and animations. JavaFX is the official replacement for Swing and it has potential to bring back "write once run anywhere". We don't know if JavaFX will be the holy grail for desktop application development but there's nothing comparable in the Java world.
To be honest, it's not a problem for us because our JVx is (UI) technology independent and if JavaFX won't do it, we'll implement the next UI toolkit for JVx.

... but back to the topic

You should already know that JVx is a Full-stack application framework for building database (ERP) software. It's GUI technology independent and we've different UI implementations. The most important ones are based on Swing and vaadin. We also have native Android and iOS support and our applications run on embedded devices as well. Our applications don't need an application server to work properly because we have a plain socket server as well (IoT ready).

Our preferred Java UI technology was and is still Swing, because it's feature rich and you can build every kind of application without bigger problems. The problem with swing is that it's old and not maintained from Oracle. Sure it will work with future Java releases without bigger problems (hopefully) but you can't use modern development techniques or create fancy and fresh UIs with less effort. A standard Swing application looks boring and cold. Sure, it's possible to pimp a swing application with lots of pictures or nice looking LaFs, but it's not fun.

Swing development is like software development in the stone-age, compared to state-of-the-art web development. If you do web development, you have CSS3 and HTML5 and some nice designed UI frameworks. I won't say that you're faster or that web development is better but it's easier to build nice looking UIs. I'm not a big fan of classical web development because most applications are horrible to maintain, there are soo many different frameworks and you can't be sure that your investment is future-proof because many frameworks don't survive the first year. But everything depends on knowledge and the right framework - for sure.

IMO it's better to use one framework that solves most of application relevant problems - if it exists. If we talk about web applications, I recommend vaadin because it's feature rich, just works, is very polished and is licensed under Apache 2.0. The community is active and great support is available!
Sure, there are some other frameworks like GXT or extJS from Sencha, but the license could be a problem if you build commercial applications. Don't forget RAP, but it's not trivial to start with the whole Eclipse ecosystem.

I'm talking about (enterprise) application development and not about webpage or webservice development. I would recommend pure HTML5 and CSS3 with one or two smaller javascript libs for developing fancy "webpages", or php instead of Java. If Java and "webpages", PrimeFaces is a good decision.

Soo, if Swing is "dead" and web development is hard, what should we use for (enterprise) application development?

If you develop for the desktop, try to start with JavaFX becasue it's maintained and has potential for mobile devices.
If you develop web applications, use vaadin.

(This is my personal opinion, mixed with my technology and project experience)

And why should you use JVx?

JVx bundles all together in one independent framework (it's still small and easy to learn). You'll be independent of the underlying UI technology. Write your application once and start it with different UI technologies or use it on different devices without problems. Your investment is future-proof. JVx is open source and licensed under Apache 2.0. JVx doesn't hide the underlying technology. It's always possible to use features from the technology if you want. If you use a UI without abstraction, you can't switch to another UI easily without rewriting most parts of the UI. If you start with e.g. JavaFX and if Oracle will abandon JavaFX, will you rewrite the application?

You can compare the concept of JVx with SLF4J, but with a different use-case: (enterprise) application development

And what about JavaFX?

I like JavaFX because of, IMO, 5 great things: scene graph, CSS styling, Animations, Web engine and the community. All other things are important and useful but not essential for real-world applications (vs. Swing). It's not possible to compare Swing with JavaFX because JavaFX was written from scratch and Swing was based on AWT. Sure, both toolkits are UI toolkits :) but with different concepts.

JavaFX bridges the gap between desktop and web development. It's still a toolkit for desktop applications but with most advantages of web development. It's possible to create fancy applications without headache. There are cool tools like Scene Builder or ScenicView. IDE support is getting better and developing controls is not too hard.

Sounds too good? JavaFX is on the right track and ready for real-world applications.

That was enough for us to start a JavaFX UI for JVx. It's the only framework which allows switching between Swing, Web, JavaFX or native mobile. Sounds unbelievable? Here's is our first video with our JavaFX implementation. It demonstrates the full power of JVx and JavaFX.

The video starts with our good old Swing UI. The same application will be shown as web application in a Chrome browser. And finally it will run as JavaFX application. You should carefully check the JavaFX application because it has an embedded browser that shows the same application, with a different UI technology - at the same time. Don't miss the animations :)

It's a world premiere!

JVx and JavaFX



We know that the styling is not really cool but we're currently in the development phase and aren't finished... be tolerant :)