Square application is out, and here are a few screenshots taken on my Nexus:

Today’s post highlights the design of EpicEvent.com that specializes in online ticket sales. The dark orange color used for links and the main action button is offset by the light desaturated sky blue background and dark slate blue used for the section subheaders. Clever use of stitch and zigzag elements as separators creates a realistic impression of a giant ticket stub – further reinforced by the crumpled paper texture used in the navigation menu and the main header section. The main section uses subtle gradients to add a little life around the text sections. The “about us” section uses multiple cross fading background layers that mesh perfectly together. The main section employs a precise three column layout maintained throughout all the subsections; “Sign up for Epic Event” is the only exception which is rather strange since its icon is the same size as the other two icons above it. I would spend a little bit more time on the main tagline (“The simple way to sell tickets online”) which suffers from rather sloppy kerning, especially in the last two words.

I was recently asked how to create multi-level menus with Flamingo command menu buttons. There is nothing preventing you from creating arbitrary hierarchies of menus – and you can do this even in the stable 4.2 release. The latest 5.0dev drop of the library brings small improvements for mixing menu buttons with and without icons, and here is a small code sample to create a two-level menu:

public class MultiLevelMenu extends JFrame {

   public MultiLevelMenu() {
      super("Multi level menu");

      JCommandButton main = new JCommandButton("click me");
      main.setCommandButtonKind(CommandButtonKind.POPUP_ONLY);
      main.setDisplayState(CommandButtonDisplayState.MEDIUM);
      main.setFlat(false);

      // first level menu
      main.setPopupCallback(new PopupPanelCallback() {
         @Override
         public JPopupPanel getPopupPanel(JCommandButton commandButton) {
            JCommandPopupMenu result = new JCommandPopupMenu();

            result.addMenuButton(new JCommandMenuButton("Copy",
                  new edit_copy()));
            result.addMenuButton(new JCommandMenuButton("Cut",
                  new edit_cut()));
            result.addMenuButton(new JCommandMenuButton("Paste",
                  new edit_paste()));

            result.addMenuSeparator();

            JCommandMenuButton second = new JCommandMenuButton("Find", null);
            second.setCommandButtonKind(CommandButtonKind.POPUP_ONLY);
            // second level
            second.setPopupCallback(new PopupPanelCallback() {
               @Override
               public JPopupPanel getPopupPanel(
                     JCommandButton commandButton) {
                  JCommandPopupMenu result = new JCommandPopupMenu();

                  result.addMenuButton(new JCommandMenuButton("Find",
                        new edit_find()));
                  result.addMenuButton(new JCommandMenuButton(
                        "Find replace", new edit_find_replace()));

                  return result;
               }
            });
            second.setPopupOrientationKind(CommandButtonPopupOrientationKind.SIDEWARD);
            result.addMenuButton(second);

            return result;
         }
      });

      this.setLayout(new FlowLayout(FlowLayout.LEADING));
      this.add(main);

      this.setSize(300, 200);
      this.setLocationRelativeTo(null);
      this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
   }

   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         @Override
         public void run() {
            SubstanceLookAndFeel.setSkin(new GeminiSkin());
            JFrame.setDefaultLookAndFeelDecorated(true);

            new MultiLevelMenu().setVisible(true);
         }
      });
   }
}

And this is how it looks like:

Couple of things to note:

• It’s the same JCommandButton.setPopupCallback API that is used to create all menu levels
• By default the popups are displayed below the originator component (unlike the core Swing menus). Use JCommandButton.setPopupOrientationKind API passing the SIDEWARD enum value to it to recreate the core Swing behavior.

Today’s post highlights the design of SimpleBits.com, a design studio by Dan Cederholm. True to its name, the design is very clean and minimalistic. A spartan beige color scheme with beautiful geometric patterns running along the top, left and bottom edge is offset by increasingly popular shaded desaturated pink color for the logo and links. A simple three column grid provides a lot of whitespace around carefully chosen blocks of text. The navigation menu in the header is perfectly aligned with the main layout columns, and the links in the footer are themed with the darker beige color, blending perfectly with the rest of the site.