GWT 的 AWT 组件映射

Question

我想用 Google 的 GWT 实现一个 15-Puzzle。我有一个 Java (AWT) 实现，并且想将其转换为 GWT。

拼图中的图块由以下内容表示：

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

拼图表由以下类管理：

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

是否有人已经实现（或见过其实现）这些 AWT 类到 GWT 的映射？

我大致可以看到以下任务：

• 为“图像”组件创建映射
• 为可以容纳这些图像组件的容器创建映射
• 在图像容器上为事件处理创建映射

有没有人在扩展 GWT 方面有更多经验谁能指出一些陷阱并给我一些提示？

问候，

马丁。

Answer 1

15 个拼图 UI 是一个网格。像 FlexTable 这样的东西本身就很明显。
这些图块是可点击的。标签或超链接将帮助您显示和收听图块上的点击。