Just listen to Alex

August 7, 2011

Java Swing: automatically resize table columns to their contents

Filed under: Uncategorized — Tags: , — bosmeeuw @ 4:45 pm

When using JTables in Swing, you will notice that by default, all columns have the same size. Either the user can resize the columns to better represent the data in the column (which they need to do every time they open the screen), or the programmer can decide to set a specific width on each column. Of course, the programmer might not always know what kind of data will show up in the table, and what width is required for each column.

The easiest solution to this problem, is to automically resize table columns based on the data in the table, like shown in the video below:

The way this works, is that we render the entire table (invisible), and check the maxium required width for each column. If the table is big enough to display all data, we size all columns to display everything. If the table is too small, for instance when one of the cells contains a very long string, we make the biggest column(s) smaller until the data does fit.

The code to execute the resize is very simple:

ColumnsAutoSizer.sizeColumnsToFit(table);

We can also hook up an event listener to automatically resize the columns every time data is added or changed in the table, like this:

table.getModel().addTableModelListener(new TableModelListener() {
	public void tableChanged(TableModelEvent e) {
		ColumnsAutoSizer.sizeColumnsToFit(table);
	}
});

You’ll find the source for ColumnsAutoSizer and the demo app below:

package be.alex.examples;

import javax.swing.*;
import javax.swing.table.DefaultTableCellRenderer;
import javax.swing.table.JTableHeader;
import javax.swing.table.TableCellRenderer;
import javax.swing.table.TableColumn;
import java.awt.Component;
import java.awt.FontMetrics;

public class ColumnsAutoSizer {

    public static void sizeColumnsToFit(JTable table) {
        sizeColumnsToFit(table, 5);
    }

    public static void sizeColumnsToFit(JTable table, int columnMargin) {
        JTableHeader tableHeader = table.getTableHeader();

        if(tableHeader == null) {
            // can't auto size a table without a header
            return;
        }

        FontMetrics headerFontMetrics = tableHeader.getFontMetrics(tableHeader.getFont());

        int[] minWidths = new int[table.getColumnCount()];
        int[] maxWidths = new int[table.getColumnCount()];

        for(int columnIndex = 0; columnIndex < table.getColumnCount(); columnIndex++) {
            int headerWidth = headerFontMetrics.stringWidth(table.getColumnName(columnIndex));

            minWidths[columnIndex] = headerWidth + columnMargin;

            int maxWidth = getMaximalRequiredColumnWidth(table, columnIndex, headerWidth);

            maxWidths[columnIndex] = Math.max(maxWidth, minWidths[columnIndex]) + columnMargin;
        }

        adjustMaximumWidths(table, minWidths, maxWidths);

        for(int i = 0; i < minWidths.length; i++) {
            if(minWidths[i] > 0) {
                table.getColumnModel().getColumn(i).setMinWidth(minWidths[i]);
            }

            if(maxWidths[i] > 0) {
                table.getColumnModel().getColumn(i).setMaxWidth(maxWidths[i]);

                table.getColumnModel().getColumn(i).setWidth(maxWidths[i]);
            }
        }
    }

    private static void adjustMaximumWidths(JTable table, int[] minWidths, int[] maxWidths) {
        if(table.getWidth() > 0) {
            // to prevent infinite loops in exceptional situations
            int breaker = 0;

            // keep stealing one pixel of the maximum width of the highest column until we can fit in the width of the table
            while(sum(maxWidths) > table.getWidth() && breaker < 10000) {
                int highestWidthIndex = findLargestIndex(maxWidths);

                maxWidths[highestWidthIndex] -= 1;

                maxWidths[highestWidthIndex] = Math.max(maxWidths[highestWidthIndex], minWidths[highestWidthIndex]);

                breaker++;
            }
        }
    }

    private static int getMaximalRequiredColumnWidth(JTable table, int columnIndex, int headerWidth) {
        int maxWidth = headerWidth;

        TableColumn column = table.getColumnModel().getColumn(columnIndex);

        TableCellRenderer cellRenderer = column.getCellRenderer();

        if(cellRenderer == null) {
            cellRenderer = new DefaultTableCellRenderer();
        }

        for(int row = 0; row < table.getModel().getRowCount(); row++) {
            Component rendererComponent = cellRenderer.getTableCellRendererComponent(table,
                table.getModel().getValueAt(row, columnIndex),
                false,
                false,
                row,
                columnIndex);

            double valueWidth = rendererComponent.getPreferredSize().getWidth();

            maxWidth = (int) Math.max(maxWidth, valueWidth);
        }

        return maxWidth;
    }

    private static int findLargestIndex(int[] widths) {
        int largestIndex = 0;
        int largestValue = 0;

        for(int i = 0; i < widths.length; i++) {
            if(widths[i] > largestValue) {
                largestIndex = i;
                largestValue = widths[i];
            }
        }

        return largestIndex;
    }

    private static int sum(int[] widths) {
        int sum = 0;

        for(int width : widths) {
            sum += width;
        }

        return sum;
    }

}

Demo app:

package be.alex.examples;

import javax.swing.*;
import javax.swing.event.TableModelEvent;
import javax.swing.event.TableModelListener;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class ResizeColumnsDemo extends JPanel {
    public ResizeColumnsDemo() {
        super(new FlowLayout());

        String[] columnNames = {"First Name",
                                "Last Name",
                                "Sport",
                                "# of Years",
                                "Vegetarian"};

        Object[][] data = {
	    {"Kathy", "Smith", "Snowboarding", new Integer(5), new Boolean(false)},
	    {"John", "Doe", "Rowing", new Integer(3), new Boolean(true)},
	    {"Sue", "Black", "Knitting", new Integer(2), new Boolean(false)},
	    {"Jane", "White", "Speed reading", new Integer(20), new Boolean(true)},
	    {"Joe", "Brown", "Pool", new Integer(10), new Boolean(false)}
        };

        final JTable table = new JTable(data, columnNames);
        table.setPreferredScrollableViewportSize(new Dimension(500, 70));
        table.setFillsViewportHeight(true);

        // automatically resize the columns whenever the data in the table changes
        table.getModel().addTableModelListener(new TableModelListener() {
            public void tableChanged(TableModelEvent e) {
                ColumnsAutoSizer.sizeColumnsToFit(table);
            }
        });

        JButton autoSizeButton = new JButton("Auto-size columns");

        // resize the columns when the user clicks the button
        autoSizeButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                ColumnsAutoSizer.sizeColumnsToFit(table);
            }
        });


        JButton setLongNameButton = new JButton("Set longer name");

        // set a longer name to test automatic resizing after value changes
        setLongNameButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                table.getModel().setValueAt("Kathy Kathy Kathy", 0, 0);
            }
        });

        JButton setVeryLongNameButton = new JButton("Set very long name");

        // set a longer name to test automatic resizing after value changes
        setVeryLongNameButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                table.getModel().setValueAt("Kathy Kathy Kathy Kathy Kathy Kathy Kathy Kathy Kathy Kathy Kathy", 0, 0);
            }
        });

        //Create the scroll pane and add the table to it.
        JScrollPane scrollPane = new JScrollPane(table);

        //Add the scroll pane to this panel.
        add(scrollPane);

        add(autoSizeButton);

        add(setLongNameButton);

        add(setVeryLongNameButton);
    }

    /**
     * Create the GUI and show it.  For thread safety,
     * this method should be invoked from the
     * event-dispatching thread.
     */
    private static void createAndShowGUI() {
        //Create and set up the window.
        JFrame frame = new JFrame("SimpleTableDemo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //Create and set up the content pane.
        ResizeColumnsDemo newContentPane = new ResizeColumnsDemo();
        newContentPane.setOpaque(true); //content panes must be opaque
        frame.setContentPane(newContentPane);

        //Display the window.
        frame.setSize(600, 200);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        //Schedule a job for the event-dispatching thread:
        //creating and showing this application's GUI.
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }
}

July 21, 2011

PHP: Using objects as keys for a hash

Filed under: Uncategorized — bosmeeuw @ 1:58 pm

Hashes, or “associative arrays” are the bread and butter of PHP. Pretty much every PHP project will contain arrays this:

$peopleById = array(1234 => 'Alex', 1235 => 'Jimmy');

If you’re using PHP in an object oriented way, you might want to use hashmaps of objects, and you might want to use your objects as keys. So you try something like this:

class Author {
    public $name;

    function __construct($name) {
        $this->name = $name;
    }
}

class Book {
    public $name;

    function __construct($name) {
        $this->name = $name;
    }
}

$booksByAuthor = array();

$author = new Author("Ian McEwan");

$booksByAuthor[$author] = array(new Book("Atonement"), new Book("Solar"));

However, PHP will throw a “Warning: Illegal offset type” when trying to use the Author object as a key, and your array will be empty.

Fear not, we can fix this, with our very own hashmap class! Only one change to the code is needed:

$booksByAuthor = new HashMap();

$author = new Author("Ian McEwan");

$booksByAuthor[$author] = array(new Book("Atonement"), new Book("Solar"));

Unfortunately, it probably isn’t possible (or I haven’t found out how) to use a standard foreach($hash as $key => $value) to loop over this HashMap, but we can use this form:

foreach($booksByAuthor->keys() as $author) {
    foreach($booksByAuthor[$author] as $book) {
        echo $author->name . " wrote " . $book->name . "<br />";
    }
}

You can use $booksByAuthor->values() to loop over the values.

By default, this hashmap uses object identity to keep the keys apart. This means that if you create two objects, they will represent a different key, even if their values are exactly the same. For example, the assertion below will fail:

class Customer {
    public $id;

    function __construct($id) {
        $this->id = $id;
    }
}

$customer = new Customer(123);
$sameCustomer = new Customer(123);

$creditPerCustomer = new HashMap();

$creditPerCustomer[$customer] = 1000;
$creditPerCustomer[$sameCustomer] = 1500;

assert($creditPerCustomer[$customer] == 1500);

Because “sameCustomer” is a different object, the value will remain at 1000 and the assertion will fail, even though we might want to treat it as an equivalent key. We can fix this by having Customer implement interface HashCodeProvider, like this:

class Customer implements HashCodeProvider {
    public $id;

    function __construct($id) {
        $this->id = $id;
    }

    public function getHashCode() {
        return $this->id;
    }
}

$customer = new Customer(123);
$sameCustomer = new Customer(123);

$creditPerCustomer = new HashMap();

$creditPerCustomer[$customer] = 1000;
$creditPerCustomer[$sameCustomer] = 1500;

assert($creditPerCustomer[$customer] == 1500);

Your getHashCode() method can return any scalar value (int, string, etc), as long as it really represents the identity of the object.

You can grab the simple code for the HashMap class below. Happy hashing!

interface HashCodeProvider {
    public function getHashCode();
}

class HashMap implements ArrayAccess {

    private $keys = array();

    private $values = array();

    public function __construct($values = array()) {
        foreach($values as $key => $value) {
            $this[$key] = $value;
        }
    }

    public function offsetExists($offset) {
        $hash = $this->getHashCode($offset);

        return isset($this->values[$hash]);
    }

    public function offsetGet($offset) {
        $hash = $this->getHashCode($offset);

        return $this->values[$hash];
    }

    public function offsetSet($offset, $value) {
        $hash = $this->getHashCode($offset);

        $this->keys[$hash] = $offset;
        $this->values[$hash] = $value;
    }

    public function offsetUnset($offset) {
        $hash = $this->getHashCode($offset);

        unset($this->keys[$hash]);
        unset($this->values[$hash]);
    }

    public function keys() {
        return array_values($this->keys);
    }

    public function values() {
        return array_values($this->values);
    }

    private function getHashCode($object) {
        if(is_object($object)) {
            if($object instanceof HashCodeProvider) {
                return $object->getHashCode();
            }
            else {
                return spl_object_hash($object);
            }
        }
        else {
            return $object;
        }
    }

}

May 1, 2009

JRuby on Rails, PDF generation and Flying Saucers

Filed under: Uncategorized — bosmeeuw @ 2:01 pm

There are tons of ways to generate PDF documents in just about any language. If you’re using Ruby, you have a number of libraries at your disposal to generate PDF documents using the specific API’s of these libraries. But if you have a Rails or other Ruby web application, the primary goal of your application is outputting HTML to be displayed in clients web browsers. So, wouldn’t it be nice to generate your PDF reports the same way, by outputting HTML?

If you’re running JRuby on Rails, this is a piece of cake! Using the great Flying Saucer Project (AKA xhtmlrenderer), you can convert your HTML + CSS to PDF documents. The great thing about Flying Saucer is that it will mostly render your HTML to PDF the same way standard compliant browsers will render it to screen. You have most of CSS 2.1 at your disposal, plus some custom CSS properties to handle print-specific matters such as paginated tables, and complex headers and footers. It has suprisingly few bugs, which really is an achievement when you’re talking about a HTML renderer. Did I mention it’s pretty fast, even for very large documents?

Of course, this is a Java library, so you need to be running JRuby to use it from your Rails application (or you need to resort to interfacing with it through the command line). First thing you need to do is installing the Flying Saucer gem, provided by the Wolfe project:

jruby -S gem install flying_saucer

This will automatically download the needed java library jars (flying saucer itself and iText) and put them in your gems folder.

Next, create a Rails controller you will use to output your PDF documents, for instance “ReportingController”. Let’s have it output a basic Hello World PDF.

The code for the controller (note the “render_pdf” method):

require "java"
require "flying_saucer"

class ReportingController < ApplicationController
  layout "pdf"

  def hello
    @text = "Hello world"

    render_pdf("hello.pdf")
  end

  private

  def render_pdf(filename)
    @html = render_to_string

    html_file = java.io.File.createTempFile(params&#91;:action&#93;, ".html")
    html_file.delete_on_exit

    pdf_file = java.io.File.createTempFile(params&#91;:action&#93;, ".pdf")
    pdf_file.delete_on_exit

    file_output_stream = java.io.FileOutputStream.new(html_file)
    file_output_stream.write(java.lang.String.new(@html).get_bytes("UTF-8"))
    file_output_stream.close

    renderer = org.xhtmlrenderer.pdf.ITextRenderer.new

	# if you put custom fonts in the lib/fonts folder under your Rails project, they will be available to your PDF document
	# Just specify  the correct font-family via CSS and Flying Saucer will use the correct font.
    fonts_path = RAILS_ROOT + "/lib/fonts/*.ttf"

    if File.exist?(fonts_path)
      font_resolver = renderer.getFontResolver()

      Dir&#91;fonts_path&#93;.each do |file|
        font_resolver.add_font(file, true)
      end
    end

    renderer.set_document(html_file)
    renderer.layout
    renderer.createPDF(java.io.FileOutputStream.new(pdf_file), true)

    send_file pdf_file.path, :type => "application/pdf", :filename => filename, :disposition => "attachment"
  end
end

The main layout for our PDF documents:

<html>
   <head>
      <style type="text/css">
         body {
            font-family: sans-serif;
         }
      </style>
   </head>
   <body>
      <h1>My PDF Wielding Application Title</h1>

      <%= yield %>
   </body>
</html>

And the code to the view for the “hello” action:

Cliché message goes here: <strong><%=h @text %></strong>

Surfing to /reporting/hello will generate this PDF document.

So, the gist is: render all you want (as long as it’s properly escaped XHTML), call the render_pdf method and voila, instant PDF! Feel free to re-use your existing partials and helpers, it’s all good.

One remark: if you refer to resources like stylesheets and images, you must use an absolute URL or FlyingSaucer won’t be able to access them. For instance, use:

<link rel="stylesheet" type="text/css" href="http://app.example.com/stylesheets/reports.css" />

In stead of:

<link rel="stylesheet" type="text/css" href="/stylesheets/reports.css" />

Happy reporting!

January 17, 2009

Easily repeating HTML form sections without (much) javascript

Filed under: programming, Uncategorized — Tags: , , — bosmeeuw @ 2:49 pm

If you’ve written more than a few data-driven web applications, you’ve surely encountered data models where a “master object” has multiple “child objects”.

In this example, we’ll use a book which can have many authors.
You could have the user enter the data for the book, and then add the authors one by one using multiple HTTP requests. Of course, this way the user needs to make many round trips to the server, which might slow him down considerably.

So you accomodate the user and write some javascript to enable him to add the X authors before posting anything to the server, yielding something like this:

Screenshot of expanding form (icons by famfamfam.com)

Screenshot of expanding form (icons by famfamfam.com)

There’s many approaches to programming this feature, the worst one being manually concatening HTML in a Javascript function and appending it to a container’s innerHTML attribute.

Below, you can find some code which allows you to create a repeating form like the one in the screenshot with just 3 lines of javascript. The idea is to create your repeating form element in plain HTML, and then attach some javascript behaviour to it which enables the user to repeat the form element. The Prototype Javascript library is required.

Here’s the code for the form:

<h1>Add a book</h1>

<form method="POST" action="/books/save_book">
   <table class="horizontal-layout">
      <tr>
         <td class="left">
            <h2>Data</h2>

            <table class="form">
               <tr>
                  <th>Title</th>
                  <td>
                     <input type="text" name="book&#91;title&#93;" />
                  </td>
               </tr>
               <tr>
                  <th>Description</th>
                  <td>
                     <textarea name="book&#91;description&#93;" class="medium"></textarea>
                  </td>
               </tr>
               <tr>
                  <th></th>
                  <td>
                     <input type="submit" class="submit" value="Save book &amp; authors" />
                  </td>
               </tr>
            </table>
         </td>
         <td>
            <h2>
               Authors
               <img src="/images/icons/page_white_add.png" id="add-author" class="link" />
            </h2>


            <div>
               <div
                  id="author-element"
                  class="expandable-form-entry"
                  style="line-height: 2em;"
               >
                  <input type="hidden" name="author&#91;#index&#93;&#91;id&#93;" />

                  <img src="/images/icons/page_white_delete.png" class="delete-entry link" />

                  <strong>Author name:</strong>
                  <br />
                  <input type="text" class="required" name="authors&#91;#index&#93;&#91;name&#93;" />

                  <br />

                  <strong>Author Remarks:</strong>
                  <br />
                  <textarea class="small" name="author&#91;#index&#93;&#91;remarks&#93;"></textarea>
               </div>
            </div>
         </td>
      </tr>
   </table>
</form>

<script type="text/javascript">
   var authorsExpander = new ExpandingFormElement({
      entryModel: 'author-element',
      addEntryLinkElement: 'add-author',
      deleteEntryElementClass: 'delete-entry',
      deletionConfirmText: "Are you sure you want to delete author?"
   })
</script>

Notice the input elements for the authors are named “author[#index][field_name]”. Each input name must contain the string “#index”, as the javascript code will replace this by the correct index of the element in the form. So if the user adds three authors, the third element will contain elements “author[2][name]” and “author[2][remarks]”, which you can easily save to your database server side.

The javascript at the bottom couples the expanding element behaviour and has these options:

  • entryModel: the id of the element you want to use as the model for the repeating element
  • addEntryLinkElement: the element the user will click to add a new entry
  • deleteEntryElementClass: the css class of the element the user can click to remove and added entry
  • deletionConfirmText: the text to confirm deletion of an entry (leave empty if you don’t want to ask for confirmation)

After you’ve saved the data to your database, the user might want to edit the data. This means you need to re-populate the data back to the form. This can be done using the addEntry() method of ExpandingFormElement, which can take a hash containing the data for the entry. The keys of the hash must correspond with the field name (the part after the [#index]). In a ruby on rails application, you could populate the data like this:

var authorsExpander = new ExpandingFormElement({
  entryModel: 'author-element',
  addEntryLinkElement: 'add-author',
  deleteEntryElementClass: 'delete-entry',
  deletionConfirmText: "Are you sure you want to delete author?"
})

<% @book.authors.each do |author| %>
	authorsExpander.addEntry(<%= author.attributes.to_json %>)
<% end %>

In PHP, you might use the json_encode() function on an associative array containing your author data.

Here’s the javascript code for the ExpandingFormElement class. The Prototype javascript library is required.

var ExpandingFormElement = Class.create({
    initialize: function(options) {
        this.options = options

        this.entryModel = $(options.entryModel)
        this.container = $(this.entryModel.parentNode)

        this.container.cleanWhitespace()

        if(this.container.childNodes.length > 1) {
            throw new Error("The container (parentNode) of the entryModel must contain only the entryModel, and no other nodes (put it in a <div> of its own). The container has " + this.container.childNodes.length + " elements after white space removal.")
        }

        this.entryModel.remove()

        $(options.addEntryLinkElement).observe('click',function() {
            this.addEntry()
        }.bind(this));
    } ,

    addEntry: function(values) {
        var copiedElement = this.entryModel.cloneNode(true)

        this.observeCopiedElement(copiedElement)

        var index = this.getNumberOfEntries()

        this.replaceInputNamesInElement(copiedElement, index)

        this.container.appendChild(copiedElement);

        if(values != null) {
            this.setEntryValues(copiedElement, values)
        }
    } ,

    setEntryValues: function(element, values) {
       $H(values).each(function(entry) {
          var input = this.getInputFromElementByName(element, entry.key)

          if(input) {
              input.value = entry.value;
          }
       }.bind(this));
    } ,

    getInputFromElementByName: function(element, name) {
        var matchedInput = null;

        var inputs = element.select('input','textarea','select')

        inputs.each(function(input) {
           if(input.name.indexOf("[" + name + "]") != -1) {
               matchedInput = input;

               return $break;
           }

           return null;
        });

        return matchedInput;
    } ,

    getNumberOfEntries: function() {
        return this.container.childNodes.length
    } ,

    observeCopiedElement: function(element) {
        var deleteEntryElement;

        if((deleteEntryElement = element.down('.' + this.options.deleteEntryElementClass))) {
            deleteEntryElement.observe('click',function() {
                if(this.options.deletionConfirmText) {
                    if(confirm(this.options.deletionConfirmText)) {
                        element.remove()
                    }
                }
                else {
                    element.remove()
                }
            }.bind(this))
        }
    } ,

    replaceInputNamesInElement: function(element, index) {
        $(element).select("input","textarea","select").each(function(input) {
            input.name = input.name.replace("#index",index)
        }.bind(this))
    }
});

Here’s the CSS I used for this example:

div.expandable-form-entry {
    position: relative;
    border-top: 1px dotted silver;
    padding-top: 1em;
    margin-bottom: 1em;
}

div.expandable-form-entry img.delete-entry {
    position: absolute;
    right: 0;
}

Blog at WordPress.com.