AWT GWT의 구성 요소 매핑

Question

Google의 GWT를 사용하여 15 개의 퍼즐을 구현하고 싶습니다. 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); 
    } 
} 

누군가가 이미 구현 한 매핑

puzzel에있는 타일로 표현된다 이 AWT 클래스 중 GWT에?

나는 다음과 같은 작업을 거의 볼 수

• 그 이미지 구성 요소를 보유 할 수있는 컨테이너에 대한 매핑 만들기에 "이미지"구성 요소
• 에 대한 매핑을 작성
• 이벤트에 대한 매핑 만들기 이미지 컨테이너에서의 처리

GWT 확장에 약간의 함정을 지적하고 나에게 몇 가지 힌트를 줄 수있는 경험이있는 사람이 있습니까?

안부,

마틴.

Answer 1

15 개의 퍼즐 UI는 눈금입니다. FlexTable과 같은 것이 그 자체를 제안합니다. 타일을 클릭 할 수 있습니다. 레이블 또는 하이퍼 링크는 타일의 클릭 수를 표시하고들을 수 있도록 도와줍니다.