A Widget Picker Control in JavaFX

The following video shows a custom control in JavaFX that lets you select items from a list and position them in a grid. The items represent UI widgets, that is, JavaFX controls, with a defined size on the grid. The grid represents a page on which these widgets will be shown.

A Graph Editor in JavaFX

Another thing we’ve been working on is going to see the light of day soon: a graph editor for JavaFX. The current beta version provides the following main features:

  • create draggable, resizable nodes and connections between them
  • add multiple input or output connectors to a node
  • create joints inside a connection
  • add custom skins for nodes, connections, connectors, and joints
  • enhanced user experience through comprehensive styling during drag-and-drop actions

Internally, we use an EMF model to represent the UI objects and their state. The model is in sync with the UI at all times.

Here’s a short video of our current development version:

Navigation

Dear tree huggers,

I’m one of you. I like trees – preferably on the left of my application. They give me the impression that I exactly know where I am and where I can go next. Just recently I learnt how much I appreciate a tree as a navigation element when I worked with Confluence 5 for the first time and tried to replace the navigation tree on the left by the new space sidebar. It felt strange to me because I always looked for things that were not there. I tried to familiarise myself with the dynamic contents of the sidebar, but I gave up after a couple of days. The mental overload was too high.

Why was it so difficult to get rid of the tree?

  • As a developer I’m used to thinking about tree-structured data so trees are in my head all the time..
  • I encounter trees in many of my tools: my IDE, my file manager, my email client.

So I live in a forest. As this is my natural habitat, I’m pretty good with trees. I know how they work and how to find what I want as they are an accurate representation of my mental model in most cases. In other words: my brain was not ready for that sidebar thing.

But there are other people in the world. People who tend to think in different ways than a software developer. Scary, I know.
Some of these people use the software I build and at the same time do not like trees, in particular as navigational elements. Their mental model is different from mine, maybe workflow-centric rather than data-centric. They might not think of the data they’re working with in the same way I do. It’s not unlikely that some of them do not think about their data at all but simply execute a given (no-brainer) task.

In these use cases, a tree is of limited value at best and can even be harmful when the user is faced with too many options and too many paths that do not get him where he wants to go. It is better to restrict user choices and thereby make the user focus on the current task. A context-sensitive UI helps guide the user through the given workflow whereas a tree might encourage the user to meander through the application and explore things are are not to be explored.

No wonder a full chapter of Designing Interfaces is about navigation. No wonder the first paragraph in Microsoft’s developer documentation on tree views is titled “Is this the right control?” No wonder even a small thing like a breadcrumb bar deserves a full-blown description on patternry. Because even with a limited set of navigational widgets, you have many options to do it right and many more to do it wrong. There’s more to navigation than just putting an extra menu bar somewhere. Or worse: a tree.

Having written this already helps me to let go of the tree. Now it’s time to look for alternatives. In my JavaFX world this means goodbye TreeView and hello …

I’ll save the answer for another blog post. Stay tuned.

Designing Interfaces with JavaFX

Good design makes you happy. I was happy when I first saw an iPod, and even happier when I first held it in my hand. Sometimes, you will not notice the positive effects good design has on you, but you will always notice the effects of bad design.

I’m a software developer, not a designer. I’ve known that ever since the late 90’s when I repeatedly failed at impressing my friends with my one-minute Flash intro for my two-paged personal website over at Geocities. Why haven’t I learnt my lesson and still deal with visual design today? Because I believe a good visual design is essential for any software that has a user interface. If you don’t believe me, read what Ben Northrop wrote about the Halo effect.

Designing a great user interface is hard, in particular when you’re more excited about your domain models and your test coverage of 101%. Unfortunately, even smart developers can write bad user interfaces, as Karsten Lentsch explains in this Jax session (in German). It takes a lot of time, training, and user research until you come up with a user interface that doesn’t suck and that is tailored to your user’s needs.

Source: http://franklinandrade.net/

If you’re lucky, you have a thorough and well-organised process for that. If you’re even luckier, you work with a professional user interface designer who can do all those things for you. That’s also a great way to find a scapegoat in the end, by the way.
But even working with a designer doesn’t save you from analysing your information architecture and from organising your application content. There’s still a lot to do.

And this is what I’m currently doing. My job is to develop a user interface for a client-server business application offering a compelling user experience. Here’s what I have so far:

Oh wait! I have some fantastic tools, too. They are centred around JavaFX as we saw the potential of this platform pretty early in our project and it has not disappointed us since. JavaFX supports the design process by its separation into layout (FXML), logic (controller classes), and appearance (CSS) tools. All of these can be tied together nicely with our underlying Eclipse rich client platform thanks to Tom’s e(fx)clipse project.
There’s nothing like a good tool chain. Well, a good design maybe.

So I know JavaFX allows me to develop great user interfaces, but how do I actually do it? How do I put the pieces together? This is the main question I’m going to ask my designer and myself again and again over the course of the next weeks and months. We have a general layout for our application window, which is fairly common in other applications, I would say, but one of the first things to decide now will be the navigation. How can the user go forward and backward in our application? How does she know where she is? And how do we tell her what else there is?
Exploring these questions is going to be part of my next blog posts. Stay tuned.