From Java Swing to JavaFX - ...to RISC-HTML

CaptainCasa Enterprise Client is a rich client framework for enterprise applications.

Founded in 2007 we were quite exotic ones, having chosen Java Swing as UI technology those days. The main reason for NOT having chosen HTML was: our framework users develop operationally used business applications with long lasting life cycles - and they do not want to afford a rewrite of their UI every 5 years - as it was (and still is) common in HTML environment.

Somewhere around 2011 when JavaFX 2.0 came up, we added a JavaFX implementation of our client. Luckily our rich client framework is following the architecture of "server side interaction processing", so our UI-client is a generic rendering engine, rendering XML forms coming from the server side. Still we explained people, that JavaFX is an adequate technology for the type of  "heavy" business applications they develop - and still the core argument was: independence from "browser volatility" and from browser compatibility issues.

And then, all of the sudden, we were hit by some new idea, how to deal with HTML and browsers so that we can overcome the typical problems that are associated with browser based frontends. We called the idea "RISC-HTML" - and managed to rewrite our complete Java Swing / JavaFX client so that is is running now in a 100% HTML way.

The idea behind RISC-HTML is: we asked ourselves "Which are the basic elements, that a UI technology must provide in order to build some UI framework on top?". The result is: if a UI technology supports "rectangular areas" and "input fields", and if it supports just the ability to absolutely position these elements - then this is sufficient to build up all the business controls that we internally use.

So we did not think the traditional way: "How can we set a framework layer on top of HTML, in order to simplify HTML and to equalize browser incompatibilites?" - because with this approach you are always bound to the known HTML limits. - We went the other way: "How do we build a UI framework on top of primitive elements?" and then checked how to transfer this thinking to HTML.

The result is something which - from the beginning of development work on - pushed and pushes our adrenaline level! It's the first time that we are working within the Browser/Javascript environment, without suffering from it! Just the opposite: we see, that our expectations are fulfilled:

1. no issues with browser compatibility anymore - because of using only two types of elements and because of having encapsulated them inside some "Microkernel" JavaScript library.
2. no problems with any layouting strategy anymore - layouting is done via JavaScript controls on top of the "Microkernel". The browser's role is to "execute the rendering", i.e. to draw rectangles at the right position. The decision, where and why to draw the rectangles is in the hands of the corresponding (JavaScript) control
3. and the most exciting experience for us: RISC-HTML is ...fast!!! Well, this mirrors the increase of speed of browser processing in general - and the increase of JIT-compilation-quality within the JavaScript interpreters.

These ones of you who remember the CISC/RISC processor discussion of  the 90s will clearly see the analogies: the idea of RISC processors is to let the processor only do the core tasks and to arrange the logic "in front of the processor". - It's the same what we do with browsers: we reduce the browser's role to basic rendering processing - and push the logic out of the browser into some program/JavaScript control layer.

Result: RISC-HTML is clearly the future of our rich client framework! It's the combination out of "zero installation" for the end user and at the same time "zero maintenance" on the developers' side. Well, the word "zero" is maybe a bit too aggressive... - but it's fair to say that maintenance effort is drastically decreased.

Check out the information at http://www.CaptainCasa.org and test drive the RISC-HTML based demo environment: http://captaincasa.org/online-demo-server

XI. CaptainCasa Community Meeting

CaptainCasa is a community of European ISVs defining and using a Java based User Interface for significant parts of their applications. The rich client framework "CaptainCasa Enterprise Client" is the output of this community - and available both in unrestricted free and commercial licenses. The framework was transferred from Java-Swing to JavaFX in the recent years.

The XI. Community Meeting is scheduled for Dec 03rd 2015. The meeting is held in Schwetzingen, close to Heidelberg, Germany.

Everyone is invited who is technically interested in CaptainCasa, JavaFX, rich client technology in general. Please view details here: http://www.CaptainCasa.com/cmxi.html

In case of interest register via info@CaptainCasa.com

Regards, Björn

Adaptive Container Components added to control library

Having one layout/component definition which adequately reacts on different sizing scenarios - this is what adaptive layout is about. We now added some new components to enable this within our CatptainCasa Enterprise Client, built with Java FX.

Take a look here: http://www.CaptainCasa.com/ac.html - also including a short demo video. Development still is going on, so adaptive concepts will be also injected into the various grid components.

Regards, Björn

 

Toggle between one/two lines depending on physical space available

Flexibly arrangeing whole blocks of controls according to space available

Application Datapool Manager was extended by OpenUI5 based client

In addition to the fully featured Java client we now also added an HTML5 based client for our demo application "Datapool Manager". This client allows the user to view and edit data within some defined data structure within the browser:

The client internally adapts its layout to the physical device of the screen - i.e. it renders differently when being started on a mobile device:

Regards, Björn

Take a look - Open UI5 based Workplace with CaptainCasa

Take a look - we published a demo workplace utilizing the SAP/Open UI5 components that are part of CaptainCasa Enteprise Client in the meantime.

The demo is available here.

Regards, Björn

Demo Application: Datapool Manager - Sharing loosely structured data

For internal communication between ourselves and our users/customers we wrote an application "Datapool Manager" - allowing to define spreadsheet-like data to be shared across users belonging to different organizations. Possible purposes are:

• Task lists
• Collection of any information / analysis result
• ...equipment list
• ...requirements list
• ...list of attendees

...the tpyical issues where you are used to defining a central Excel file and share it "somehow".

Items are tracked (who changed what?), attachments can be added in a simple way and users can discuss / add comments on items.

The client is an FX based program. The server side is a Tomcat server.

Take a look:  http://www.captaincasa.com/dp.

html

Post processing of panoarama photos - FX based tool "Horizon Straightener"

...well, this is some private project - but you may use the results, if you like what I am doing here. (Terms of use: just use it!)

Background:
You may stitch certain photos to form a panorama using software like e.g. Microsoft ICE (Image Composite Editor). There are other tools available, search the Internet for "stitch panorama"... The result of stitching quite often is a panorama, in which the horizon is not perfectly straight. The effort you then have to spend to straighten the horizon is always quite some hell.

This was the reason, why I wrote a JavaFX based tool to simplify this process.

Before - after straightening Screenshot

In the tool you can draw a new horizon line in a simple way - the whole image will be re-arranged using this new horizon line.

Please feel free to use the tool, if you want to use it. Installation is available here: http://captaincasademo.com/horizon/setup_launcherfx.exe

Some documentation is available here: http://captaincasademo.com/horizon/20150619_PanoramaHorizonStraightener.pdf

The tool comes as .exe-setup program for Windows. The default installation location is your user's local directory. Please do NOT install it in Windows/Program Files! The installation contains "everything" that is required to run the tool (including the Java runtime).

Forgive me for not providing a MaxOS installer yet - it's just my lazyness...

Some photos of the 10th Community Meeting...

Thanks to all having participated at this year's Community Meeting! Please find some photos below:

10th CaptainCasa Community Meeting - Dec 11, 2014 in Heidelberg

The 10th community meeting is scheduled for Dec 11 (Thursday). The meeting is held close to Heidelberg, details are available via http://www.captaincasa.com/pdf/eclnt_communitymeeting_x.pdf

The meeting's agenda includes:

• JavaFX status quo
• CaptainCasa Enterprise Client on JavaFX - customer scenarios
• CaptainCasa Enterprise Client - news
• Developing for mobile devices - SAPUI5/OpenUI5 as option?

As usual there is one presentation which has nothing to do at all with rich client technology issues: "Industry 4.0 - ...below the buzzwords".

Interested in CaptainCasa / JavaFX / Rich Client Frameworks? - Feel free to register by mail to info@CaptainCasa.com.

CaptainCasa Enterpise Client is a community based rich client framework for Business Applications (http://www.CaptainCasa.com).

10th Community Meeting on Dec 11 2014

The date for this year's community meeting is selected: Thursday Dec 11 2014.

And the location is selected as well: this year we will use a very nice conference room in Mannheim. The evening event the day before will of course be as usual in Heidelberg!

More details will be published in the next days.

Björn

Some new features as Beta Addons in Update 20140813

There are a couple of new features that were added to Update 20140813. All of them do not touch the core functions, so we could add them without disturbing the rest of the system. Please take a look into the "Beta Parts" documentation which is available in the documentation section of http://www.CaptainCasa.com - or directly access the document here.

The features include:

• A "mini embedded server", that allows your application to be started as fat client. (and which is not based on embedded Tomcat anymore)
• Direct update of components, in parallel to normal request/response communication.
• Self containing components.

Take a look...!

Regards, Björn

CaptainCasa Client - Test of Android Port

We spent some time in order to try to run our JavaFX based client on Android - and now can at least tell, that today it's the first time that our client is starting and rudimentary working:

This is a screenshot of my Android device (a two years old Nexus 7 tablet):

And this is the layout rendered in my PC:

So, a lot of things are all right! - ...and a lot of things are not perfectly all right yet, as you can imagine.

The client on Android is the same JavaFX code that runs the client in the normal desktop environment. So we are taking great advantage of the work done by the persons behind this page: http://javafxports.org

I will describe the major steps to get it to work on Android in some extra document.

Regards, Björn

App Start - Bringing JavaFX Applications to the End User

How to bring JavaFX applications to the end user's client?

Two possibilities:

1. Install Java (quite up to date version...) on the client. Then use web start or applet.
2. Package your JavaFX application so that the JRE is included (e.g. using bundling) and run it as autarc application on client side.

Let's take a deeper look into both approaches:

1. WebStart/Applet: hmmm... maybe we ourselves are too close to industry/business scenarios, but the installation of a client side Java VM often is some hot discussion. If the discussion is valid or not - who cares at the end, if you are the poor guy to try to make your JavaFX application run at the client side.
   
   And even if the customer agrees to install some up to date Java VM, he/she typically is not the one who is willing to constantly upgrade the VM on all the clients later on... So it's you having to live with the fact that your WebStart/Applet-stared JavaFX application will have to run on many different Java versions...
2. Autarc client application: yes, this often is a nice alternative, because now people are not talking about this client wide Java installation - they more or less treat your application as a native one. Who cares, if there is some bundled JRE which no one outside the application knows about. - And now you are the master of which Java version you use, there is no company policy or whatever you have to fight with.
   
   But...: now you are missing all the nice features that are part of WebStart/Applet: the re-loading of your client application if it changes on server side - the automated roll out of your client software, both for the initial and for the continuous installation.

So, this was the situation we were/are in: for many scenarios we want to go the "autarc application" way, but at same point of time needed something to control the roll out of the client software.

Consequence: we wrote a simple and thin framework which we called "App Start". (We did not check if this name is somehow blocked, so this is an internal project name at the moment!).

It's a client side launcher of a JavaFX application that is kept on server side. The launcher is a small Java programm that is configured by some xml-file, so that it knows what to download from where and after downloading how to start the JavaFX application.
The launcher knows the version stamp of the JavaFX application and with each start checks if the version still is in sync with the server side.

So "App Start" is some mixture out of the "autarc application" mode and the "Web Start" mode. Main difference: "App Start" is only working in the context of one JavaFX client application

As I said: App Start is a quite thin framework. And currently it's only available for Windows scenarios (sorry... but this is the 9x% of our users...), but taking over to other OSs is "just effort". We are open to share everything here - sources, docu, demos etc. are available in the links below. If this is interesting for you: please contact us (info@CaptainCasa.com), maybe this is something we can join forces.

Now the links:

Some slides (PDF)
Tutorial
Test / Demo (currently Windows only)

App Start page: http://www.CaptainCasa.com => Community => App Start Framework - please find all resources (including source code)

...as I said: the framework was born out of our concrete own requirements, but is strictly decoupled from our "normal" JavaFX development. So, it's normal water which we used for cooking, there is not too much magic inside.

One final comment: the picture above only is a simplified view on "App Start" - emphasizing the loading of the JavaFX application. On a long run a client side applications also will require a Java version update (only in the context of this autarc application!) and also an update of the starter program itself. So, in reality, everyhing is versioned and everyhing is synced if required...:

Business Application Workplace with JavaFX

We did some screen recording in order to show how a JavaFX business application workplace might look like.

The video is available here:
http://youtu.be/F77UcB1hNXg

Please note: the video was taken "from the labs"... The JavaFX demo application that is shown in the video is available via http://www.CaptainCasa.com, so you might view and download from there.

Björn

JavaFX and OSM (OpenStreetMap)

In our Swing based client implementation we used a certain library "swingx-ws.jar" around the class "JXMapKit" to render OSM content. The library was coming from the Swinglabs and rendered the maps directly into the Swing-Graphics.

We now wanted to do the same in JavaFX - of course finding out that there is no "native" implementation of an FX-based OSM renderer.

But: there is a nice web browser integration in FX, that I believe everyone in the meantime knows about. And this is also the base for integrating OSM in a really simple way:

In the screenshot you see an FX screen with an embedded WebView-instance showing an OSM map. In the map there are two way points, each one containing certain text information.

When changing the text in the FX grid, then also the text in the OSM map is updated:

When clicking onto a way point's text then the corresponding grid row is selected:

There are not a lot of things at all that are required in order to set up contact between FX and the OSM page:

1. In FX define a WebView instance with a corresponding WebEngine
2. In the WebEngine load an HTML page that uses the map-JavaScript-interface. The following implementation is based on something we found in http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden. So we did not a lot more than copying and pasting from there...:
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-de" style="height:100%;width:100%;margin:0;padding:0">
   
   <!--
   Based on http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden
   -->
   
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <meta http-equiv="content-script-type" content="text/javascript" />
     <meta http-equiv="content-style-type" content="text/css" />
     <meta http-equiv="content-language" content="de" />
     <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
     <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
   
   <script type="text/javascript">
   function jumpTo(lon, lat, zoom)
   {
       var x = Lon2Merc(lon);
       var y = Lat2Merc(lat);
       map.setCenter(new OpenLayers.LonLat(x, y), zoom);
       return false;
   }
   function Lon2Merc(lon)
   {
       return 20037508.34 * lon / 180;
   }
   function Lat2Merc(lat)
   {
       var PI = 3.14159265358979323846;
       lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
       return 20037508.34 * lat / 180;
   }
   function ccCallback(pId)
   {
       ccApp.callback(pId);
   }
   function addMarker(pId,lon, lat, popupContentHTML)
   {
       if (popupContentHTML != null)
       {
           popupContentHTML = "<span onclick='ccCallback(\""+pId+"\")'>" + popupContentHTML + "</a>";
       }
       var layer = layer_markers;
       var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
       var feature = new OpenLayers.Feature(layer, ll);
       feature.closeBox = true;
       feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(150, 50) } );
       feature.data.popupContentHTML = popupContentHTML;
       feature.data.overflow = "hidden";
       var marker = new OpenLayers.Marker(ll);
       marker.feature = feature;
       if (popupContentHTML != null)
       {
           var markerClick = function(evt)
           {
               if (this.popup == null)
               {
                   // this.popup = this.createPopup(this.closeBox);
                   // map.addPopup(this.popup);
                   // this.popup.show();
               }
               else
               {
                   this.popup.toggle();
               }
               OpenLayers.Event.stop(evt);
           };
       }
       marker.events.register("mousedown", feature, markerClick);
       layer.addMarker(marker);
       m_markers[pId]  = marker;
       if (popupContentHTML != null)
       {
           var vPopup = feature.createPopup(feature.closeBox);
           map.addPopup(vPopup);
           m_popups[pId] = vPopup;
       }
   }
   function removeMarker(pId)
   {
       var marker = m_markers[pId];
       if (marker != null)
       {
            layer_markers.removeMarker(marker);
       }
       var vPopup = m_popups[pId];
       if (vPopup != null)
       {
           map.removePopup(vPopup);
       }
   }
   function getCycleTileURL(bounds)
   {
      var res = this.map.getResolution();
      var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
      var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
      var z = this.map.getZoom();
      var limit = Math.pow(2, z);
      if (y < 0 || y >= limit)
      {
        return null;
      }
      else
      {
        x = ((x % limit) + limit) % limit;
        return this.url + z + "/" + x + "/" + y + "." + this.type;
      }
   }
   
   var map;
   var layer_mapnik;
   var layer_tah;
   var layer_markers;
   var m_markers = new Array();
   var m_popups = new Array();
   
   function drawmap()
   {
       OpenLayers.Lang.setCode('de');
       var lon = 0;
       var lat = 0;
       var zoom = 10;
       map = new OpenLayers.Map('map',
       {
           projection: new OpenLayers.Projection("EPSG:900913"),
           displayProjection: new OpenLayers.Projection("EPSG:4326"),
           controls: [
               new OpenLayers.Control.Navigation(),
               new OpenLayers.Control.LayerSwitcher(),
               new OpenLayers.Control.PanZoomBar()],
           maxExtent:
               new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                       20037508.34, 20037508.34),
           numZoomLevels: 18,
           maxResolution: 156543,
           units: 'meters'
       });
       layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
       layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"),
                                                     visibility: true, displayInLayerSwitcher: false });
       map.addLayers([layer_mapnik, layer_markers]);
       // position
       // jumpTo(lon, lat, zoom);
       // Position des Markers
       // addMarker(layer_markers, 6.641389, 49.756667,"SERVUS 1");
       // addMarker(layer_markers, 6.741389, 49.856667,"SERVUS 2");
   }
   </script>
   
   </head>
   <body onload="drawmap()" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="height:100%;width:100%;margin:0;padding:0">
     <div id="map" style="height:100%;width:100%">
     </div>
   </body>
   </html>
   You see that there are two functions "jumpTo" and "addMarker" which are designed to be called from outside.
3. These functions can be called from JavaFX by the WebEngine's capability to execute JavaScript statements in the loaded page, so the Java code might look like:
   
   getEngine().executeScript("jumpTo("+m_longitude+","+m_latitude+","+m_osmzoom+")");
   
4. The callback from HTML to JavaFX is done by a call-back-object which is added to the page by the JavaFX program:
   
   Java(FX) code:
   
       public class CCApp
       {
           public void callback(String id)
           {       
               ...
               // reaction on callback
               ...
           }
       }
   ...
   ...
       JSObject window = (JSObject)m_browser.getNode().getEngine().executeScript("window");
                       window.setMember("ccApp", new CCApp());
   
   
   JavaScript code:
   
   function ccCallback(pId)
   {
       ccApp.callback(pId);
   }
   
5. If there's any difficulty at all, then it is just the timing of operations...: in the FX WebView component you first load the page, then you establish the callback object ("ccApp") and then you call the JavaScript e.g. "jumpTo(...)" in order to show a certain position. To keep this order you have to wait for the page to be completely loaded, and then execute the follow on functions.
   
   This is done by using the WebEngine's listener mechanism:
   
   
       getEngine().getLoadWorker().stateProperty().addListener(new MyStateListener());
   
       class MyStateListener implements ChangeListener<State>
       {
           @Override
           public void changed(ObservableValue<? extends State> paramObservableValue, State from, State to)
           {
               if (to == State.SUCCEEDED)
               {
                   // ...
                   // now the page is loaded and you can "work"
                   // with the page!
                   // ...        
               }       
           }
       }

That's it! Some mini-Javascript processing together with some simple integration between FX and the WebView/WebEngine.


Please note:

Screenshots from our Demo Workplace

Find below some screen shots from our JavaFX based rich client solution, CaptainCasa Enterprise Client 5.0.
Regards, Björn

Photos from yesterday's Community Meeting

Thanks to all having participated in yesteday's Community Meeting!!!
Please find some photos below (thanks, Antje, for taking them!).
Regards, Björn