Swing Bubble Charts

Iceberg Charts also allows you to create bubble charts. Here’s an example I created :

bubble1

The chart displays all the states in the USA comparing ‘Gun Ownership’ against ‘Homicide Rate’. I got this data from Wikipedia, and set up the code like this :

There are a few important things you need to consider :

Factor

You need to give a bubble chart a factor to multiply the magnitude by so that it scales nicely with the X or Y axis. If we did not have a factor then population variable (ie. the circle size) will be far too big to get any decent graph. It needs to be scaled down (in this case by 0.0000001), so that the circles are a nice size in the graph.

Coloring

The color is blended with red, and also has some transparancy. This helps identify bubbles that might be hidden behind other bubbles. I may look into customizing the bubble coloring/gradients etc.

Multi Series

Multi-series bubble charts are possible. The following example shows how you can do two series bubble charts :

bubble2

 

 

 


Posted in Iceberg Charts, Swing, Swing Components | Tagged , , , | Leave a comment

Java Swing Equation Builder

 

A few years ago back in 2006 I created a Swing component called ‚Equation Builder‘. It builds equations in the natural visual style that you get when writing on paper.

You can build some pretty cool looking equations like this :

ebimage001

Elements can be dragged and dropped onto empty nodes in the canvas in the middle.

When you first open up the application it looks like this :

ebimage002

A node represented by the gray circle is displayed in the middle. You can drag node operators (displayed in the table on the right), or inputs (table on the bottom) onto this node. You can also replace it with a constant or drag other calculations onto this node (second tab on the bottom).

 

Let’s drag an addition operator onto the root node :
ebimage003

 

Because an addition operator is binary, the single empty node gets replaced with two empty nodes.

We can replace one these empty nodes with another operator, division, which is also a binary operator however visually it is up-down rather than left-right :

ebimage004

 

You get the picture..! Just keep adding operators and the thing expands and expands.

 

A node can also be replaced with an input (aka variable) defined in the table. Or a node can also be replaced with a constant (aka a number). You just have to click on the empty node and a textfield appears. You can then add any kind of number to the equation.

ebimage005

 

There is even an implementation of the sum operator (Sigma). Here is an arbitrary example:

ebimage006

 

I also have a power operator implemented :

ebimage007

 

 

Hmm… it needs a bit more work, but still it looks OK. (I have no idea what those gray squares are L )

 

I think technically this program is pretty interesting.

What is most interesting to me is that the whole equation is rendered using GridBagLayout, which shows how powerful GridBagLayout can be. Everytime you replace an empty node, you are removing the empty node object, keeping the grid bag constraints, and with these grid bag constraints, adding a new object in ist place.

There is a type of Model-View relationship in the elements. There are the visual object, all extending from Node.java, and there is a model hierarchy which shadows this visual model. Elements in this hierarchy all extends from CalculationObject.

I think ist kind of redundant having these two hierarchy models. I’m not sure what I was thinking those years ago.

Anyway this project needs a lot of love. So if you want to contribute on Github go for it! If you feel like you could use this component please let me know. I would be really interested to know how someone would use this component.

 

The project can be downloaded here :

https://github.com/oliverwatkins/calculation_project

 


Posted in Swing, Swing Components | Tagged , , | Leave a comment

Cool Accordian Outlookbar in Swing

A while back I created a component that is a simple accordian component that can be used in any swing application.

I have massively improved this component. Let’s have a look at it :

accordian2_1

 

Improvements are :

  • Animation! Yes animation in a Swing application! The segments actually slide up and down.
  • Inner accordians. You can imbed an accordian in an accordian.
  • Icon support
  • Look and feel options. Background and arrows.

Here are some more options :

The normal plain look :

accordian2_2

Gradient on top level and no icons :

accordian2_3

How to use this

Using this component is fairly straight forward. First construct a SideBar object. You define :

  • Button type
  • Text
  • Texture Type
  • Width
  • Animation Mode

Example :

 

All top level SideBars should have SideBarMode.TOP_LEVEL set. All embedded sidebars should have SideBarMode.INNER_LEVEL set.

Next, add some SidebarSections. These objects define the subsections or segments that make up the accordian component. The SidebarSections need a reference to the parent Sidebar object, a title, and the component that is to be displaed in its expanded state (this might be a JList or a JTree).

Download Now

  • The source code for this component can be found on the Swing Library Github page . Go to the DownloadZIP button and download the library.

gitdownload

  • Run the class SliderTester to see the accordian component in action and see how this component works

Example Configuration Code

This is the code I used for the first screenshot

Icons used in this component example are ‘Must Have Icons’ by VisualPharm. URL : http://www.iconarchive.com/show/must-have-icons-by-visualpharm.html


Posted in Swing Components | Tagged , | Leave a comment

Swing Error Dialog with Exception Displayer

When you get an error popup dialog in your application, sometimes you want to quickly have a look at what the exception is, instead of having to rummage around for a log file. This component, “ErrorDialogWithException” allows you to pop up a text area in a panel below the main dialog area.

Closed :

ex_dial_1

Open :

ex_dial_2

As a developer developing an application it is nice to get a quick look at what the problem is, and it can also be helpful for regular users calling support with the problem, as they can easily copy and paste the text from the text area.

 How to use it :

Use the ExceptionDialog in catch statements like in the code snippet below :

 

Code :

 

Feel free to use this component. Please leave a comment!
 

This component is also in the swing library project on Github : https://github.com/oliverwatkins/swing_library

 


Posted in Swing, Swing Components | Tagged , | Leave a comment

Simple Login Dialog in Java Swing

Here is a simple login dialog for anyone to use for free. It looks like this :

login_dialog

Creating a login dialog is not rocket science, however I come across login dialogs all the time. It’s just nice to not have to “roll-your-own” so to speak, so I thought I’d share this bit of code for anyone that it could help.

It basically uses BorderLayout as a base, a FlowLayout aligned to the right for the two buttons, and the textfields and labels use a GridBagLayout for correct placement in the center panel. I’ve added some event listeners to the code for convenience.

I will add it to my Swing Library github project soon : https://github.com/oliverwatkins/swing_library

Here is the code :


Posted in Swing, Swing Components | Tagged , | Leave a comment

Creating a RCP Application in Netbeans – [Part 2]

Adding a Module with Functionality.

In our last tutorial we made a pretty bare bones application with nothing in it.

We made two modules –

  • a branding module that offers a splash screen
  • and an application module that acts as an entry point to the application (like a main() method if you want to see it that way)

Now we want to add modules with some proper functionality.

  1. Add a new Maven module by selecting ‘Create New Module..’ via a right click on the modules folder. Call it something like CustomerModule.

image001

  1. By default the Project name is the same as the Maven Artifact Id. Change it to something like ‘HappyDog CustomerModule’.

image002

Now we should see something like this :

image003

  1. Let’s create some packages in our CustomerModule and add three java files :

image004

The java files represent standard patterns you might find in a Swing application; the MVC pattern  and delegate pattern.

  • The Customer is a simple POJO :

  • The CustomerTableModel is a Swing table model class which uses the Customer POJO to display data in a table.

  • Finally we have a delegate which centralizes calls associated with the customer module.

 

The delegate is a thread safe singleton that contains some incomplete methods that we may want to implement later.

 

 

Creating the GUI

Create a Panel

  1. Now right click the happydog.customermodule.ui package and select New àWindow.
  2. Make sure the ‘Open on Application Start’ checkbox is set.

image005

  1. Select ‘Next’.
  2. Add a ClassName prefix called ‘Customer’

image006

  1. Select ‘Finish’.

The New Window wizard has created a java file ending in TopComponent and a form file also ending in TopComponent.

TopComponent is the basic unit of display in NetBeans and represents a window, tabbed pane or inner frame. A lot of the code in the java file is auto-generated and non-editable. It may look a bit scary but it is really simple if understand that there are only a few points where you can modify the code. The designer handles most of the wiring.

The CustomerTopComponent.form file is a file that NetBeans uses internally to store information about the GUI component. Generally this file is kept as invisible as possible to the end user.

 

Add GUI Components

If we open the CustomerTopComponent file and select design mode we will see a palette where we can drag components onto a panel :

image007


  1. Drag a table and three buttons onto the panel as shown in the picture.
  2. Select the jTable, and then switch the ‘properties’ view to the ‘code’ view. Change the name to something more readable such as CustomerTable :

image008

Hookup Events

When we fire up the screen we want to load up all our customers in the system, ie we want to populate the table with all the data from our CustomerDelegate.getCustomers() call.

  1. Open the CustomerTopComponent file and change the constructor by adding this code :

 

We can change the text on our buttons too by changing the text property on the buttons. Make sure you also rename the variable name of the buttons as well (via the Code tab).

  1. Change the button text via the properties tab :

image009

The event hooks can be found in the Events tab next to the Code tab. Just select one of the event methods you want to implements (eg. actionPerformed).

  1. Select the actionPerformed event :

image010

 

For now we can put some dummy code in the empty methods.

 

 

Incorporating Module Into Super Project

If we do a ‘clean build’ on the project and then run it, we should see :

 

image011

 

 

Ignore the start screen and other tabs that appear. The module is not supposed to run by itself but sometimes it’s good to get a quick look at how it might look.

As we can see it all looks pretty correct. The ‘TopComponent’ is being shown on startup with the table data.

 

At the end of the day we really want to run this module within our super project HappyDog. So we should add the module we created as a dependency in the application module.

  1. Right click HappyDog app à dependency.
  2. Select ‘Add Dependency..’
  3. Under ‘Open Projects’ select the Customer Module.

image012

Your folder structure should look like this :

image013

 

Do a Maven clean and build on the super project, followed by a clean and build on the ‘HappyDog app’ project.

Right click on the HappyDog app, select ‘Run’ and you should see the module has magically appeared in the app project.

 

image014

 

 

Part 3 Coming Soon!!!

All the code for this tutorial can be found on github.

 

 


Posted in Netbeans RCP, Netbeans Tutorial, Tutorial | Tagged , , | Leave a comment

Row Number Column in JTable

Ever wanted to have a number column in your JTable similar to Excel?

This utility class I made takes in a JTable and appends a number column.

Let’s take a look at it!

The rendering of the number column matches the rendering of the headers :

rowtab1

As you scroll horizontally, the row column remains fixed in place :

rowtab2

Highlighting of rows also incorporates the number column :

 

rowtab3

 

As the numbers increase, the width of the column needs to be changed. This happens automatically and also shrinks when the numbers get smaller :

rowtab4

How does this work?

The row column is really just a JTable with a single column. This table is then lined up next to the main table making sure that all metrics match, so that it appears to just be another column in the JTable. A simple table model is required which is just an numerical incrementation, and listeners need to be set up to link the two tables. When the vertical scrollbar is moved, the numerical table listens and changes its position respectively. When a horiyontal scroll happens then the numerical table ignores it.

All the code can be found on my github repository

Or you can just copy and paste the code below :

 


Posted in Swing, Swing Components | Tagged , , | 1 Comment

Javascript Framework Review

Recently I had to do a Javascript Framework evaluation for a client.

Prerequisites for the frameworks was that the framework should have sophisticated tables (aka Grids) and sophisticated dialogs. Also of interest in our evaluation was if the framework could do treetables.

The things we were interested in for a grid were standard functionality that you would expect in a grid widget; sorting, filtering, cell editing, and also some less common features such as ‘column picker’ – that is, being able to choose which columns to display using a palette. We were also looking at column manipulation (resize, position), and file export.

What we were looking for in a dialog/window, was ability to display as modal dialog, and also dialog manipulation, ie moving, resizing.

These are the results of our research (click on image for better quality) :

js

 

The four yellow highlighted columns are the shortlist of candidates (we eventually went with extjs). Y=Feature is offered, N=Not offered, and we also have question marks in our analysis, where it wasn’t clear if it was offered or not. It would have been possible to dig deeper had we more time.

The bottom row is Stackoverflow References (SOR). Which is an indication of popularity and adoptability.

We also looked at cost, but that was not so much of an issue.

The frameworks can be broadly divided into those that are grid-only (SlickGrid, Flexigrid, Ingrid, Datatables and jqGrid), and those that offer a complete GUI framework (jQueryUI, extjs, yUI, DHTMLX, qooxdoo, Smartclient, Wakanda, Webix).

Some of these can also be lumped into a category as ‘framework for plugins’. jQuery and Dojo offer a foundation framework, on top of which plugins can be developed. In hindsight I guess AngularJS/Ember/Bootstrap and friends could also be lumped into that category.

A few words on some of the technologies :

jQueryUI – disappointing. Only really offers a pop-up dialog.

ExtJS – very comprehensive, high adoption, not exactly cheap.

yUI – fairly inconsistent, and has now been discontinued.

DHTMLX – simlar somewhat to extjs

qooxdoo – comprehensive and suprisingly free. The only thing that put us off was the low adoption rate, but hopefully that will change in the future.

SmartClient – Powerful rich components that costs money. Suffers from low adoption rate.

Dojo – Looks quite good. I think we didn’t go for this because of its plugin architecture.

 

 


Posted in JavaScript | Tagged , , , , , | Leave a comment

What is a Tree Table?

One of the most advanced GUI Components is the treetable. It looks really fancy, but what exactly is it and what scenarios can it be used with?

As the name suggests a treetable is a melding of a table and tree. The left side behaves like a tree component, nodes can be expanded or collapsed, and the right side behaves somewhat like a table with columns and rows of data.

To understand a treetable lets first have a look at a standard tree component.

Tree

A tree component is probably most famously known from Windows Explorer. Visually it is a series of indented nodes that may or may not be expandable.

There are two main ways of using a tree to represent a data structure, and then there is everything in between.

(1) Hierarchy

First it can represent a hierarchical structure. This is very evident in Windows Explorer. A folder can contain many folders, which can also contain many folders, and so on.

As a class diagram it would look like this:

image002

image003

This is a classic Composite Pattern. Each object instance can contain a number of instances of itself.

(2) One-to-Many

A tree component can be used to represent a one to many relationship. For example the Devices Manager in Windows lists a number of devices for a computer:

image006

image007

This model will only expand to one level.

More than one one-to-many relationships can also be represented. Each entity that contains a further entity can be expanded:

image010

image011

 

(Make sure to use icons judiciously to clearly illustrate to the end user the different entities. In the above example the device nodes should use a different icon).

(3) Combination

The previous two structures can be combined :

image014

image015

As you can see each folder can contain an instance of itself, however a file cannot, and can only be a leaf node.

TreeTable

A treetable supplies extra columns to the right of the tree. The intention is to illustrate that all the nodes and leafs in the tree share properties represented by the columns.

The below example shows how things might look using the ‘combined structure’ example above.

image017

The property ‘type’ is common across all entities. However the property ‘size’ is common only to the file entity. Notice the empty space in the ‘size’ column for the folders.

Sorting

A disadvantage of a treetable is that you can’t sort over all rows like in a normal table.

If you were to sort all the rows, then you would break the tree.

In Treetables you can only sort groups of children in nodes. For example in our previous example performing a sort on ‘size’ would only have an effect on a group of children belonging to a node like so :

image019

Filtering

Filtering a treetable presents the same issues as filtering a standard tree.

In a traditional table, performing a filter operation simply removes rows from the table. However when filtering a tree, the structure needs to be maintained all the way down to the root.

This maintaining of nodes in a filtering operation can create a lot of visual fluff.

For example :

Final Points

When to use:

· Hierarchical relationship with properties that need to be shown
· One-To-Many or Combination where the entities share a lot of properties.

When not to use:

· A full sort is required of rows.
· Small number of leafs, of which properties to be shown do not exist in the hierarchy entity. Ie A lot of real estate on the widget is not used. See below:

 

image021

Framework Examples:


Posted in Usability | Tagged , , | Leave a comment

Loading Spinner with jQuery Promises

In your website you want to call a web service that performs some long running task. It may be loading a large set of data or performing a complex calculation on the server, so you want to animate a spinner or a loading indicator over the screen or component.

You can achieve this effect using jQuery promises.

Assume your web service call looks like this :

Because your function returns an AJAX object it can be used with the $.when function in jQuery.

If you start your spinner, then place your function in the $.when function, and then disabling the spinner in the always block, you will get seamless spinner activity.

All I am using for the spinner is an extjs loading panel using the call window.setLoading(true). However most frameworks have some kind of a spinner, or progress bar. Eg. angular has http://fgnass.github.io/spin.js/ .

Promises tidy things up by not needing to have the callback method inside the ‘always’ block in the ajax code, making the method more reusable.


Posted in JavaScript | Tagged , , | Leave a comment
THREE_COLUMN_PAGE