AWT GWTのコンポーネントマッピング

Question

私はGoogles GWTで15パズルを実装したいと思います。私はJava（AWT）の実装を持っていて、それをGWTに変換したいと思います。

puzzelにタイルが表される：

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); 
    } 
} 

は、誰もがすでに実装（またはの実装を見て）を有するマッピング：パズルテーブルは次のクラスによって管理されている

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); 
     } 
    } 
    [...] 
} 

これらのAWTクラスのうちGWTに

Iは、おおよそ次のタスクを見ることができます：

• は、これらの画像成分
• は、イベントのためのマッピングを作成して保持することができ、容器のためのマッピングを作成し、「画像」コンポーネント
• のマッピングを作成しますイメージコンテナでの処理

GWTの拡張に少し経験があり、落とし穴を指摘してくれた人がいますか？

ありがとう、

Martin。

Answer 1

15個のパズルUIはグリッドです。 FlexTableのようなものは、それ自体を示唆しています。 タイルはクリック可能です。ラベルやハイパーリンクは、タイルのクリックを表示して聞くのに役立ちます。