スマホサイト・アプリをつくろう。

今回はフォームのレイアウトについて解説します。
パネルクラスでレイアウトの調整を行うには大きく分けて2通りあります。
1つ目はHTMLLayoutクラスを使用してHTMLのコードと同じような感覚でレイアウトを行う方法と、
画面の左上から(y,y),(0,0)としてピクセル単位でフォーム１つ１つをセットする方法があります。
今回はパネルクラスで簡単にレイアウトの変更ができるHTMLレイアウトに付いて解説します。
　
※HTMLレイアウトは機種依存します。
使用可能な機種はNTTドコモ504シリーズからの環境、DoJa2.0以降となります。
　

---

HTMLLayout
まずHTMLレイアウトを使用した方法の解説をします。
HTMLレイアウトとはクラスであり、パネルクラスに実装します。
コーディングを行う際、＜br＞タグや＜p＞タグを配置するのに、このクラスのメソッドを使用します。
　
メソッドの概要

begin(java.lang.String tag);  タグの開始を指定する。
br();  改行を行う
end();  タグの終了を指定する。

　
サンプル

    // 変数宣言
    IApplication iapp;
    private Label        w_label;
    private TextBox      w_text;
    private Button       w_button;
    private Dialog       w_dialog;
    private HTMLLayout   w_layout;     //<---- 追加

    public MainPanel(IApplication ap) {
        // アクションを退避
        this.iapp = ap;
        
        // オブジェクトの生成
        w_label = new Label("文字を入力：");
        w_text = new TextBox("", 20, 7, TextBox.DISPLAY_ANY);
        w_button = new Button("クリック");
        w_dialog = new Dialog(Dialog.DIALOG_INFO,"INFO");
        w_layout = new HTMLLayout();　　　　　　　//<---- 追加
        
        // 画面にオブジェクトをセット
        this.setLayoutManager(w_layout);　　　　　//<---- 追加
        w_layout.begin(HTMLLayout.CENTER);　　//<---- 追加
        this.add(w_label);
        w_layout.br();　　　　　　　　　　　　　　　　　　　　//<---- 追加
        this.add(w_text);
        w_layout.br();　　　　　　　　　　　　　　　　　　　　//<---- 追加
        this.add(w_button);
        w_layout.br();　　　　　　　　　　　　　　　　　　　　//<---- 追加
        w_layout.end();　　　　　　　　　　　　　　　　　　　//<---- 追加

        // タイトルセット
        setTitle("Sample Program");

        // リスナーをインスタンス生成
        setSoftKeyListener(this);
        setComponentListener(this);
    }

　
解説
プログラムは前回のコードの差分で表示してあります。
オブジェクトの生成、パネルへの実装は他と変わりはありません。
HTMLレイアウト実装後、begin（）を使用に中央寄せしています。
また、ご覧の通り各フィールドをセットする時にbr()を実行し改行を行っています。
begin（）では以下のタグを使用できます。

HTMLLayout.CENTER　----->＜center＞
HTMLLayout.LEFT　-----> ＜left＞
HTMLLayout.RIGHT   ----->＜right＞
HTMLLayout.P   ----->＜p＞

---

実行結果

---

　
次回は携帯端末にデータを保存する方法をご紹介します。