Back On The Touch

I always liked the aesthetics of the iPhone back behavior, placing the back button as a small arrow within the title bar is a stroke of UI design genius. I don't share Apple's disdain for physical buttons so I'm much more in favor of a physical back button, however having that button in the title area is both handy and none intrusive.

Often people ask us to customize the title area for things other than Labels, normally when a use case is so common we comply even when it goes against our core aesthetics of UI design. However, this is a special case where making such a change would break the simplicity of customization to everyone else involved.

However, in the spirit of LWUIT for making everything reasonably easy to accomplish even these iPhone like back buttons are very possible and easy to accomplish. There are two challenges involved: the shape of the button and its position in the title.

The shape of the button is solved by creating an image border with the proper shape and updating the theme, I won't publish the resource file since the images here aren't owned by myself.

Placing the button in the title of the UI Demo requires the following change to the Demo.java class in the UI Demo. In the run() method change the demo form creation to this:
final Form demoForm = new BackTitleForm(backCommand);

And add the BackTitleForm as an inner class (pasted bellow). Back title form is a simple form extension that essentially creates a content pane within the content pane and creates an alternate title component that can be anything.

    class BackTitleForm extends Form {
       private Container contentPane = new Container();
       private Container title = new Container(new BoxLayout(BoxLayout.X_AXIS));

       public BackTitleForm(Command backCommand) {
           super.getContentPane().setLayout(new BorderLayout());
           super.getContentPane().addComponent(BorderLayout.CENTER, contentPane);
           super.getContentPane().addComponent(BorderLayout.NORTH, title);
           Label titleLabel = new Label(getName());
           title.getStyle().setPadding(0, 0, 0, 0);
           title.getStyle().setMargin(0, 0, 0, 0);
           titleLabel.getStyle().setPadding(0, 0, 0, 0);
           titleLabel.getStyle().setMargin(0, 0, 40, 0);
           titleLabel.getStyle().setBgTransparency(0);
           title.setUIID("Title");
           Button backButton = new Button(backCommand);
           backButton.setUIID("BackButton");
           backButton.setPreferredH(42);
           title.addComponent(backButton);
           title.addComponent(titleLabel);
       }

       public Container getContentPane() {
           return contentPane;
       }
      
       /**
        * Removes all Components from the Content Pane
        */
       public void removeAll() {
           contentPane.removeAll();
       }


       /**
        * @inheritDoc
        */
       public void setLayout(Layout layout) {
           contentPane.setLayout(layout);
       }

       /**
        * Adds Component to the Form's Content Pane
        *
        * @param cmp the added param
        */
       public void addComponent(Component cmp) {
           contentPane.addComponent(cmp);
       }

       /**
        * @inheritDoc
        */
       public void addComponent(Object constraints, Component cmp) {
           contentPane.addComponent(constraints, cmp);
       }

       /**
        * @inheritDoc
        */
       public void addComponent(int index, Object constraints, Component cmp) {
           contentPane.addComponent(index, constraints, cmp);
       }

       /**
        * Adds Component to the Form's Content Pane
        *
        * @param cmp the added param
        */
       public void addComponent(int index, Component cmp) {
           contentPane.addComponent(index, cmp);
       }

       /**
        * @inheritDoc
        */
       public void replace(Component current, Component next, Transition t) {
           contentPane.replace(current, next, t);
       }

       /**
        * @inheritDoc
        */
       public void replaceAndWait(Component current, Component next, Transition t) {
           contentPane.replaceAndWait(current, next, t);
       }

       /**
        * Removes a component from the Form's Content Pane
        *
        * @param cmp the component to be removed
        */
       public void removeComponent(Component cmp) {
           contentPane.removeComponent(cmp);
       }
   }