Question

I need help with drawing the focus of the selected row properly.
Currently if I select the first item of a category the separatorrow gets highlighted too. So how can I implement my custom focus drawing so that only the selected row gets focused/highlighted?

I am using the posted source code from here: Blackberry Tablemodel gets messed up when scrolling

I am using the Eclipse IDE from RIM and JRE 7.0.0

public class ProductsScreen extends MainScreen
{
private TableModel _tableModel;

private static final int ROW_HEIGHT = 40;

public ProductsScreen(MainCategory mc)
{
    super(Manager.NO_VERTICAL_SCROLL | Manager.HORIZONTAL_SCROLL);

    DBManager dbman = DBManager.getInstance();
    AllProductByCategory[] products = null;

    try {
            products = dbman.getProducts(mc.getID().intValue());
    } catch (DatabaseException e) {
        System.out.println(e.getMessage());
        e.printStackTrace();
    } catch (RemoteException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    setTitle(mc.getName());

    _tableModel = new TableModel();//(StringComparator.getInstance(true), 0);

    if(products != null)
    {
        for(int i = 0; i < products.length; i++)
        {
            ViewableData[] data = products[i].getData().getViewableData();
            for(int j = 0; j < data.length; j++)
            {
                _tableModel.addRow(new Object[] {products[i].getCategoryName(), data[j].getTitle2()});
            }
        }
    }

    RegionStyles style = new RegionStyles(BorderFactory.createSimpleBorder(new XYEdges(1, 1, 1, 1), Border.STYLE_SOLID), null, null,
        null, RegionStyles.ALIGN_LEFT, RegionStyles.ALIGN_TOP);

    TableView tableView = new TableView(_tableModel);
    final TableController tableController = new TableController(_tableModel, tableView);

    tableController.setFocusPolicy(TableController.ROW_FOCUS);

    tableController.setCommand(new Command(new CommandHandler()
    {
        public void execute(ReadOnlyCommandMetadata metadata, Object context)
        {
        }
    }));

    tableView.setController(tableController);

    DataTemplate dataTemplate = new DataTemplate(tableView, 2, 2)
    {
       public Field[] getDataFields(int modelRowIndex)
       {
          final Object[] data = (Object[]) _tableModel.getRow(modelRowIndex);

          Field[] fields = new Field[3];
          String rowGroup = (String)data[0];
          // we're in a new group if this is the very first row, or if this row's
          //  data[0] value is different from the last row's data[0] value
          boolean isNewGroup = (modelRowIndex == 0) || 
                (rowGroup.compareTo((String) ((Object[])_tableModel.getRow(modelRowIndex - 1))[0]) != 0);
          if (isNewGroup) {
             // make a separator row
             fields[0] = new HeaderField((String)data[0], 
                            Field.USE_ALL_WIDTH | Field.NON_FOCUSABLE);
          } else {
             // this is in the same group as the last product, so don't add anything here
             fields[0] = new NullField();
          }
          // now, add the actual product information
          fields[1] = new LabelField((String)data[1], 
                            Field.USE_ALL_WIDTH | Field.FOCUSABLE | Field.USE_ALL_HEIGHT | DrawStyle.ELLIPSIS);

          fields[2] = new BitmapField(Bitmap.getBitmapResource("img/bullet_arrow_right.png"));

          return fields;
       }
    };

    dataTemplate.createRegion(new XYRect(0, 0, 2, 1)); // group separator (maybe a null field)
    dataTemplate.createRegion(new XYRect(0, 1, 1, 1)); // actual rows with product information
    dataTemplate.createRegion(new XYRect(1, 1, 1, 1));
    dataTemplate.setColumnProperties(0, new TemplateColumnProperties(95, TemplateColumnProperties.PERCENTAGE_WIDTH));
    dataTemplate.setColumnProperties(1, new TemplateColumnProperties(5, TemplateColumnProperties.PERCENTAGE_WIDTH));
    dataTemplate.setRowProperties(0, new TemplateRowProperties(ROW_HEIGHT));   // separator
    dataTemplate.setRowProperties(1, new TemplateRowProperties(ROW_HEIGHT));   // product data
    dataTemplate.useFixedHeight(false);

    tableView.setDataTemplate(dataTemplate);

    add(tableView);
}
}

SOLUTION:
I was able to solve the problem on my own with the following approach.
I just added a overridden LabelField as headerfield and didn’t implement its focus drawing. So only the “subfields” get the focus drawn.

Maybe some people would implement it in another way (take a look at the answer from Nate) but it worked for me.

Answer 1

So, I didn’t have time to fully integrate your new code sample, which has data model code that I don’t have, and which appears to have added a DataTemplate column for a BitmapField. Hopefully, you can adapt what I have to reintegrate those changes.

I’m sure there’s more than one way to do this, and I’m not claiming this method to be the highest performance. However, it seems to draw the focus as you would expect, without the separator row getting highlighted when the row directly under it is focused.

What I did was abandon the concept of using multiple regions, and just made my data template 1 row by 1 column. If you want, you can probably make it 1 row by 2 columns, where the column I don’t show is the BitmapField.

But, what I did was to place a VerticalFieldManager in the first row in each new group/category. That VerticalFieldManager then contained a separator/header row, a separator field (just a horizontal line), and then the actual product row. If the row was not the first in the group/category, I would just return a simple Field, not a VerticalFieldManager with three Field objects inside it.

Then, I changed the TableController focus policy to FIELD_FOCUS, not ROW_FOCUS. This allows focus to be taken by the VerticalFieldManager, when we’re on the first row in a new group/category. However, inside that manager, only the actual product row is focusable. The separator row is not focusable, and will therefore not be drawn with focus.

Here’s the code that changed. The rest is the same as in the previous sample I gave you:

  _tableController.setFocusPolicy(TableController.FIELD_FOCUS);
  _tableView.setController(_tableController);

  DataTemplate dataTemplate = new DataTemplate(_tableView, 1, 1)   // 1 row now!
  {         
     public Field[] getDataFields(int modelRowIndex)
     {
        final Object[] data = (Object[]) _tableModel.getRow(modelRowIndex);

        String rowGroup = (String)data[0];
        // we're in a new group if this is the very first row, or if this row's data[0] value is
        //  different from the last row's data[0] value
        boolean isNewGroup = (modelRowIndex == 0) || 
              (rowGroup.compareTo((String) ((Object[])_tableModel.getRow(modelRowIndex - 1))[0]) != 0);
        if (isNewGroup) {               
           LabelField header = new LabelField((String)data[0], Field.USE_ALL_WIDTH | Field.NON_FOCUSABLE);
           SeparatorField line = new SeparatorField(Field.USE_ALL_WIDTH) {
              public void paint(Graphics g) {
                 g.setColor(Color.BLACK);
                 super.paint(g);
              }
           };
           LabelField productRow = new LabelField((String)data[1], 
                 Field.USE_ALL_WIDTH | Field.FOCUSABLE | DrawStyle.HCENTER);
           VerticalFieldManager manager = new VerticalFieldManager(Field.USE_ALL_WIDTH | Field.FOCUSABLE | 
                 Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);
           manager.add(header);
           manager.add(line);
           manager.add(productRow);
           return new Field[] { manager };
        } else {
           return new Field[] { new LabelField((String)data[1], 
                 Field.USE_ALL_WIDTH | Field.FOCUSABLE | DrawStyle.HCENTER) };
        }            
     }
  };

  // create just one region, with one row and one full-width column
  dataTemplate.createRegion(new XYRect(0, 0, 1, 1), _style);    // may be a product row, or a product row + separator
  dataTemplate.setColumnProperties(0, new TemplateColumnProperties(100, TemplateColumnProperties.PERCENTAGE_WIDTH));
  dataTemplate.setRowProperties(0, new TemplateRowProperties(2 * ROW_HEIGHT));       // max height if row + separator

  _tableView.setDataTemplate(dataTemplate);
  dataTemplate.useFixedHeight(false);

The scrolling is a little funny when you get down to the bottom of the page, but I’m pretty sure I’ve built VerticalFieldManager subclasses before that acted like lists, that needed some custom scroll handling … if I get some time tomorrow, I’ll try to add that in.

One step at a time, though …