试用Google Web Toolkit(2)

把GWT中sample目录中的KitchenSink按（1）中的步骤建立一个eclipse工程


projectCreator -eclipse KitchenSink
applicationCreator -eclipse KitchenSink com.google.gwt.sample.kitchensink.client. KitchenSink

在把sample/KitchenSink/com/.../kitchensink目录下的client和public拷贝过来，这个工程实际上演示GWT中的主要UI组件。

在GWT中如果想要创造一个复杂组件，你需要从Composite类派生一个子类，在这个子类中，你可以封装一系列其他从Widget派生的组件，对外提供一致的抽象接口。

比如，我想写一个类似于一般IDE中都提供的属性编辑器，很显然，这个东西由多个属性编辑项(Item)构成，而每个属性项目包括属性的名字以及他对应的值，这个值可以由Text, Combox, List, Dialog等等你能想到的一切能输入值的组件构成。

首先来看看我们的基本单位PropertyItem(属性项)应该是个什么样子。

package com.google.gwt.sample.kitchensink.client.custom;
// 从Composite 继承，组合两个组件属性名字和属性值
public class PropertyItem extends Composite {
    // 用id来唯一标识每个item
    private String id;  
    // 属性的名字，选择用Label或是HTML控件
    private HTML nameView;
    // 属性值的编辑器
    private BaseEditor valueView;
    // panel,放置属性名字和属性值的容器组件，这是一个横向排列的panel
    private HorizontalPanel container = new HorizontalPanel();
}

最大的麻烦恐怕就是属性值的编辑器了，因为它可以是一个任何可能的编辑器，考虑把它抽象为一个接口；

package com.google.gwt.sample.kitchensink.client.custom;

import com.google.gwt.user.client.ui.Widget;

public interface Editable {
    // 一个属性值编辑器必须能取值和设置值，当然这个值对象可能更复杂一些，不过先用一个String类就够了
    public String getValue();
    public void setValue(String value);
    // 这个编辑器需要暴露它的最高层的UI组件，以便显示在PropertyItem中。
    public Widget getWidget();
}


接下来要考虑的事情是：在属性值的编辑器的值发生变化时，外部可以接收到值变化的事件。
package com.google.gwt.sample.kitchensink.client.custom;
public interface ChangeListener {
    public void onChange(Editable sender);
}

每个属性值编辑器都是一个事件源，需要提供注册事件捕捉器的能力。
package com.google.gwt.sample.kitchensink.client.custom;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

public abstract class BaseEditor implements Editable {

    private List listeners = new ArrayList();
   
    public BaseEditor() {
    }
   
    public boolean addChangeListener(ChangeListener listener) {
        return listeners.add(listener);
    }
   
    public boolean removeChangeListener(ChangeListener listener) {
        return listeners.remove(listener);
    }
   
    public ChangeListener removeChangeListener(int index) {
        return (ChangeListener)listeners.remove(index);
    }
   
    public void notifyAllChangeListeners() {
        for (Iterator iter= listeners.iterator(); iter.hasNext();) {
            ((ChangeListener)iter.next()).onChange(this);
        }
    }
       
}


看看如何实现一个基本的属性编辑器，比如一个最普通的文本输入框，它只是对TextBox组件一个adaptor。
package com.google.gwt.sample.kitchensink.client.custom;

import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class TextEditor extends BaseEditor implements com.google.gwt.user.client.ui.ChangeListener  {

    private TextBox editor = new TextBox();
   
    public TextEditor() {
        super();
        editor.addChangeListener(this);
    }

    public String getValue() {
        return editor.getText();
    }

    public void setValue(String value) {
        editor.setText(value);
    }

    public void onChange(Widget sender) {
        if (sender == editor) {
            notifyAllChangeListeners();
        }
    }

    public Widget getWidget() {
        return editor;
    }


}

然后把它填充到PropertyItem中去：
package com.google.gwt.sample.kitchensink.client.custom;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Widget;

public class PropertyItem extends Composite {
    private String id;
    private HTML nameView;
    private BaseEditor valueView;
    private HorizontalPanel container = new HorizontalPanel();
/*    VerticalPanel left = new VerticalPanel();
    VerticalPanel right = new VerticalPanel();*/

    public PropertyItem(String id) {
        this(id, "label", EditorType.Text, "");
    }
   
    public PropertyItem(String id, String name, int editorType, String value) {
        this.id = id;
        setNameView(new HTML(name));
        setValueView(EditorFactory.create(editorType));
        setValue(value);
        adjustPosition();
        setWidget(container);
    }
   
    public void setNameView(HTML view) {   
        refresh(nameView, view, 0);
        nameView = view;
    }
   
    public void setValueView(BaseEditor view) {
        Widget widget = null;
        if (null != valueView) widget = valueView.getWidget();
        refresh(widget, view.getWidget(), 1);
        valueView = view;
    }
   
    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }
   
   
    public void setName(String name) {
        nameView.setHTML(name);
    }
   
    public void setValue(String value) {
        valueView.setValue(value);
    }
   
    public String getValue() {
        return valueView.getValue();
    }
   
    public String getName() {
        return nameView.getHTML();
    }
   
    public void addChangeListener(ChangeListener listener) {
        valueView.addChangeListener(listener);
    }

    public HTML getNameView() {
        return nameView;
    }

    public BaseEditor getValueView() {
        return valueView;
    }
   
    public void refresh(Widget oldView, Widget newView, int index) {
        int oldIndex = -1;
        if (oldView != null) oldIndex = container.getWidgetIndex(oldView);
        if (oldIndex != -1) container.remove(oldView);
        int setIndex = (oldIndex == -1) ? index : oldIndex;
        container.insert(newView, setIndex);
    }
   
    public void adjustPosition() {
        nameView.setStyleName("inspector-item-name");
        container.setCellWidth(nameView, "50%");
        container.setCellWidth(valueView.getWidget(), "50%");
        container.setCellVerticalAlignment(nameView, HasVerticalAlignment.ALIGN_MIDDLE);
        container.setCellVerticalAlignment(valueView.getWidget(), HasVerticalAlignment.ALIGN_MIDDLE);
        container.setCellHorizontalAlignment(nameView, HasHorizontalAlignment.ALIGN_LEFT);
        container.setCellHorizontalAlignment(valueView.getWidget(), HasHorizontalAlignment.ALIGN_LEFT);
    }
}



有了PropertyItem，把他们组合在一个垂直排列的panel内，就可以组成一个简单的PropertyEditor.

package com.google.gwt.sample.kitchensink.client.custom;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.VerticalPanel;

public class Inspector extends Composite {

   
    VerticalPanel container = new VerticalPanel();
    private List itemList = new ArrayList();
   
    public Inspector() {
        super();
       
        container.setStyleName("inspector");       
        setWidget(container);
       
    }
   
    public void addItemView(PropertyItem item) {
        container.add(item);
    }
   
    public void removeItemView(PropertyItem item) {
        container.remove(item);
    }
   
    public void addItem(PropertyItem item) {
        itemList.add(item);
        addItemView(item);
    }
   
    public void removeItem(PropertyItem item) {
        itemList.remove(item);
        removeItemView(item);
    }
  
    public void addItem(String id, String name, int editorType, String value) {
        addItem(new PropertyItem(id, name, editorType, value));
    }
   
    public PropertyItem getItem(String id) throws ItemNotFoundException {
        for (Iterator iter = itemList.iterator(); iter.hasNext();) {
            PropertyItem item = (PropertyItem)iter.next();
            if (item.getId().equalsIgnoreCase(id)) {
                return item;
            }
        }
        throw new ItemNotFoundException("item " + id + "not found");
    }
   
    public void removeItem(String id) throws ItemNotFoundException  {
        PropertyItem item = getItem(id);
        removeItem(item);
    }
   
    private void addChangeListenerInternal(String id, ChangeListener listener) throws ItemNotFoundException {
        getItem(id).addChangeListener(listener);
    }
   
    public boolean addChangeListener(String id, ChangeListener listener) {
        try {
            addChangeListenerInternal("t1", listener);
            return true;
        } catch (ItemNotFoundException e) {
            return false;
        }
    }
}



要在kitchensink项目中测试这个组件，可以仿造其中的Buttons类：

package com.google.gwt.sample.kitchensink.client;

import com.google.gwt.sample.kitchensink.client.custom.Editable;
import com.google.gwt.sample.kitchensink.client.custom.EditorType;
import com.google.gwt.sample.kitchensink.client.custom.Inspector;
import com.google.gwt.user.client.ui.*;

public class PropertyEditor extends Sink implements com.google.gwt.sample.kitchensink.client.custom.ChangeListener {

    public static SinkInfo init()  {
        return new SinkInfo("PropertyEditor",
            "Composite class build <code>PropertyEditor</code>") {
            public Sink createInstance() {
                return new PropertyEditor();
            }
        };
    }
   
   
    private void setInspector() {

          Inspector inspector = new Inspector();
          inspector.addItem("t1", "key", EditorType.Text, "dddd");
          inspector.addItem("t2", "cdasfas", EditorType.Text, "asdfsaf");

         
//        All composites must call setWidget() in their constructors.
          setWidget(inspector);
        
    }
   


    /**
     * Constructs an OptionalTextBox with the given caption on the check.
     *
     * @param caption the caption to be displayed with the check box
     */
    public PropertyEditor() {
      // Place the check above the text box using a vertical panel.

        setInspector();
       

      // Give the overall composite a style name.
      setStyleName("example-OptionalCheckBox");
    }


    public void onChange(Editable sender) {
        System.out.println(sender.getValue());
    }

   

}

当然，这很丑陋，可以利用css调整，不过我早告诉你，我对那些玩意不感兴趣。