GWT - 心无尘土

GWT

GWT
看了看google web toolkit,发现还不错，用了几个常用的控件，如果用这个冬冬构建自己小型的网络环境还是相当迅速的。但是，大的项目工程还是。。。有待考察

Google Web Toolkit ArchitectureGWT has four major components:
a Java-to-JavaScript compiler(GWT Java-to-JavaScript Compiler),
a "hosted" web browser(GWT Hosted Web Browser),
and two Java class libraries
(JRE emulation library<java.lang,java.util> and GWT Web UI class library).
Sample with eclipse
①GMT_HOMEを設定する。コマンドプロンプトを起動する。
②%GWT_HOME%\projectCreator -eclipse HelloGWT -out C:\YangStand\HelloGwtで
プロジェクトを作成。
③%GWT_HOME%\applicationCreator -eclipse HelloGWT -out C:\YangStand\HelloGwt
org.yang.gwt.sample.widget.client.HelloGwt　（className,フルパッケージ指定）で
アプリケーションの雛形を作成。
Widget
①com.google.gwt.user.client.ui.UIObjectのDirect Known Subclasses:
MenuItem, TreeItem, Widget
②Widget adds support for receiving events from the browser
widgetのButtonWidgetサンプル--><input type="button">
ButtonWidget.html
<html>
    <head>
        <title>Wrapper HTML for ButtonWidget</title>
        <meta name='gwt:module' content='org.yang.gwt.sample.widget.ButtonWidget'>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>

    <body>
        <script language="javascript" src="gwt.js"></script>
    <table align=center>
    <tr>
        <td id="button1"></td>
        <td> </td>
        <td id="button2"></td>
        <td> </td>
        <td id="button3"></td>
    </tr>
    <tr>
        <td id="label" />
        <td> </td>
        <td></td>
        <td> </td>
        <td></td>
    </tr>
</table>
    </body>
</html>

ButtonWidget.java
package org.yang.gwt.sample.widget.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class ButtonWidget implements EntryPoint {

/**
   * This is the entry point method.
   */
public void onModuleLoad() {
    final Label label = new Label();

    final Button button = new Button("Click me(display)");
    button.addClickListener(new ClickListener() {
      public void onClick(Widget sender) {
        if (label.getText().equals(""))
          label.setText("Hello World!");
        else
          label.setText("");
      }
    });

    final Button alertbutton = new Button("Jump", new ClickListener() {
        public void onClick(Widget sender) {
            Window.alert("世界");
        }
    });

    final Button disablebutton = new Button("Disable");
    disablebutton.setEnabled(false);


    RootPanel.get("button1").add(button);
    RootPanel.get("label").add(label);
    RootPanel.get("button2").add(alertbutton);
    RootPanel.get("button3").add(disablebutton);
}
}
widgetのRadioButtonWidgetサンプル--><input type="radio">
%GWT_HOME%\projectCreator -eclipse RadioButtonWidget -out C:\YangStand\RadioButtonWidget
%GWT_HOME%\applicationCreator -eclipse RadioButtonWidget -out C:\YangStand\RadioButtonWidget org.yang.gwt.sample.widget.client.RadioButton

RadioButtonWidget.html
<html>
    <head>
        <title>Wrapper HTML for RadioButtonWidget</title>
        <meta name='gwt:module' content='org.yang.gwt.sample.widget.RadioButtonWidget'>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>

    <body>
        <script language="javascript" src="gwt.js"></script>
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

        <table align=center>
            <tr>
                <td id="radio1"></td>
                <td id="radio2"></td>
                <td id="radio3"></td>
            </tr>
            <tr>
                <td id="label" colspan="4" align="center"></td>
            </tr>
        </table>
    </body>
</html>

RadioButtonWidget.java
package org.yang.gwt.sample.widget.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RadioButton;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class RadioButtonWidget implements EntryPoint {

public void onModuleLoad() {
    final Label label = new Label();

    RadioButton rb1 = new RadioButton("radioGroup");
    rb1.setText("非活性");
    rb1.setEnabled(false);
    rb1.setChecked(true);

    RadioButton rb2 = new RadioButton("radioGroup", "bar");
    rb2.addClickListener(new ClickListener() {
        public void onClick(Widget sender) {
            label.setText("barをセットします");
        }
    });

    RadioButton rb3 = new RadioButton("radioGroup", "<strong>baz</strong>", true);
    rb3.addClickListener(new ClickListener() {
        public void onClick(Widget sender) {
            label.setText("bazをセットします");
        }
    });

    RootPanel.get("radio1").add(rb1);
    RootPanel.get("radio2").add(rb2);
    RootPanel.get("radio3").add(rb3);
    RootPanel.get("label").add(label);
}
}
widgetのCheckBoxWidgetサンプル--><input type="checkbox">
CheckBoxWidget.html
<html>
    <head>
        <title>Wrapper HTML for CheckBoxWidget</title>
        <meta name='gwt:module' content='org.yang.gwt.sample.widget.CheckBoxWidget'>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>

    <body>
        <script language="javascript" src="gwt.js"></script>

        <table align=left>
            <tr>
                <td id="checkBox1"></td><td id="label"></td>
            </tr>
            <tr>
                <td id="checkBox2"></td><td>&nbsp</td>
            </tr>
            <tr>
                <td id="checkBox3"></td><td>&nbsp</td>
            </tr>
            <tr>
                <td id="checkBox4"></td><td>&nbsp</td>
            </tr>
        </table>
    </body>
</html>

CheckBoxWidget.java
package org.yang.gwt.sample.widget.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class CheckBoxWidget implements EntryPoint {

    public void onModuleLoad() {
        final CheckBox checkBox1 = new CheckBox();
        final CheckBox checkBox2 = new CheckBox("アラート");
        final CheckBox checkBox3 = new CheckBox("<Strong>ラベル英語表示</Strong>",
                true);
        final CheckBox checkBox4 = new CheckBox();

        final Label label = new Label();

        checkBox1.setText("ラベル");
        checkBox1.addClickListener(new ClickListener() {
            public void onClick(Widget sender) {
                if (((CheckBox) sender).isChecked()) {
                    if (checkBox3.isChecked()) {
                        checkBox1.setText("Label");
                        label.setText("Hello world");
                    } else {
                        checkBox1.setText("ラベル");
                        label.setText("hola 世界");
                    }
                } else {
                    label.setText("");
                }
            }
        });

        checkBox2.addClickListener(new ClickListener() {
            public void onClick(Widget sender) {
                if (((CheckBox) sender).isChecked()) {
                    if (checkBox3.isChecked()) {
                        Window.alert("Hello world!");
                    } else {
                        Window.alert("hola 世界！");
                    }
                }
            }
        });

        checkBox3.addClickListener(new ClickListener() {
            public void onClick(Widget sender) {
                if (((CheckBox) sender).isChecked()) {
                    checkBox1.setText("label");
                    checkBox2.setText("click me");
                    checkBox3.setHTML("<Strong>English label</Strong>");
                    checkBox4.setText("disable");
                } else {
                    checkBox1.setText("ラベル");
                    checkBox2.setText("クリック");
                    checkBox3.setHTML("<Strong>英語表示</Strong>");
                    checkBox4.setText("非活性");
                }
            }
        });

        checkBox4.addClickListener(new ClickListener() {
            public void onClick(Widget sender) {
                if (((CheckBox) sender).isChecked()) {
                    boolean confirmDis;
                    if (checkBox3.isChecked()) {
                        confirmDis = Window.confirm("other checkboxes set to disabled?");
                    } else {
                        confirmDis = Window.confirm("他のチェックが非活性にする?");
                    }
                    if (confirmDis){
                        checkBox1.setEnabled(false);
                        checkBox2.setEnabled(false);
                        checkBox3.setEnabled(false);
                    }
                } else {
                    checkBox1.setEnabled(true);
                    checkBox2.setEnabled(true);
                    checkBox3.setEnabled(true);
                }
            }
        });

        RootPanel.get("checkBox1").add(checkBox1);
        RootPanel.get("checkBox2").add(checkBox2);
        RootPanel.get("checkBox3").add(checkBox3);
        RootPanel.get("checkBox4").add(checkBox4);
        RootPanel.get("label").add(label);
    }
}
widgetのTextBoxWidgetサンプル--><input type="text">
TextBoxWidget.html
<html>
    <head>
        <title>Wrapper HTML for TextBoxWidget</title>
        <meta name='gwt:module' content='org.yang.gwt.sample.widget.TextBoxWidget'>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>

    <body>

        <script language="javascript" src="gwt.js"></script>
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

        <table align=center>
            <tr>
                <td>名前</td>
                <td id="inputName"></td>
            </tr>
            <tr>
                <td>パスワード</td>
                <td id="inputPass"></td>
            </tr>
            <tr>
                <td>数字入力</td>
                <td id="inputDigit"></td>
            </tr>
        </table>
    </body>
</html>

TextBoxWidget.java
package org.yang.gwt.sample.widget.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.ChangeListener;
import com.google.gwt.user.client.ui.KeyboardListenerAdapter;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class TextBoxWidget implements EntryPoint {

    public void onModuleLoad() {
        TextBox name = new TextBox();
        PasswordTextBox password = new PasswordTextBox();
        TextBox limitInput = new TextBox();

        limitInput.addKeyboardListener(new KeyboardListenerAdapter() {
            public void onKeyPress(Widget sender, char keyCode, int modifiers) {

                if (!Character.isDigit(keyCode)) {
                    ((TextBox) sender).cancelKey();
                }
            }
        });

        limitInput.addChangeListener(new ChangeListener() {
            public void onChange(Widget sender) {
                System.out.println("input:::" + sender.getElement());
                System.out.println(DOM.getAttribute(sender.getElement(),
                        "value"));
                System.out.println(((TextBox) sender).getText());

                String str = ((TextBox) sender).getText();
                char[] c = str.toCharArray();
                for (int i = 0; i < c.length; i++) {
                    if (!Character.isDigit(c[i])) {
                        ((TextBox) sender).setText("");
                        return;
                    }
                }
            }
        });

        RootPanel.get("inputName").add(name);
        RootPanel.get("inputPass").add(password);
        RootPanel.get("inputDigit").add(limitInput);
    }
}
widgetのTextAreaWidgetサンプル--><TEXTAREA>
TextAreaWidget.html
<html>
    <head>
        <title>Wrapper HTML for TextAreaWidget</title>
        <meta name='gwt:module' content='org.yang.gwt.sample.widget.TextAreaWidget'>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>

    <body>
        <script language="javascript" src="gwt.js"></script>
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

        <table align=center>
            <tr>
                <td>名前</td>
                <td id="inputName"></td>
            </tr>
            <tr>
                <td>コメント</td>
                <td id="inputComent"></td>
            </tr>
        </table>
    </body>
</html>

TextAreaWidget.java
package org.yang.gwt.sample.widget.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.ChangeListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class TextAreaWidget implements EntryPoint {

    public void onModuleLoad() {
        TextBox tb = new TextBox();
        TextArea ta = new TextArea();

        ta.setCharacterWidth(80);
        ta.setVisibleLines(10);
        ta.addChangeListener(new ChangeListener() {
            public void onChange(Widget sender) {
                System.out.println("input:::" + sender.getElement());
                System.out.println(DOM.getAttribute(sender.getElement(),
                        "value"));
                System.out.println(((TextArea) sender).getText());

                int charCount = ((TextArea) sender).getCursorPos();
                System.out.println(charCount);
                Window.alert(charCount + "文字入力しました");

                String str = ((TextArea) sender).getText();
                System.out.println(str);
                Window.alert(str);

            }
        });

        RootPanel.get("inputName").add(tb);
        RootPanel.get("inputComent").add(ta);
    }
}

備考：
バッチファイルで一発生成する
call %GWT_HOME%\projectCreator -eclipse CheckBoxWidget -out C:\YangStand\CheckBoxWidget
call %GWT_HOME%\applicationCreator -eclipse CheckBoxWidget -out C:\YangStand\CheckBoxWidget org.yang.gwt.sample.widget.client.CheckBoxWidget
call %GWT_HOME%\projectCreator -eclipse TextBoxWidget -out C:\YangStand\TextBoxWidget
call %GWT_HOME%\applicationCreator -eclipse TextBoxWidget -out C:\YangStand\TextBoxWidget org.yang.gwt.sample.widget.client.TextBoxWidget
…

posted on 2007-09-21 00:06 Yama的家阅读(1283) 评论(0) 编辑收藏引用所属分类: JAVA

常用链接

留言簿(5)

随笔分类(66)

相册

积分与排名

最新评论

阅读排行榜