パネルにウィジェットを追加
図1は緑色の領域の中に文字列を表示している(Firefox2.0.0.8で確認、以下同じ)。領域はSimplePanelによるもので、文字列はHTMLウィジェットを用いた(リスト1)。色や枠線はCSS(リスト2)を適用している。これ以降、ソースコードはUTF-8で記述されているものとする。それ以外の文字コードを用いる場合は第3回を参照していただきたい。
リスト1 領域の中にHTMLを表示(Java)
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.HTML;
public class GWTPanels implements EntryPoint {
public void onModuleLoad() {
// 1つのウィジェットしか入れられないパネル
final SimplePanel sPanel = new SimplePanel();
// HTMLウィジェットを追加
sPanel.add( new HTML( "パネルにHTMLを表示させる
"
+ "ソースコードはUTF-8で作成
"
+ "別の文字コードを用いる場合は第3回を参照" ) );
// スタイルシート(リスト2)を設定
sPanel.setStyleName( "ex-simple-panel" );
// の領域にパネルを表示
RootPanel.get( "panels" ).add( sPanel );
}
}
リスト2 領域への設定(CSS)
.ex-simple-panel {
width : 300px;
height : 55px;
margin : 5pt;
padding : 5pt;
border : 1px solid black;
background-color : lightgreen;
}