Interesting Websites

This post is here to help me remember some of the good content out there in the sea of mindless waffle and copy-and-paste blogging.

Presentation Zen
http://www.presentationzen.com/

Adventures of Johnny Bunko
http://www.johnnybunko.com/

Daniel Pink
http://www.danpink.com/

The folks at Metawidget have added support to render the sections as tabbed panels. I have integrated this into the application the results speak for themselves.

Metawidget update

Fixed so that the JTabbedPane with the lists of the domain objects is aligned correctly by modifying the TableGroupLayout.

Using the classes in NetBeans 6.0 RCP application but I needed to changed the classes that load the Metawidget XML configuration to not validate the schema or I get a error.

SEVERE [org.metawidget.inspector.ConfigReader]: Unable to parse config
java.lang.UnsupportedOperationException: This parser does not support specification "null" version "null"
at javax.xml.parsers.DocumentBuilderFactory.setSchema(DocumentBuilderFactory.java:561)
at org.metawidget.inspector.impl.AbstractXmlInspector.<init>(AbstractXmlInspector.java:149)
Caused: org.metawidget.inspector.InspectorException

Metawidget Introduction

Background

Developing forms to update, delete and create domain objects in a business application usually all follow the same style, layout and functionality. So would it not be great if these forms could be created at runtime instead of hand-coded. Introducing MetaWidget ...

How

Metawidget uses inspectors (annotations, XML and JavaBeans) to define the back-end architecture of the application and using this information constructs the front-end at runtime for numerous technologies (Swing, Andriod, Struts, JSF).

The strength of Metawidget is that is allows the developer flexibility to change how the front-end is rendered because Metawidget does not exclusively own the front-end like many other frameworks. To demonstrate this I have changed how my domain objects are presented by configuring and overriding how Metawidget renders them. I also created a single panel and dialog that could display any of my domain objects by inspecting them at runtime and applying a certain layout or style to the panel.

Model

The model for the domain is a simple Organization, Company, Departments object model.

Showing the dialog

The following code constructs a new organization object and adds a company. The dialog and panel that use Metawidget are constructed and instructed to inspect the object and render the user interface.

The organization has a list of companies and when a company is double-clicked then a dialog showing the company is opened. This is all handled by the AbstractDomainObjectPanel class. The JTabbedPanel is an addition that I created for the demo, whereas the original rendering of Metawidget for the Organization class would have been to have each table below each other.

Screen shots

No demo would be complete without some screen shots, so here are mine.

Areas that still need work

The columns shown by the tables are still under construction and of course the editors used by the tables.

The icons for the JDialog still needs to be ironed out.

The table does not take up the correct width but for this I would need to write a new layout for Metawidget.

The close action on the main (or first dialog) does not close the application, it just sets it invisible.

Connext Graphs Overview

Introduction

The basic idea behind connext-graphs is to make integrating the Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart/) as easy as possible.

History

The project was started because I wanted to use a chart library that looked similar to the Google charts in their Analyzer application. Struts 2.0 has a plug-in for the JFreeChart library but I wanted a chart that a user could interact with. When the user hovers over a chart point the properties of that point is shown and in this way the chart does not feel like an empty piece of information plonked on the site to take up space.

Features

1. Written as a Struts 2.0 plug-in so the initialization of the Flash object is taken care of
2. The chart data generation uses Java objects to model the different aspects of the chart
3. The styling is configurable by the data sent to the chart
4. Some aspects of the chart is stylable via CSS

To Be Done

1. Implement the Pie Charts
2. Remove the link to the Open Flash Chart site because the chart does this
3. Small fixes and improvements

Alternatives

1. JFreeChart (http://www.jfree.org/jfreechart/)
2. CeWolf (http://cewolf.sourceforge.net/new/index.html)
3. Fusion Charts (http://www.fusioncharts.com/)
4. Open Flash Chart (http://teethgrinder.co.uk/open-flash-chart/)

Open Flash Chart is shown as an alternative because it includes a Java class to output the data file used by the chart library. This Java class was not used when developing connext-graphs.

Sketch Chart

The sketch chart is based upon the bar chart but has an extra `fun` option that indicates how interesting the chart should be rendered.

How to use

1. Create a chart controller that specifies the properties of the charting area

OFCGraphController controller = new OFCGraphController();
controller.getTitle().setText("Example Sketch Bar Chart");
controller.getTitle().setSize(12);
controller.getLabels().setLabels(Arrays.asList(labels));
controller.getYLegend().setText("No. of tasks");
controller.getYLegend().setColor("#8b0000");
controller.getYLegend().setSize(12);
controller.getXLegend().setText("Months");
controller.getXLegend().setColor("#8b0000");
controller.getXLegend().setSize(12);
controller.getColor().getBgColor().setColor("#FFFFFF");
controller.getColor().getXAxisColor().setColor("#e3e3e3");
controller.getColor().getYAxisColor().setColor("#e3e3e3");
controller.getColor().getXGridColor().setColor("#e3e3e3");
controller.getColor().getYGridColor().setColor("#e3e3e3");

2. Create the chart data series

It is possible to mix and match the different series types so you could a line chart and a sketch chart combined.

DefaultOFCGraphDataModel model = new DefaultOFCGraphDataModel();
model.setData(Arrays.asList(data01));
model.setFormat(new DecimalFormat("###0.000"));
model.setSeriesType(new OFCBarSketchSeriesType(55, 10, "#d070ac", "#000000", "Test", 10));

The offset parameter of OFCBarSketchSeriesType(alpha, offset, color, outlineColor, text, size) specifies the fun aspect of the chart.

The following values can be used:-

• 0 - 3 Boring
• 4 - 6 Fun
• 7 - Interesting

3. Add the series to the charting area

controller.add(model);

4. Render the chart data

value = controller.render();

Here the data string used by Open Flash Chart is assigned to the value property and this property is read by the graph.jsp view.

<%@ include file="include.jsp" %>
<s:property value="value" escape="false" />

5. Include the Flash component

Of course none of this would work if the Open Flash Chart object was not embedded into the Struts view.

The following :-

• declares the tag library of connext-graphs
• creates the Flash object
• links the data from the data view defined in steps 1 - 4

<%@ taglib prefix="m" uri="/connext" %>

<m:graph
id="graph"
width="400"
height="400"
align="middle"
bgcolor="#FFFFFF"
url="/Graph_exampleSketch.html"
/>

Screen shots

Figure 1 : Hovering over a chart point

Figure 2 : Sketch chart with an offset of 10

Figure 3 : Sketch chart with an offset of 2

Figure 4 : Sketch chart with an offset of 5

Figure 5 : Sketch chart with an offset of 15