在官方的 wiki 上可以看到簡易的操作說明，因為並不複雜，所以這裡就不多做說明了。有興趣者也可以參考 API。
接下來我利用 GWTCanvas，配合 UiBinder, Timer，試著寫了一個 Bubble Sort 的教學範例，其功能就像是以往常見的 Applet。(由於此篇文章的重點是在於 Canvas 而不是 Bubble Sort，所以請原諒我只撰寫了非常陽春的 Demo)
完整的專案可以在此下載: canvas.zip
程式碼內容如下: BubbleSortDemo.java
package canvas.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiFactory;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.widgetideas.graphics.client.Color;
import com.google.gwt.widgetideas.graphics.client.GWTCanvas;
public class BubbleSortDemo implements EntryPoint {
interface uiBinder extends UiBinder<HTMLPanel, BubbleSortDemo> {
}
private static uiBinder uiBinder = GWT.create(uiBinder.class);
@UiField GWTCanvas canvas;
@UiFactory GWTCanvas makeCanvas(int width, int height) {
return new GWTCanvas(width, height);
}
public static final int LENGTH = 10;
private Timer t;
private int i;
private int j;
private int[] arr;
@UiField Button nextBtn;
@UiField Button playBtn;
@UiField Button stopBtn;
@UiField Button resetBtn;
private void initArray(){
arr = new int[LENGTH];
for(int i=0;i<LENGTH;i++){
arr[i] = (int)(Math.random()*100);
}
}
private void initVariable() {
i = LENGTH-1;
j = 0;
}
private void display(){
canvas.clear();
for(int i=0;i<LENGTH;i++){
int gray = arr[i]*2;
canvas.setFillStyle(new Color(gray, gray, gray));
int height = arr[i];
int x = 30+i*30;
int y = 130-height;
canvas.fillRect(x, y, 20, height);
}
}
private void swap(int a, int b){
int t = arr[a];
arr[a] = arr[b];
arr[b] = t;
}
@Override
public void onModuleLoad() {
HTMLPanel outer = uiBinder.createAndBindUi(this);
RootLayoutPanel.get().add(outer);
initArray();
display();
/*
// This is the original version bubble sort.
for(int i=LENGTH-1;i>=0;i--){
for(int j=0;j<i;j++){
if(arr[j]>arr[j+1]){
swap(j, j+1);
}
}
}
*/
initVariable();
t = new Timer() {
public void run() {
while(i>=0){
while(j<i){
if(arr[j]>arr[j+1]){
swap(j, j+1);
}
display();
j++;
return;
}
i--;
j = 0;
return;
}
t.cancel();
}
};
}
@UiHandler("nextBtn")
void handleNext(ClickEvent e){
t.run();
}
@UiHandler("playBtn")
void handlePlay(ClickEvent e){
t.scheduleRepeating(500);
}
@UiHandler("stopBtn")
void handleStop(ClickEvent e){
t.cancel();
}
@UiHandler("resetBtn")
void handleReset(ClickEvent e){
initArray();
initVariable();
display();
}
}
其對應的 UiBinder: BubbleSortDemo.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:graphics="urn:import:com.google.gwt.widgetideas.graphics.client">
<ui:style>
.canvas{
border: solid 1px black;
}
</ui:style>
<g:HTMLPanel>
<graphics:GWTCanvas ui:field="canvas" styleName="{style.canvas}" width="350" height="200"></graphics:GWTCanvas>
<br />
<g:Button ui:field="nextBtn">Next</g:Button>
<g:Button ui:field="playBtn">Play</g:Button>
<g:Button ui:field="stopBtn">Stop</g:Button>
<g:Button ui:field="resetBtn">Reset</g:Button>
</g:HTMLPanel>
</ui:UiBinder>
