CostumePanel

ｉアプリライブラリ カスタムパネル

ドコモのi-mode携帯電話で動作するｉアプリをビジネスに変える！
そんなビジュアル性の高いコンポーネントをライブラリという形で無償提供しています。

本ライブラリを用いると、Panelで使えるようなコンポーネント(ラベル、テキストボックス、リストなど)を、Canvas上で作成する事ができるようになります。

【実行画面】

カスタムパネルの概要（パンフレット) ： CostumePanel.pdf(15057) (PDF形式)

【ダウンロード】

内容	Final Release
バイナリ(Jar)	CPanel.jar(14148) 16 Kbyte
ＡＰＩリファレンス(JavaDoc)	CPanel_doc.zip(13753) 115 Kbyte
ソース(Source)	CPanel_src.zip(13776) 30(Kbyte)

ライセンス

本製品はオープンソースであり、ライセンスはCPLです。本製品を別のｉアプリライブラリとして使用するのではなく、別の製品(ｉアプリ)に使用・販売・インポートする場合において、(ＣＰＬのコントリビューションに該当しないため)本製品に変更または追加を加えたとしても、オープンソースにする必要もなく、オブジェクトコードを独自のライセンスで頒布できます。

 ライブラリの使い方

使い方は、とても簡単で、

1. 本ライブラリ(CPanel.jar)を以下の場所に置きます。

C:\iDKDoJa5.1\lib\component

2. ｉアプリエミュレータを起動して、[プロジェクト]-[iアプリライブラリ] から 本ライブラリにチェックを付けます。

以上で本ライブラリが利用できるようになります。

 Sample

/*
 * CostumePanel Sample.java
 */
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.IOException;

import iappli.lib.graphics.*;
import iappli.lib.io.*;
import iappli.lib.ui.*;

import com.nttdocomo.ui.IApplication;
import com.nttdocomo.ui.Canvas;
import com.nttdocomo.ui.Display;
import com.nttdocomo.ui.Graphics;
import com.nttdocomo.ui.Image;
import com.nttdocomo.ui.MediaImage;
import com.nttdocomo.ui.MediaManager;

/**
 * サンプル実装です
 */
public class Sample extends IApplication {
    public void start() {
        Image im = null;

        // 背景画像の取得 
        try {
            // スクラッチパッドまたはサーバからダウンロードする場合
            // ・ADFのPackageURLにダウンロード元サイトのＵＲＬを指定のこと
            //   ("http://localhost/" は Apache等 で自マシンからダウンロードする場合。)
            // ・ADFのUseNetworkをhttpに設定のこと
            // ・ADFのSPSizeに画像の保存に必要な領域を指定のこと
            byte data[] = SPControl.mediaRead(0, 0, 0, this.getSourceURL()+"image.gif");
            MediaImage mi = MediaManager.getImage(data);

            // プロジェクト/res 配下から取得する場合 (注：jarサイズが大きくなる)
            // ・プロジェクト/res 配下に画像ファイルを置くこと
//          MediaImage mi = MediaManager.getImage("resource:///image.gif");

            mi.use();
            im = mi.getImage();
        } catch (Exception e) {
            // 画像が存在しない
            im = null;
            e.printStackTrace();
        }
        Display.setCurrent(new SampleCPanel(im));
    }
}

/**
 * カスタムパネルのメイン画面です
 */
class SampleCPanel extends CostumePanel implements SPObject {

    String list1[] = {"男", "女"};
    String list2[] = {"大工", "ＳＥ", "ＯＬ", "料理人", "セールス"};
    String list3[] = {"コンポ", "のど飴", "教科書", "マウス", "車"};

    CButton    bt = new CButton("　登　録　");

    CTextBox   tx = new CTextBox("山田", 10, 10);

    CCheckList ck = new CCheckList( CCheckList.RADIO_BUTTON,
            list1,
            Graphics.getColorOfName(Graphics.BLACK),
            Graphics.getColorOfRGB(200, 200, 200, 200),
            Graphics.getColorOfName(Graphics.WHITE));

    CPulldownList ls = new CPulldownList(list2,
            Graphics.getColorOfName(Graphics.BLACK),
            Graphics.getColorOfRGB(255, 255, 255, 200),
            Graphics.getColorOfName(Graphics.WHITE));

    CCheckList cd = new CCheckList( CCheckList.CHECKBOX,
            list3,
            Graphics.getColorOfName(Graphics.BLACK),
            Graphics.getColorOfRGB(200, 200, 200, 200),
            Graphics.getColorOfName(Graphics.WHITE));

    CBulletinBoard cb = new CBulletinBoard(null,
            "ご登録",
            Graphics.getColorOfName(Graphics.PURPLE),
            Graphics.getColorOfRGB(255, 255, 200, 200),
            Graphics.getColorOfName(Graphics.RED));

    /**
     * コンストラクタ
     */
    public SampleCPanel(Image im) {
        this.im = im;

        try {
            // スクラッチパッドからデータを復元 (前回押したボタン)
            SPControl.read(this, 0, 1);
        } catch (IOException e) {  }
    }
    
    /**
     * キャンバスに表示するために使用するメソッドです。<br>
     */
    public void paint(Graphics g) {
        CLabel lb1 = new CLabel("氏名",0,0,-1);
        CLabel lb2 = new CLabel("職業",0,0,-1);
        CLabel lb3 = new CLabel("性別",0,0,-1);
        CLabel lb4 = new CLabel("お好きな商品をどうぞ",
                Graphics.getColorOfName(Graphics.RED),0,-1);

        CLabel lbx = new CLabel("この情報は大切に保管されます。",
                Graphics.getColorOfName(Graphics.BLACK),
                Graphics.getColorOfRGB(100, 100, 100, 100),
                Graphics.getColorOfName(Graphics.WHITE));

        g.lock();

        // 背景画像が存在する場合
        if (im != null) {
            g.drawImage(im,
                        (Display.getWidth() - im.getWidth())/2,
                        (Display.getHeight() - im.getWidth())/2);
        }
        
        // 背景画像を少しだけ透過する
        g.setColor(Graphics.getColorOfRGB(240, 240, 255, 230));
        g.fillRect(0, 0, Display.getWidth(), Display.getHeight());

        // テキスト
        lb1.show(g, 2,  1, true);
        tx.show (g, 12, 1, true);

        // プルダウンリスト
        lb2.show(g, 2,  3, true);
        ls.show (g, 12, 3, 15, true);

        // ラジオボタン
        lb3.show(g, 2,  5, true);
        ck.show (g, 12, 5, 2, 4, true);

        // チェックボックス
        lb4.show(g, 2,  7, true);
        cd.show (g, 2,  9, 3, 8, true);

        // ラベル
        lbx.show(g, 4,  13, true);

        // ボタン
        bt.show (g, 14, 16, true);

        // ブリテンボード
        cb.show (g, 32, 0, 6, 1, true);

        // イベントの登録
        addEvent(tx);
        addEvent(ls);
        addEvent(ck);
        addEvent(cd);
        addEvent(bt);

        g.unlock(true);
    }

    /**
     * イベントが通知された時に呼ばれる処理です。<br>
     */
    public void processEvent2(CComponent c, int t, int p) {
        if (c == bt && t == CostumePanel.BUTTON_PRESSED) {
            // ボタンが押されたらダイアログ表示
            CDialog c1 = new CDialog();
            c1.setCanvas(this);

            try {
                // スクラッチパッドへデータを保管
                SPControl.write(this, 0, 1);
            } catch (IOException e) {  }

            Display.setCurrent(c1);
        }
        else if (c == tx && t == CostumePanel.TEXT_CHANGED) {  }
        else if (c == ls && t == CostumePanel.SELECTION_CHANGED) {  }
        else if (c == ck && t == CostumePanel.SELECTION_CHANGED) {  }
        else if (c == cd && t == CostumePanel.SELECTION_CHANGED) {  }
    }
    
    /**
     * スクラッチパッドから取得するデータ
     */
    public int readObject(DataInputStream in) throws IOException {
        // 名前
        byte data[] = new byte[10];
        in.read(data);
        tx.setText(new String(data).trim());
        // 職業
        ls.select(in.readInt());
        return 14;
    }

    /**
     * スクラッチパッドへ保存するデータ
     */
    public int writeObject(DataOutputStream out) throws IOException {
        // 名前
        byte data[] = new byte[10];
        String sdata = tx.getText();
        System.arraycopy(sdata.getBytes(), 0, data, 0, sdata.getBytes().length);
        out.write(data);                       // 10Byte
        // 職業
        out.writeInt(ls.getSelectedIndex());   // 4Byte
        return 14;
    }

    private Image im = null;
}

/**
 * ダイアログ表示クラスです。<br>
 * CBulletinBoard と CButton の組み合わせで作成しています。<br>
 * 
 * <pre>
 * 【実行例】
 * CDialog c1 = new CDialog();
 * c1.setCanvas(this);
 * Display.setCurrent(c1);
 * </pre>
 */
class CDialog extends CostumePanel {

    CBulletinBoard cb = new CBulletinBoard("登録確認",
            "\n\nこの情報で登録してもよろしいですか？",
            Graphics.getColorOfName(Graphics.BLACK),
            Graphics.getColorOfRGB(255, 255, 200, 200),
            Graphics.getColorOfName(Graphics.WHITE));

    CButton bt1 = new CButton(" はい ");
    CButton bt2 = new CButton("いいえ");

    /**
     * キャンバスに表示するために使用するメソッドです。<br>
     */
    public void paint(Graphics g) {
        g.lock();

        // 遷移元のキャンパスの画像を背景にする。
        g.drawImage(im, 0, 0);

        // ブリテンボードの表示
        cb.show(g, 4, 3, 30, 11, true);

        // ボタンの表示
        bt1.show(g, 10, 12, false);
        bt2.show(g, 22, 12, false);
        addEvent(bt1);
        addEvent(bt2);

        g.unlock(true);
    }

    /**
     * 遷移元のキャンパスを設定します。<br>
     * 
     * Display.setCurrent()する前に実行してください。
     * 
     * @param c 遷移元のキャンパスを指定します。
     */
    public void setCanvas(Canvas c) {
        cs = c;

        // 遷移元のキャンパスの画像をバックバッファに取得する。
        int pd[] = cs.getGraphics().getRGBPixels(0, 0,
                               cs.getWidth(), cs.getHeight(), null, 0);
        im = Image.createImage(cs.getWidth(), cs.getHeight(), pd,   0);
    }

    /**
     * イベントが通知された時に呼ばれる処理です。<br>
     */
    public void processEvent2(CComponent c, int t, int p) {
        // ボタンのイベント
        if (t == CostumePanel.BUTTON_PRESSED) {
            // ボタン１が押された
            if (c == bt1) {
                // 完了画面にやさしく遷移する
                Canvas c1 = new TestLabel();
                CCanvasFade.fade(CCanvasFade.FADE_BLENDIMAGE, this, c1, 5);
                im = null;
            }
            // ボタン２が押された
            else if (c == bt2) {
                // 遷移元の画面に戻る
                cb.clear();
                im = null;
                Display.setCurrent(cs);
            }
        }
    }

    private Canvas cs  = null;   // 遷移元のキャンパス
    private Image  im  = null;   // 遷移元のキャンパスイメージ
}

/**
 * カスタムパネルの完了画面です。
 */
class TestLabel extends CostumePanel {

    /**
     * キャンバスに表示するために使用するメソッドです。<br>
     */
    public void paint(Graphics g) {
        CLabel lb = new CLabel("ご登録ありがとうございました。");
        g.lock();
        lb.show(g, 4, 8, true);
        g.unlock(true);
    }
}