Java/JavaFX/SwingComponents

Top > Java > JavaFX > SwingComponents

Swing Components

JavaFXでSwingのコンポーネントを使用することができますが、すべてのSwingコンポーネントが使用できるわけではありません。
ですが、Swingコンポーネントを使用することができるので簡単にボタン、ラベルなどが作成できます。

  • 使用できる主なSwing Components
    • Button
    • Check Box
    • Combo Box
    • Label
    • Radio Button
    • Slider
    • Text Filed

Swingのコンポーネントを使用

Swingコンポーネントを使用するには、JavaFXファイルを作成します。

JavaFXファイル

  1. プロジェクトを選択し右クリックし[新規]→[Empty JavaFX File]を選択してください。
  2. 空のファイルが作成されたら右側にあるコードパレットからStageをドラックし、エディタ領域にドロップしてください。
       Stage {
           title : "MyApp"
           scene: Scene {
               width: 200
               height: 200
               content: [  ]
           }
       }
    このSceneオブジェクトの変数contentの配列にSwingコンポーネントを貼り付けます。
  3. 右側のコードパレットからSwingComporments?カテゴリを見つけてください。その中から、Buttonを選択しContent[]の中にドロップしてください。
    swingCreate_00.JPG
    ドロップすると、下記のコードが表示されます。
       Stage {
           title : "MyApp"
           scene: Scene {
               width: 200
               height: 200
               content: [ SwingButton {
                   text: "Button"
                   action: function() {  }
               }
                ]
           }
       }
    このコードを実行すると、ボタンが左上に追加されているウィンドウが表示されまます。
    swingButton_00.JPG

Swing Buttonカスタマイズ

Swingのボタンはjavafx.ext.swingパッケージで定義されています。他のSwingコンポーネントもjavafx.ext.swingも定義されています。
SwingButton?クラスもjavafx.scene.Nodeクラスのサブクラスなので、シェイプで使用した変数の多くが使用できます。
width,height,translateX,translateY,fontの変数を追加します。

  Stage {
       title: "SwingButton"
       scene: Scene {
           width: 220
           height: 100
           content: [
               SwingButton {
                   text: "click"
                   width: 200
                   height: 60
                   translateX: 10
                   translateY: 10
                   font: Font {size: 24}
                   action: function() {
                   }
               }
           ]
       }
   }

変数width,heightは高さ幅を表します。
translateXはx軸方向のコンポーネントの移動量、同じくtranslateYはy軸方向の移動量を表します。
fontはボタンの文字のサイズ等を表します。

swingButton_01.JPG

イベント追加

ボタンを押された時のイベントを追加します。
今回はボタンを押されたら文字列を変化させるイベントを追加します。
バインドを使用して変数textにバインドさせる。

  // ボタンに表示する文字列
   var text = "clickして下さい";
   Stage {
       title: "SwingButton"
       scene: Scene {
           width: 220
           height: 80
           content: [
               SwingButton {
                   // 表示文字列は text にバインドする
                   text: bind text
                   width: 200
                   height: 60
                   translateX: 10
                   translateY: 10
                   font: Font { size: 24 }
                   action: function() {
                       // クリックされたらtextを更新する
                       text = "clickされました"
                   }
               }
           ]
       }
   }

変数textがボタンに表示させる文字列を格納しています。
ボタンに表示するのはSwingButton?クラスの変数textですが、変数textにバインドしています。
そして、クリックされたときコールされるactionにはtextを変更する関数を代入しています。
実行し、ボタンをクリックするとボタンの文字列が変更されるはずです。

swingButton_03.JPG

ボタンクリック後↓

swingButton_02.JPG

他のイベント処理

Nodeクラスには、actionのほかに変数onMouseClicked?、onMousePressed?が用意されてます。
こちらで紹介します。?

いろいろなSwing Components

あらためてSwing Componentsを紹介します。

Swing Button

ボタンを押したときにイベント実行します。

   Stage {
       //色を扱う
       var color:Color = Color.WHITE;
       title : "Button"
       scene: Scene {
           width: 200
           height: 100
           fill: bind color
           content: [
               SwingButton {
                   //表示文字列
                   text: "Button"
                   //アクション
                   action: function() {
                       //色を変更
                       color = Color.BLUE
                   }
               }
           ]
       }
   }

ボタンを押したときに背景を青くするイベントを記述しています。
変数action、ボタンが押された時の処理を記述します。
変数text、表示させる文字を記述します。

swingButton_05.JPG

ボタンクリック↓

swingButton_06.JPG

Swing Label

文字列を表示します。
文字列を表示するだけでなく、HTMLソースコードを設定することができる。

   Stage {
       title : "Label"
       scene: Scene {
           width: 200
           height: 100
           content: [
               SwingLabel {
                   text: "<html><h1>Sample</h1>test1<br>test2</html>";
               }
           ]
       }
   }

変数text、表示する文字を記述します。
またSwingLabel?クラスは変数iconを持ち、SwingIcon?オブジェクト保持することができます。

#ref(): File not found: "JavaFXについて/SwingComponents/" at page "Java/JavaFX/SwingComponents"

Swing Icon

SwingIcon?クラスを使用してアイコンを追加することができます。
変数imagを持ち、Imageオブジェクトを保持しImageクラスの変数urlにイメージのパスを指定します。

    Stage {
       title : "SwingIcon"
       scene: Scene {
           width: 200
           height: 70
           content: [
               //ラベル
               SwingLabel {
                   //アイコン
                   icon:SwingIcon{
                       //イメージ
                       image: Image {
                               //サイズ調整
                               preserveRatio:true
                               //幅
                               width:30
                               //url
                               url: "{__DIR__}hana.jpg"
                       }
                   }
                   text:"SwingIcon"
               }
           ]
       }
   }
swingIcon_00.JPG

Swing Check Box

マウスでクリックしてon/offするのに使用されます。
3つ表示するときは3つのSwingCheckBox?オブジェクトを作成し、変数textに表示させる、文字列を表示させる。

   Stage {
       title : "CheckBox"
       scene: Scene {
           width: 200
           height: 200
           content: [
               VBox{
                   content:[
                       //チェックボックス
                       SwingCheckBox {
                           text: "CheckBox1"
                           selected:true
                       },
                       //チェックボックス
                       SwingCheckBox {
                           text: "CheckBox2"
                       },
                       //チェックボックス
                       SwingCheckBox {
                           text: "CheckBox3"
                       }
                   ]
               }
           ]
       }
   }

変数selectedにtrueを代入することで状態を変更できます。

swingCheckBox_00.JPG

また変数selectedに双方向バインドを利用して、選択状態をチェックすることもできます。

   var flg1:Boolean = true;
   var flg2:Boolean = false;
   var flg3:Boolean = false;

   Stage {
       title : "CheckBox"
       scene: Scene {
           width: 200
           height: 200
           content: [
               HBox{
                   content: [
                       VBox{
                           content:[
                               //チェックボックス
                               SwingCheckBox {
                                   translateY:30                                
                                   text: "CheckBox1"
                                   //選択状態
                                   selected: bind flg1 with inverse
                               },
                               //チェックボックス
                               SwingCheckBox {
                                   translateY:60
                                   text: "CheckBox2"
                                   //選択状態
                                   selected: bind flg2 with inverse
                               },
                               //チェックボックス
                               SwingCheckBox {
                                   translateY:90
                                   text: "CheckBox3"
                                   //選択状態
                                   selected: bind flg3 with inverse
                               }
                           ]
                       }
                       VBox{
                           content: [
                               Text {font : Font {size: 24}
                               x:10 , y:30
                               content: bind flg1.toString()
                               },
                               Text {font : Font {size: 24}
                               x:10 , y:60
                                   content: bind flg2.toString()
                               },
                               Text {font : Font {size: 24}
                               x:10 , y:90
                                   content: bind flg3.toString()
                               }
                           ]
                       }
                   ]
               }
           ]
       }
   }

マウスでチェックすると状態がテキストに表示されます。

swingCheckBox_01.JPG

Swing Combo Box

クリックすると一覧がポップアップして表示されます。
Swing Combo Boxオブジェクトを作成し、表示させるリストを変数itemsにSwing Combo Box Itemオブジェクトを追加していきます。

    Stage {
       title : "SwingComboBox"
       scene: Scene {
           width: 200
           height: 100
           content: [
               //コンボボックス
               SwingComboBox {
                   width:100
                   items: [
                       //コンボボックスリスト
                       SwingComboBoxItem {
                           text: "File1"
                           selected: true
                       },
                       //コンボボックスリスト
                       SwingComboBoxItem {
                           text: "File2"
                       },
                       //コンボボックスリスト
                       SwingComboBoxItem {
                           text: "File3"
                       }
                   ]
               }
           ]
       }
   }

コンボボックスをクリックすると、3つのリストが表示されます。
変数selectedでにtrueを代入すると選択状態に変更できます。

swingComboBox_00.JPG

Swing Radio Button

複数の項目から1つ選択するときに使用します。
複数のグループを複数化し、まとめることが必要です。SwingToggleGroup?クラスを使用することで、複数の項目から1つだけ選択されるように管理します。

  • Swing Radio Buttonクラス
    • 変数text、表示する文字列。
    • 変数toggleGroup、グループ設定。
    • 変数translateX,Y、位置座標。
    • 変数selected、選択状態。
  • Swing Toggle Groupクラス
    複数の項目をまとめます。
       //ラジオボタン用のグループ
       var group = SwingToggleGroup{};
   Stage {
       title : "RadioButton"
       scene: Scene {
           width: 200
           height: 200
           content: [
               //ラジオボタン
               SwingRadioButton {
                   //座標
                   translateX:10
                   translateY:30
                   text: "RadioButton1"
                   //グループ
                   toggleGroup:group
               },
               //ラジオボタン
               SwingRadioButton {
                   //座標
                   translateX:10
                   translateY:60
                   //選択状態
                   selected:true
                   text: "RadioButton2"
                   //グループ
                   toggleGroup:group
               },
               //ラジオボタン
               SwingRadioButton {
                   //座標
                   translateX:10
                   translateY:90
                   text: "RadioButton3"
                   //グループ
                   toggleGroup:group
               }
           ]
       }
   }
swingRdioButton00.JPG

Swing List

項目を一覧表示します。

  • SwingList?クラス
    • 変数items、表示するリストSwingListItem?オブジェクト扱う。
  • SwingListItem?クラス
    • 変数text、表示する文字列。
    • 変数selected、選択状態。
         Stage {
             title : "SwingList"
             scene: Scene {
                 width: 200
                 height: 200
                 content: [
                     //リスト
                     SwingList{
                         //リストアイテム
                         items: [
                             //表示アイテム
                             SwingListItem{
                                 text:"SwingList1"
                             },
                             //表示アイテム
                             SwingListItem{
                                 text:"SwingList2"
                             },
                             //表示アイテム
                             SwingListItem{
                                 text:"SwingList3"
                                  selected:true
                             }
                         ]
                     }
                 ]
             }
         }
      swinglist_00.JPG
      Swing List Itemオブジェクトを配列で扱うこともできます。
  • 変数selectedIndex
    選択された番号

下記のコードは、addボタンをクリックするとテキストフィールドに入力している文字がリストに追加され、リストを選択して、deleteボタンをクリックすると削除します。

   Stage {
       title : "SwingList"
       scene: Scene {
           width: 200
           height: 300
           content: [
               VBox{
                   content: [
                       SwingTextField {
                           columns: 10
                           text: bind str with inverse
                       }
                       //リスト
                       SwingList{
                           width:100
                           //リストアイテム
                           items: bind list
                           selectedIndex:bind select with inverse
                       }
                       HBox{
                           content: [
                               SwingButton {
                                   text: "add"
                                   action: function() {
                                       //リストに追加する
                                       insert SwingListItem{text:str} into list;
                                   }
                               },
                               SwingButton {
                                   text: "delete"
                                   action: function() {
                                       println("{select}");
                                       //リストを削除
                                       delete list[select];
                                   }
                               }
                           ]
                       }
                   ]
               }
           ]
       }
   }

insert intoを使用してlistにSwingListItem?オブジェクトを追加しています。

   insert SwingListItem{text:str} into list;

deleteを使用して変数selectで指定した、要素の配列を削除します。

   delete list[select];
swinglist_01.JPG

Swing Slider

アナログ感覚で数値を変更できます。最大値、最小値が決められておりバーをドラッグすることで値を変更させます。

  • Swing Sliderクラス
    • 変数minimum、最小値。
    • 変数maximum、最大値。
    • 変数vertical、スライダーの水平、垂直設定。
    • 変数value、スライダ値。
         var num=100;
         
         Stage {
             title: "SwingSlider"
             scene: Scene {
                 width: 300
                 height:50
                 content: [
                     //スライダ
                     SwingSlider {
                         //配置場所
                         translateX: 20
                         translateY: 30
                         value:bind num with inverse
                         //幅
                         width: 260
                         //最小値
                         minimum: 0
                         //最大値
                         maximum: 100
                         //水平にセット
                         vertical: false
                     },
                     SwingLabel {
                         font:Font{size:24}
                         text: bind String.valueOf(num)
                     }
                 ]
             }
         }

スライダの値と変数numの値をバインドさせ値を変更させてます

swingClider_00.JPG

レイアウト

他のコンポーネントと組み合わせるのにレイアウトが必要になる場合があります。
現在提供されているレイアウトは、2つです。

  • HBoxクラス
    水平方向
  • VBoxクラス
    水平方向
   VBox {
       content: [
           SwingLabel { },
           HBox {            
               content: [
                   SwingButton { },
                   SwingLabel { }
               ]
           }        
       ]
   }

この場合ですと、水平方向のレイアウトの中に垂直方向のレイアウトを組み合わせてます。
さらに変数とイベント処理を追加します。

    var fieldtext = "";
   var labelText = "JavaFX!";

   Stage {
       title: "layout"
       scene: Scene {
           width: 220
           height: 100
           content: [
               //レイアウト垂直
               VBox {
                   translateX: 10
                   translateY: 10
                   spacing: 10
                   content: [
                       SwingLabel {
                           font: Font {
                               size: 20
                           }
                           width:200
                           text: bind labelText
                       },
                       //レイアウト水平
                       HBox {
                           spacing: 10
                           content: [
                           SwingButton {
                                   text: "click"
                                   action: function() {
                                       labelText = "JavaFX, {fieldtext}!"
                                   }
                               },
                               SwingTextField {
                                   columns: 10
                                   text: bind fieldtext with inverse
                                   editable: true
                               }                            
                           ]
                       }                    
                   ]
               }
           ]
       }
   }

テキストフィールドに表示させている文字列は、変数fieldtextにwith inverseを付加してバインドしています。こうすることで双方向バインドしSwingTextField?オブジェクトの変数labelText が更新された時にfieldtextも自動的に更新されます。

swing_layout_01.JPG

TextField?に入力してボタンをクリックすると↓

swing_layout_02.JPG

ノードを組み合わせる

同じアプリケーションの中で他のノードとSwingコンポーネントを一緒に表示することができます。
スライダとテキストを組み合わせてみます。
DropShadow?オブジェクトの変数colorとTextオブジェクト変数cintentにバインドさせスライダの動きで色と値を変更させることもできます。

    // スライダの値
   var sliderInteger = 50;

   Stage {
       title: "SwingSlider"
       scene: Scene {
       width: 300  
       height:150
           content: [
               //四角
               Rectangle{
                   width:300 height:200
                   fill:Color.BLACK
               }
               //スライダ
               SwingSlider{
                   //位置
                   translateX: 50  translateY: 100
                   //最大最小値
                   minimum: 0  maximum: 100
                   //値
                   value: bind sliderInteger with inverse;
               }
               Text {
                   //位置
                   y:50 ,x:30
                   //表示文字列
                   content: bind "Value: {sliderInteger}"
                   //色
                   fill:Color.RED
                   //文字の大きさ
                   font : Font { size: 24  }
                   //エフェクト
                   effect: DropShadow{
                       //影の大きさ
                       radius: 50
                       //影の強さ
                       spread: 0.5
                       //影の色
                       color: bind Color.hsb(sliderInteger, 1.0, 1.0 )
                   }
               }
           ]
       }
   }

スライダのバーをマウスでドラックするとエフェクトの効果が変更されます。

swingSlider_02.JPG

アクセス総数5337件

最終更新日: 2009-09-03 (木) 22:35:55 (2792d)

このページをブックマーク:

このページのURL(コピペして利用下さい):

TOP