Michael Clewley, Editor

 

Java lets developers take an existing element, use its current pieces, and build something unique to the developer’s needs that is based on the original element. This column will focus on doing just that. Like Doctor Frankenstein, we will take elements from objects and combine them into something that has a life of its own.

When designing and laying out a screen for a BlackBerry device application, you must keep in mind what the needs of the user are and how to make it user friendly yet esthetically pleasing at the same time. Combining all three aspects of screen design into a flowing piece of art can be difficult at times. From one developer to another, I suggest that you shouldn’t sell yourself short because creating an attractive but useful screen is a work of art. Yes, a Picasso you are!

Did you ever notice that an edit field just doesn’t always work from an esthetic point of view? Text entry that involves more than one line can cause all elements on the screen to shift. Perhaps you just want your edit field to have a nice border around it. In this issue we will focus on creating a TextBox field in an attempt to address similar issues.

For this article I have defined a TextBox field to have the following attributes:

  • fixed width and height
  • surrounded by a border
  • multiple lines of text do not increase the size of the edit field or cause the screen, or objects on the screen, to shift or scroll
  • the field will scroll if it contains multiple lines of text

Now that we have a definition, let’s look at how to accomplish this feat. We will create a TextBoxField class so that the object can be reused time and time again without modification or recoding.

One of the first things that may seem odd is that we are extending a VerticalFieldManager and not an edit field. The manager is going to be responsible for the fixed width and height of the field, and will also help with the scrolling effect.

public class TextBoxField extends VerticalFieldManager {

  //define some variables to be used
  //in the class
  private int managerWidth;
  private int managerHeight;
  private EditField editField;

The default constructor performs a few small tasks here. When an instance of the TextBoxField is first created, the width and height of the field itself is passed. Another key component is to call the super instance of the VerticalFieldManager and pass it the Manager.NO_VERTICAL_ SCROLL flag. This keeps the edit field in place and provides the desired scrolling effect.

  public TextBoxField(int width, int height) {
    super(Manager.NO_VERTICAL_SCROLL);
    managerWidth = width;
    managerHeight = height;

The next part of the constructor is to create two elements that will be added to the VerticalFieldManager, and then create another VerticalFieldManager that allows vertical scroll. We will create the edit field after the manager has been created. A small modification is required for the edit field to override the paint() method and invalidate() the manager each time the field has to repaint itself. This helps keep the border around the field clean when scrolling occurs. Lastly, add the edit field to the vertical field manager, and add the vertical field manager to the primary vertical field manager.

    VerticalFieldManager vfm =
      new VerticalFieldManager
        (Manager.VERTICAL_SCROLL);

    editField = new EditField(){
      public void paint(Graphics g) {
      getManager().invalidate();
      super.paint(g);
    }
  };

  vfm.add(editField);
  add(vfm);
}

Now override the paint() method of the vertical field manager to provide the border around the field itself. Here we are just drawing a simple rectangle around the field based on the width and height that you provided when the object was instantiated. Of course if you wanted to really get crazy, more content could be added here that really lets out the Picasso in you. Always remember that at some point you need to call super.paint()!

public void paint(Graphics g) {
  super.paint(g);
  g.drawRect(0, 0, getWidth(), getHeight());
}

Overriding the vertical field manager’s sublayout allows the fixed properties of the field to be maintained. We start with two simple checks to ensure that the width and height are not zero. If so then use the values that have been passed into sublayout by the system. Call super.sublayout() once the boundaries have been established. This is a needed step to ensure that your field is created successfully. After super.sublayout has been called we need to force the extent of the manager. This step gives the fixed height of the field where the call to super.sublayout() provides the fixed width.

public void sublayout(int width, int height) {
  if (managerWidth == 0) {
    managerWidth = width;
  }
  if (managerHeight == 0) {
    managerHeight = height;
  }
  super.sublayout(managerWidth, managerHeight);
  setExtent(managerWidth,managerHeight);
}

The last step is to provide methods that allow you, as a developer, to set or read the text of the field. Because the TextBoxField class is extending a manager and not an edit field, these methods are not inherited. These methods will access the edit field that was created in the constructor.

  public String getText() {
    return editField.getText();
  }
  public void setText(String text) {
    editField.setText(text);
  }
}

That’s it! The TextBoxField has now been coded. All that’s left is to add it to your application and instantiate it. Let’s take a look at the end result.

 


Please email your comments, suggestions and editorial submissions to