Tuesday, August 30, 2011

Progress bar in the Table Viewer

Use Case:
If you want to show a progress bar with in the Table viewer and it should represent what percentage of job has finished.

May be you want to show something like this:



Solution:
We should implement the OwnerDrawLabelProvider on the particular column where you want to show the progress bar.

OwnerDrawLabelProvider: Is an abstract implementation of a label provider that handles custom draw. So this can be used to implement progress bar in the table viewer.

Let's take the example:

//Table viewer
tableViewer = new TableViewer(composite, SWT.FULL_SELECTION | SWT.V_SCROLL | SWT.H_SCROLL);
  reportTable = tableViewer.getTable();
  reportTable.setVisible(true);
  reportTable.setLinesVisible(true);
  reportTable.setHeaderVisible(true);
  reportTable.setLayoutData(new GridData(GridData.FILL, GridData.FILL, true, true));

//Progress bar column
TableViewerColumn progressColumn = new TableViewerColumn(tableViewer, SWT.CENTER);
  progressColumn.getColumn().setText(""); //$NON-NLS-1$
  progressColumn.getColumn().setWidth(150);
  progressColumn.getColumn().setToolTipText("Percentage");

//set progress bar lable provider on the progresbar column
progressColumn.setLabelProvider(new ProgressLabelProvider(tableViewer));

//Implemention of OwnerDrawLabelProvider

import java.util.List;
import org.eclipse.core.runtime.IStatus;
import org.eclipse.core.runtime.jobs.Job;
import org.eclipse.jface.viewers.OwnerDrawLabelProvider;
import org.eclipse.jface.viewers.TableViewer;
import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.GC;
import org.eclipse.swt.graphics.Image;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.graphics.Rectangle;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Table;
import org.eclipse.swt.widgets.TableItem;

public class ProgressLabelProvider extends OwnerDrawLabelProvider {
 private TableViewer tableViewer;
 public ProgressLabelProvider(TableViewer tableViewer) {
  this.tableViewer = tableViewer;
 }
 @Override
 protected void measure(Event event, Object element) {
 }
 @Override
 protected void paint(Event event, Object element) {
  
  //Total Units to be executed
   int totalUnits = getObjects().size();
  
    //Identify the completed units by reading specific information
   int completedUnits = getCompletedUnits();
  
  //Calculate Percentage
   int percentage = (completedUnits * 100/totalUnits);
  
  
   Table table = tableViewer.getTable();
   TableItem item = (TableItem) event.item;
         int index = table.indexOf(item);
         Color foreground = gc.getForeground();
         Color background = gc.getBackground();
         gc.setForeground(Display.getDefault().getSystemColor(SWT.COLOR_RED));
         gc.setBackground(Display.getDefault().getSystemColor(SWT.COLOR_YELLOW));
        
         Rectangle bounds = ((TableItem) event.item).getBounds(event.index);

         int width = (bounds.width - 1) * percentage / 100;
         gc.fillGradientRectangle(event.x, event.y, width, event.height, true);
         Rectangle rect2 = new Rectangle(event.x, event.y, width - 1, event.height - 1);
         gc.drawRectangle(rect2);
         gc.setForeground(Display.getDefault().getSystemColor(SWT.COLOR_LIST_FOREGROUND));
         String text = percentage + "%";
         Point size = event.gc.textExtent(text);
         int offset = Math.max(0, (event.height - size.y) / 2);
         gc.drawText(text, event.x + 2, event.y + offset, true);
         gc.setForeground(background);
         gc.setBackground(foreground);
      
  }
 }
 public Image getColumnImage(Object element) {
  return null;
 }
}


Thanks,
Kondal

2 comments:

  1. Is this a library or what. And how can l integrate it in my app?

    ReplyDelete
  2. Is this a library or what. And how can l integrate it in my app?

    ReplyDelete