Blackberry how to design the Screen like Profile Screen !! Code for Blackberry 7.0

Question

i am trying to make the Profile screen for my Application and the Requirement is :

I have the Data with me in the Vector and Image in bitmap form.. Only problem is that i am Struggling to figure out how it can be achieved, How to make the Photo Section parallel to the multiple Fields in Right hand Side..

Please help me out.. Thanks in Advance..

Answer 1

You haven't specified everything about how this should work. You may want the profile picture to scale with the screen size. Some of the fields may be editable. I'm not sure if you want backgrounds or borders drawn around the 3 rows of Text/Number. So, I had to make some guesses. But, this should get you started, and help you understand what's needed to create a custom Manager subclass, which is one of the ways to solve this problem.

public class ProfileScreen extends MainScreen {


   public ProfileScreen() {
      super(MainScreen.NO_VERTICAL_SCROLL | MainScreen.NO_VERTICAL_SCROLLBAR);

      add(new ProfileManager());
   }

   private class ProfileManager extends Manager {

      private static final int PADDING = 20;  // TODO: might make this depend on screen size!
      private static final int ROW_PAD = PADDING / 2;
      private static final int NUM_ROWS = 3;

      private String _name = "Nate";
      private String _place = "USA";
      private String _phone = "1-206-123-4567";
      private String _email = "nate@stackoverflow.com";
      private Bitmap _photo;
      private Vector _text;
      private Vector _numbers;
      private LabelField _nameField;
      private LabelField _placeField;
      private LabelField _phoneField;
      private LabelField _emailField;
      private BitmapField _photoField;
      private LabelField[] _textFields;
      private LabelField[] _numberFields;
      private int[] _rowLocations;

      public ProfileManager() {
         super(Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);

         // Create the data and the fields ... this would probably be more
         // dynamic in your production code, so the profile could change.
         _nameField = new LabelField(_name);
         _placeField = new LabelField(_place);
         _phoneField = new LabelField(_phone);
         _emailField = new LabelField(_email);
         _photo = Bitmap.getBitmapResource("avatar.png");
         _photoField = new BitmapField(_photo);
         _text = new Vector();
         _textFields = new LabelField[NUM_ROWS];
         for (int i = 0; i < NUM_ROWS; i++) {
            _text.insertElementAt("Text" + (i + 1), i);
            _textFields[i] = new LabelField(_text.elementAt(i), 
                  Field.USE_ALL_WIDTH | DrawStyle.HCENTER);
         }
         _numbers = new Vector();
         _numberFields = new LabelField[NUM_ROWS];
         for (int i = 0; i < NUM_ROWS; i++) {
            _numbers.insertElementAt("Number" + (i + 1), i);
            _numberFields[i] = new LabelField(_numbers.elementAt(i),
                  Field.USE_ALL_WIDTH | DrawStyle.HCENTER);
         }

         // We will store the bottom 3 row locations for use in paint()
         _rowLocations = new int[NUM_ROWS];

         // Add the fields to this manager
         add(_photoField);
         add(_nameField);
         add(_placeField);
         add(_phoneField);
         add(_emailField);

         for (int i = 0; i < NUM_ROWS; i++) {
            // Add one row of Text and Number fields
            add(_textFields[i]);
            add(_numberFields[i]);
         }         
      }

      public int getPreferredHeight() {
         return Display.getHeight();  // full screen
      }

      public int getPreferredWidth() {
         return Display.getWidth();   // full screen
      }

      protected void sublayout(int width, int height) {
         setExtent(width, height);

         int x = PADDING;
         int y = PADDING;
         setPositionChild(_photoField, x, y);
         layoutChild(_photoField, _photo.getWidth(), _photo.getHeight());

         x += _photo.getWidth() + PADDING;
         int widthMinusPhoto = width - 3 * PADDING - _photo.getWidth();
         setPositionChild(_nameField, x, y);
         layoutChild(_nameField, widthMinusPhoto, _nameField.getPreferredHeight());

         y += _nameField.getHeight() + ROW_PAD;
         setPositionChild(_placeField, x, y);
         layoutChild(_placeField, widthMinusPhoto, _placeField.getPreferredHeight());

         y += _placeField.getHeight() + ROW_PAD;
         setPositionChild(_phoneField, x, y);
         layoutChild(_phoneField, widthMinusPhoto, _phoneField.getPreferredHeight());

         y += _phoneField.getHeight() + ROW_PAD;
         setPositionChild(_emailField, x, y);
         layoutChild(_emailField, widthMinusPhoto, _emailField.getPreferredHeight());

         // layout the 3 rows of Text and Numbers (1/3 width for each label field (?)
         x = PADDING;
         y = PADDING + _photo.getHeight() + PADDING + ROW_PAD;
         for (int i = 0; i < NUM_ROWS; i++) {
            setPositionChild(_textFields[i], x, y);
            // record the y coordinate of this row, to use in paint()
            _rowLocations[i] = y;
            layoutChild(_textFields[i], 
                  width / 3, _textFields[i].getPreferredHeight());

            setPositionChild(_numberFields[i], width - PADDING - width / 3, y);
            layoutChild(_numberFields[i], 
                  width / 3, _numberFields[i].getPreferredHeight());

            y += _textFields[i].getPreferredHeight() + PADDING + 2 * ROW_PAD;
         }               
      }

      // paint overridden to draw gray box behind Text/Number rows
      protected void paint(Graphics graphics) {
         int oldColor = graphics.getColor();
         
         // paint a light gray background behind each row of Text/Numbers
         graphics.setColor(Color.LIGHTGRAY);
         for (int i = 0; i < NUM_ROWS; i++) {            
            // if you want a solid border, use drawRect() instead of fillRect():
            graphics.fillRect(PADDING, _rowLocations[i] - ROW_PAD, 
                  getWidth() - 2 * PADDING, _textFields[i].getHeight() + 2 * ROW_PAD);
         }
         graphics.setColor(oldColor); // reset the color for super.paint()
         super.paint(graphics);
      }                 
   }
}

It's not always required to override paint() in a custom Manager class. sublayout() is where most of the work is done, to position the fields. In this case, I chose to override paint() in order to provide a custom border around more than one field. This isn't the only way to do that, but there are definitely times when you'll want to be able to add custom drawing code, to improve the look of your UIs.

Results