ホーム > UI の設計 > パネル利用例 (1)

パネル利用例 (1)

ここではパネルの利用例として FlowPanel (フローパネル)、HTMLPanel (HTML パネル)、PopupPanel (ポップアップパネル) を用いたコードの例を示します。

出来上がりは次のようになります。

PopupPanel は一番下のボタンを押すと、次のように表示されます。

ではさっそく、これらをどのようにして書くかコードを示します。

ホストページ (HTML) と CSS

まず、Widget や Panel をホストページに組み込む場所が必要なので、次のようにホストページに div 要素をつくり、id を割り当てます。

<!doctype html>
<html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <link type="text/css" rel="stylesheet" href="Myuitest.css">
     <title>GWT keicode.com UI Test</title>
     <script type="text/javascript"
          language="javascript"
          src="myuitest/myuitest.nocache.js"></script>
   </head>
   <body>
   <h2>FlowPanel</h2>
     <div class="keicodetest" id="test1"></div>
   <h2>HTMLPanel</h2>
     <div class="keicodetest" id="test2"></div>
   <h2>PopupPanel</h2>
     <div class="keicodetest" id="test3"></div>
   </body>
</html>

それぞれの要素間に隙間をあけるのと、色をつけるためにプロジェクトの CSS に次を追加します。

div.keicodetest {
	margin:10px;
}	

.flowPanel1 {
	background-color: blue;
}

.flowPanel2 {
	background-color: gold;
}

GWT の Java コード

コードを示します。

package com.keicode.gwt.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class Myuitest implements EntryPoint {

     private final FlowPanel flowPanel1 = new FlowPanel();
     private final FlowPanel flowPanel2 = new FlowPanel();
     private final FlowPanel flowPanel3 = new FlowPanel();
     private final HTMLPanel htmlPanel1 = new HTMLPanel(
          "<table border='1'><tr><td>"
          + "<div id='html1'></div></td>"
          + "</tr><tr><td>HTMLPanel!</td></tr></table>");
     private final PopupPanel popupPanel1 = new PopupPanel();
     private final Button button1 = new Button("Show Popup");

     public void onModuleLoad() {

          //
          // FlowPanel
          //

          flowPanel1.setSize("100px", "50px");
          flowPanel1.addStyleName("flowPanel1");

          flowPanel2.setSize("200px", "50px");
          flowPanel2.addStyleName("flowPanel2");

          RootPanel.get("test1").add(flowPanel1);
          RootPanel.get("test1").add(flowPanel2);

          //
          // HTMLPanel
          //

          flowPanel3.setSize("200px", "30px");
          flowPanel3.addStyleName("flowPanel1");
          flowPanel3.add( new Label("Hello!") );

          htmlPanel1.add(flowPanel3, "html1");

          RootPanel.get("test2").add(htmlPanel1);

          //
          // PopupPanel
          //

          popupPanel1.setAutoHideEnabled(true);
          //popupPanel1.setPopupPosition(left, top);
          popupPanel1.setModal(true);
          popupPanel1.setGlassEnabled(true);
          popupPanel1.add(new Label("Hello! Can you see me? I'm a PopupPanel."));

          button1.addClickHandler( new ClickHandler() {
               public void onClick(ClickEvent event) {
                    int left = button1.getAbsoluteLeft() + 50;
                    int top = button1.getAbsoluteTop() + 20;

                    popupPanel1.setPopupPosition(left, top);
                    popupPanel1.show();
               }
          });

          RootPanel.get("test3").add(button1);

     }
}

FlowPanel は HTML の div 要素で表現される単純なコンテナです。

HTMLPanel は HTML 文字列をそのまま受け取ります。この例では HTMLPanel に table 要素を埋め込み、その中に設定した div 要素に対して ID を指定してパネルを追加しています。

PopupPanel は単純なツールチップ的なポップアップです。

ポップアップが表示される位置は、上のコード例では元のボタンの絶対位置を取得してそれから少しオフセットを足しています。

画面の中央に表示する場合は、次のように Window のメソッドを利用してクライアント領域のサイズを取得すれば良いです。

int left = (Window.getClientWidth()) / 2;
int top = (Window.getClientHeight()) / 2;

ホーム > UI の設計 > パネル利用例 (1)