???????????????? Netbeans?? GUI????????IDE???????????? by HC120229034533

VIEWS: 22 PAGES: 18

									EclipseとVisualEditorプラグインによる
            コーディングレスデザイン


            鈴木駿一 (海尻海谷研究室M2)
GUIのデザインと構築

 コーディングのみでGUIを作るのは非常に面倒

            ↓

   GUIで操作できるGUIデザイナが必要
GUIのデザインと構築
 Eclipseプラグイン VisualEditor
   ドラッグ&ドロップで要素を配置できる

   2クリックで要素に動作を追加できる

   ソースコード以外のGUI定義ファイルを必要としない

   多彩な要素レイアウトマネージャへの対応

   指定しやすいプロパティウィンドウ



※Netbeansなど,GUIデザイナを備えたIDEは他にもいくつか
 あります.
VisualEditorのインストール
                Eclipse 3.5をインストールしている人
1.   メニューの「Help」→「Install New Software」を選択
2.   「Add...」をクリック
3.   Location欄に「http://download.eclipse.org/tools/ve/updates/1.4/」を入力
4.   「Contact all update sites during install to find required software」チェックボックスが
     ONになっていることを確認
5.   インストールできるモジュールを検索しにいくので,一覧が表示されたら「VisualEditor」
     を選択してインストール
6.   ダウンロードとインストールが終わったら再起動して完了です

                詳しくはhttp://wiki.eclipse.org/VE/Updateを参照のこと
VisualEditorのインストール
     Eclipse3.4をインストールしている人
1. メニューの「Software Updates...」→「Available Software」
2. 右上の「Add Sites...」をクリック
3. Location欄に
  「http://download.eclipse.org/tools/ve/updates/1.4/」を入力
4. インストールできるモジュールを検索しにいくので,一覧が表示
   されたら「VisualEditor」を選択してインストール
5. ダウンロードとインストールが終わったら再起動して完了です


    詳しくはhttp://wiki.eclipse.org/VE/Updateを参照のこと
VisualEditorの利用



      サンプルを作ってみましょう
VisualEditorの利用

   1.   ボタンの配置
   2. 要素のプロパティ編集

   3. アクションの割当とコードの追加

   4. レイアウトマネージャの使用
VisualEditorの利用
           サンプルプロジェクトの作成

ツールバーのNewボタン
→「General」カテゴリ
→「Java Project」を選択

1. プロジェクト名「VEProject」を入力して次へ
VisualEditorの利用
              サンプルウィンドウの作成

ツールバーのNewボタン
→「Java」カテゴリ
→「Visual Class」を選択

1. パッケージ名「srcGUI」,クラス名「VEWindow」を入力
2. StyleはFrameを選択
3. public static void main(String[] args) のチェックボックス
 をONにして次へ
VisualEditorの利用
             サンプルプロジェクトの実行

1. 右側のPackage ExplorerビューのVEWindowクラスを右
   クリック
2. 「Run as」→「Java Application」をクリック


      次回からはツールバー上のRunボタンから
            実行できます
VisualEditorの利用
            ボタンの配置

  1. 右側のパレットでボタンをクリック
  2. 中央のデザイナでクリック


         ボタンが配置されます
VisualEditorの利用

         要素のプロパティ編集

     1. PropertiesビューのText欄を編集


      Enterまたはフォーカスを外すと
           編集が確定します
VisualEditorの利用
        アクションの割当とコードの追加

 1. 追加したボタンを右クリック
 2. 「Events」→「actionPerformed」をクリック


        実行して、表示されたウィンドウの
            ボタンを押すと
        デバッグコンソールに出力される
VisualEditorの利用
          レイアウトマネージャの使用

 レイアウトマネージャは,ウィンドウサイズなどが変更されたとき
 に,要素がはみ出したりずれたりしないように位置を自動的に
 変えてくれる

 VEの標準設定では,JFrame内の第一層目にjContentPaneと
 いう名のJPanelが置かれ,その上にあらゆる要素が配置される

 VEの標準設定では,JPanelなどのコンテナに標準で割り当て
 られるレイアウトマネージャはGridBagLayoutである
VisualEditorの利用
          レイアウトマネージャの使用
 VEが対応しているのは,以下のレイアウト方法
  レイアウトマネージャなし
  BorderLayout
  BoxLayout
  CardLayout
  FlowLayout
  GridLayout
  GridbagLayout
 おすすめはBorderLayoutとGridbagLayoutの組み合わせ
 → 大まかにBorderLayoutで配置し,細かい部分はGridbag
GUIのデザイン
         VisualEditorに関するTips

 同じような動作をするときはコードクローンを作らないよう,アク
 ション内で外部のメソッドを呼び出す形式にする方がよい

 様々な環境において同じ動作を実現するのはJavaの得意とす
 るところだが,見た目までこだわると泥沼にはまるので注意

 独自のレイアウトや見た目にするのではなく,なるべく既存の
 アプリケーションに近づけること(ユーザーの混乱を防ぐように
 する)
GUIのデザイン
               その他の一般的なTips

 GUIはごちゃごちゃしないように適切な間隔をとる(レイアウト
 マネージャに指定できる要素間隔を編集するか,または拡張
 ボタンで出現するBorderプロパティを編集する)

 GUI要素が不必要なときは操作できないように
 setEnable(false)したり,setVisible(false)して隠すこと

 このあたりのガイドラインは,SunMicrosystemsやMicrosoft,
 AppleやGnome,KDEといった主要なGUIメーカーが教科書
 的なテキストを公開しているので読むといいかも
GUIのデザインガイドライン
 Sun Microsystems Java Look and Feel Guideline
    http://java.sun.com/products/jlf/ed2/book/


 Microsoft Windows ユーザー エクスペリエンス ガイドラ
 イン
   http://msdn.microsoft.com/ja-jp/library/aa511258.aspx


 UIデザインガイドラインのまとめ
   http://www.yasuhisa.com/could/roundup/ui-design-
    guidelines/

								
To top