Tag Archives: scrolling

Coding Touchscreen Scrolling in Java ME

Posted on by
3

Here’s the trick how you can add touchscreen scrolling to your J2ME applications. The key to touchscreen support is the Canvas class and its’ methods pointerPressed, pointerDragged and pointerReleased. These events are called when user puts finger on the screen (pressed) and drags the finger (dragged) and finally when removes the finger (released). Each method has the x and y coordinates for the pointer action.

The scrolling is implemented with the pointerDragged event. We store the current location of the canvas to variables verticalLoc and horizontalLoc. When finger (pointer) is dragged then location is changed according to the dragged amount. Variables are used on paint method to draw the area so that it is scrolled that correctly. You can also see from the sample code how you can draw background with repeatable pattern image.

  1. public class ScrollingCanvas extends Canvas {
  2.  
  3.  // Current location
  4.  private int verticalLoc, horizontalLoc;
  5.  // Last pointer (finger) location
  6.  private int lastX, lastY;
  7.  // Background image size
  8.  private static final int IMAGE_WIDTH = 183;
  9.  private static final int IMAGE_HEIGHT = 183;
  10.  
  11.  public ScrollingCanvas() {
  12.    verticalLoc = 0;
  13.    horizontalLoc = 0;
  14.    setFullScreenMode(true);
  15.  }
  16.  
  17.  protected void paint(Graphics g) {
  18.  
  19.    // Draw background with pattern image
  20.    int x = horizontalLoc % IMAGE_WIDTH;
  21.    if(x>0) {
  22.      x -= IMAGE_WIDTH;
  23.    }
  24.    int origX = x;
  25.  
  26.    int y = verticalLoc % IMAGE_HEIGHT;
  27.    if(y>0) {
  28.      y -= IMAGE_HEIGHT;
  29.    }
  30.  
  31.    boolean verticalDone = false;
  32.    while(!verticalDone) {
  33.      boolean horizontalDone = false;
  34.      while(!horizontalDone) {
  35.        g.drawImage(
  36.          ImageRepository.getBackground(),
  37.          x, y, Graphics.LEFT|Graphics.TOP);
  38.        x += IMAGE_WIDTH;
  39.        if(x>getWidth()) {
  40.          horizontalDone = true;
  41.        }
  42.      }
  43.      x = origX;
  44.      y += IMAGE_HEIGHT;
  45.      if(y>getHeight()) {
  46.        verticalDone = true;
  47.      }
  48.    }
  49.  }
  50.  
  51.  /**
  52.  * Finger is pressed on screen
  53.  * @param x coordinate
  54.  * @param y coordinate
  55.  */
  56.  protected void pointerPressed(int x, int y) {
  57.    lastX = x;
  58.    lastY = y;
  59.  }
  60.  
  61.  /**
  62.  * Finger is dragged on screen
  63.  * @param x coordinate
  64.  * @param y coordinate
  65.  */
  66.  protected void pointerDragged(int x, int y) {
  67.    // Calculate how much we moved horizontally
  68.    int deltaHorizontal = lastX – x;
  69.    horizontalLoc -= deltaHorizontal;
  70.    lastX = x;
  71.  
  72.    // Calculate how much we moved vertically
  73.    int deltaVertical = lastY – y;
  74.    verticalLoc -= deltaVertical;
  75.    lastY = y;
  76.  
  77.    // Repaint the screen since we have scrolled
  78.    repaint();
  79.  }
  80.  
  81. }

Here is a video of running this demonstration app in Nokia N97 SDK emulator: