このページは、学部2年生向け授業である、「マルチメディアプログラミング実習」 のために用意しました。
(Wikiの仕様で大文字小文字が混在した英単語に疑問符?が追加されるところがありますが、無視してください。)
ボタンを多数配置した例です。
下がプログラムです。動かしてみましょう。長いのでコピペして良いです。動作を確認してください。またレイアウト方法を確認してください。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ComplicatedLayoutSample extends JFrame implements ActionListener { public void initialize() { JPanel panel1 = new JPanel(); JPanel panel2= new JPanel(); JPanel panel3= new JPanel(); JPanel panel4= new JPanel(); JPanel panel5= new JPanel(); panel1.setLayout(new FlowLayout()); for (int i=1; i<=3; i++) { JButton btn = new JButton("NORTH" + i); btn.addActionListener(this); panel1.add(btn); } panel2.setLayout(new BoxLayout(panel2, BoxLayout.Y_AXIS)); for (int i=1; i<=3; i++) { JButton btn = new JButton("WEST" + i); btn.addActionListener(this); panel2.add(btn); } panel3.setLayout(new GridLayout(3,2)); for (int i=1; i<=6; i++) { JButton btn = new JButton("CENTER" + i); btn.addActionListener(this); panel3.add(btn); } panel4.setLayout(new BorderLayout()); JButton btn1 = new JButton("EAST1"); btn1.addActionListener(this); panel4.add(btn1, BorderLayout.NORTH); JButton btn2 = new JButton("EAST2"); btn2.addActionListener(this); panel4.add(btn2, BorderLayout.SOUTH); panel5.setLayout(new BoxLayout(panel5, BoxLayout.X_AXIS)); for (int i=1; i<=4; i++) { JButton btn = new JButton("SOUTN" + i); btn.addActionListener(this); panel5.add(btn); } Container container = this.getContentPane(); container.add(panel1,BorderLayout.NORTH); container.add(panel2,BorderLayout.WEST); container.add(panel3,BorderLayout.CENTER); container.add(panel4,BorderLayout.EAST); container.add(panel5,BorderLayout.SOUTH); this.setSize(400,200); this.setVisible(true); } public void actionPerformed(ActionEvent e) { System.out.println( ((JButton)e.getSource()).getText() ); } public static void main(String[] args) { ComplicatedLayoutSample cls = new ComplicatedLayoutSample(); cls.initialize(); } }
コピペしてしまいましたが、動作はしっかり確認しましょう。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class ComplicatedLayoutSample extends JFrame implements ActionListener {
Action ListenerをインプレメントしたJFrameサブクラスです。
public void initialize() { JPanel panel1 = new JPanel(); JPanel panel2= new JPanel(); JPanel panel3= new JPanel(); JPanel panel4= new JPanel(); JPanel panel5= new JPanel();
5個のパネルを用意しています。動作例を見るとわかりますが、上下左右と中央の五枚のパネルを貼り付けています。
panel1.setLayout(new FlowLayout()); for (int i=1; i<=3; i++) { JButton btn = new JButton("NORTH" + i); btn.addActionListener(this); panel1.add(btn); }
最初のパネルは、「北側」に貼り付けるパネルです。(ウィンドウの上部)。 ここにNORTH + 番号の名前のボタンを3個作り、アクションリスナーに自分自身を登録して、北側パネルに貼り付けています。以下同様です。フローレイアウトを使っています。貼り付ける相手の形に合わせて柔軟に配置されます。
panel2.setLayout(new BoxLayout(panel2, BoxLayout.Y_AXIS)); for (int i=1; i<=3; i++) { JButton btn = new JButton("WEST" + i); btn.addActionListener(this); panel2.add(btn); } panel3.setLayout(new GridLayout(3,2)); for (int i=1; i<=6; i++) { JButton btn = new JButton("CENTER" + i); btn.addActionListener(this); panel3.add(btn); } panel4.setLayout(new BorderLayout()); JButton btn1 = new JButton("EAST1"); btn1.addActionListener(this); panel4.add(btn1, BorderLayout.NORTH); JButton btn2 = new JButton("EAST2"); btn2.addActionListener(this); panel4.add(btn2, BorderLayout.SOUTH); panel5.setLayout(new BoxLayout(panel5, BoxLayout.X_AXIS)); for (int i=1; i<=4; i++) { JButton btn = new JButton("SOUTN" + i); btn.addActionListener(this); panel5.add(btn); }
西側パネル、中央パネル、東側パネル、南側パネルにボタンを貼り付けています。すべてのアクションリスナーに自分自身を登録しています。ボタン配置のレイアウトは、Y軸方向のボックスレイアウト、3 x 2の格子レイアウト、ボーダーレイアウト、そしてX軸方向のボックスレイアウトです。ウィンドウをリサイズして、レイアウトの特徴を確認してください。
Container container = this.getContentPane(); container.add(panel1,BorderLayout.NORTH); container.add(panel2,BorderLayout.WEST); container.add(panel3,BorderLayout.CENTER); container.add(panel4,BorderLayout.EAST); container.add(panel5,BorderLayout.SOUTH);
次に、フレームのコンテナーを取り寄せて、これに五枚のパネルを貼り付けています。レイアウトはボーダーレイアウトで、東西南北、中央に貼り付けています。ボタンだけでなく、コンテナへのパネル貼り付けでもレイアウトが利用できまう。
this.setSize(400,200); this.setVisible(true); }
あとはサイズを調整しているだけです。
public void actionPerformed(ActionEvent e) { System.out.println( ((JButton)e.getSource()).getText() ); }
イベントリスナーのためのメソッドです。ボタンに書かれた名前をget Textで取得して表示しています。
public static void main(String[] args) { ComplicatedLayoutSample cls = new ComplicatedLayoutSample(); cls.initialize(); } }
こちらはいつものメインプログラムです。
次のプログラムは、テキストフィールド2個とボタン1個を表示します。 動作を確認してください。テキストフィールドに文字を入れてみてください。 イベントハンドラーが全く実装されていないので、ボタンを押しても何も起こりません。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JTextFieldSample extends JFrame { JButton button; JTextField textleft, textright; public void initialize() { button = new JButton("left to right"); textleft= new JTextField(10); textright= new JTextField(10); JPanel panel = new JPanel(); panel.setLayout(new BorderLayout()); panel.add(textleft, BorderLayout.WEST); panel.add(textright, BorderLayout.EAST); panel.add(button, BorderLayout.SOUTH); this.getContentPane().add(panel); this.setTitle("JTextFieldSample"); this.pack(); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setVisible(true); } public static void main(String[] args){ JTextFieldSample sample = new JTextFieldSample(); sample.initialize(); } }
演習:このプログラムで、left to rightボタンを押した時に、左のテキストフィールドの内容が右に移動する(左は空になる)ように変更してください。
ヒント:JTextFieldのマニュアルを見て、テキストをゲットしたりセットするメソッドを探してください。
https://docs.oracle.com/javase/jp/8/docs/api/index.html
ヒント:
getText()とsetText("xxx")を使います。
解答例:
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JTextFieldSample extends JFrame implements ActionListener { JButton button; JTextField textleft, textright; public void initialize() { button = new JButton("left to right"); button.addActionListener(this); textleft= new JTextField(10); textright= new JTextField(10); JPanel panel = new JPanel(); panel.setLayout(new BorderLayout()); panel.add(textleft, BorderLayout.WEST); panel.add(textright, BorderLayout.EAST); panel.add(button, BorderLayout.SOUTH); this.getContentPane().add(panel); this.setTitle("JTextFieldSample"); this.pack(); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setVisible(true); } public void actionPerformed(ActionEvent e) { textright.setText(textleft.getText()); textleft.setText(""); } public static void main(String[] args){ JTextFieldSample sample = new JTextFieldSample(); sample.initialize(); } }
演習:このプログラムに、右のテキストフィールドをクリアするclearボタンを追加してください。 こんなのをつくってください。
ヒント:4個のアイテムをパネルにつけることになります。2 x 2のグリッドレイアウトを使ってみましょう。
panel.setLayout(new GridLayout(2,2));
この後、テキストフィールドとボタンをaddしていけば、左上から順番に割り当ててくれます。
解答例:
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JTextFieldSample extends JFrame implements ActionListener { JButton button, clearButton; JTextField textleft, textright; public void initialize() { button = new JButton("left to right"); button.addActionListener(this); clearButton = new JButton("clear"); clearButton.addActionListener(this); textleft= new JTextField(10); textright= new JTextField(10); JPanel panel = new JPanel(); panel.setLayout(new GridLayout(2,2)); panel.add(textleft); panel.add(textright); panel.add(button); panel.add(clearButton); this.getContentPane().add(panel); this.setTitle("JTextFieldSample"); this.pack(); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setVisible(true); } public void actionPerformed(ActionEvent e) { if(e.getSource()==(button)){ textright.setText(textleft.getText()); textleft.setText(""); }else{ textright.setText(""); } } public static void main(String[] args){ JTextFieldSample sample = new JTextFieldSample(); sample.initialize(); } }
ラジオボタンとチェックボックスの例です。ラジオボタンを排他制御するには、ボタングループを使います。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JRadioButtonSample extends JFrame { public void initialize() { this.setTitle("Radio Buttons"); JPanel panel1 = new JPanel(); JPanel panel2 = new JPanel(); JRadioButton radio1 = new JRadioButton("for here"); JRadioButton radio2 = new JRadioButton("to go"); ButtonGroup group = new ButtonGroup(); group.add(radio1); group.add(radio2); panel1.setLayout(new GridLayout(2,1)); panel2.setLayout(new GridLayout(3,1)); panel1.add(radio1); panel1.add(radio2); panel2.add(new JCheckBox("with Drink")); panel2.add(new JCheckBox("with Salad")); panel2.add(new JCheckBox("with Cake")); Container container = this.getContentPane(); container.add(panel1,BorderLayout.WEST); container.add(panel2,BorderLayout.EAST); this.pack(); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main (String args[]) { JRadioButtonSample jrbs = new JRadioButtonSample(); jrbs.initialize(); } }
演習:上で作ったプログラムに、JLabelのラベルを一枚追加しましょう。下部に追加します。
ヒント:
ラベルはこんな感じで作ります。センタリングの指定はこのようにします。
JLabel label = new JLabel("1000 yen"); label.setHorizontalAlignment(JLabel.CENTER);
ラベルのためにパネルは用意しなくても良いようです。コンテナにaddすれば良いようです。この時、下部に追加するよう指定します。
container.add(label,BorderLayout.SOUTH);
解答例:
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JRadioButtonSample2 extends JFrame { public void initialize() { this.setTitle("Radio Buttons"); JPanel panel1 = new JPanel(); JPanel panel2 = new JPanel(); JLabel label = new JLabel("1000 yen"); label.setHorizontalAlignment(JLabel.CENTER); JRadioButton radio1 = new JRadioButton("for here"); JRadioButton radio2 = new JRadioButton("to go"); ButtonGroup group = new ButtonGroup(); group.add(radio1); group.add(radio2); panel1.setLayout(new GridLayout(2,1)); panel2.setLayout(new GridLayout(3,1)); panel1.add(radio1); panel1.add(radio2); panel2.add(new JCheckBox("with Drink")); panel2.add(new JCheckBox("with Salad")); panel2.add(new JCheckBox("with Cake")); Container container = this.getContentPane(); container.add(panel1,BorderLayout.WEST); container.add(panel2,BorderLayout.EAST); container.add(label,BorderLayout.SOUTH); this.pack(); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main (String args[]) { JRadioButtonSample2 jrbs2 = new JRadioButtonSample2(); jrbs2.initialize(); } }
演習:上の例で、ラジオボタンとチェックボックスがクリックされたらhelloと表示するようプログラムしましょう。
ヒント:
解答例:
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JRadioButtonSample2 extends JFrame implements ActionListener { public void initialize() { this.setTitle("Radio Buttons"); JPanel panel1 = new JPanel(); JPanel panel2 = new JPanel(); JLabel label = new JLabel("1000 yen"); label.setHorizontalAlignment(JLabel.CENTER); JRadioButton radio1 = new JRadioButton("for here"); JRadioButton radio2 = new JRadioButton("to go"); ButtonGroup group = new ButtonGroup(); group.add(radio1); group.add(radio2); panel1.setLayout(new GridLayout(2,1)); panel2.setLayout(new GridLayout(3,1)); panel1.add(radio1); panel1.add(radio2); radio1.addActionListener(this); radio2.addActionListener(this); JCheckBox check1 = new JCheckBox("with Drink"); JCheckBox check2 = new JCheckBox("with Salad"); JCheckBox check3 = new JCheckBox("with Cake"); panel2.add(check1); panel2.add(check2); panel2.add(check3); check1.addActionListener(this); check2.addActionListener(this); Container container = this.getContentPane(); container.add(panel1,BorderLayout.WEST); container.add(panel2,BorderLayout.EAST); container.add(label,BorderLayout.SOUTH); this.pack(); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public void actionPerformed(ActionEvent e) { System.out.println("hello"); } public static void main (String args[]) { JRadioButtonSample2 jrbs2 = new JRadioButtonSample2(); jrbs2.initialize(); } }
演習:
とあるレストランのランチは税別1,000円です。ランチにはオプションがあって、ドリンクを追加すると税別200円、サラダを追加すると税別300円、ケーキを追加すると税別500円です。全部追加すると税別2,000円です。この金額に消費税がかかります。消費税は、お店で食べると10%で、持ち帰りだと8%です。このレストランでアルバイトする友人のために、税込金額を計算するアプリを作ってあげることにしました。以下のように動くよう作ってください。
ヒント:
解答例:
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class LunchCalc extends JFrame implements ActionListener{ JLabel total = new JLabel("1000 yen"); JRadioButton radio1 = new JRadioButton("for here"); JRadioButton radio2 = new JRadioButton("to go"); JCheckBox check1 = new JCheckBox("with Drink"); JCheckBox check2 = new JCheckBox("with Salad"); JCheckBox check3 = new JCheckBox("with Cake"); public void initialize() { this.setTitle("Lunch Calc"); JPanel panel1 = new JPanel(); JPanel panel2 = new JPanel(); total.setHorizontalAlignment(JLabel.CENTER); ButtonGroup group = new ButtonGroup(); group.add(radio1); group.add(radio2); panel1.setLayout(new GridLayout(2,1)); panel2.setLayout(new GridLayout(3,1)); panel1.add(radio1); panel1.add(radio2); radio1.addActionListener(this); radio2.addActionListener(this); panel2.add(check1); panel2.add(check2); panel2.add(check3); check1.addActionListener(this); check2.addActionListener(this); check3.addActionListener(this); Container container = this.getContentPane(); container.add(panel1,BorderLayout.WEST); container.add(panel2,BorderLayout.EAST); container.add(total,BorderLayout.SOUTH); this.pack(); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public void actionPerformed(ActionEvent e) { int price=1000; if(check1.isSelected()) price += 200; if(check2.isSelected()) price += 300; if(check3.isSelected()) price += 500; if(radio1.isSelected()) price *= 1.1; if(radio2.isSelected()) price *= 1.08; String result=String.valueOf(price); total.setText(result + " yen"); } public static void main (String args[]) { LunchCalc lc = new LunchCalc(); lc.initialize(); } }
コピペして動かしてみてください。
import java.awt.*; import javax.swing.*; public class JListSample extends JFrame { JListSample(String title) { setTitle(title); String[] data = {"Iced Coffee", "Iced Tea", "Blend Coffee"}; JList<String> list = new JList<String>(data); JScrollPane scroll = new JScrollPane(list); scroll.setPreferredSize(new Dimension(200,100)); JPanel panel = new JPanel(); Container container = getContentPane(); container.add(scroll); } public static void main(String[] args) { JListSample sample = new JListSample("ListSample"); sample.pack(); sample.setVisible(true); sample.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }
まずはシンプルなプルダウンメニューを作ってみましょう。 このプログラムは何もしません。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JMenuSample extends JFrame implements ActionListener { public void initialize() { this.setTitle("MenuSample"); JMenuBar menubar = new JMenuBar(); JMenu menu = new JMenu("menu"); JMenuItem item1 = new JMenuItem("Sandwiches"); JMenuItem item2 = new JMenuItem("Side Orders"); JMenuItem item3 = new JMenuItem("Drinks"); menu.add(item1); menu.add(item2); menu.add(item3); menubar.add(menu); this.setJMenuBar(menubar); this.setSize(400,200); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public void actionPerformed(ActionEvent e){ } public static void main(String[] args) { JMenuSample sample = new JMenuSample(); sample.initialize(); } }
メニューにはメニューを追加することもできます。 上でitem3をメニューに変更すると、これにitemを追加できます。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JMenuSample extends JFrame implements ActionListener { public void initialize() { this.setTitle("MenuSample"); JMenuBar menubar = new JMenuBar(); JMenu menu = new JMenu("menu"); JMenuItem item1 = new JMenuItem("Sandwiches"); JMenuItem item2 = new JMenuItem("Side Orders"); JMenu item3 = new JMenu("Drinks"); menu.add(item1); menu.add(item2); menu.add(item3); JMenuItem subitem1 = new JMenuItem("Iced Coffee"); JMenuItem subitem2 = new JMenuItem("Iced Tea"); item3.add(subitem1); item3.add(subitem2); menubar.add(menu); this.setJMenuBar(menubar); this.setSize(400,200); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public void actionPerformed(ActionEvent e){ } } public static void main(String[] args) { JMenuSample sample = new JMenuSample(); sample.initialize(); } }
それぞれのitemに、フレーム自身をaction Listenerとして登録すれば、イベントを受け付けることができます。 ここでは、メニューアイテムにcommandという情報をつけて、ActionPerformedではこれを使ってメニュー項目を区別しています。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JMenuSample extends JFrame implements ActionListener { public void initialize() { this.setTitle("MenuSample"); JMenuBar menubar = new JMenuBar(); JMenu menu = new JMenu("menu"); JMenuItem item1 = new JMenuItem("Sandwiches"); item1.addActionListener(this); item1.setActionCommand("Sandwiches"); JMenuItem item2 = new JMenuItem("Side Orders"); item2.addActionListener(this); item2.setActionCommand("Side Orders"); JMenu item3 = new JMenu("Drinks"); menu.add(item1); menu.add(item2); menu.add(item3); JMenuItem subitem1 = new JMenuItem("Iced Coffee"); subitem1.addActionListener(this); subitem1.setActionCommand("Iced Coffee"); JMenuItem subitem2 = new JMenuItem("Iced Tea"); subitem2.addActionListener(this); subitem2.setActionCommand("Iced Tea"); item3.add(subitem1); item3.add(subitem2); menubar.add(menu); this.setJMenuBar(menubar); this.setSize(400,200); this.setVisible(true); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public void actionPerformed(ActionEvent e){ String command = e.getActionCommand(); if(command != null){ System.out.println(command); } } public static void main(String[] args) { JMenuSample sample = new JMenuSample(); sample.initialize(); } }
他のメニューの追加も試してみましょう。例えばお支払いメニュー。
次をコピペして動かしてみてください。色を選択するパネルが出ます。動作を確認してください。
import java.awt.*; import javax.swing.*; import java.awt.event.*; public class JColorChooserSample extends JFrame implements ActionListener { JButton button; JColorChooserSample(String title){ setTitle(title); button = new JButton("choose color"); button.addActionListener(this); JPanel panel = new JPanel(); panel.add(button); Container container = getContentPane(); container.add(panel); } public void actionPerformed(ActionEvent e){ JColorChooser colorchooser = new JColorChooser(); Color color = colorchooser.showDialog(this,"choose a color",Color.blue); //button.setBackground(color); button.setForeground(color); } public static void main(String[] args){ JColorChooserSample sample = new JColorChooserSample("JColorChooserSample"); sample.pack(); sample.setVisible(true); sample.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }