NetBeansによるGUIアプリケーションの構築(1)

shuji_w6e2009-05-06

NetBeansのデザインビューではパレット、プロパティ、インスペクタの3つのビューを使いながらGUIを構築していきます。まずはこれらのビューの使い方を確認しながら、簡単なアプリケーションを構築してみます。

インスペクタ

インスペクタには、表示しているコンポーネントとその中に含まれるコンポーネントがツリー構造で表示されます。

インスペクタでは、各コンポーネントの名前(変数名)を変更したり、イベントなどの設定を行うことができます。また、GUIビルダ内では選択しにくいコンポーネント(JScrollPaneなど)はインスペクタで簡単に選択できます。また、レイアウトの変更、コンポーネントの順序などを制御するのもインスペクタパネルです。

パレット

パレットにはSwingのコンポーネントの一覧が含まれています。

NetBeansGUIビルダでSwingのコンポーネントを追加する場合、パレットから追加したいコンポーネントを選択して追加したいパネルにいドラッグ&ドロップします。尚、パネル内はカテゴリ分けされており、よく使う一般的なコンポーネントは「Swingコントロール」の中に含まれています*1。また、自作のコンポーネントをパレットに追加することも可能です。

プロパティ

プロパティは、各Swingコンポーネントの設定値を表示/編集する為のビューです。

例えばJLabelを選択している場合、奨励サイズ(preferredSize)やテキスト(text)などがプロパティに表示されるでしょう。ボタンのイベント設定や、コンポーネントのコード生成に関する設定もプロパティで行われます。プロパティは、そのコンポーネントが持つgetter/setterから設定できる項目とデフォルト値を表示しています。したがって、カスタムコンポーネントを登録した場合でもアクセサを定義しておくことでSwingのデフォルトコンポーネントと同じようにプロパティを使用することができます。

Hello JLabel

それでは「Hello Swing App」という文字列が表示されるだけの簡単なパネルを作成してみます。
最初にHelloPanelという名前でJPanelフォームを作成してください。

インスペクタを確認すると以下のようになっています。

他のコンポーネントとは、モデルなどSwingコンポーネント以外のコンポーネントを設定した場合に使用します。その他のSwingコンポーネントは[JPanel]以下に配置されます。

推奨サイズを設定する

Swingのコンポーネントにはウィンドウ等のサイズが変更された場合に自動的にサイズを変更するような仕組みが組み込まれています。ですが、自由にサイズが変更されても困るため、最小サイズ(minimumSize)・最大サイズ(maximumSize)・推奨サイズ(preferredSize)の3つのサイズをヒントとしてコンポーネントに設定できます。最小サイズと最大サイズは名前の通りですが、推奨サイズ(preferredSize)を理解するにはレイアウトマネージャの理解も必要になりますが、ここではレイアウトマネージャが自然にそのコンポーネントを配置できる時に設定されるサイズと理解しましょう。
JPanelフォームを作成したならば、まずは推奨サイズ(preferredSize)を適切なサイズに変更します。ナビゲータで[JPanel]を選択し、プロパティのプロパティを開きます。次にプロパティはアルファベット順に並んでいるのでpreferredSizeを探します。デフォルトでは[300, 400]となっていますが、これを修正しましょう。今回は簡単な文字列を表示するだけなので、[200, 50]に変更しました。

デザインのパネルには何も変化がないかと思います。新しい奨励サイズを反映するには、[JPanel]を右クリックしてデフォルトサイズの設定を選択します。

JLabelを追加する

パレットからSwing コントロールを開き、ラベルを選択したならば、先ほど作成したパネルまでドラックします。適当な位置まで移動させたならば*2、そのままドロップしてください。jLabel1というデフォルトのテキストが配置されるでしょう。

JLabelのプロパティを修正する

JLabelには自動的にjLabel1というテキストが設定されますが、これを「Hello Swing App」に修正します。プロパティパネルのプロパティを選択し、textの項目を編集してください。編集を行えば、すぐにGUIビルダに反映されます。

また、ビュー内のテキストをクリックして、直接的に編集することもできます。

続けて文字色を変更してみましょう。JLabelでの文字色は、foregroundで設定されているカラーです。直接、RGBの値を直接入力することもできますが、右側にある選択ボタンをクリックすれば、カラーチューザーから色を選択することが可能です。

ラベルの変数名を修正する

Swingコンポーネントを追加すると、デフォルトでは連番のコンポーネント名で追加されます。このままではカッコ悪いですし、コンポーネントが増えた時に可読性を低下させますから、適切な名前に変更するべきです。また、デフォルトではインスタンス変数として定義されますが、変更されることのないラベルなのでインスタンス変数ではなくローカル変数に変更してしまいます。
修正前のコードは次のようになっています。

    @SuppressWarnings("unchecked")
    // <editor-fold defaultstate="collapsed" desc="Generated Code">
    private void initComponents() {
        jLabel1 = new javax.swing.JLabel();
        jLabel1.setForeground(new java.awt.Color(207, 65, 65));
        jLabel1.setText("Hello Swing App");
        // 略
    }// </editor-fold>
    // Variables declaration - do not modify
    private javax.swing.JLabel jLabel1;
    // End of variables declaration

jLabelをインスペクタかデザインで選択したならば、プロパティからコードを選択し、変数名には「helloLabel」と入力します。続けて、局所変数*3を使用にチェックをいれます。

ソースを確認しましょう。

    @SuppressWarnings("unchecked")
    // <editor-fold defaultstate="collapsed" desc="Generated Code">
    private void initComponents() {
        javax.swing.JLabel helloLabel = new javax.swing.JLabel();
        helloLabel.setForeground(new java.awt.Color(207, 65, 65));
        helloLabel.setText("Hello Swing App");
    }// </editor-fold>
    // Variables declaration - do not modify
    // End of variables declaration

これでラベルはhelloLabelという変数名でローカル変数として定義されました。

プレビューする

最後に意図どおりにレイアウトされているかを確認します。確認にはアプリケーションを立ち上げる必要は無く、プレビュー機能で確認可能です。

このように単純なレイアウトでは意味が無さそうに見えます。しかし、複雑なレイアウトを組んでいく場合、大きさを可変にしたときなどの挙動をチェックするのに重宝します。

AppPanelに乗せる

最後にAppPanelにHelloPanelを乗せましょう。やはりコンパイルが済んでいないと正確にコンポーネントを配置できない為、Shift + F11でビルドします。後は適当な位置にHelloPanelをドラッグ&ドロップするだけです。

レイアウト

今回のトレーニングでは次のようなレイアウトになりました。

以上。

*1:ちなみにNetBeansを日本語で起動していると、JButtonではなくボタンなどと日本語化されてしまうのですが、この箇所はコンポーネントのクラス名が直接表示されていた方が解り易いです

*2:マージンなど適切な場所ではコンポーネントがスナップされます

*3:ローカル変数