2011-08-02 11 views
3

ボタンをクリックすると、姓、DOBなどの追加情報を入力するためのポップアップ/ダイアログボックスが表示されます。window.confirm()で再生しようとしましたが、私の目的に役立たない。 UIBinderを通じてGWTでこれがどのように達成されるのかを教えてください。ポップアップまたはダイアログボックス:GWTポップアップとUIBinder:パネルまたはダイアログボックス?

は、私は私が行くことがどれかわからない

<g:HTMLPanel visible="false" > 
            <g:DialogBox ui:field="dialogPanel" 
             animationEnabled="true" modal="false" glassEnabled="false"> 
             <g:caption>More Details</g:caption> 
             <table> 
              <tr> 
               <td colspan="2" align="center"> 
                <g:Datepicker ui:field="DOB">DOB:</g:Datepicker> 
               </td> 
              </tr> 

              <tr> 
               <td>UserName:</td> 
               <td> 
                <g:TextBox ui:field="usernameTextBox" /> 
               </td> 
              </tr> 
              <tr> 
               <td></td> 
               <td align="right"> 
                <g:Button ui:field="loginButton">OK</g:Button> 
               </td> 
              </tr> 
             </table> 
            </g:DialogBox> 
           </g:HTMLPanel> 

binder.xml私のUIで、このようないくつかのことを試してみました!

ありがとうございました。

答えて

10

がUiBinderサンプルメッセージを使用してGWTダイアログボックスのスケルトンです:

MyDialogBox.java

import com.google.gwt.core.client.GWT; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.user.client.ui.DialogBox; 
import com.google.gwt.user.client.ui.Widget; 

public class MyDialogBox extends DialogBox { 
    private static final Binder binder = GWT.create(Binder.class); 
    interface Binder extends UiBinder<Widget, MyDialogBox> { 
    } 
    public MyDialogBox() { 
     setWidget(binder.createAndBindUi(this)); 
     setAutoHideEnabled(true); 
     setText("My Title"); 
     setGlassEnabled(true); 
     center(); 
    } 
} 

MyDialog.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'> 
    <ui:style> 
     .panel { 
      background-color: ivory; 
     } 
    </ui:style> 
    <g:FlowPanel styleName="{style.panel}"> 
    <g:Label>Dialog Content</g:Label> 
    </g:FlowPanel> 
    </ui:UiBinder> 

は、それが使用して示しています

MyDialogBox m = new MyDialogBox(); 
m.show(); 
0

DialogBoxは、PopupPanelの子であり、すべての機能を備えています。さらに、それは(ドキュメントから)があります。UiBinderサンプルメッセージでの使用について

..caption area at the top and can be dragged by the user. 

(再びドキュメントから):

DialogBox elements in UiBinder templates can have one widget child and one 
<g:caption> child. 

だから、あなたがGWTウィジェットを使用して<table>を交換する必要があると思われる、最もおそらく<g:HTMLPanel>とそれに<table>を入れてください。

また、PopupPanelとDialogBoxはスタンドアロンのウィジェットで、通常は他のウィジェットには追加されませんが、.show()hide()メソッドで表示されます。したがって、UiBinderでは、 <g:DialogBox>をルートレベルに置くことができます。ここで

+0

こんにちは、ありがとうreply.Iこれを得ることができました私はまだダイアログボックスのタグを囲んだHTMLを持っていました。私はUiHandlerメソッドの中でdialogBox.center()を呼び出さなければなりませんでした。 – user874722

関連する問題