The History of Light

The latest version, 1.3, of The History of Light has been released at the Ovi Store. In this new update, two new worlds were added, with two entirely new and unique mechanics. In addition, each world now has 30 levels, as opposed to 20 in the previous release. That means that the game now has a whooping 210 levels. Given that the last ten levels of each world are particularly challenging, we expect players to spend a lot of time smashing their pho…. I mean, enjoying the puzzles that we created. To make it a little more bearable though, the more stars you gain in a level, the more levels are unlocked. Finally, in this release, we are delighted to feature composer Brandon Morris. Each world now has its own music, and most of the tracks come from Brandon’s collection.

Introduction

The History of Light is a fun and challenging puzzle game inspired by the electronic game Lights Out. Given a grid of lights that are either on or off, the goal of the game is to turn all of them off. Lights toggle on or off by clicking on them. However, depending on the world, clicking on a light will also toggle adjacent lights.

Worlds

There are 7 worlds in The History of Light, all based on milestones of light: Sun, Fire, Candle, Kerosene, Incandescent, Fluorescent and L.E.D.

Each world has 30 levels and each level awards you up to 3 stars depending on how few moves (light toggles) you made to solve the puzzle. The stars are required in order to unlock the next worlds.

Mechanics

The History of Light – Worlds

Each world has it own unique mechanic. The first 20 levels gently introduces the new mechanic to the player, while the last 10 levels includes all the mechanics of the previous worlds! That means that, in the last world, at levels 21 through 30, the player has to solve a puzzle keeping in mind how all 6 mechanics work together!

The very first mechanic of the game is also the original way you play Lights Out: clicking on one light on the grid will toggle it on or off, but will also toggle the top, left, right and bottom lights as well. The First world introduces bombs: some lights have bombs with a countdown. The more times you toggle that specific light, the closer you get to exploding the bomb and ending the game. The Kerosene world toggle the diagonal lights, so all lights surrounding the clicked one are toggled with it. Try the game to discover all the mechanics. The L.E.D. world has a surprise mechanic that will make the player re-think the way the game was working all along!

Music

In addition to having different mechanics, in the latest release, each world has its own soundtrack. We found a number of great tracks at OpenGameArt and asked for the artists’ permission to include them. Most of the music though, were from composer Brandon Morris. Brandon was kind enough to give us his music and link us in his own website (still under construction). In return, and as a thank you for his great work, we decided to feature him. We invite you to listen to his tracks on his YouTube channel, Brandon75689.

BossCastle

The History of Light was developed by BossCastle Studios. A small, independent group of programmers and designers consisting of Panagiotis Peikidis (me), Harris Peikidis (my brother) and Dimitris Xanthopoulos. This game is the first under our belt, but we have plans for new titles in the near future. We have a very diverse knowledge on technologies and platforms and are constantly learning more. Expect to see games anywhere from Android phones, to Windows Phone or even tablets.

General Information

Hellion by Yanni Davros

The entire deck is a standard poker deck with 13 cards for each suit and 2 joker cards. The suits in this case are Protoss, Terran, Zerg and Random. The 2 joker cards are the tech trees and a Starcraft II: Wings of Liberty logo. The backs are the promotional Starcraft II Valentines Day wallpapers of each race (the random race is all the logos fused together) from Blizzard. The numbering used for the planning poker was the one we use in our team: 0, 1/2, 1, 2, 3, 5, 8, 13, 20, 30, 50, Epic and Question Mark. All the numbers are units from each race (the random race are heroes from the game) while the Epic is their respected logo and the Question Mark is a fun little comic.

All the artists are credited in the Readme.txt file that is included in the zip. The file also includes other information about the reasoning behind the numbers, and other trivia.

To print these cards I used ArtsCow.com. I like their editor, which allows you to customize every aspect of the cards (other than the box they come into :/), but I’m not really impressed by the quality. However, the price was fine and they seem to hold OK after a couple of months of use. If you have any suggestions on where I can print quality plastic cards with a reasonable price for a couple of decks, feel free to add it in the comments.

Fun little trivia: a few months after my team started using these cards, I met Yanni Davros, who happened to have designed the Hellion artwork I used. He is a Starcraft fan as well and has made some posters you might want to look.

DOWNLOAD URL
http://bit.ly/StarcraftIIPlanningPoker

All cards

Process

The interface for each race was taken from high resolution (or, at least as high as I could find) screen shots from Google Images. I cut them into pieces and tried to fit them in a poker card format. I included some padding so as to make sure none of the art will be cut off when I order the prints. I used the Starcraft font I found in dafont.com for the numbers and names.

For every unit, I search for its portrait, an artwork and its cost in minerals, gas and supply. A lot of that came from the Starcraft Wikia site (which is an amazing source of information for the Starcraft universe).

Close up

My self-criticism

Yes, I know that the Colosus is a 5. The reason for that is simple: I couldn’t find a good artwork for the Sentry. I also know that the Warp Prism art is actually the Phase Prism concept art by Blizzard. I’m not a big fan of units with no backgrounds either. Unfortunately, there were not many choices for a lot of units (seriously, no Siege Tank artwork??) while others it’s hard to decide. I also colored the Broodlord myself, since the one I found was a black & white sketch. I was desperately looking for a good artwork for Aldaris so I could have used the Adjutant, the Overmind and Aldaris as either the Question Mark or the Epic.

Finally, the positions of the numbers follow the traditional trading card games format (such as the mana cost on the top right in Magic: The Gathering) rather than the poker format (which would be a better fit, now that I think of it).

I hope you like it.

En Taro Adun!

The History of Light – Main Menu

The History of Light is a Lights Out-type of puzzle game: There is a grid of lights that are either on or off and your goal is to switch them all off. Clicking on a single tile will toggle it, and its adjacent tiles, on or off.

There are five worlds in The History of Light, each with 20 levels and a new unique mechanic. On the second world for example, the player is introduced to the concept of bombs. In addition, the last 8 levels of each world has a bigger grid.

The game was developed by me and Dimitris Xanthopoulos. Audio was provided (with permission) by Brandon Morris, Louis Hostos and various other artists found at OpenGameArt.org.

The game is currently available at the Ovi store and its official website is http://pekalicious.com/thehistoryoflight.

Post Mortem

While the development of the game took us less than a week (what with Dimitris learning QML and me learning C++) I kept tweaking and refining it until I felt comfortable enough to release it. However, I spent most of the time on the interface rather than the level design which, I believe, will cost me a lot of downloads. I have already got some feedback from some friends and I plan on working on them in the next couple of weeks.

One of the biggest things that didn’t get to the release was music. The game has one track for the menu and one when playing a level. My initial design was one track for each world from the very talented people at OpenGameArt. Unfortunately, the size of the game leaped from 5MB to more than 15MB. I believe that 15MB is not an acceptable size for a mobile game, so I had to cut it down. I’m thinking of making a “Director’s cut” edition of the game with full audio. At least that way the player will have a choice of the size of download.

Finally, let’s talk about the elephant in the room: The Ovi Store. I know that, in this day and age, with iOS and Android being the center of everything, many will wonder why we chose the Ovi Store. iOS was an easy decision; the cost was simply too high: buying a Mac, an iPhone, creating an iOS account etc, etc. Android vs Ovi Store needed a little more thinking. I have a good background in Java but nothing in C++ while Dimitris has a good background in C++ but no Java. Both of us didn’t have any experience in Android Development or Symbian, so, as far as development time went, they where both the same. It all came down to competition: Android has A LOT of competition compared to Ovi. A friend of Dimitris had previously released a couple of Symbian apps and he provided some good insights on how his apps went. So we went for Ovi after that.

Developing for Symbian had many hiccups. Especially in the audio department. It took me about two weeks to figure out how to fade in/fade out the background music and play sound effects. I finally came with a work around, but I didn’t like it at all.

There is another platform out there that I would really like to work on: Windows Phone 7. Especially because I am already working on an XNA game which is supported (with some limitations) on the platform. We’ll see. For the mean time, have a look at the other project Dimitris has released on the Ovi Store: Galaxy Jump.

Before I began designing a whole new dialogue system, I thought I’d first google what other people have created. The very first hit was this Mass Effect dialogue system. Not bad I saids to myself. So I copied it investigated it and ended up using a similar system.

At its very core, the dialogue system consists of Branches and Hubs. A branch is a series of speech lines; the sentences a character says as well as his pose (remember, this is a 2D game, so no animations). A branch either terminates the dialogue, or reaches a hub. A hub has a list of branches which basically are the player’s options.

A hub can be of three types:

• a Normal Hub
  which contains a list of branches,
• an End Hub
  which terminates the dialogue,
• or an Info Hub
  which returns to the original hub once the branch ends

Pretty straightforward, don’t you think? Here is a diagram to clear any confusion:

Dialogue Diagram

While the Mass Effect sample was great, it was way more complicated than what I needed. First of all, Mass Effect has a morality system, so the branches where either good, bad or neutral and they were placed around a wheel. For Info branches, you had to select a special “Investigate” option to view them.

I have no morality system, and I don’t want my info branches to seem any different than any normal branch. So I simplified it by making info branches nothing more than a branch that has its NextHubID set to the same Hub as the one it was choosen from. I also eliminated the limitation of having 3 branches (good, bad and neutral) to unlimited. Finally, I removed the sound property since I won’t be having any voice overs (sigh).

On the designing side, the sample comes with an editor. Which doesn’t really look easy to understand:

Editor for the Mass Effect-style Dialogue System

So I made a more designer-friendly tool:

Xanor Dialogue Editor

Reminds you of something?

To do this, I had to test a LOT of diagramming libraries: Netron, Piccolo2D, QuickGraph etc, etc. I ended up with Open Diagram mainly for its simplicity.

Here is a boring video that demonstrates how the whole system works (the interesting part is at 1:53):

Now that I am able to create the dialogues and basically write the entire story of the game, I have to focus on a much more important system: the battle system.

So, stay tuned!

First of all, I would like to thank Alex Champandard for giving me the opportunity of having a poster of my BSc dissertation, StarPlanner, at this year’s Paris Game AI Conference. In fact, I am thankful to a number of people that helped me during and after the development of the project. Jeff Orkin who linked StarPlanner’s website on the official GOAP website, Eric Jacopin who used the source code as learning material for an internship and provided plenty of feedback, Edmund Long for his implementation of GOAP in C++ and William van der Sterren for his help in the AiGameDev forums.

Wallpaper for the Paris Game AI Conference 2011

Planning was a big thing this year, having a short tutorial talk from Luke Dicken and an entire panel about its pros, cons and future, which meant that my project was an awesome conversation starter ;) So I met a lot of great people in person. Can’t wait for next year’s conference.

Anyway, on with the main subject.

About ten months ago, I began working on a vertical shooter using the XNA framework. However, I had to stop for a while due to Greek’s obligatory military training. That is (finally) over and it’s time to get back to business.

The Pitch

Xanor (Working Title) is a vertical shooter (like Aero Fighters) with many JRPG elements such as Leveling up, Mana Power, Talent Trees and Side Quests.

Game Overview

Xanor is a top-down space shooter where the player assumes the role of Reik, a pilot who became an outcast as a result of a failed mission that caused his hometown to vanish. With the help of his trusted but, somewhat, clumsy engineer, Mishi, and an advanced alien technology, his mission is now to regain his identity back by reestablishing his hometown as the dominant empire it once was.

Thanks to Mishi’s talent, the player is able to upgrade his spaceship with powerful weaponry and defenses. Four types of spaceships are available to choose from:

• The Spartan
  This is the most dexterous ship of all. It is able to equip a vast amount of weapons that are easily upgraded.
• The M109
  This ship is able to receive an extensive amount of damage and still be able to attack.
• The Ulonar
  The Ulonar becomes more powerful the more damage it receives.
• The Summoner
  The agile drones that orbit around the Summoner is a great way to get the job done.

To make a living and be able to pay the upgrades he needs, Reik hunts down bounties. He has gained a reputation for being fierce and, as a consequence, he is hired by many to do their dirty work (such as escorting ships or flying spacecrafts). Among the scumbags and lowlifes that usually hire him, there is this young woman who awards him with something more valuable than money: information on how to destroy the federation and complete his mission.

However, the destruction of the federation has catastrophic consequences.

Technical

Xanor is written in C# using Microsoft’s XNA Game Studio 4.0 framework. The goal is to release it as an XBOX Live Indie Game. Here is a short video I did a while back (the art is currently placeholder sprites made – with permission – by SquirrelSquid):

Under the hood Xanor is going over massive structural changes. I fell into the classic deep hierarchy problem and, after some research, I began working on a component-based entity system.

The good news is that last week I was fortunate enough to meet SiGra, who will be creating Xanor’s characters. Thus, currently I am focusing on developing a dialogue system.

Mishi

I will be posting updates of Xanor’s development as each component of the engine is stable enough for a demonstration. So stay tuned!

StarPlanner is a StarCraft bot that implements a Goal-Oriented Action Planning (GOAP) agent architecture. The architecture includes a Blackboard for subsystem communications, a working memory and an regressive planner for decision making. There are two levels of planning in StarPlanner: a high level strategic planner that creates a plan depending on the current state of the game and a low level build planner that creates a plan to build or train the required units in order to carry out the high level plan.

StarPlanner is written in Java and uses BWAPI (specifically, JBridge) to communicate with StarCraft. The project architecture is layered: at the lowest level there is an A* search engine. On top of that there is a generic GOAP architecture that uses the A* engine for its searching. And, finally, StarPlanner is a concrete implementation for StarCraft of the generic GOAP architecture.

StarPlanner Layers

Full source code and documentation along with the full report and videos as delivered to City College can be found at http://pekalicious.com/starplanner/ppeikidis.html

Post Mortem

I wish I had more time for the project and added a lot more actions from which the bot could choose. The biggest time-waster was trying to create an XNA 2D game from scratch. That was way before I discovered BWAPI in the middle of the semester. Of course, even after I used BWAPI, a lot of the functionality had to be created: controlling units, training units, etc. Although there is an extension of BWAPI called BWSAL that handles a lot of this for you, this wasn’t ported in Java.

The GOAP architecture was done thanks to Edmund Long‘s MSc thesis “Enhanced NPC Behavior using Goal Oriented Action Planning”. Edmund implemented it in C++ in a 2D simulation he developed from scratch. I ported the code in Java and split it into the layers described earlier. This was this easy part.

The hardest part was modeling an RTS game in order to make decisions. Planning is a searching algorithm that uses a world state, a goal state and a set of actions to produce a plan (a sequence of actions that, when executed, will change the world state to the goal state). The actions contain preconditions and effects. Preconditions of an action are essentially a list of properties that must be true in the world state, otherwise the action cannot be performed. If all preconditions are true, the action can be selected. A heuristic is used to decide which of the valid actions should be chosen. Finally, the effects of the chosen action alter the world state and the cycle continues until the world state is the desired one.

So, initially the idea was to use any data type as a precondition and an effect. The world state then would have a set of integers, booleans or anything really. So, for example, when I wanted to create a plan that trained 3 Marines, the goal state would have an integer “marines = 3″ as a precondition. The plan then would be “Build Barrack” -> “Train Marine” -> “Train Marine” -> “Train Marine”. Unfortunately this was harder than I thought so I went with a boolean-based approach. However, this solution has other limitations. For example, a precondition can be “haveMarines = true”. But how many marines? 10? 12? 100? So finally, I decoupled the units from the buildings and now training is the responsibility of a TrainManager who constantly trains units  (as long as there are resources) until a new plan is created.

The bot is not, by any stretch of the imagination, a good AI player. It only does a limited number of actions and hardly can win a game (except when you are demonstrating it *cough*custom*cough*maps*cough). There where two reasons for this: first, I had to create managers that could successfully move units, battle against enemies, use unit abilities, upgrade, etc, etc, etc. And second, at the time, I wasn’t that much of a good player in StarCraft. I’m no pro, mind you, but I have been following the StarCraft II community (which, incidentally, launched right in the middle of my project) and realized how bad a player I was. A big thanks to Sean Plott and his Day[9] Daily videos who made it clear what is actually a strategy and what is a tactic in an RTS game.

All these delays also made it impossible to enter the first StarCraft AI Competition that was announced a while before I began the project. Another lost opportunity.

Final Thoughts

Even though a lot of things could have gone better, I am really satisfied with the results. When I started my dissertation 2 years ago, planning was a big deal in the world of Game AI, so I was kind of proud. I still am. In fact, I loved so much working on the project, that my professional goal is to work in the Game AI industry!

After attending the first Hellenic Artificial Intelligence Summer School, I’m on my way to this year’s Paris Game AI Conference. All the while creating my first XNA video game for XBOX Live (coming up in a future post).

So yeah, once I’m done with my country’s military obligations this August, I’m flying to USA looking for a job. Wish me good luck!

First of all, here is how much you need to worry about the cost of the “If-then-else” statement: not at all*. You see, an “If-then-else” statement in your code creates a branch in the instruction list. If the statement is true, the processor will execute a particular instruction list, if not, it will execute another. The processor, always striving for optimizations, tries to predict which way the branch will go and pre-load the instructions. A wrong prediction is known as a “Branch Miprediction“. The penalty? In modern microprocessors, 10-20 cycles[1]. Your average 2.4GHz CPU can perform 2.400.000.000 cycles/second. That is 2.4 billion cycles per seconds, in case you haven’t noticed. Billions… Per second… So I think it’s pretty safe to say that this has absolutely no affect in your average pet-project.

One particular student, however, took this at face value and came up with the following gem:

public void doSomething(int code) {
  while ( code == 101 ) {
    doThis();
    break;
  }
  while ( code == 102 ) {
    doThat();
    break;
  }
  while ( code == 103 ) {
    justDoIt();
    break;
  }
  ...
}

After I got over the initial shock I turned to him and asked “So why didn’t you use a for loop?” to which he replied “I would have, but the while loop came into my mind first.”

* Except if you are writing an extremely performance-critical application.

References

[1]: Branch Predictor – Wikipedia

The Intro

It’s really difficult to find something in the Internet when you are not really sure how to phrase it. That’s why you need to practice your google-fu as much as possible. See, I was looking for a way to have a JPanel with buttons in a JTable cell, but had no idea how to look for it. JPanel in JTable? JPanel with buttons in JTable? JTable JPanel JButton?

OK, to be fair, I’m pretty sure my answer is in there somewhere deep (as in, after the first 3 results). But, as any impatient person that respects himself, I went the easy way: StackOverflow: JTable: Buttons in Custom Panel in Cell.

You see, most examples I found with Google talked about Cell Editors, but for simple column components, such as using a JTextField to edit an integer, or a JComboBox to edit a String etc. I wanted a custom JPanel that did not change, but simply had interactive controls.

In retrospect, I could have simply used a panel with MigLayout, but NO! I wanted the challenge. I wanted to learn how to do it. Plus, now I can sort my table (which is absolutely useless in my context).

Anyway, on with the code!

The Code

First thing’s first, we need to have a basic ADT that will contain some data. This is what we ultimately want to display in our table rows. Let’s say we want to have some RSS Feeds.

public class RssFeed {
  public String name;
  public String url;
  public Article[] articles;
 
  public RssFeed(String name, String url, Article[] articles) {
    this.name = name;
    this.url = url;
    this.articles = articles;
  }
}
 
public class Article {
  public String title;
  public String url;
  public String content;
 
  public Article(String title, String url, String content) {
    this.title = title;
    this.url = url;
    this.content = content;
  }
}

Yeah yeah, make the fields private, add getters/setters blah blah blah. Here is a simple JFrame that displays a JTable with some example data:

public class JInteractiveTableExample extends JFrame {
  public JInteractiveTableExample() {
    super("Interactive Table Cell Example");
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setSize(500, 300);
 
    List<RssFeed> feeds = new ArrayList<RssFeed>();
    feeds.add(new RssFeed("pekalicious", "http://feeds2.feedburner.com/pekalicious",
      new Article[] {
        new Article("Title1", "http://title1.com", "Content 1"),
        new Article("Title2", "http://title2.com", "Content 2"),
        new Article("Title3", "http://title3.com", "Content 3"),
        new Article("Title4", "http://title4.com", "Content 4"),
    }));
    feeds.add(new RssFeed("Various Thoughts on Photography", "http://various-photography-thoughts.blogspot.com/feeds/posts/default",
      new Article[] {
        new Article("Title1", "http://title1.com", "Content 1"),
        new Article("Title2", "http://title2.com", "Content 2"),
        new Article("Title3", "http://title3.com", "Content 3"),
        new Article("Title4", "http://title4.com", "Content 4"),
    }));
 
    JTable table = new JTable(
      new Object[][] {
        new RssFeed[] { feeds.get(0) },
        new RssFeed[] { feeds.get(1) }
      },
      new String[] { "Feeds" }
    );
    add(new JScrollPane(table));
  }
}

Here we create two RssFeeds with articles on the fly and add them to a JTable. If we run this example, we will see that each row displays the toString() value of our RssFeed object.

JTable without a Cell Renderer

This is the default behavior of JTable when the data is not a known class (Strings, ints, etc.) We can change this behavior by creating a custom TableModel. Here is a basic table model for our example:

public class RssFeedTableModel extends AbstractTableModel {
  List feeds;
 
  public RssFeedTableModel(List feeds) {
    this.feeds = feeds;
  }
 
  public Class getColumnClass(int columnIndex) { return RssFeed.class; }
    public int getColumnCount() { return 1; }
    public String getColumnName(int columnIndex) { return "Feed"; }
    public int getRowCount() { return (feeds == null) ? 0 : feeds.size(); }
    public Object getValueAt(int rowIndex, int columnIndex) { return (feeds == null) ? null : feeds.get(rowIndex); }
    public boolean isCellEditable(int columnIndex, int rowIndex) { return true; }
}

We then simply change our table declaration to:

JTable table = new JTable(new RssFeedTableModel(feeds));

Voila! We now see the exact same thing in our table!

JTable with Table Model (but still no Cell Renderer)

Errr.. OK, so it turns out that it’s not the Model that converts our objects into Strings, but the Renderer. Each JTable has a TableCellRenderer that, given an object, it returns a Swing component that can be used to display the underlying data.

So now we need to tell the JTable how to convert an RssFeed into a Component. We can do this by implementing the TableCellRenderer like so:

public class RssFeedCellRenderer implements TableCellRenderer{
  public Component getTableCellRendererComponent(JTable table, Object value,
        boolean isSelected, boolean hasFocus, int row, int column) {
    RssFeed feed = (RssFeed)value;
 
    JButton showButton = new JButton("View Articles");
    showButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent arg0) {
        JOptionPane.showMessageDialog(null, "HA-HA!");
      }
    });
 
    JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT));
    panel.add(new JLabel("<strong>" + feed.name + "</strong>"
            + feed.url + "Articles " + feed.articles.length + ""));
    panel.add(showButton);
 
    if (isSelected) {
      panel.setBackground(table.getSelectionBackground());
    }else{
      panel.setBackground(table.getSelectionForeground());
    }
    return panel;
  }
}

We also need to register this renderer in our table:

JTable table = new JTable(new RssFeedTableModel(feeds));
table.setDefaultRenderer(RssFeed.class, new RssFeedCellRenderer());
table.setRowHeight(60);

In the above lines, we effectively say “Whenever a column is an RssFeed class, use this renderer”. We already said that our one and only column is of type RssFeed in our table model:

public Class getColumnClass(int columnIndex) { return RssFeed.class; }

Now if we run our application, we can finally see something useful (although, I still prefer reading “com.pekalicious.interactiveJPanelTableCell.data.RssFeed@106caf16″. Yes, I’m THAT good):

JTable with Renderer

There are two things that are wrong here: first, every time the JTable needs to render a cell, it will instantiate a new JPanel. This can harm the performance if there are many rows. Second, the button does not work! Cell renderers are used only for what they say, to render cells. They do not provide any mechanism for the underlying components. However, JTable also has Cell Editors. Cell Editors work pretty much the same way as Renderers, they take an Object and return a Component, but the component returned can be interactive.

As you have probably guessed already, you can have different components returned by renderers and editors. An int, for example, can be rendered using a JLabel and edited using a JTextField (which is the default behavior of JTable). However, in our example, we want the same panel both for editing and rendering. This is why we will create a common Component that will be used by both:

public class RssFeedCellComponent extends JPanel {
  RssFeed feed;
 
  JButton showButton;
  JLabel text;
 
  public RssFeedCellComponent() {
    showButton = new JButton("View Articles");
    showButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent arg0) {
        JOptionPane.showMessageDialog(null, "Reading " + feed.name);
      }
    });
 
    text = new JLabel();
    add(text);
    add(showButton);
  }
 
  public void updateData(RssFeed feed, boolean isSelected, JTable table) {
    this.feed = feed;
 
    text.setText("<strong>" + feed.name + "</strong>" + feed.url + "Articles " + feed.articles.length + "");
    if (isSelected) {
      setBackground(table.getSelectionBackground());
    }else{
      setBackground(table.getSelectionForeground());
    }
  }
}

Now, our cell renderer becomes:

public class RssFeedCellRenderer implements TableCellRenderer{
  RssFeedCellComponent feedComponent;
 
  public RssFeedCellRenderer() {
    feedComponent = new RssFeedCellComponent();
  }
 
  public Component getTableCellRendererComponent(JTable table, Object value,
      boolean isSelected, boolean hasFocus, int row, int column) {
    RssFeed feed = (RssFeed)value;
 
    feedComponent.updateData(feed, isSelected, table);
    return feedComponent;
  }
}

And once again, nothing changed! But we did optimize (and that’s always good, right?). Now, there is only one instance of RssFeedCellComponent which changes it’s components depending on the RssFeed passed. In addition, creating a Cell Editor that returns the same component is now pretty simple:

public class RssFeedCellEditor extends AbstractCellEditor implements TableCellEditor {
  RssFeedCellComponent feedComponent;
 
  public RssFeedCellEditor() {
    feedComponent = new RssFeedCellComponent();
  }
 
  public Component getTableCellEditorComponent(JTable table, Object value,
      boolean isSelected, int row, int column) {
    RssFeed feed = (RssFeed)value;
    feedComponent.updateData(feed, true, table);
    return feedComponent;
  }
 
  public Object getCellEditorValue() {
    return null;
  }
}

And now we register our editor:

JTable table = new JTable(new RssFeedTableModel(feeds));
table.setDefaultRenderer(RssFeed.class, new RssFeedCellRenderer());
table.setDefaultEditor(RssFeed.class, new RssFeedCellEditor());
table.setRowHeight(60);

We can do even better. We can combine all three classes, RssFeedCellComponent, RssFeedCellRenderer and RssFeedCellEditor into a single RssFeedCell:

public class RssFeedCell extends AbstractCellEditor implements TableCellEditor, TableCellRenderer{
  JPanel panel;
  JLabel text;
  JButton showButton;
 
  RssFeed feed;
 
  public RssFeedCell() {
    text = new JLabel();
    showButton = new JButton("View Articles");
    showButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent arg0) {
        JOptionPane.showMessageDialog(null, "Reading " + feed.name);
      }
    });
 
    panel = new JPanel(new FlowLayout(FlowLayout.LEFT));
    panel.add(text);
    panel.add(showButton);
  }
 
  private void updateData(RssFeed feed, boolean isSelected, JTable table) {
    this.feed = feed;
 
    text.setText("<strong>" + feed.name + "</strong>" + feed.url + "Articles " + feed.articles.length + "");
 
    if (isSelected) {
      panel.setBackground(table.getSelectionBackground());
    }else{
      panel.setBackground(table.getSelectionForeground());
    }
  }
 
  public Component getTableCellEditorComponent(JTable table, Object value,
      boolean isSelected, int row, int column) {
    RssFeed feed = (RssFeed)value;
    updateData(feed, true, table);
    return panel;
  }
 
  public Object getCellEditorValue() {
    return null;
  }
 
  public Component getTableCellRendererComponent(JTable table, Object value,
      boolean isSelected, boolean hasFocus, int row, int column) {
    RssFeed feed = (RssFeed)value;
    updateData(feed, isSelected, table);
    return panel;
  }
}

Now we use only one Panel for all rendering and editing!

JTable with Renderer and Editor

The Conclusion

Every time I try to use a JTable I discover how difficult it is to just create a f*cking simple table, but I also see how powerful it is for more complex things. I’m pretty sure there is a way to display the button only on mouse over. You know, web2.0-y.

Anyway, that’s that. As usual, you can find the source and the executable in my Java Corner.

Now excuse me, but I got some Void Rays to counter attack. En Taro Adun!

I was going to start with an introduction to Lists, but this needs a lot of research (about 5 minutes) so I will just reference Wikipedia (which took 2 seconds):

“The Bullets and Numbering system has been significantly overhauled for Office 2007, which is intended to reduce the severity of these problems.” -Microsoft Word, Wikipedia

I’m not pretty sure if you can modify multi level lists prior to 2007 because this is the first time I’m doing this. But anyway, in Word 2007 you have the ability to define new multi level lists styles which is VERY useful for numbering your headings.

Let us begin by writing some chapter and section titles. As I told you yesterday, we will first write our document and then style it. So add some old fashion Lorem Ipsum text after each title. If you are lazy like me, you will probably find this tool handy: Lorem Ipsum Generator. Or, use Word’s built-in command “=lorem(X)” where X is the number of paragraphs; i.e. =lorem(2). Thank you Geri for this tip.

Example without styles

Once you are done with your titles, style them with the appropriate heading style. Forget about setting the numbering in the heading style. We will number them in a better way.

Example with Heading styles

Now, select your first heading and click on the “Multilevel List” in the “Home” tab and choose “Define New Multilevel List….”.

Define New Multilevel List

On the bottom left of the “Define new Multilevel list” window click on the “More >>” button. This is what you will see:

Multilevel List Dialog

Here we can select a level of the list (in the top left) and change its style.

Let’s say you want each Heading 1 to include “Chapter”. Simply enter “Chapter” before the number in the “Enter formatting for number:” text field. I personally don’t like spacing, so I set both “Aligned at:” and “Text indent at:” to 0 cm. Finally, I prefer a single space instead of a tab before my title, so I set “Follow number with:” to Space.

But aside from styling your list, the important step is to link this style to your header. You do this by selecting “Heading 1″ to the “Link level to style:” drop down list.

Link level to style

For levels other than 1, you can include the number of its parent level. This is very useful when you want sub sections to look like “1.2.1 Title”. Simply edit those levels and select the level you want in the “Include level number from:”. Don’t forget to link each level to the appropriate headings style.

Include Level Number

You should now have each heading numbered correctly!

After Numbering

But what about appendices? What if you want Appendix A, Appendix B etc? Well, we know that appendices appear in the Table of Contents as the same level as Heading 1, so clearly they have to be in the first level of the list.

So, one way of setting this is by applying the Heading 1 style to each. Then, select your first appendix title and define a new style. The settings of the current active list style are already set, so you don’t need to set everything again. This time you have the option to select how to apply these changes. Choose “This point forward” in the “Apply changes to:” drop down list and then make your changes. Set, for instance, the “Enter formatting for number:” to Appendix and the “Number style for this level:” to “A,B,C,…” and then the “Start at:” to “A”.

Appendix Multilevel List Style

While this will do the trick, you have to manually set the new style. I hate manuals! So let’s make them autos.

Create a new style by opening the “Styles” windows and clicking “New Style”. Name it “Appendix”, set the “Style type:” to “Linked (paragraph and character)” and “Style for following paragraph:” to “Normal”.

Now, this is where the magic happens: set the “Style based on:” to “Heading 1″ and click “OK”. This will link this style with Heading 1, which means two things: a) any changes in Heading 1 will be set to Appendix as well and b) the title of this heading will be set to the same level of Heading 1 in Table of Contents.

Appendix Style

If you now apply the Appendix style to your titles, you will see that “Chapter” appears before them. To set this to “Appendix”, select your title and define a new multi level list. Next, select the fourth level and set the “Link level to style:” to “Appendix”. Make any changes to the style you want (like setting “Appendix”) and your done!

Appendix

When you will generate your Table of Contents, you’ll see that Appendices are at the same level as Heading 1. If you change the Appendix style to be based on Heading 2, this will be visible to the Table of Contents as well.

Table of Contents

Easy!