GWTでTabPanelを使う

java GWT

TabPanelのサンプルプログラムの作成

■アプリ概要

  • tab1 tab2 tab3を用意
    • ta1が選択されると「Hello」を表示
    • ta2が選択されると「Hello2」を表示
    • ta1が選択されると画像を表示

■UI

  • TabPanel
  • Label：どのタブが選択されているかを表示する
  • HTML1：tab1に配置
  • HTML2：tab2に配置
  • Image：tab3に配置


■作成
プロジェクト名：GwtUISampleTabPanel

■GwtUISampleTabPanelクラス

  • SelectionHandlerを実装
  • UIを定義
  • OnModleで初期化
  • 各タブパネルにUIを配置
  • タブパネルにSelectionHandlerを設定
    • addSelectionHandlerで登録
  • タブ選択時の処理を追加
    • tp.getTabBar().getSelectedTab()で選択中タブを取得する

TabPanelにはSelectionHandlerとBeforaddSelectionHandlerが設定できる
SelectionHandlerは選択後でBeforSelectionHandler選択される直前に呼ばれる。
※BeforSelectionHandlerで選択タブを取得するときはevent.getItem()になる。
getSelectedTab()にはまだ以前の選択タブが入っている。

	@Override
	public void onSelection(SelectionEvent<Integer> event) {
		if(event.getSource() == tp){
			this.label.setText("tp" + tp.getTabBar().getSelectedTab());
			this.label.setText("tp" );
		}else{
			this.label.setText("else" + cnt);
		}
	}

■ソース
■GwtUISampleTabPanel

package sample.tabpanel.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class GwtUISampleTabPanel implements EntryPoint, SelectionHandler<Integer>{
	
	private TabPanel tp;
	private Label label = new Label();
	private int cnt;
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		//UIの作成
		this.tp = new TabPanel();
		HTML html1 = new HTML("<b>Hello</b>");
		HTML html2 = new HTML("<center>Hello2</center>");
		Image image = new Image("event.gif");
		VerticalPanel vp = new VerticalPanel();
		vp.add(image);
		this.label.setText("string");
		
		//タブパネルの設定
		tp.add(html1, "tab1");
		tp.add(html2, "tab2");
		tp.add(vp, "tab3");
		tp.setWidth("400px");
		tp.setHeight("300px");
		tp.selectTab(0);
		tp.addSelectionHandler(this);
		
		RootPanel.get("label").add(label);
		RootPanel.get("tabpanel").add(tp);
		
	}

	@Override
	public void onSelection(SelectionEvent<Integer> event) {
		if(event.getSource() == tp){
			this.label.setText("tp" + tp.getTabBar().getSelectedTab());
		}else{
			this.label.setText("else" + cnt);
		}
	}
}

■GwtUISampleTabPanel.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="GwtUISampleTabPanel.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="gwtuisampletabpanel/gwtuisampletabpanel.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <h1>Web Application Starter Project</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">GWT UI Sample TabPanel</td>        
      </tr>
      <tr>
        <td id="label"></td>
      </tr>
      <tr>
        <td id="tabpanel"></td>
      </tr>
    </table>
  </body>
</html>