AWT Mappage de composants pour GWT

Question

Je voudrais implémenter un 15-Puzzle avec Googles GWT. J'ai une implémentation en Java (AWT) et je voudrais le convertir en GWT.

Une tuile dans le puzzel est représenté par:

import java.awt.Component; 
import java.awt.image.BufferedImage; 
import javax.imageio.ImageIO; 
[...] 

@SuppressWarnings("serial") 
public class PuzzleTile extends Component { 

    BufferedImage img = null; 
    public int[] position = new int[2]; 
    int[] dim = new int[2]; 

    public PuzzleTile(String filename, int x, int y) { 
     this.position[0] = x; 
     this.position[1] = y; 

     try { 
      this.img = ImageIO.read(new File(filename)); 
      this.dim[0] = img.getWidth(null); 
      this.dim[1] = img.getHeight(null); 
     } catch (IOException e) { 
      System.err.println("ERROR: Can't open "+filename); 
      throw new RuntimeException("Image not found"); 
     } 
    } 

    public void paint(Graphics g) { 
     if (null != this.img) { 
      g.drawImage(this.img, 0, 0, null); 
     } 
    } 
    [...] 
} 

Le tableau de puzzle est géré par la classe suivante:

import java.awt.Component; 
[...] 

@SuppressWarnings("serial") 
public class PuzzleBoard extends Component implements MouseListener { 
    static final String DEFAULT_IMAGE_DIR = "images"; 
    static final String DEFAULT_TITLE = "Image Puzzle"; 
    int XSIZE=200; 
    int YSIZE=180; 

    PuzzleTile[][] board = null; 
    //PuzzleTile emptyTile = null; 
    int[] dim = new int[2]; 

    public PuzzleBoard(int x, int y) { 
     this.dim[0] = x; 
     this.dim[1] = y; 
     this.board = new PuzzleTile[x][y]; 
     loadTiles("portrait"); 
     this.addMouseListener(this); 
    } 

    public void loadTiles(String base) { 
     // Draw tiles expect last row 
     int x; 
     int y; 
     for (y = 0; y < this.dim[1]-1; ++y) { 
      for (x=0; x < this.dim[0]; ++x) { 
       this.board[x][y] = new PuzzleTile(DEFAULT_IMAGE_DIR+"/"+base+"_"+y+"_"+x+".png"); 
       //this.board[x][y].addMouseListener(this); 
       //win.add(this.board[x][y]); 
      } 
     } 

     // Draw last row with leftmost tile missing 
     for (x = 0; x < this.dim[0]-1; ++x) { 
      this.board[x][y] = new PuzzleTile(DEFAULT_IMAGE_DIR+"/"+base+"_"+y+"_"+x+".png"); 
     } 
    } 

    public void paint(Graphics g) { 
     for (int xpos = 0; xpos < this.dim[0]; ++xpos) { 
      for (int ypos = 0; ypos < this.dim[1]; ++ypos) { 
       Graphics area = g.create(xpos*XSIZE+1, ypos*YSIZE+1, XSIZE, YSIZE); 
       if (null != this.board[xpos][ypos]) { 
        this.board[xpos][ypos].paint(area); 
       } 
      } 
     } 
    } 

    @Override 
    public void mouseClicked(MouseEvent e) { 
     int xpos = e.getX()/this.XSIZE; 
     int ypos = e.getY()/this.YSIZE; 
     System.out.println("Mouse clicked on tile ("+xpos+", "+ypos+")"); 
     if (null != this.board[xpos][ypos]) { 
      // Check for empty space around 
      int[] freelocation = getEmptyNeighbor(xpos, ypos); 
      System.out.println("Empty neighbor: ("+freelocation[0]+", "+freelocation[1]+")"); 
      if (null != freelocation) { 
       this.board[freelocation[0]][freelocation[1]] = this.board[xpos][ypos]; 
       this.board[xpos][ypos] = null; 
       this.repaint(); 
      } 
     } 
    } 

     [...] 

    /** 
    * @param args 
    */ 
    public static void main(String[] args) { 
     Frame win = null; 

     win = new Frame(DEFAULT_TITLE); 
     win.addWindowListener(new WindowAdapter() { 
      public void windowClosing(WindowEvent e) { 
       System.exit(0); 
      } 
     }); 

     PuzzleBoard puzzle = new PuzzleBoard(2, 4); 
     win.add(puzzle); 
     win.pack(); 
     win.setVisible(true); 
    } 
} 

Quelqu'un at-il déjà mis en œuvre (ou vu une mise en œuvre) une cartographie de ces classes AWT à GWT?

Je peux voir à peu près les tâches suivantes:

• Créer une application pour un composant « image »
• Créer un mappage pour un conteneur qui pourrait contenir ces éléments d'image
• Créer un mappage pour l'événement manipuler sur le conteneur d'image

Y at-il quelqu'un avec un peu plus d'expérience dans l'extension de GWT qui pourrait signaler quelques pièges et me donner quelques conseils?

Cordialement,

Martin.

Answer 1

L'interface utilisateur de 15 casse-tête est une grille. Quelque chose comme un FlexTable se suggère. Les tuiles sont cliquables. Une étiquette ou un lien hypertexte vous aiderait à afficher et à écouter les clics sur les vignettes.