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

Window shutter UI - WiiU

Because I got some emails, here's the window shutter UI how it looks on my Wii U. Sure, the space is not perfectly used, but the UI wasn't optimized for Wii U. Also the agent name of the browser wasn't checked to optimize controls.

But it's ok and control just works :)

The pictures (phone cam):

Wii-U controller

Wii-U controller

Wii-U (TV)

Wii-U (TV)

IoT: Window shutter control with JVx, Vaadin and RaspberryPi

It's about two years ago that I wrote about controlling window shutters. The system run for 2 years without problems but it was time to change "something" because it was vacation time and I thought it would be useful to showcase our vaadin UI :)

The old system was controled via (good old) SMS - without GUI. It had a lot of commands but only en/disable up/down were heavily used because the integrated public holiday and weekend automatism solved most use cases. The SMS contol was great and worked without problems but it was a problem if you didn't know the commands and syntax by heart!

Another consideration was a simple real-world showcase for our vaadin UI, the responsive feature and push support. Our application frame was already responsive and worked on desktop, tablet and smartphone browsers. I thought about using AngularJS or different "hypeware" but I didn't have weeks to research and implement. My new GUI had to be finished in few hours. And it should be maintainable for the next two (or more) years without problems.

I love researching hypeware... but simply read some articles if you want:

There are too many frameworks, everyone is different - no real standard APIs (didn't count HTML and CSS). You can't be sure that the framework is future-proof because developers love to change software to be incompatible with previous versions just to be state-of-the-art.
And why should a developer use 5 or more frameworks to create a simple application for desktop and mobile? You'll need more libs if your application needs DB and CRUD support.
C'mon we need simple and small frameworks and not what we have right now! The world is talking about microservices and what about "micro frameworks"?

Conclusio: I didn't find something comparable to JVx. Of course, it's my opinion and I'm JVx developer, but I'm a researcher and the technology isn't a problem if it makes sense to use it.

To be honest: Our Vaadin UI in combination with other JVx features is unbeatable for most application types. Of course, it's not recommended for web pages with custom layout requirements. If you need an "application style" solution with menu and screen/work area or form based - there's nothing comparable.

After I knew that my new GUI would be a JVx' vaadin solution, I had to think about the details. The whole application should be responsive to support every modern device and desktop browsers as well. The application server should be Jetty or Tomcat and it should run on the RasPi. The performance is not critical because the hardware is limited (but cheap).

Software stack: clear
Hardware: clear
Deployment type: clear

Next step was development. This was easy because I re-used existing classes and added some get/set methods to access internal members. The most important change was an event listener because every vaadin client should be updated immediate via push. It wasn't possible without notification mechanism. I thought about an event bus and played around with mbassador. It's a nice and small lib, fast and just works (recommendable).
To be honest: I didn't need it because I didn't need more than one listener and an event bus is not much more than a listener abstraction (with some extras).

After some hours developing and refactoring, everything was ready for a test.... The next decission: Jetty or Tomcat?
I worked with Tomcat for many years and didn't know much about Jetty, only that it's the number one for embedding into applications, supports SPDY and has websocket support. I played around with Jetty and got it running. The installation of my GUI worked like a charme and everything worked except push. I found solutions for embedded run mode but not for standalone Jetty. I'm pretty sure that I missed something, but I wasn't very patient and switched to Tomcat 8.
Not only because of my push problem but Jetty didn't handle requests as expected:

http://localhost/house/ didn't redirect to http://localhost/house/index.html automatically. I didn't have an index.html file in the public file area, anyway the request should be executed. Such requests work with Tomcat without additional configuration.

I'm not happy that my Jetty server didn't work but I'll retry it in the next days :)

Here's a simple screencast of my solution because it's easier to understand:

Window shutter web control


It took me less than one day to finish my GUI and the best: It's family safe.
I tried the GUI with PS4 and WiiU integrated browser and it was great to see shutters moving.

Summary

I've used a RaspberryPi, installed Tomcat 8 with Java8 and deployed my application as war file. The GUI is responsive and supports push via websockets and runs on every device in my house. It wasn't planned using gaming consoles :)

Oh, I forgot to mention: During my tests I found out that Android and iOS support custom Bookmark images for Desktop links but this needs additional tags in index.html (works without, but it's better to include the tags). Our VaadinUI now has built-in support for such images :)

The switch component is available in the Vaadin Directory.

Cross platform GUI development in the press

My latest article about cross platform GUI development is available in current edition of Java aktuell. It's a German magazine and the article is in German!

It's all about application development for Desktop, Web and Mobile (native or web). It's based on Single sourcing and JVx.

You can read the article here (if German isn't a problem). Feel free to post your Feedback!

Switch button for Vaadin 7.1

There's a nice AddOn in the Vaadin Directory. It's a switch button/checkbox. There's an older version for vaadin 6.6+ and the current version for 7.2+.

But the 7.2+ version is not compatible with vaadin 7.1+. We checked the source code and made a version for 7.1.

If you need a 7.1 compatible switch AddOn, simply use this archive. It's a zip archive which contains the pre-compiled class files and changed source files. Simply use the zip (or rename it to jar) to rebuild your widgetset.

Don't use the 7.1 version for 7.2 because the API is different and it won't work. Simply use the original version for 7.2 and newer.

Page Navigation

Plain JVx Vaadin applications don't have page navigation as known from e.g. JSF applications. If you press "back" in your browser, the whole application is lost and "forward" will create a new application. Same problem with "reload".

It has nothing to to with JVx because it's a technology restriction. Isn't it?
Not necessarily!

You should know that vaadin has support for Browser Navigation, but this feature has no standard implementation because every application is different and has different requirements. If you create your own Vaadin application, you'll have to implement your own Navigation. It's not tricky but you should know how it works. A good starting point can be found in the book of vaadin. The main thing is that you should create your application with different views. A view is more or less a page. The navigator supports navigation between views. If you have different views, it's easy to use the Navigator.

But our generic application is a little bit different to plain Vaadin applications because JVx has work-screens. A work-screen is like a View or a page, but technology independent. A work-screen can be used for desktop applications and web applications without code changes. A desktop application usually doesn't offer Navigation as known from web browsers. So it's a good idea to have work-screens because it's independent of the used GUI technology and platform features.

If you use a JVx application as web application with Vaadin UI, you'll miss page navigation - for sure. We made some experiments with vaadin' page Navigation and are happy to present an awesome solution for this problem.

We did a generic implementation in our application frame and now it's possible to navigate between work-screens - out-of-the-box. It's implemented once in our application frame. Simply use it and page navigation works!

Here's a short demonstration:

Browser Navigation


Responsive Web Application

We have a great new feature in our generic web application. It's now responsive and supports big and small devices like smartphones, without additional coding. Everything will work out-of-the-box.

The application is generic which means that it's an application frame that can be used for you own requirements. We have a simple demo application for our internal tests.

Have a look:

JVx application with Vaadin UI


The menu changes the position and size. Also padding and margin are different if there's not enough space.

A DropboxStorage as X-mas present

Merry X-mas :)

We have a little present for you. It's a connector for Dropbox.

The source code is available here.

It's a full IStorage implementation and allows CRUD operations to your Dropbox account. We use it for sharing dynamicly created reports and as document archive. It's very useful because your application doesn't need a mobile client to exchange data with the backend.

If your secretary creates the management report (Word, Excel or Pdf), simply modify or read it via Dropbox. It's really simple because Word and Excel are available for mobile devices. Both tools have a built-in Dropbox support and thus makes it easy to access files.

How to use the storage?

Currently, we don't have a pre-compiled lib, but simply clone the repository and use the ANT build to create your own lib.

It's simple to integrate the storage in your application:

public DropboxStorage getFiles() throws Exception
{
    DropboxStorage storage = (DropboxStorage)get("files");

    if (storage == null)
    {
        storage = new DropboxStorage();
        storage.setAccessToken(SessionContext.getCurrentSessionConfig().
                                   getProperty("/application/dropbox/accessToken"));
        storage.setFileType(FileType.All);
        //use "flat" style
        storage.setRecursive(true);
        storage.open();

        put("files", storage);
    }

    return storage;
}

Before the storage will work, prepare your dropbox account to get an access token. It's not tricky and everything is documented.

There are some examples available as JUnit tests.

A simple Dropbox screen could look like this one:

Dropbox access with JVx

Dropbox access with JVx

JVx with Java6

JVx was based on Java5 and all releases, including 2.1, were built with JDK 1.5. We thought it could be the time for a change and Java5 is not popular nowadays. With JVx 2.2 we'll switch to Java6. It wasn't important for us because JVx has no specifics that need Java6, but some 3rd party libs like RESTlet need Java6. The client-side code of JVx will probably work with Java5 but we'll build our releases with target 1.6.

We made an update to RESTlet 2.2.3 because of some useful changes and also for the side-project JVx.mobile. So we had to switch to Java6 as well. Our repository is already based on Java6 and we started migration of dependent projects and build tasks.

Because of some changes in DBAccess regarding DataSource support, it was also a good idea to use new JDBC drivers and most new drivers are not available for Java5. So we hope you understand why Java6 was a good idea.

The current nightly build was created with Java6. Give it a try.

HANA support for VisionX

What is HANA?

It's the In-Memory database system of SAP, developed in 2010 for, or togehter with some customers to handle big data. You'll find all details here.

The system should be super fast and brilliant... That was the reason why we thought it might be interesting for VisionX and of course, VisionX could be useful for HANA customers.

So what?

We have a lot of experience with most important database systems like Oracle, SQLServer, DB2, PostgreSQL and MySQL but we had absolutely no idea what HANA was. But it has a JDBC driver :) . We also have a lot of experience with JDBC drivers.

So we had the Know-How to do some cool things with HANA. Our simple idea was the integration into VisionX via JDBC driver like all other databases which are already supported. We tried to find out how we could start.

The starting point for HANA development is: http://hana.sap.com/abouthana/developers.html.

To be honest... We didn't read a lot of documentation because we are Researcher. Simply clicked on Try SAP HANA and... found more information.

The first thing we had to learn was, that it's not too easy to start and there's a lot of information about everything and nothing. We tried the "SAP HANA Cloud Platform Developer Edition" but got an error...

After Googling around, we found another starting point: http://scn.sap.com/docs/DOC-31722.

But what about development tools?

We love using Eclipse and SAP has HANA studio and Eclipse plugins. Sounds great, and we found a strange site. A really simple site with minimal information but we didn't find information about the JDBC driver. We read about HANA client which should contain the JDBC driver, but it also was available here. It was another place for downloading HANA software.

Did I tell you that we are Researcher? We love to solve complex and tricky software problems but why are there so many different download sites. All sites are different with more or less information.

Did I tell you that we're tough? You're right, we found the little pieces.

After we found the right path, we made progress because Plugin installation was as simple as it should be. The registration of a dev account was not big problem.

The next "problem" was using Eclipse because we didn't find a simple web site with configuration details. After some googling we had some stackoverflow hints but no complete guide. But it wasn't that hard to find out how it works. Oh I forgot to mention that we tried to get direct access to the DB and not to create a hello world example.

The SAP HANA Administration Console perspective was our friend and we tried to add a new System. After we saw that there's an option for Cloud system, we made some progress :) But don't think it's that easy. Don't forget to create a schema via online system, called Cockpit!

To shorten the story: It's NOT easy to start and too much documentation doesn't help if someone forgets to KIS.

After we had access to our HANA schema and understood how the cockpit worked, we tried to create our first application with VisionX. The next problem was that it's not allowed to connect to HANA instances directly via Internet, without tunneling (as usual). To create a standard JDBC connection via VisionX, we had to create a tunnel. What do you think: An easy task for about 5 minutes or a job for Google?

Long story short:

Learn using NEO (console client). It's part of the HANA SDK.

Working command:

neo open-db-tunnel -h hanatrial.ondemand.com -u p012345678 -a p012345678trial --id schemaID

(The URL is important! We found other URLs which didn't work)

Used the result of the command to create a JDBC connection and we were back in the game.

What was next?

Our dev environment was up and running and VisionX could connect to HANA but we had to do some laborious tasks because HANA had some specifics (not surprisingly). We solved most problems in HanaDBAccess which is now available in JVx.

One of the biggest problem was the JDBC driver. Especially if you try to find some answers in the HANA forum about getting generated keys. The driver developers should listen to their community! (Don't ignore defacto standards)

But ok, that was only one thing. A big problem was the performance of metadata operations. If you try to get a list of unique keys, a list of colum names for a table or foreign keys, be sure you have some extra time because such operations can take a minute or more. Not sure if trial accounts are the botleneck but we thought HANA is always super fast.

We're not sure if no one needs metadata or if we have special requirements, but especially metadata access should be fast in any case!

We learned to live with slow performance and we're pretty sure that SAP will solve this problem.

Did we reach our goals?

;-) What do you think about this:

HANA application with VisionX



This video demonstrates the creation of an application based on HANA. The application was developed with VisionX and deployed as JVx' Vaadin application. I'm not sure if there's a tool which can do it like VisionX but I don't think so because SAP doesn't have one :)

One hint

If you have problems with locked accounts because of invalid connection attempts. Use Eclipse, connect to your schema and execute:

alter user p012345678 drop connect attempts;

Our Eclipse was blocked with this command, but everything worked fine after restart.

Xmas cookies

SIB cookies

SIB cookies

Christmas is coming and we have some presents for our customers :)

Tastes delicious and the cookies were baked with love.
Let yourself be surprised!

Many thanks to Roland and his cooking crew.