This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information

Category: Development

VisionX 2.3 Update Release

The current update release of VisionX 2.3.235 is available for our customers or as trial.
It's a smaller update release with some nice features:

  • VisionX listener

    It's now possible to get events of VisionX in you custom AddOns or Modules.

  • Guides

    VisionX got Guides (Read more...). The feature is still in a test phase.

  • Synonyms pointing to a view

    The Data Edit wizard supports synonyms pointing to a view. But be careful, because automatic metadata detection is limited in that case.

  • Lib update

    All libs (JVx, ProjX, VaadinApps, ...) were updated to their latest versions.

The rest are fixes for smaller bugs (most are only relevant for developers):

  • Support for BooleanDataType
  • Help creation works if you didn't set a group label
  • Designer view doesn't toggle the width while dragging
  • Better variable naming for DBStorage types

Have fun with VisionX 2.3.235.

categories Release notes | rjahn | 21/04/2016 | comments Comments (0)

categories

EPlug 1.2.4 is available

Our Eclipse plugin for JVx and VisionX is available as version 1.2.4.
It's a small bugfix release.

Changes

  • Proxy support (tests)

    Some customers had problems with http(s) proxies and our trial activation. We made extended tests with (win/linux) proxies and didn't find any problems. We reduced the communication timeout because it was too long. Please send us your feedback.

  • Additional checks for client/server code mixing

    It might be a problem if you use a server class (src.server) in your client classes (src.client). This depends on the deployment mode (Web, Desktop, ...), but it's better to separate client and server code. The new check can be dis/enabled but it checks by default if your client has direct server references.

  • Using Metadata independent of AbstractCachedStorage

    It's now possible to use column name autocompletion, even if the storage isn't an instance of "AbstractCachedStorage".

Simply update EPlug via Eclipse or jump to the info page.

categories News, Release notes | rjahn | 04/03/2016 | comments Comments (0)

categories

Using Oracle JET with VisionX/JVx

The shiny new technology from Oracle is JET (Javascript Extension Toolkit). It's a really interesting thing because it bundles relevant technologies like jQuery, jQuery UI, Knockout, Require, Hammer, ...

You don't need know-how for every used technology, only JET is enough. This is a nice and new approach in the JS world. A possible problem with such an approach could be the update of single libraries, but this isn't your problem because Oracle has to maintain the right versions and bugfixes in JET. So it's not our problem :)

I'm not a big fan of Javascript libraries/technologies but from time to time I like to play around with such things and proof the interaction with JVx. Some time ago my new friend was AngularJS.

This time, I tried to work with Oracle JET.

The use-case was trivial: I'd like to visualize a list of contacts as simple table. The contacts are available as REST service. The REST service needs basic authentication.

Foreword: JET has much documentation and some useful examples, but it's inconsistent because the documentation shows different solutions for the same problem and you don't know which is best or recommended. And the examples are sometimes too complex. The start with existing examples is simple but if you start coding, it's not so simple. But this is a documentation problem and has nothing to do with the product itself. I prefer source code to find out how things work and this procedure worked without problems for JET.

Foreword 2: I couldn't find a description for Basic authentication. Not in the forum, not in the documentation and not in different blog posts. But I found many questions regarding Basic authentication. I found a solution for the problem but if someone has a better solution, please add a comment. My solution is more or less not API compliant - but works with JET version 1.1.2 and hopefully with newer versions as well.

Conditions

I've used our VisionX tool and the Contacts demo application for this example because VisionX has an embedded tomcat and REST access is pre-configured. It's not tricky to use any other simple JVx application but it requires more work because you need an application server and a deployed application.

The Trial version of VisionX is a good start. Before I show you the source code, I'll show you the result:

Contacts table

Contacts table

You're right, this isn't rocket science. But it's not hard to add more columns and some css.

What about the source code?

We have one html page, index.html:

<!DOCTYPE html>

<html>
  <head>
    <title>JET with VisionX/JVx</title>
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="css/images/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" type="text/css"/>
    <link rel="stylesheet" href="css/demo-alta-patterns-min.css"/>
    <link rel="stylesheet" href="css/override.css" type="text/css"/>

    <script data-main="js/main" src="js/libs/require/require.js"></script>
  </head>
 
  <body>
    <br/>
    <div id="mainContent" class="oj-md-12 oj-col page-padding">
      <div class="demo-page-content-area page-padding">  
        <h1>Contacts via VisionX</h1>
        <br/>
        <table id="table"
          data-bind="ojComponent: {component: 'ojTable',
                                   data: dataSource,
                                   columns: [{headerText: '#',
                                              field: 'ID', sortable: 'enabled'},
                                             {headerText: 'First name',
                                              field: 'FIRSTNAME', sortable: 'enabled'},
                                             {headerText: 'Last name',
                                              field: 'LASTNAME'}]}">
        </table>
      </div>
    </div>    
  </body>
</html>

We need two javascript files, main.js:

requirejs.config({
    paths: {
        'knockout': 'libs/knockout/knockout-3.3.0',
        'jquery': 'libs/jquery/jquery-2.1.3.min',
        'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
        'promise': 'libs/es6-promise/promise-1.0.0.min',
        'hammerjs': 'libs/hammer/hammer-2.0.4.min',
        'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
        'ojs': 'libs/oj/v1.1.2/min',
        'ojL10n': 'libs/oj/v1.1.2/ojL10n',
        'ojtranslations': 'libs/oj/v1.1.2/resources',
        'signals': 'libs/js-signals/signals.min',
        'text': 'libs/require/text'
    },
    shim: {
        'jquery': {
            exports: ['jQuery', '$']
        },
        'crossroads': {
            deps: ['signals'],
            exports: 'crossroads'
        }
    },
    config: {
        ojL10n: {
            merge: {
                //'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
            }
        }
    }
});

require(['ojs/ojcore',
         'knockout',
         'jquery',
         'app',
         'ojs/ojknockout',
         'ojs/ojknockout-model',
         'ojs/ojdialog',
         'ojs/ojinputtext',
         'ojs/ojinputnumber',
         'ojs/ojbutton',
         'ojs/ojtable',
         'ojs/ojdatacollection-common'],
        function(oj, ko, $, app)
        {
            var vm = new app.contactsVM();
         
            $(document).ready(function()
            {
                ko.applyBindings(vm, document.getElementById('mainContent'));

                //Show the content div after the REST call is completed.
                $('#mainContent').show();
            });
        });

and app.js

define(['ojs/ojcore', 'knockout', 'ojs/ojmodel'],
       function(oj, ko)
       {
           function viewModel()
           {
                var self = this;
                self.serviceURL =
                   'http://localhost/services/rest/vxdemo/ContactsWorkScreen/data/contacts';
                self.dataSource = ko.observable();
                self.ContactsCollection = ko.observable();
               
                self.myBasicAuth = function() {};
                self.myBasicAuth.prototype.getHeader = function ()
                {
                    var headers = {};
                    headers['Authorization'] = 'Basic ' + btoa("admin:admin");
                   
                    return headers;
                };
               
                parseContact = function(response)
                {
                    return {ID: response['ID'],
                            FIRSTNAME: response['FIRSTNAME'],
                            LASTNAME:response['LASTNAME']};
                };

                var Contact = oj.Model.extend(
                {
                    urlRoot: self.serviceURL,
                    parse: parseContact,
                    idAttribute: 'ID'
                });
   
                var myContact = new Contact();
               
                var ContactsCollection = oj.Collection.extend(
                {
                    url: self.serviceURL,
                    model: myContact,
                    oauth: new self.myBasicAuth(),
                    comparator: "ID"
                });
               
                self.ContactsCollection(new ContactsCollection());
               
                //simple Request test
                //self.ContactsCollection().fetch({headers: {"Authorization": 'Basic ' + btoa("admin:admin")}});
               
                self.dataSource(new oj.CollectionTableDataSource(self.ContactsCollection()));      
           }

           return {'contactsVM': viewModel};
        }
    );

Above files are not enough to run the example because you need a full JET application. You can download a JET application from the official site (-> Getting started with Oracle JET -> Downloading Oracle JET). The QuickStart template works well. Unzip the application into the directory: <VisionX_folder>/rad/apps/visionx/WebContent/ojet (ojet must be created manually). Simply copy the example files in the ojet, ojet/js folder.
Open the browser and navigate to: http://localhost/ojet/

My source code is small and simple but I don't know if it could be optimized. The official CRUD example application has more features and doesn't connect to a real REST service.
It wasn't funny to use/read the example because it's much for such a simple use-case. I found a similar but inofficial example. This was nice but didn't solve the Basic authentication problem!

Long story, short:

I found no option for Basic authentication and no documentation, but found that OAuth is supported. Not the same as Basic authentication but something I could search in the source code. The Model file was the right place to search (-> oauth).

And my simple solution for Basic authentication was:

self.myBasicAuth = function() {};
self.myBasicAuth.prototype.getHeader = function ()
{
  var headers = {};
  headers['Authorization'] = 'Basic ' + btoa("admin:admin");
                   
  return headers;
};

Username and password are hardcoded, but it's easy to replace the code with a better solution.

The "authenticator" will be set as oauth property:

var ContactsCollection = oj.Collection.extend(
{
    url: self.serviceURL,
    model: myContact,
    oauth: new self.myBasicAuth(),
    comparator: "ID"
});

The problem with this API is that it's not guaranteed that the getHeader method will be used in future releases. And it's also not perfect to use oauth for Basic authentication, but whatever.

Our example runs with VisionX' embedded tomcat. If you want to test with your own application server, you should enable CORS for VisionX to use the REST services from an external server:

To enable CORS, change the web.xml in <VisionX_folder>/conf/ and add

<init-param>
  <param-name>cors.origin</param-name>
  <param-value>http://localhost:8080</param-value>
</init-param>

to RestletServlet definition.

Example Download

categories Development, Fun | rjahn | 29/02/2016 | comments Comments (1)

categories ,

Use OBridge together with JVx

OBridge is a nice Java FOSS project. The description according to the website:

OBridge generates standard Java source code for calling PL/SQL stored procedures and functions.

It's focus is on Oracle but this wasn't a limitation for us to test it with JVx.

Most of you know that JVx has generic support for procedure/function calls which is DB independent. The implementation is not really type-safe but it's simple.
If type-safety is preferred, you could use OBridge for your application.

I write about this library, because it's super small and simple. We love small and simple things :)

Assume, we have following PL/Sql procedure:

CREATE OR REPLACE PROCEDURE execProcedure(pNumber IN OUT NUMBER,
                                          pInText IN VARCHAR2,
                                          pOutText OUT VARCHAR2) IS
  nr NUMBER := pNumber;
BEGIN
  pOutText := 'Out: '|| pOutText ||' In: '|| pInText;

  pNumber := pNumber + pNumber;
END execProcedure;

and function:

CREATE OR REPLACE FUNCTION execFunction(pNumber IN OUT NUMBER,
                                        pInText IN VARCHAR2,
                                        pOutText OUT VARCHAR2) RETURN VARCHAR2 IS
  res VARCHAR2(200);
  nr NUMBER := pNumber;
BEGIN
  pOutText := 'Out: '|| pOutText ||' In: '|| pInText;

  pNumber := pNumber + pNumber;

  RETURN 'IN-Param Nr: '|| nr;
END execFunction;

 

With JVx, the procedure and function call will look like following JUnit test:

@Test
public void testCall() throws Exception
{
    DBAccess dba = DBAccess.getDBAccess("jdbc:oracle:thin:@localhost:xe", "test", "test");
    dba.open();
   
    /**
     * Procedure call.
     */

    OutParam ouTextParam = new OutParam(InOutParam.SQLTYPE_VARCHAR);
    dba.executeProcedure("execProcedure", BigDecimal.valueOf(25),
                         "Hello JVx' procedure", ouTextParam);

    Assert.assertEquals("Out:  In: Hello JVx' procedure", ouTextParam.getValue());

    /**
     * Function call.
     */
   
    ouTextParam = new OutParam(InOutParam.SQLTYPE_VARCHAR);
    Object oResult = dba.executeFunction("execFunction", Types.VARCHAR,
                                         BigDecimal.valueOf(25),
                                         "Hello JVx' function", ouTextParam);
   
    Assert.assertEquals("IN-Param Nr: 25", oResult);
    Assert.assertEquals("Out:  In: Hello JVx' function", ouTextParam.getValue());
}

 

and the same with OBridge:

@Test
public void testCall() throws Exception
{
    DBAccess dba = DBAccess.getDBAccess("jdbc:oracle:thin:@localhost:1521:xe", "test", "test");
    dba.open();
   
    /**
     * Procedure call.
     */

    Execprocedure proc = ProceduresAndFunctions.execprocedure(BigDecimal.valueOf(35),
                                           "Hello OBridge procedure", dba.getConnection());
   
    Assert.assertEquals("Out:  In: Hello OBridge procedure", proc.getPouttext());

    /**
     * Function call.
     */
   
    Execfunction func = ProceduresAndFunctions.execfunction(BigDecimal.valueOf(35),
                                            "Hello OBridge function", dba.getConnection());
   
    Assert.assertEquals("IN-Param Nr: 35", func.getFunctionReturn());
    Assert.assertEquals("Out:  In: Hello OBridge function", func.getPouttext());
}

 

The OBridge code saves two LoC for the call, but it needs some additional classes and packages in your application. If you change your procedure or function definition in the database, you have to recreate the Java files.
This is not needed with pure JVx, but it's your choice.

The code generation is not tricky, simply follow the official documentation. Our steps:

  • Create the file config.xml in the working directory of your project
    <?xml version="1.0" encoding="UTF-8"?>

    <configuration>
        <jdbcUrl>jdbc:oracle:thin:test/test@localhost:1521:xe</jdbcUrl>
        <sourceRoot>./src/</sourceRoot>
        <rootPackageName>com.sibvisions.apps.obridge.db</rootPackageName>
        <packages>
            <entityObjects>objects</entityObjects>
            <converterObjects>converters</converterObjects>
            <procedureContextObjects>context</procedureContextObjects>
            <packageObjects>packages</packageObjects>
        </packages>
    </configuration>

  • Run the main class: org.obridge.OBridge with argument: -c config.xml
    (or use -c fullqualified_path_to_config.xml)
 

If you love our generic built-in solution, you don't need OBridge but if you prefer type-safety it's definitely an option.

categories Development, Fun | rjahn | 26/02/2016 | comments Comments (0)

categories

VisionX 2.3 - Feb, 5th

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!

categories Release notes | rjahn | 04/02/2016 | comments Comments (0)

categories

Release day - Merry Christmas

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!

categories Release notes | rjahn | 24/12/2015 | comments Comments (0)

categories , , ,

Using Boolean Datatype with Oracle and JDBC

Oracle doesn't use/define the SQL Type Boolean. You can't define a column in a table as Boolean. It's possible to use boolean in PL/Sql e.g. for procedures or functions but you can't call the function from SQL.

Example functions

CREATE OR REPLACE FUNCTION afunc(pIn BOOLEAN) RETURN BOOLEAN IS
BEGIN
  RETURN pIn;
END afunc;
/

CREATE OR REPLACE FUNCTION bfunc(pIn VARCHAR2) RETURN VARCHAR2 IS
BEGIN
  RETURN pIn;
END bfunc;
/

It's possible to call:

SELECT bfunc('Hello') FROM dual;

but it's not possible to call:

SELECT afunc(true) FROM dual;

or

SELECT afunc(1) FROM dual;

(1 = true, 0 = false; boolean is mapped to integer in Oracle)

If you want to call a procedure or function which defines boolean parameters, it's not possible without tricks with Oracle JDBC driver. This is annoying.

We solved the problem in JVx 2.4 and it's now possible to call functions or procedures without tricks. Here's a "more complex" example. We define a function with an input parameter and a procedure with an input/output parameter in a package:

CREATE OR REPLACE PACKAGE TestBoolean IS
 
  FUNCTION test(pOutput BOOLEAN) RETURN BOOLEAN;
  PROCEDURE testBoolOut(pOutput IN OUT BOOLEAN);
 
END;
/

CREATE OR REPLACE PACKAGE BODY TestBoolean IS

  FUNCTION test(pOutput BOOLEAN) RETURN BOOLEAN IS
  BEGIN
    IF (pOutput) THEN
      RETURN FALSE;
    ELSE
      RETURN TRUE;
    END IF;
  END;

  PROCEDURE testBoolOut(pOutput IN OUT BOOLEAN) IS
  BEGIN
    IF (pOutput) THEN
      pOutput := FALSE;
    ELSE
      pOutput := TRUE;
    END IF;
  END;

END;
/

Now we use JVx' DBAccess to call the function and procedure.

//DB connection
DBAccess dba = new OracleDBAccess();
dba.setUrl("jdbc:oracle:thin:@oravm:1521:XE");
dba.setUsername("test");
dba.setPassword("test");
dba.open();

//Function call
Assert.assertEquals(Boolean.TRUE, dba.executeFunction("TESTBOOLEAN.TEST", Types.BOOLEAN, Boolean.FALSE));

//Procedure call
InOutParam param = new InOutParam(Types.BOOLEAN, Boolean.FALSE);
dba.executeProcedure("TESTBOOLEAN.TESTBOOLOUT", param);

Assert.assertEquals(Boolean.TRUE, param.getValue());

The whole type mapping was done in OracleDBAccess and it's invisible for you. Simply use the API to call procedures or functions.

categories Development | rjahn | 18/12/2015 | comments Comments (0)

categories ,

eTV in Action

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.

categories Development | rjahn | | comments Comments (0)

categories , , , ,

Our nice JavaFX mobile applications

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

categories Development | rjahn | 28/11/2015 | comments Comments (0)

categories , , , , ,

Details about LIVE css hacking

We have a short video about our LIVE css hacking feature for mobile JavaFX applications on YouTube:

JavaFX mobile LIVE CSS hacking


We demonstrate a mobile JavaFX application, running on a Nexus 9 Tablet. It's a pure JavaFX application with our mobile application frame and it was deployed with JavaFXPorts. In the video, we change some styles on our Laptop and the application updates its styles on demand. This is really useful because resolution/screen size can be different. Sometimes the background color looks different than on a Desktop, ... And it's easy to try out new styles without application restarts - same principle as developer tools for Chrome or FireBug for Firefox.

But how did we implement this feature?

It was too easy :)

Here are the "secrets":

  • A simple socket server for the application
  • A custom URL handler for loading remote-retrieved styles
  • A simple File watcher for the client

That's it!

But to be honest, the custom URL handler was very tricky, because we tried to find a very smart, non-static, solution. And every platform has its specific handling and URL loading mechanism. But one step after another.

I guess you know that a socket server isn't a real problem. We wrote our own "generic" socket server some years ago, for JVx and it's not tricky. In principle, it works like this snippet:

ServerSocket serverSocket = new ServerSocket(9999);
Socket clientSocket = serverSocket.accept();

PrintWriter out = new PrintWriter(clientSocket.getOutputStream(), true);
BufferedReader in = new BufferedReader(new InputStreamReader(clientSocket.getInputStream()));

The problem is that you need a sort of protocol for the content. We've used our UniversalSerializer and send simple POJOs. The stylesheet POJO contains the css file as byte[]. Here's our server code:

CommunicationServer server = new CommunicationServer(findHost(), 9999);
server.addReceiver(r ->
{
    javafx.application.Platform.runLater(() ->
    {
        synchronized (oSync)
        {
            if (sLastCss != null)
            {
                logger.info("Remove remote CSS file ", sLastCss);

                launcher.getScene().getStylesheets().remove("remotecss://" + sLastCss);
               
                ObjectCache.remove(sLastCss);
            }

            sLastCss = ObjectCache.createKey() + ".css";
       
            ObjectCache.put(sLastCss, r.getObject(), -1);

            logger.info("Install remote CSS file ", sLastCss);
       
            launcher.getScene().getStylesheets().add("remotecss://" + sLastCss);
        }
    });
   
    return null;
});
server.start();

We add custom stylesheets with remotecss as protocol. The resource loading mechanism of Java(FX) tries to load the URL automatically. The protocol isn't a standard protocol and so we had to create a custom URL handler. The problem wasn't the handler itself because it's straight forward:

public class Handler extends URLStreamHandler
{
    @Override
    protected URLConnection openConnection(URL url) throws IOException
    {
        if (url.toString().toLowerCase().endsWith(".css"))
        {
            return new CssURLConnection(url);
        }
       
        throw new FileNotFoundException();
    }
}

And the CssURLConnection also wasn't a problem:

private class CssURLConnection extends URLConnection
{
    public CssURLConnection(URL pUrl)
    {
        super(pUrl);
    }

    @Override
    public void connect() throws IOException
    {
    }

    @Override
    public InputStream getInputStream() throws IOException
    {
        Object oCss = ObjectCache.get(getURL().getHost());
       
        if (oCss instanceof String)
        {
            return new ByteArrayInputStream(((String)oCss).getBytes("UTF-8"));
        }
        else if (oCss instanceof byte[])
        {
            return new ByteArrayInputStream((byte[])oCss);
        }
       
        throw new FileNotFoundException();
    }    
}

The problem was that the JVM didn't know how to load remotecss:// URLs because it doesn't have a default handler. The JVM offers different solutions for this problem and the well known is:

URL.setURLStreamHandlerFactory(factory);

But this is a static mechanism and we didn't know if another library uses the same method. There's no getURLStreamHandlerFactory in URL and the solution wasn't good enough for us. For a simple test application this restriction shouldn't be a problem, but we didn't like it because we're framework developers.

There's another solution for the problem, because the source code of URL contains the static method:

static URLStreamHandler getURLStreamHandler(String protocol)

This method tries to load protocol handlers automatically, if definded via system property java.protocol.handler.pkgs or from package: sun.net.www.protocol.protocolname.Handler

After reading the source code, we found a blogpost about this feature, read more. It was easy to search with the right keyword after we knew the solution.

...be careful with security manager, but this shouldn't matter.

The URL implementation for Android is a little bit different because but if you set the system property, it'll work as expected.

The hardest parts were done and the last thing was the file watcher client because we planned to send the changed CSS file(s) to the app automatically. Here's our solution (Java8 style):

thWatcher = new Thread(() ->
{
    File fi = ResourceUtil.getFileForClass("/live.css").getParentFile();

    FileSystem fsys = FileSystems.getDefault();

    Path pathCss = fsys.getPath(fi.getAbsolutePath());

    try
    {
        try (final WatchService service = fsys.newWatchService())
        {
            WatchKey wkey = pathCss.register(service, StandardWatchEventKinds.ENTRY_MODIFY);

            while (!ThreadHandler.isStopped(thWatcher))
            {
                WatchKey key = service.take();

                for (WatchEvent<?> event : key.pollEvents())
                {
                    Kind<?> kind = event.kind();

                    if (kind == StandardWatchEventKinds.ENTRY_MODIFY)
                    {
                        Path changed = (Path)event.context();

                        if (changed.toString().equals(FileUtil.getName(CSS)))
                        {
                            File fiModified = new File(fi, changed.toString());

                            if (fiModified.lastModified() > 0)
                            {
                                if (lLastModified != fiModified.lastModified())
                                {
                                    try
                                    {
                                        client = getClient();
                                        client.send(FileUtil.getContent
                                           (ResourceUtil.getResourceAsStream("/live.css")));

                                        lLastModified = fiModified.lastModified();

                                        System.out.println("Sent CSS to application");
                                    }
                                    catch (Exception e)
                                    {
                                        // next try
                                        client = CommonUtil.close(client);
                                    }
                                }
                            }
                        }
                    }
                    else if (kind == StandardWatchEventKinds.OVERFLOW)
                    {
                        continue;
                    }
                }

                if (!key.reset())
                {
                    thWatcher = ThreadHandler.stop(thWatcher);
                }
            }

            wkey.reset();
        }
    }
    catch (Exception e)
    {
        e.printStackTrace();

        synchronized (TestCommunication.this)
        {
            TestCommunication.this.notify();
        }
    }
});

thWatcher.start();
ThreadHandler.add(thWatcher);

The source code examples aren't complete but I guess you can implement your own solution based on them. We made tests with iOS, Android and Desktop applications and didn't have any problems. The CSS editing feature would be a very useful extension for ScenicView but it's not available right now.

Our test devices:

Test devices

CSS hacking - test devices

categories Development | rjahn | 28/10/2015 | comments Comments (0)

categories , ,

© SIB Visions GmbH