First of all, here is how much you need to worry about the cost of the “If” statement: not at all*. You see, an “If” 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 (in an “If-Then” statement). 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

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

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!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

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!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

Introduction

When I need to write a formal document (like my thoughts on why my neighbors feet smell) I usually go with LaTeX. Not because the name brings interesting thoughts, but because you don’t have to deal with fancy stuff, like “What color should my title be?” or “Are the margins too narrow?”.

Now, don’t get me wrong, I’m all for fancy stuff. But I also get easily extracted. Hey, since when did WordPress add Ctrl+S for saving? I did it by accident (oh, you must make saving a habit, trust me) and it worked! Cool!

As I was saying, Microsoft Word has a lot of fancy things you can do with your plain and boring words, but they usually get on your way when you want to quickly – and I mean quickly, like, the deadline is in two hours – write your essay without adding anything. So I ended up using Word for my drafts until it was time to get serious. Then I would copy & paste the text in a .tex template I have created over the years and go on from there.

But recently I have been a little lazy. And by recently I mean the last two years. And by two years I really mean five. The thing is, LaTeX requires a lot of energy when you want your document to be fancy. Like any other thing in the Linux world, LaTeX has a LOT of options for anything you can think of. From fancy headers to editing the space around a title. The drawback, of course, is that they aren’t in the tip of your finger, more like in a corner down at the basement of a house in the next town of the far away country. In other words, you have to find it, grab it, set it up, learn it and then you can TRY using it.

Just to give you an idea of the situation, here is the template I created. Every time I find something fancy I just drop it in there and see what happens. And here is an example output.

And to top that, LaTeX doesn’t have a standard editor. There are a couple of them lying around but each and everyone I have tried seems like it’s missing X but has Y. I mostly use TeXnicCenter because it supports projects. There is also a WYSIWYG editor, which probably beats the whole idea of LaTeX in the first place, but that’s another discussion.

Anyway, recently I have been looking into Word with a different eye, the left one. I finally figured out how to properly use headers and footers, how referencing works, how to style my document in a consistent manner and various other neat tricks. So, before I forget them I thought of writing them down and accidentally sharing it with the world as if it was for them. Pff, silly Internet people.

So, without further ado, here is a list of features in Microsoft Word 2007 and how to use them.

Headers and Footers

STOP right where you are! I can see you typing your name on the header. Do you know what a section is? Do you know what is “linking” between sections? Do you know what is the option “Different First Page”? Do you know that I’m riding this horse backwards? Well, you should.

Section breaks are used in Word to separate layout or formatting in a document, such as page numbering. This is essential when you have a title page, a table of contents page, a list of figures page, a list of tables page, a list of lists page, and you want them all to have different headers and footers.

Remember how to start a paragraph in the next page? You press 1000 times the Enter key. Or, you simply click the “Page Break” and your done. Well, a section break is similar. Only this time you go the next page AND add a new section. Section breaks can also start in the middle of the page, an even page, or in an uneven page.

You can do this by going to the “Page Layout” tab and clicking on the “Breaks” drop down button. You can see there are four options for entering a section.

Section Breaks

Let’s click the first option, “Next Page”. Just like the “Page Break” our cursor was sent to the next page and nothing else has happened. Now, either double click the top of the page or go to the “Insert” tab, click the “Header” drop down button and select any option. You will see that a contextual tab called “Design” has appeared with various options.

Design Contextual Tab

You will also see that the header now says “Header -Section 1-” or “Header -Section 2-” instead of plain “Header”.

Header Sections

Now start typing in the header. Not anything, type “pekalicious.com”. Thank you. Now look at the header in section 2, same thing. Thank you again. But we want to have different headers for each section. So click anywhere in the section 2 header and then click on the preselected button “Link with Previous”. Nothing will happen, but if you now change it to, let’s say, “pek”, the header in section 1 will stay the same, “pekalicious.com”. Thank you once more.

Link to Previous

OK, we now have separated our sections, let’s add some real content. Let’s go to the footer and try to add “Page/Total Pages”. So go to the footer and hit tab two times to go all the way to the right. You can always do this the easy and boring way: by clicking at the “Page Number” drop down list. But I like to have control.

Page Number Options

The way I do it is by going to the “Insert” tab, click the “Quick Parts” drop down and select “Field…”. This has a list of a lot of useful things. To insert the current page, slide down the list, select page and click “OK”. Oh, did I forgot to tell you to unlink the footer as well? Go to the footer of the first page of section 2 and unselect the “Link to Previous”. Don’t forget to delete the page number in section 1.

Everything seems fine until you notice that the page number in section 2 is 2 instead of 1. Well, unfortunately, you have to set the “Start at…” option. To do so, select the number, go back to the “Design” tab, click the “Page Number” drop down and select “Format Page numbers…”. Here you can set the number format, like the fancy Roman “I,II,III”, include extra information and set the “Start at”, which is what we want. So select that and enter “1″.

Page Number Format Options

Now let’s add a “total pages” number next to the page number. To insert this, go back to the “Field…” window and select the “SectionPages”. NOT the “NumPages”! The former will enter the total number of pages of the current section while the latter will enter the total number of pages in our document.

Another interesting option for the sections is the “Different First Page”, which will allow you do edit the first page of each section separately from the next. It’s kinda cool, but I find it easier to simply add another section.

Summary

So, for all you TL;DR people out there, here are some fancy bullet points (and by fancy I mean “plain”):

• Use sections to separate different styles for different pages
• Don’t use “Link with previous” in order to separate them
• Use section-related fields (SectionPages instead of NumPages)
• Set the “Start at…” option to get your page number right

Headings

Here is what LaTeX has learned me: write first, add other shit later. In other words, leave Table of Contents, Headings and other stuff AFTER you have finished your first draft. This is important for two reasons: a) you don’t get distracted and b) you don’t get distracted. There are two levels of distraction in Word, you either try to style your document when you really have to write, or you added a style to the entire paragraph instead of a sentence and you have do undo, select carefully the words you want and style them.

Have you ever styled a paragraph and start writing only to discover that it has the same style? Typical in word processors. Here is a quick tip: press Ctrl+Space before you start typing the next paragraph. Voila! No styling what so ever! In fact, select any text that has some sort of formatting (like bold) and hit Ctrl+Space. Voila again!

Anyway, probably the most useful style is the Headings, aside from Bold, Italics and Color. Or Text Direction, Bullets and Indention. Or Font Family, Font Size and Strikethrough. Or… Anyway, Headings are important.

Luckily, headings DON’T continue after you have pressed enter. Cool right? Well, this can be configured for any style in that fancy box of styles up there. Even more cool is that you can have a consistent style for all your headings without selecting one by one and changing them. Just right click on any style and select “Modify”.

Modify Style

Here you have a LOT of options. The “Style for following paragraph” will do the Enter trick. Feel free to change everything and see what happens.

Another important thing about the headings styles is that they are used to automatically create a table of contents. Add some Heading 1, 2 and 3 styles and then go to the “References” tab, click on the “Table of Contents” drop down and select one. Magic!

Table of Contents

The cool thing about the table of contents is that you don’t have to write it yourself. Every time you add a new Headings style, simply click on it and hit the “Update Table” button.

Update Table of Contents

By the way, if you happen to loose a style (it doesn’t appear in the Quick Styles list on top) click on that little icon on the bottom right of the styles box to show the “Styles” window. Then click on the “Options…” on the bottom right of that window and select “All styles” in the “Select styles to show” drop down. Once you use the style it will appear again at the top. If it doesn’t, then right click on it, select “Modify” and check the “Add to Quick Style list”

Add Style to Quick List

I love this Ctrl+S feature in WordPress!

Among the many options you have for formatting the Headings, the one you will likely need is numbering. Especially if you are in the academics field. To add numbering go to the “Format” drop down and select… erm… “Numbering”. Here you have a variety of options, but let’s make it more interesting. Select the simple numbering “1,2,3,…” and click “Define New Number Format…”. In the “Number format:” field, before the number, enter “Chapter “. Tada! All Headings start with Chapter. You can do the same for Headings 2 and enter “Section” etc.

Numbered Headings with Text

But wait, now the “Table of Contents” title says “Chapter 1. Table of Contents”. Surely we don’t want that. To fix this, simply… delete it! The next heading will automagically have the right number.

Update: Turns out, there is a better way of numbering your headings.

Summary

So, to summarize:

• First write, do other shit later
• Use Headings to automatically generate Table of Contents
• Modify the style instead of a specific heading
• Optionally add number and text before the title

References

One of the best things in LaTeX is its simplicity of adding citations: just add “\cite{Name_of_Citation}” which you have already defined in a Bibtex file in the Bibtex format, insert it into your main document, compile twice and your done. OK, maybe I have done this 23098420938 times, but still, this will add a fancy “Bibliography” at the end of your document with correct numbering and format (APA, IEEE etc). There is also this amazing tool, JabRef, that will help you.

Let’s do the same fancy thing in Word. First of all, you need to decide what style you will be using. If it’s APA, your OK, but if you are unlucky like me, it’s definitely IEEE. This is not included in 2007, but you can download it here. Copy the file in the %programfiles%\Microsoft Office\Office12\Bibliography\Style directory and restart Word. You should now see the IEEE in the drop down in the “References” tab.

IEEE Reference Style

Let’s add some sources: click on “Manages Sources” and add some books. Good thing there is a Master List, this will save you in the long run.

Source Manager

Go at the end of any word, click the “Insert Citation” drop down and select your book. That’s it!

Insert Citation Menu

If you use APA, you will see “(pek, My Boring Book, 2010)” or, if you use IEEE, you will see just a boring “[1]“. To create the bibliography at the end of your document, just click on the “Bibliography” drop down and select the style you want. This works the same way as Table of Contents, so if you see “Chapter X” simply delete it.

Bibliography

That was easy. Even easier are footnotes. Just click on the “Add Footnote” button and enter your text.

Footnote

To create the list of figures, you must insert captions. Not the ones where you try to position the text under an image and call it a caption, I mean real captions, as in, select the image, go to the “References” tab and click “Insert Caption”. Once you have done that to a couple of images, insert anywhere you want in the top of page 3 the table of figures by clicking “Insert Table of Figures”. Again, works the same way. Make sure not to delete the number that is automatically added, otherwise it will not show up in the Table of Figures.

Table of figures

To cross-reference a section, a figure, a table, or any text, go anywhere and click “Cross-reference”. There are many options there, but I will focus on bookmarks. You can bookmark anything in a Word document by simply selecting it and clicking the “Bookmark” button in the “Insert” tab. Just enter the name of the bookmark and click “Add”. To cross-reference this select “Bookmark” in the “Reference Type” and then chose what to reference to in the “Insert reference to” drop down.

Bookmark

Finally, we can create an Index page that lists all of our important words, like Donkey. Select a word or phrase, click on the “Mark Entry” in the “Reference” tab and then click “Mark” in the . This will add some gibberish next to the word and also show all kinds of stuff. These stuff can be hidden again by clicking the “Show/Hide Marks” in the “Home” tab. Once you are done creating all your entries, create the index page by clicking “Insert Index” in the “Reference” tab.

Index

Have I mentioned how much I love WordPress’ Ctrl+S?

Summary

That’s it for the references. Pretty simple I think. And here are your bullets:

• Citations, Table of figures and Index can all be created automatically
• Use the “Insert Caption” instead of manually adding text under your image
• Use “Bookmarks” to cross-reference anything in your document

General Tips

SAVE. SAVE SAVE SAVE SAVE. I can’t emphasize this enough. Make Ctrl+S a habit. And I’m not just talking about Microsoft Word; PowerPoint, notepad, trees, everything. Just save whenever you stop for more than 2 seconds.

First type and then style. Even when you want to bold a text. You will avoid “bolding” a lot of things. Just remember, in case of panic, use Ctrl+Space.

Use comments under the “Review” tab to remember things. Comments catch your eye easier than underlining a sentence.

Conclusion

After finally figuring out the sections and citations, I started appreciating Word more. Of course, I still prefer LaTeX for my “serious” documents (see Cook Book), but now I can use Word for more than just drafts. And these are only the basics. I have yet to discover what this “Mailings” tab is or how to properly use the “Equation”.

Have fun.

And save.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

One thing is for sure, a hypochondriac is someone that has no health problems what so ever. By the wise words of Mike Baldwin, the first step for a hypochondriac is to admit that he has no problem.

I am a hypochondriac and I have been sick more times than I have been healed. These are my stories.

-*-

The mind is a funny thing they say. Sometimes it will mess with you and sometimes you will mess with it.

Lately I had some sleeping problems. Everything began when Karla gave me her position at work so she could go on a trip in Italy. Why Italy? She was always curious what pizza tasted like in the country that invented it. Yes, she is a simple person.

She is also my best friend, my ex-love-of-my-life and my boss. Most people don’t believe this is even possible; including me. But the thing is, we were a couple before she was my boss and we were friends way before we were a couple. Or at least this is how I try to explain our relationship, hoping that nobody starts asking questions.

Anyway, I got double the amount of work with the same amount of procrastination. So work kept piling up until it was two weeks before Karla came back. That was when my mind woke me up: “Hey you. You must stop watching The Peep Show and get down to business. Here is a dose of adrenaline to help you.” The next five days were a living hell. I was working overtime with little to no sleep. It had occurred to me that I will not make it on time. And then Dani showed up.

One of the benefits of being a hypochondriac is that a lot of people get tired of your whining and after a while just ignore you entirely. Luckily Dani is not that kind of person. He is the closest friend I got and shares the same amount of interest for the things I like: stand up comedy, photography, comic books and LEGO. He is the only person who I can unleash my uncontrolable geekness without feeling that he lost interest in the middle of my sentence, like Karla. Sometimes I really have no idea why she even hangs out with me.

When Dani entered my office and saw me sleeping between two towers of papers he decided to help. Now, Dani is good at a lot of things: he knows what good stand up comedy is, he immediately understands what LEGO pieces are needed to build anything observed in nature and he can even judge a comic by its cover. What Dani is definitely not good at is taking responsibilities.

So when Dani decided to help me, all he really did is triple the height of those paper towers. Unfortunately, I was too tired to care. My first priority was to sleep as much as possible, which proved harder than I thought.

As anyone that hasn’t slept for more than 40 hours can tell you, when you finally lye down your heart rate increases because it is under a lot of stress. A heart rate that fast will keep you awake until it relaxes. But if you don’t have enough time you end up going back to work with a mere one hour sleep. That is when I started thinking that I maybe have insomnia.

Every night I was anxious to get enough sleep and because of that anxious I couldn’t! For a couple of days I couldn’t remember how much I slept the night before or if I slept at all. I was a zombie at work and a vampire at night. A Vampire-zombie? Then one day Dani came and told me the “good” news.

I haven’t told you the whole story with Karla. Probably because it’s a long one. But what you need to know is that I always thought that no matter how many relationships she will have, we would one day end up together. We even had those talks every 2-year-old couple has. You know, the one where she makes you say that you will always be together even though, at that moment, you aren’t even sure if you will be together tomorrow and then you finally realize that you did want to be together, only now its too late because you broke up two weeks ago and she has moved on with one of your most hated friends? Yeah, that talk.

So when Dani came to me and said “Ross proposed to Karla” I wasn’t sure whether I fainted because of that or because I haven’t slept for a month.

I woke up with Dani’s arms wrapped around me. I never noticed how loud he snorred. Then I realized, I finally slept!

- “Dani, Dani, wake up! Wake up man!”
- “What?”
- “Dani, I finally slept!”
- “Well, I still am.”
- “Wake up, I wanna know how many hours I was sleeping. What time is it?”
- “Dude, the clock is right in front of you.”
- “Eight in the morning? Awesome! What time did I go to sleep?”
- “You didn’t. You passed out. And so will I.”

And that’s when I remembered. Ross and Karla are gonna get married.

Of all the people in the world, she chose Ross. Sometimes I think that she did this only to get on my nerves. But after so many failed attempts I started to realize how over she is with me. And yet, even though we almost don’t have anything in common, even though she keeps pushing me to start a conversation, even though I never go out with her, she still calls everyday to see what’s up, she still finds time to meet me and she still is there for me in every panic attack. Yet, she is going to marry Ross.

Now is a good time to start smoking again.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

Either my google-fu isn’t what it used to or a demand for such an utility isn’t what I had imagined. I’m talking about a small application that will take an animated gif file and turn it into a single sprite sheet. Let me rephrase that to make it a little more clear: JSpriteSheetCreator will convert a file FROM an animated gif TO a single png sprite sheet.

Yeah… I repeat that because searching for “convert gif to single sprite sheet” or “from gif “to sprite sheet”” or “sprite sheet converter” or “<other search you think will work>” and any other combination of words I looked for didn’t work. Google kept returning from sprite sheet to gif. Which is kind of weird because, as I see it, in games, you have better control of the animation with a sprite sheet than a gif. On the other hand, making an animated gif is probably useful for many other reasons.

Anyway, the only application that I finally found was Avi4Bmp. Which does the basic job of converting from an animated gif to a png and vise versa pretty good. But I have more ideas for such a tool.

Initially, JSpriteSheetCreator will do just that. But in my next iteration I will add support for reordering the frames and of course import/export xml animation data (WARNING: as of this time, google will tell you that ziggyware is an attack site. They are probably hacked so make sure you know what you are doing i.e. use AdBlock and/or NoScript) that will help integrate this into a game developers workflow.

As any other utility I develop, I am hosting this in my own server. You can find it under my Java Corner. You can even run it without downloading it with Web Start (provided you trust me). You can also find the source code.

Of course, I would like to thank Kevin Weiner for his ultra slim GifDecoder class.

Enjoy!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

So today’s one-night-stand is called… Flickr FullScreen Scroller. It is a web app that shows the photos of a Flickr user account in full-screen. Use left or right arrow keys to navigate threw the photos (left mouse click will also move to the next photo).

There are many many fullscreen Flickr slide shows out there, including an official one from Flickr, but:

1. Most of them don’t maximize photos to actual full-screen (as in, fill the entire viewport). They have mirror effects on the bottom, or controls on the top, or arrow overlays etc. I wanted a totally clean interface.
2. Most of them where slide shows. I wanted to manually browse through the photos.
3. I wanted the photos to be one next to the other and not one after the other (does that even makes sense?).
4. They weren’t developed by me. Everything else is just an excuse.

So enjoy!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

So I give you Strip to Print! A tool that will only display the HTML part that you want. It’s very simple: You enter the URL, the tag that contains the HTML code and then you “Strip!” it. For example, enter “http://pekalicious.com/blog/sharing-the-pae8397-short-film-script/” as the URL and leave the “.post” in the next textfield (or simply click here). Click “Strip!” and observe the article from my blog striped and ready to be printed.

The hardest part is finding the tag you want. I may add a small DOM selector in the future, but for the time being (and probably for a long time) I recommend Firefox’s DOM Inspector. I personally use this to find the id, class or DOM path of any website. Warning: every matched tag will be displayed. Depending on what you want, this may be desirable or not. For example, enter the “https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:72?sort=newest” URL and use “.addon” as the tag (or click here). This will strip all addon DIVs from Firefox’s addon site. Also notice that a lot are missing (styles, images etc). I said, this is a very basic tool.

Currently I know that WordPress and Blogger use the “.post” id while Wikipedia uses the “.content” id. Post a comment if you have found a useful id.

Also, under the “Strip!” button there is a bookmarklet you can use to quickly access this tool. Just drag and drop the link to your bookmarks toolbar. Now, whenever you want to strip a website click this bookmark, enter the tag and “Strip!” it.

Finally, here are two applications I recommend using along with this tool:

• CutePDF Writer will install itself as a printer in your computer. This will allow you to print anything into a pdf.
• And once you have a collection of pdf’s, you can use the PDF Sam application to merge them into one.

That’s it. Enjoy!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

Well, I decided to share it.

In my case it was a short film. And the thing about short films (and films in general) is that they involve actors. And if you are anything like me, then the only real acting you can do is merely a cameo. Which means that you really need actors. But here is the catch: it’s a low-to-no budget film. And just like any other non-profit effort, it means that people that are going to be involved must be at least as half as excited as you are.  Otherwise you might have troubles.

Troubles like people leaving right in the middle of the rehearsals. Right when you thought everything was finally rolling. And the timing was great as well. Less than a week before Easter is over. Not even enough time to shoot. And as that wasn’t enough, more people became less and less interested until you finally decide to join the club as well.

But it’s fine. After all, it’s Easter. People rest this time of the year. Needless to say, it turned out to be a very relaxing Easter. Totally unproductive mind you, but relaxing nonetheless. I also reconnected with some really old friends. And it’s not like we were gonna make money out of it. We wish, but weren’t. And then there’s the summer. It’s not that far away. Yeah, we still got the summer. Maybe things will go better. We now have plenty of time to rewrite the script, prepare our props, find a little budget and all those boring things.

And then I got this idea. About sharing it on the Internet. To see how people will react. How you will react. “Not a bad idea” I thought to myself. “Not a bad idea at all”. And so I did.

Synopsis

A driver gets robbed in the middle of the night. The thief points a gun at him and orders him to drive to a darker, more quieter place. But the driver doesn’t obey and instead crashes the car on a tree hoping the thief gets hurt. Unfortunately, the thief gets up again, but, as luck has it, the robber suffers amnesia instead.

The film starts as the thief wakes up and doesn’t know what’s happening (neither does the audience).

Note: OK. I know the synopsis is horrible. Maybe it isn’t even a synopsis. But come on. The whole script is 4 pages! It’s a synopsis by itself!

Film Script

• English version: pae8397-final-draft-en.pdf
• Greek version: pae8397-final-draft-el.pdf

This work is licensed under the Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Greece Licence.

Warning: The original script was written in Greek. I tried to translate it as best as I could.

Info

Number of pages: 4

Estimated running time: 5 minutes

Making of

Note: The following will have no sense what so ever if you haven’t read the script.

This film has as few as three actors, one of which has a part of less than 10 seconds. But I’ll discuss the acting a little later. For now, I want to go threw the set which is quite challenging. Remember, this is a low-budget film, so we will concentrate on as many DIY solutions as possible.

Which begs the question: “How are you gonna find a crashed car?”. This is the first thing everybody asked me once they read the second line of the script. Well, the good thing about the scene is that it’s dark.

You see, the good thing about shooting in the dark is that you can hide a lot of “mistakes” since not much can be seen by the audience. So when I was thinking about a crashed car, I was thinking mostly about broken glass stickers, smoke coming out of the engine and stuff like that. There is no reason to actually show the damaged area (or actually damage a car for that matter… although, now that I think of it…). Even the part where the driver hits the door several times on a tree can be easily “pillowed” externally so that nothing will get damaged.

But then there’s the lighting. That’s the bad thing about a dark scene. Combine that with the small space of the inside of a car and you got yourself a difficult situation. Lucky for us, cinematographer Paul Cameron encountered the same problem when making Collateral:

With a majority of the interaction between the two lead characters taking place inside Foxx’s cab, a system had to be devised to light the actors in a way that would avoid the “incandescent light in your face” look while still drawing in the surrounding nightscape. “Michael wanted this sort of wraparound, non-directional light,” says Beebe. “He wanted it to feel like there was no real source, to make it appear that everything was lit from the street by the street’s own ambience.”

To accomplish this illusion, Paul Cameron early on developed a system using electro-luminescent panels, such as those used to illuminate digital watches. Having noticed the material illuminating transit bus shelter advertising, Cameron located a local manufacturer, Novatech Electro-Luminescent in Santa Ana, and commissioned the company to make dozens of the panels for use in the cab [and 16 other vehicles]. Roughly 5″ x 15″ in size, approximately 30 of the panels were placed inside the cab, attached with Velcro and controlled by individual dimmers, allowing the units to be shut off or removed, depending on the requirements of the shot.

This system is called a LitePanel (or LitePad) and you can find one right here: http://www.rosco.com/us/video/litepad_ho.asp. On the bottom left you can see exactly how it can easily be place on a steering wheel. Just perfect. But wait; this costs money! So let’s keep looking shall we?

My next stop was asking the good fellas at dpreview to recommend a solution. And sure enough, they came up with two:

• Use a laptop!
• Create a custom LitePanel by buying cheap LEDs ( example product: http://cgi.ebay.com/LED-Photography-Video-Panel_W0QQitemZ390038586321QQcmdZViewItemQQptZLH_DefaultDomain_0).

The laptop is a really great and cheap idea (I’m not even considering the case where you can’t at least find one). Just set a white desktop background and your ready to go! You can even have a set of images from completely white to completely black and change them appropriately. Oh oh oh.. You can even create a program that does… OK… You know where this is going…

And then there’s the DIY solution by buying some cheap LEDs from you local electronics store. Or by breaking something like this. What ever works for you.

Whatever your choice, as the guys at dpreview also pointed out, you will have to cover the car ceiling from the inside with white paper to reflect light in order to soften the shadows.

Plot Holes

The script, although just 4 pages long, isn’t perfect. Can you imagine? I was shocked too. Anyway, right in the middle of rehearsing we realized that we haven’t quite figured out what type of characters we where talking about.

You know, their phychological backgrounds and stuff. I mean, you got this driver that crashes himself on a tree, doesn’t obey even when aimed by a gun and generally is a badass, but yet doesn’t beat the sh*t out of the thief when he realizes that he suffers from amnesia. We had to change that. I mean, the gun should be the first thing he’s thinking about when he gets up.

As for the thief, the more we talked about him, the “wimpier” he was becoming. We thought that this robbery might as well be his first unsuccessful attempt. You can clearly see why when the driver has the balls to continue driving even when he shouts at him to stop the damn car with a gun on his neck.

After so many hours of debating, changing, disagreeing and all that, I realize that making a character isn’t that simple. We changed a lot from this script. The biggest change is with the thief now sitting in the passenger seat and the gun being at his feet. Maybe I’ll share this version when we are done with the changes.

Or even better, maybe you have any suggestions you would like to share. I’ll be glad to hear them.

We will probably have this done at summer. Maybe even sooner. Either way, we will definitely upload the result at Thodoris’ Myspace Film page along with the other projects. So stay tuned!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later

OK, I’ll admit it, my memory isn’t the only reason I started this. After all, there’s Qwitter, a site that emails you when somebody stops following you. And probably a dozen other similar solutions out there. My main reason for making this is having a chance to finally poke the Twitter API and play around (once again) with jQuery. Yet another reason would be to avoid doing my practicals, but I doubt I would be doing them anyway.

So, without any further ado, I introduce you to the Twitter Follower Checker (name says it all?). This little application took me about a day and still needs a lot of work to actually be any useful, but it quickly tells you what you want to know: Who started/stopped following you.

How does it work? Well, how would you keep track of your followers list changes? Probably the first thing that will come to your mind is to store somewhere (text file?) all your current followers list. Then, when you notice that your followers count has changed you simply compare the old stored list with the new current list.

Well, that is exactly what this does! As you can see, it’s magic! You enter the users screen name (yes, it can be any user, as long as he is not private), upload the old data and click “Check!” to compare the two! Voila! You quickly find out your recent changes and get filled with unattractive numbers.

As in most cases though, no matter how simple an application sounds, there are always some creepy little bugs that can’t wait to jump in front of you and make your life miserable for a couple of hours at least.

One of those bugs was found while using the jQuery Form Plugin. It took me more than an hour to finally find out that a simple change of a string was all it took. See, when you use jQuery Form Plugin with files, you must not have an input with the name attribute set to “submit”. That’s fine. I changed that and my problem still remained.  So I thought that the problem was somewhere else. A couple of hours later I accidentally saw in the Firefox Error Console that “jquery form plugin form.submit is not a function”. So I go back to my input field and change the id=”submit” to something else and that was it! Or was it? Unfortunately, it was. I wish it was something more sophisticated.

However, the biggest “bug” I have is displaying Twitter screen names. I say “bug” (with quotation marks) and not bug (without quotation marks) because it seems like one to the end-user but it’s actually a limitation of the Twitter API (and my time). The problem is fetching the followers list in a human readable way. If you want to fetch a users followers list, Twitter API gives you two options:

1. statuses/followers will return the 100 latest updated followers with full information (name, screen name, location, description etc.)
2. followers/ids will return a list of all the followers User IDs (instead of screen names)

In the first case, there are two problems: speed and amount. It is dead slow, in contrast with the second case, because you have to download so much information, which is mostly useless, and at the same time it’s limited to only the last 100 followers.

In the second case there is an even bigger problem. followers/ids provides you with a list of all the followers a user has, but the list contains User IDs instead of usernames. Which would be perfectly fine if translating a User ID to a username wouldn’t cost you anything. Unfortunately that is not the case. One of the ways of translating is by using users/show, which costs one hit for every query. If you have more than 100 followers, it’s almost impossible.

The end result of this is that, instead of displaying perfectly readable user names, the end-user sees a bunch of linked numbers. Every click on a link costs him 1 hit and takes him to an unreadable xml file.

Of course there are many ways to solve these problems: Caching names, translating the xml etc. But then it wouldn’t be my one-night-stand application. They all need time, which I have, but prefer spending it on my next one.

On the bright side, I had some fun with the Twitter API. I loved and hated it’s simplicity. Loved it because it was easy to actually use the API and hated it because the documentation was seriously limited (i.e. you cannot find the 100 followers limitation of the statuses/followers in it’s documentation page).

Funny story: while trying random usernames, I found that sdfsdfasd actually is a registered user! Looking closer you will see that he is not that active as one might think. Digging even deeper you find out that the only person he is following (MITcpw) has many users just like him. Interesting! But boring. Anyway.

One final note. Every time I catch myself using jQuery, I can’t resist not overusing it. I keep thinking “can I make this without refreshing the site?”. So when the time came to add the “powered by jQuery” button I said to myself “this doesn’t represent me at all”. So I went and quickly fixed a button that perfectly describes my jQuery usage.

And there you have it, my latest over-jqueried web app that’s probably totally useless. Knock yourselves out!

Note to self: start using images in my posts!

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Share via MySpace
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend
• Print for later