Posts tagged: VisionX

VisionX 2.3 - Feb, 5th

Post to Twitter

The next version of our flagship VisionX will be available tomorrow - Feb 5th, 2016. The version number is nice because 2 could be the month and 2+3 = 5 :)

We invest more time/resources/work than ever before in this version. It has many new features and great improvements. All included open source libraries were updated and offer additional features because not all available library features/APIs are covered by VisionX.

So what's new?

  • Vaadin 7.5.7

    The open source project JVx Vaadin UI was updated to Vaadin 7.5.7 and the UI implementation got many performance tunings. It's now significant faster than before - up to 5 times faster. The performance boost depends on your UIs because it makes no difference if you only have two input fields in your screen. But if you have large screens with Tabs and many input fields, it will rock. The API got support for FontAwesome and Vaadin font icons.

  • HTML5 Live Preview

    The live preview now supports an external CSS file. It's super easy to change the style of your application while creating it with VisionX.

  • HTML5 Live Reload

    This feature automatically reloads changed screens in the browser after you've changed it with VisionX. Simply use add URL Parameter liveReload=true. This features save click time and is great if you have multiple screens conntected to your workstation.

  • Responsive coporation layout

    Our corporation application layout is now responsive and fully customizable.

    full mode

    full mode

    small mode

    small mode

    mini mode

    mini mode

    mini mode (menu)

    mini mode (menu)

    Use the API to show/hide the menubar or the sidebar. Add custom or remove default buttons.

  • Support for custom code format rules

    It's possible to use your custom code formatting rules. The rules are based on Eclipse Code Formatter and all Eclipse (Luna) options will work with Eclipse.

  • Morph Panel improvements

    The Morph Panel is a one-for-all solution. It was introduced in VisionX 2.2. We improved the popup mode, e.g. if you double click the table, the popup will be opened if you don't use the navigation. We added more APIs for power users.

  • No more automatic database changes

    VisionX doesn't change the database objects automatically. It's your decision:

    Modify fields

    Modify fields

    Delete screen

    Delete screen

  • Java 8 u60

    VisionX runs with Java8 update 60.

  • Action editor automatic scrolling

    The action editor now automatically scrolls to the input field if it's not visible. It's not a big thing but creates great UX.

  • Automatic import organisation

    VisionX automatically removes unused imports from the source files. This is an optional feature and can be disabled.

  • Single line javadoc for fields

    The Javadoc for fields will be written in a single line (if possible). This feature is optional an can be disabled.

  • Better customizing support

    VisionX changed the class loading mechanism of customizers and controls. It'll be possible to use your custom controls without any tricks. It's possible to customize VisionX for your needs.

  • Mobile application creation (optional AddOn needed)

    This feature is awesome because it makes it be possible to create a mobile app from your application in under 5 minutes.

    JavaFX mobile LIVE CSS hacking

  • Additional licensing options

    User based, Subscription based, Floating, individual.

    Please contact our Sales Team for more details.

All customers will find the new version in their download area!

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.

Our nice JavaFX mobile applications

Post to Twitter

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 Dashboard

eTV Window view

eTV Window view

eTV Gallery

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.

JavaFX mobile LIVE CSS hacking



(The video lasts 05:19 but it should be 07:30 because the build process takes 02:50. We shortened the build process because it's boring to wait.)

Create WildFly Swarm applications from existing war files [part 2]

Post to Twitter

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 :)

VisionX 2.2 with OpenShift support

Post to Twitter

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.

Why does an end-user need OpenShift?

To realize ideas.

Why should an end-user do that?

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.

What we have in VisionX?

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?

Multi-IDE support for VisionX


(To be honest: Deployment wasn't as fast as shown in the video, because upload time can't be improved)

Next JVx and VisionX release?

Post to Twitter

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.

EPlug - The Big Guided Tour

Post to Twitter

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.

Showing the EPlug license welcome screen.

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.

Showing the trial window.

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

First Run Wizard

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

Showing how to activate EPlug.

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.

The context menu of Eclipse showing the "Go to complement class".

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.

Showing the motion of the command.

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 context menu of Eclipse showing the "Open Declaration (EPlug)" command.

The declaration:

Showing the target of the command.

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.

Showing the code completion of columns.

Compile time checks

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

Showing the compile time checks of column names.

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.

Showing the text hovers of columns.

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.

Showing the code completion for storages.

Showing the compile time checks of storages.

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.

Showing the DataBookView.

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:

Showing the code completion for events.

Remote calls:

Showing the code completion for server 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.

Showing the compile time checks of actions.

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.

Showing the code completion for UIImage.

Preview:

Showing the preview of images in UIImage.

Compile checks:

Compile time checks of resources.

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.

Showing the code completion for other resources.

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.

Showing the code completion for comments.

Separator:

Showing the code completion for comments.

Action/call completion in comments:

Showing the code completion for 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

Showing the selection between VisionX and Eclipse.

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 Deployment

Post to Twitter

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:

<?xml version="1.0" encoding="UTF-8"?>

<application>
  <securitymanager>
    <class>com.sibvisions.rad.server.security.DBSecurityManager</class>
    <accesscontroller>com.sibvisions.apps.server.object.DBWorkScreenAccess</accesscontroller>
    <passwordalgorithm>SHA</passwordalgorithm>
  </securitymanager>
  <connection>
    <!-- GLOBAL | DATASOURCE | OFF -->
    <property name="client.metadata_cacherole">OFF</property>
  </connection>
  <lifecycle>
    <application>com.sibvisions.apps.openshifterp.Application</application>
    <mastersession>com.sibvisions.apps.openshifterp.Session</mastersession>
  </lifecycle>
  <datasource>
    <db name="default">
      <url>jdbc:mysql://localhost:3306/erp</url>
      <username>username</username>
      <password>password</password>
    </db>
  </datasource>
</application>

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:

<datasource>
    <db name="default">
      <url>jdbc:mysql://localhost:3306/erp</url>
      <url_prod>jdbc:mysql://hostname_from_env_variable:3306/erp</url_prod>
      <username>username</username>
      <password>password</password>
    </db>
  </datasource>

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

<securitymanager>
    <class>com.sibvisions.rad.server.security.DBSecurityManager</class>
    <accesscontroller>com.sibvisions.apps.server.object.DBWorkScreenAccess</accesscontroller>
    <passwordalgorithm>SHA</passwordalgorithm>
    <environment>prod</environment>
  </securitymanager>

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

<url_prod>jdbc:mysql://${env:OPENSHIFT_MYSQL_DB_HOST}:${env:OPENSHIFT_MYSQL_DB_PORT}/erp</url_prod>

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

OpenShift ERP with JVx and VaadinUI

JavaFX UI and VisionX

Post to Twitter

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:

JavaFX with VisionX


Multi-IDE Feature for next VisionX release

Post to Twitter

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:

Multi-IDE support for VisionX


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.