ボタンを扱うには（Swing）

◆PROCESSING　逆引きリファレンス

　カテゴリー：GUI

【概要】

PROCESSINGでは、JavaでGUIを実現する代表的な方法である AWT（Abstract Windowing Toolkit ）とSwingが利用できます。

ただし普通のJava（生Java）でプログラミングするのに比べて、少しばかり工夫が必要です。

この件に関する詳細については「GUIを扱う準備をする（Swing）」記事を参照して下さい。

PROCESSINGにGUIの部品を追加するには、PSurfaceのCanvasの上位になるJLayerdPanel に部品の追加を行います。

例えばボタンを追加するなら

（１）Windowの大きさを決める
（２）PSurfaceが持つレイヤー付きパネルを取得する
（３）GUI部品（ボタン）を生成する
（４）GUI部品の大きさや装飾を決定する
（５）イベントリスナーを指定する
（６）ボタンをレイヤー付きパネルに追加する

といった手順でプログラミングします。（４）～（６）あたりは、この順番ではなくても良いと思いますが、これらの作業は setup() 関数の中で行って下さい。

Swinのボタンについては、下記サイト様などが参考になります。

Java Drive 様
~~亜細亜大学 FreeStyleWiki~~ 様 ※2020/06現在Link先が見つかりません

以下では、ポイントとなる箇所について解説させて頂きます。

【詳細】

ボタン押下イベント

イベントリスナー登録void button . addActionListener ( actionListener );

button ： JButtonのインスタンス変数
actionListener ： ActionListener インタフェースを持つクラスのインスタンス

ボタンを生成したら、ボタン押下に反応する部分を作らないといけません。

ボタン押下イベントに反応するクラスは、 ActionListener インタフェースを実装している必要があります。

ボタン押下イベントに反応するクラスは、それ専用に用意しても良いです。また無名クラス（匿名クラス）を作って利用しても良いです。

例えば、専用のクラスを用意するなら

class actionClass implements  ActionListener
{
  //ボタン押下イベント
  public void actionPerformed(ActionEvent ev) {
    //処理したい内容をここに記述する    
  }
}

class actionClass implements ActionListener

{

//ボタン押下イベント

public void actionPerformed(ActionEvent ev) {

//処理したい内容をここに記述する

}

こんな風に ActionListener インタフェースをもつクラスを定義してから

ActionListener  actionListener = new actionClass(); 
button.addActionListener( actionListener );

1 2	ActionListener actionListener = new actionClass(); button.addActionListener( actionListener );

とします。（ちなみに button は JButtonのインスタンス変数です）

無名クラスを使うのであれば

button.addActionListener(
  new ActionListener(){
    public void actionPerformed(ActionEvent ev ){
      /* 処理したい内容をここに記述する */
    }
  }
);

button.addActionListener(

new ActionListener(){

public void actionPerformed(ActionEvent ev ){

/* 処理したい内容をここに記述する */

}

);

といった感じになります。

いずれの場合も、リスナーとなるクラスには actionPerformedメソッドを定義する必要があります。actionPerformedメソッドの名前と引数は、ActionListener インタフェースで決められているため、固定となります。

これで、ボタンが押下されるとactionPerformedメソッドが呼び出されます。

コマンド名セット

コマンド名セットvoid button.setActionCommand ( String cmd ) ;

button ： JButtonのインスタンス変数
cmd ：ボタン識別用の文字列

画面上に複数のボタンがあり、イベントリスナーを共有している場合、どのボタンが押されたかを識別するために、ボタン毎にユニークな文字列を設定しておく事が可能です。

ここで設定された cmd 文字列は、以下で説明する getActionCommand で取得する事が可能です。

押されたボタンを知る

押されたボタンを知るString cmd = ev . getActionCommand( ) ;
Object obj = ev . getSource( ) ;

ev ： actionPerformed関数に渡される ActionEvent変数
cmd ：押されたボタンのラベル名、またはコマンド名
obj ：押されたボタンオブジェクト

actionPerformed関数に渡される ActionEvent クラスが持つ getActionCommand メソッドを利用して、setActionCommand で設定した識別用の文字列を取得します。

もしも setActionCommand で文字列を定義していない場合は、押されたボタンのラベル文字列が戻ってきます。

setActionCommand で文字列を定義しておらず、かつボタンを生成する際に

JButton button = new JButton();

1	JButton button = new JButton();

などとしてラベルも定義していない場合は、cmd には空文字が戻されます。

getActionCommand メソッドを利用する以外の方法としては、ActionEvent クラスが持つ getSourceメソッドを利用する方法があります。

getSourceメソッドを利用すると、押されたボタンのオブジェクトが戻ってくるので、このオブジェクトがJButtonで生成したものと一緒か比べれば、押されたボタンを判定することができます。

【関連記事】

GUIを扱う準備をする（Swing）

サンプルプログラム

シンプルなボタン例：

import processing.awt.PSurfaceAWT;
import javax.swing.*;
import javax.swing.JButton;
import java.awt.event.*;
 
/**
 * PROCESSING Swing GUI表示サンプル
 * @author MSLABO
 * @version 2.0
 */
void setup(){
  //(1)Windowの大きさを決める
  size( 200,200 ); 
  
  //(2)PSurfaceが持つレイヤー付きパネルを取得する
  JLayeredPane panel = getLayeredPanel();
  
  //(3)JButtonを作成する
  JButton btnDog = new JButton("秋田犬");
  btnDog.setActionCommand( "AKITA" );

  //(4)GUI部品の大きさや装飾を決定する
  //大きさを決める
  btnDog.setBounds( 50, 55, 100, 30 );  
  
  //(5)イベントリスナーを指定する
  btnDog.addActionListener(
    new ActionListener(){
      public void actionPerformed(ActionEvent ev ){
        String cmd = ev.getActionCommand();
        if( cmd.equals( "AKITA" )){
          println( "わん" );
        }
      }
    }
  );   
  
  //(6)ボタンをレイヤー付きパネルに追加する  
  panel.add( btnDog );
}
 
void draw(){
  background( 220 );
}
 
/**
 * PSurfaceが持つCanvasから、レイヤー付きパネルを取得する
 */
JLayeredPane getLayeredPanel(){
  PSurfaceAWT.SmoothCanvas   canvas;
  canvas = (PSurfaceAWT.SmoothCanvas)getSurface().getNative();
  return (JLayeredPane)canvas.getParent().getParent();
}

import processing.awt.PSurfaceAWT;

import javax.swing.*;

import javax.swing.JButton;

import java.awt.event.*;

/**

* PROCESSING Swing GUI表示サンプル

* @author MSLABO

* @version 2.0

void setup(){

//(1)Windowの大きさを決める

size( 200,200 );

//(2)PSurfaceが持つレイヤー付きパネルを取得する

JLayeredPane panel = getLayeredPanel();

//(3)JButtonを作成する

JButton btnDog = new JButton("秋田犬");

btnDog.setActionCommand( "AKITA" );

//(4)GUI部品の大きさや装飾を決定する

//大きさを決める

btnDog.setBounds( 50, 55, 100, 30 );

//(5)イベントリスナーを指定する

btnDog.addActionListener(

new ActionListener(){

public void actionPerformed(ActionEvent ev ){

String cmd = ev.getActionCommand();

if( cmd.equals( "AKITA" )){

println( "わん" );

}

);

//(6)ボタンをレイヤー付きパネルに追加する

panel.add( btnDog );

}

void draw(){

background( 220 );

}

/**

* PSurfaceが持つCanvasから、レイヤー付きパネルを取得する

JLayeredPane getLayeredPanel(){

PSurfaceAWT.SmoothCanvas canvas;

canvas = (PSurfaceAWT.SmoothCanvas)getSurface().getNative();

return (JLayeredPane)canvas.getParent().getParent();

}

シンプルなボタン例です。ボタンを押すと、コンソール領域に「わん」と表示します。

＜出力サンプル＞

シンプルなボタン例２：

import processing.awt.PSurfaceAWT;
import javax.swing.*;
import javax.swing.JButton;
import java.awt.event.*;
 
/**
 * PROCESSING Swing GUI表示サンプル
 * @author MSLABO
 * @version 3.0
 */
 JButton btnDog;
 
void setup(){
  //(1)Windowの大きさを決める
  size( 200,200 ); 
  
  //(2)PSurfaceが持つレイヤー付きパネルを取得する
  JLayeredPane panel = getLayeredPanel();
  
  //(3)JButtonを作成する
  btnDog = new JButton("柴犬");

  //(4)GUI部品の大きさや装飾を決定する
  //大きさを決める
  btnDog.setBounds( 50, 55, 100, 30 );    
  
  //(5)イベントリスナーを指定する
  ActionListener  actionListener = new actionClass(); 
  btnDog.addActionListener( actionListener );   
  
  //(6)ボタンをレイヤー付きパネルに追加する  
  panel.add( btnDog );
}
 
void draw(){
  background( 220 );
}

/**
 * イベントリスナー
 */
class actionClass implements  ActionListener
{
  //ボタン押下イベント
  public void actionPerformed(ActionEvent ev) {
    Object obj = ev. getSource();
    if( obj == btnDog ){
      //犬ボタンが押されたら、ダイアログボックスを表示
      ImageIcon icon = new ImageIcon( dataPath("") + "\\" + "dog.png" );
      JOptionPane.showConfirmDialog( getLayeredPanel(),"わん","鳴き声",
                          JOptionPane.DEFAULT_OPTION,
                          JOptionPane.INFORMATION_MESSAGE, icon );
                          
    }
  }
}
 
/**
 * PSurfaceが持つCanvasから、レイヤー付きパネルを取得する
 */
JLayeredPane getLayeredPanel(){
  PSurfaceAWT.SmoothCanvas   canvas;
  canvas = (PSurfaceAWT.SmoothCanvas)getSurface().getNative();
  return (JLayeredPane)canvas.getParent().getParent();
}

import processing.awt.PSurfaceAWT;

import javax.swing.*;

import javax.swing.JButton;

import java.awt.event.*;

/**

* PROCESSING Swing GUI表示サンプル

* @author MSLABO

* @version 3.0

JButton btnDog;

void setup(){

//(1)Windowの大きさを決める

size( 200,200 );

//(2)PSurfaceが持つレイヤー付きパネルを取得する

JLayeredPane panel = getLayeredPanel();

//(3)JButtonを作成する

btnDog = new JButton("柴犬");

//(4)GUI部品の大きさや装飾を決定する

//大きさを決める

btnDog.setBounds( 50, 55, 100, 30 );

//(5)イベントリスナーを指定する

ActionListener actionListener = new actionClass();

btnDog.addActionListener( actionListener );

//(6)ボタンをレイヤー付きパネルに追加する

panel.add( btnDog );

}

void draw(){

background( 220 );

}

/**

* イベントリスナー

class actionClass implements ActionListener

{

//ボタン押下イベント

public void actionPerformed(ActionEvent ev) {

Object obj = ev. getSource();

if( obj == btnDog ){

//犬ボタンが押されたら、ダイアログボックスを表示

ImageIcon icon = new ImageIcon( dataPath("") + "\\" + "dog.png" );

JOptionPane.showConfirmDialog( getLayeredPanel(),"わん","鳴き声",

JOptionPane.DEFAULT_OPTION,

JOptionPane.INFORMATION_MESSAGE, icon );

}

/**

* PSurfaceが持つCanvasから、レイヤー付きパネルを取得する

JLayeredPane getLayeredPanel(){

PSurfaceAWT.SmoothCanvas canvas;

canvas = (PSurfaceAWT.SmoothCanvas)getSurface().getNative();

return (JLayeredPane)canvas.getParent().getParent();

}

先程とは異なる方法で、イベントリスナーを登録し、押されたボタンの判定を行っています。

ボタンを押すと、かわいい犬のアイコンがついたダイアログボックスが開きます。

＜出力サンプル＞

（画像URL：illust-AC 様：しおりさん）

PROCESSING逆引きリファレンス一覧へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

iconka.com 様
ICOOON MONO 様

◆PROCESSING 逆引きリファレンス

カテゴリー：GUI