Gwt-Ext学習ノートの基本編

8751 ワード

eclipse Web Google ext gwt

一、Cyper Studioツールの設置
a.       Cypeal Studioをダウンロードします
http://code.google.com/p/cypal-studio/、解凍後CopyはEclipseディレクトリの下にある。
b.      GWT Homeディレクトリを配置し、EclipseのWindow-Preferences-Cypeal Studioを開いてGwtのディレクトリを選択します。
二、gwtextというGWTプロジェクトを構築する。
a.       ダイナミックウェブプロジェクトを新規作成します。File-New-Other-Web-Dynamic Web Projectは、Configrationsの中からCypal Studio GTGT Projectを選択して、他のデフォルトで結構です。
三、Moduleモデルの作成
a.       gwtext項目は右クリックNew-Other-Cypel Studio-Moduleをクリックして、パッケージ名org.gwtext.juicnを入力して、クラス名はRegisterです。
b.      org.gwtext.jurlycnバッグの下にclientパッケージ、serverバッグ、publicディレクトリとRegister.gwt.xml、Register.を生産します。
c.       Register.javaのon ModuleLoadにWindow.alert（「This is my first Gwt Demo！」）を追加します。

 /**  
     * @author      
     *  
     */  
      
    public class Register implements EntryPoint {   
        public void onModuleLoad() {   
                Window.alert("This is my first Gwt Demo!");   
            }   
   }  

/**
 * @author    
 *
 */

public class Register implements EntryPoint {
	public void onModuleLoad() {
			Window.alert("This is my first Gwt Demo!");
		}
}

d.      Run-Open Run Dialog-Gwt Hosted Mode Applicationを選択して、Newを選択して、新しい実行例gwtextを作成して、Projectの中でgwtextを選択して、Moduleは自動的に実行するモデルクラスを選択します。
e.      実行をクリックすると、Google Web Toolkit実行ウィンドウが表示されます。
四、GT-Ext環境を配置する
a.       gwt-extとextリソースをダウンロードします。
b.      gwtextのgwtext.jarとext資源に参加します。
                                                               i.      gwtext-2.0.3ディレクトリのgwtext.jarをプロジェクトに追加します。
                                                             ii.      プロジェクトのpublicディレクトリにjsフォルダを新規作成し、ext-2.1ディレクトリのadapperディレクトリ、resourceディレクトリとext-all.js、ext-core.jsをjsフォルダに導入します。
c.       HTML宿主ページRegister.とモジュール設定ファイルRegister.gwt.xmlを修正します。
                                                               i.      Register.ファイルに追加します。

 <link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>   
      
    <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>   
      
    <script type="text/javascript" src="js/ext-all.js"></script>  

<link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all.js"></script>

ii. Register.gwt.xmlファイルに追加します。

 
<inherits name="com.gwtext.GwtExt"/>  

<inherits name="com.gwtext.GwtExt"/>

五、GT-Extを実行する例
a. Register.javaモデルのファイルを修正しました。内容は以下の通りです。

  /**  
     * @author      
     *  
     */  
    public class Register implements EntryPoint{   
      public void onModuleLoad() {   
           createComponents();   
       }   
     
       private void createComponents() {   
           final FormPanel frm = new FormPanel();   
           frm.setDraggable(true);   
           frm.setWidth(300);   
           frm.setTitle("    ");   
           frm.setPaddings(25);   
     
           TextField txtUsername = new TextField("   ", "username");   
           TextField txtPassword = new TextField("  ", "password");   
           TextField txtEmail = new TextField("  ", "email");   
           TextField txtPhone = new TextField("  ", "phone");   
     
           txtUsername.setRegex("^[a-zA-Z]*$");   
           txtUsername.setRegexText("        ！");   
           txtUsername.setAllowBlank(false);   
     
           txtPassword.setPassword(true);   
           txtPassword.setRegex("^[a-zA-Z]*$");   
           txtPassword.setRegexText("       ！");   
           txtPassword.setAllowBlank(false);   
     
           txtEmail.setVtype(VType.EMAIL);   
           txtEmail.setVtypeText("          ！");   
           txtEmail.setAllowBlank(false);   
     
           txtPhone.setRegex("^\\d*$");   
           txtPhone.setRegexText("       ！");   
           txtPhone.setAllowBlank(false);   
     
           frm.add(txtUsername);   
           frm.add(txtPassword);   
           frm.add(txtEmail);   
           frm.add(txtPhone);   
     
           Panel buttonPanel = new Panel();   
           buttonPanel.setLayout(new HorizontalLayout(10));   
     
              
           Button btnSave = new Button("  ");   
           btnSave.addListener(new ButtonListenerAdapter() {   
               public void onClick(Button button, EventObject e) {   
                   if (frm.getForm().isValid()) {   
                       MessageBox.alert("  ","      ！");   
                   } else {   
                       MessageBox.alert("  ","            ！");   
                   }   
               }   
           });   
     
           Button btnClear = new Button("  ");   
           btnClear.addListener(new ButtonListenerAdapter() {   
               public void onClick(Button button, EventObject e) {   
                   MessageBox.alert("  ", "        ！");   
               }   
           });   
     
           buttonPanel.add(btnSave);   
           buttonPanel.add(btnClear);   
     
           frm.add(buttonPanel);   
     
           RootPanel.get().add(frm);   
       }   
   }  

/**
 * @author    
 *
 */
public class Register implements EntryPoint{
	public void onModuleLoad() {
		createComponents();
	}

	private void createComponents() {
		final FormPanel frm = new FormPanel();
		frm.setDraggable(true);
		frm.setWidth(300);
		frm.setTitle("    ");
		frm.setPaddings(25);

		TextField txtUsername = new TextField("   ", "username");
		TextField txtPassword = new TextField("  ", "password");
		TextField txtEmail = new TextField("  ", "email");
		TextField txtPhone = new TextField("  ", "phone");

		txtUsername.setRegex("^[a-zA-Z]*$");
		txtUsername.setRegexText("        ！");
		txtUsername.setAllowBlank(false);

		txtPassword.setPassword(true);
		txtPassword.setRegex("^[a-zA-Z]*$");
		txtPassword.setRegexText("       ！");
		txtPassword.setAllowBlank(false);

		txtEmail.setVtype(VType.EMAIL);
		txtEmail.setVtypeText("          ！");
		txtEmail.setAllowBlank(false);

		txtPhone.setRegex("^\\d*$");
		txtPhone.setRegexText("       ！");
		txtPhone.setAllowBlank(false);

		frm.add(txtUsername);
		frm.add(txtPassword);
		frm.add(txtEmail);
		frm.add(txtPhone);

		Panel buttonPanel = new Panel();
		buttonPanel.setLayout(new HorizontalLayout(10));

		
		Button btnSave = new Button("  ");
		btnSave.addListener(new ButtonListenerAdapter() {
			public void onClick(Button button, EventObject e) {
				if (frm.getForm().isValid()) {
					MessageBox.alert("  ","      ！");
				} else {
					MessageBox.alert("  ","            ！");
				}
			}
		});

		Button btnClear = new Button("  ");
		btnClear.addListener(new ButtonListenerAdapter() {
			public void onClick(Button button, EventObject e) {
				MessageBox.alert("  ", "        ！");
			}
		});

		buttonPanel.add(btnSave);
		buttonPanel.add(btnClear);

		frm.add(buttonPanel);

		RootPanel.get().add(frm);
	}
}

b. 実行効果;次のボタンをクリックして、効果を確認します。

Saltstack取付使用