クジラ机ブログ

Rhinoで一番簡単にGUIする方法

JavaScriptの処理系の一つRhinoでGUIを簡単に表示する方法を紹介します。

方法は、JavaのSwingを使う方法です。とは言え、SWingを使うのはなかなか面倒です。
でも、FrameとJOptionPaneを使えば、非常に簡単に、一行入力ボックスやメッセージを表示できます。

#!/usr/bin/env rhino
importPackage(Packages.javax.swing,java.awt);
var f = new JFrame();
var name = JOptionPane.showInputDialog(f, "What is your name?");
JOptionPane.showMessageDialog(f,"Hello,"+name);
quit();

簡単な入力を行なったあと、バッチ処理を行い、処理を閉じるだけなら、これでぜんぜん事足りそうです。

• 参考) JOptionPane
  • http://www.ne.jp/asahi/hishidama/home/tech/java/swing/JOpt..

JFrameを活用する *

ダイアログじゃ物足りない場合は、JFrameにいろいろ載せて使えます。

ボタンを載せる例：

#!/usr/bin/env rhino
// swing/awtを取り込む
importPackage(Packages.javax.swing,java.awt);
// フレームの作成
var f = new JFrame();
// Window関連のイベントをハンドルする
f.addWindowListener(function(e,method) {
  if (method == "windowClosing") {
    print("close");
    quit();
  }
});
f.setSize(300,200);
// ボタンを載せる
var btn = new JButton("say");
btn.addActionListener(function(){
  JOptionPane.showMessageDialog(f, "Hello");
});
f.add(btn);
f.show();

テキストフィールドやボタンを載せる例：

#!/usr/bin/env rhino
importPackage(Packages.javax.swing,java.awt);
// フレームの設定
var f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setTitle("検索");
f.setSize(300,200);
// UIをフレームに載せる
var panel = new JPanel();
panel.setLayout(null);
var keyText = new JTextField();
var keyButton = new JButton("検索");
var resText = new JTextArea();
panel.add(keyText);
panel.add(keyButton);
panel.add(resText);
// 座標設定
keyText.setBounds(0,0,250,30);
keyButton.setBounds(250,0,50,30);
resText.setBounds(0,30,300,270);
// イベント
keyButton.addActionListener(function(){
  JOptionPane.showMessageDialog(f, "Hello");
});
f.add(panel);
f.setVisible(true);

簡単に使うライブラリ *

上記を参考にしつつ、SWingでダイアログを手軽に使うライブラリを以下に作ったので、良かったら使ってください。

• https://github.com/kujirahand/rhino-msgbox

// load library
load("lib/lib-msgbox.js");

// MessageBox test
msgbox.showMessage("Hello World!");

// inputBox
var name = msgbox.inputBox("What is your name?", "Mike");
msgbox.showMessage("Hello, " + name + " !");

// select button
var sel = msgbox.selectButtons(
  "Which color do u like?",
  ["Blue", "Red", "Green"]);
msgbox.showMessage("You like " + sel);