-1-
GUI プログラミング第４ Graph
～ 手書認識と関数グラフ描画 ～ マウスで数式を書いて認識し、関数グラフを描画する ＜手書認識とグラフ描画のステップ＞ ステップ1_1 フレームの作成 ステップ1_2 マウスで自由に線を書く ステップ2-1 手書認識 認識結果を標準出力する ステップ2-2 手書認識 認識結果（数式）を描画する ステップ3 認識した数式を元に関数グラフを描画する 発展課題1 認識結果の第2・第 3 候補を選べるようにする 発展課題2 全消去ボタンを作成-2-
【手書認識・グラフ描画
Step1_1】フレームの作成
＜作成手順＞ １．Graph プロジェクトを新規作成 パッケージ・エクスプローラで右クリック→新規→Java プロジェクト プロジェクト名Graph ２．recognition パッケージを作成 src フォルダを選択→右クリック→新規→パッケージ パッケージ名recognition ３．graph パッケージを作成 src フォルダを選択→右クリック→新規→パッケージ パッケージ名graph ４．Stroke クラスを作成 recognition パッケージを選択→右クリック→新規→クラス クラス名Stroke で「完了」 ５．PaintPanel クラスを作成…JPanel を継承(extends)、MouseListener, MouseMotionListener を実装(implements)したクラス graph パッケージを選択→右クリック→新規→クラス ・クラス名PaintPanel ・スーパークラスの参照をクリック→「JPanel」とうつと、javax.swing の JPanel が出てくるので、 それを選択してOK ・インターフェースの追加をクリック →「MouseListener」で出てくるクラスを選択して「追加」 →「MouseMotionListener」で出てくるクラスを選択して「追加」・「OK」 ・「完了」ボタンを押下 ６．GraphPanel クラスを作成 ※ステップ３で使うクラス graph パッケージを選択→右クリック→新規→クラス ・クラス名GraphPanel ・スーパークラスの参照をクリック→「JPanel」とうつと、javax.swing の JPanel が出てくるので、 それを選択してOK ・「完了」ボタンを押下 ７．フレームを作成 後述の＜GraphFrame.java の作成手順＞を参照 ８．実行して外観を確認
-3- ＜GraphFrame.java の外観＞
今回はパネルや張り付けるコンポーネントの数が多いので、あらかじめアウトラインを示しておく。 アウトラインは、パネルやボタン、ラベルなどがどのような階層で何につけられているかをツリー構造 で見ることができる。
-4- ＜GraphFrame.java の作成手順＞
１．フレームを作成
graph パッケージ選択→右クリック→新規→その他を選択 GUI Forms→Swing→JFrame を選んで「次へ」
Class Name は GraphFrame として「完了」 ２．Jigloo のメッセージが出てきたら「OK」 ３．Look&Feel（プログラムの見た目）を設定 フレームを選択→右クリック→Set Look&Feel→Windows を選択 ４．レイアウトを設定 フレームを選択→右クリック→Set Layout→BorderLayout を選択 ５．フレームのサイズを大きめにする ソースの方をみて、initGUI()の中の下の方にあるサイズ指定部分を編集 setSize(400,300); → setSize(600,500); ６．フレームのプレビューに戻り、パネルをNorth に追加 上部の「Containers」右から 5 番目の「JPanel」を選び、フレームに貼り付ける 名前はnorthPanel、Constraints の中の direction に North を選択
７．パネルをSouth に追加
名前はsouthPanel、Constraints の中の direction に South を選択 ８．パネルをWest に追加
名前はwestPanel、Constraints の中の direction に West を選択 ９．パネルをEast に追加
名前はeastPanel、Constraints の中の direction に East を選択
１０． SplitPane（分割されているパネルのようなもの）を Center に追加
上部の「Containers」左から 4 番目の「JSplitPane」を選び、フレームに貼り付ける 名前はjSplitPane
１１． jSplitPane はデフォルトで縦分割なので、横分割にする。ボタンが付いて見えるのは気にしな くてよい。
下部の「GUI Properties」タブの中の左側の Properties 一覧から Basic の中の「orientation」を探 し、その値としてプルダウンから「VERTICAL_SPLIT」を選択する。
１２． 分割位置を設定する。
Properties 一覧から Expert の中の「dividerLocation」を探し、その値として「200」と入力 １３． jSplitPane の top にパネルを追加
名前はinnerPanel1、Constraints の中の position に top を選択、Layout を Border にする
１４． jSplitPane の bottom にパネルを追加
-5- １５． innerPanel1 の East にパネルを追加
名前はrightPanel1、Constraints の中の direction に East を選択、 Layout の中の vgap を 20 に設定
１６． rightPanel1 の横幅を大きくする。
「Properties」の Basic の中の「preferredSize」の幅の数値が 140 前後になるくらい。 １７． innerPanel2 の East にパネルを追加
名前はrightPanel2、Constraints の中の direction に East を選択、 Layout の中の vgap を 30 に設定
１８． rightPanel2 の横幅を大きくする。
「Properties」の Basic の中の「preferredSize」の幅の数値が 120 前後になるくらい １９． innerPanel2 の North に topPanel の名前でパネルを追加
２０． innerPanel2 の South に bottomPanel の名前でパネルを追加 ２１． innerPanel2 の West にラベルを追加
Components から左から 8 番目にある「JLabel」を選び、innerPanel2 内に置く 名前はleftLabel、Text は「 y = 」Constraints の中の direction に West を選択 ２２． leftLabel のフォントを変更
「Properties」の Basic の中の「font」の段の右端をクリック、フォントのウィンドウが出てくるの でスタイルをBold、サイズを 20 にする
-6- ２３． PaintPanel を innerPanel2 の Center に追加
innerPanel2 を選択（下の段のパネル中央をクリック）→右クリック→Add…→Add Custom →Add custom class or layout を選択
「PaintPanel」と入力して OK
名前をpaintPanel とし、Constraints の中の direction が Center になっていることを確認して OK ２４． rightPanel2 にボタンを 2 つ追加
Components の一番左にある「JButton」を選んで rightPanel2 に貼り付け 1 つ目：名前「recogButton」 Text「認識実行」
1 つ目：名前「eraseButton」 Text「消去」
２５． ボタンが押されたときに実行されるメソッドのひな型を作成
recogButton を選択し、Event Name のリスト中の ActionListner を開いて actionPerformed を inline に設定する
eraseButton にも同じ操作をしておく ２６． 消去メソッドをソースで編集
eraseButton = new JButton();
rightPanel2.add(eraseButton);
eraseButton.setText("\u6d88\u53bb");
eraseButton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
paintPanel.erase(); } }); ※以降はグラフ描画のためのコンポーネントだが、まとめてここで作ってしまう。 ２７． rightPanel1 に x 範囲指定のためのコンポーネントを配置 ・JTextField 名前「xMinField」、Text「-10」 ・JLabel 名前「xRangeLabel」、Text「 ≦ x ≦ 」 ・JTextField 名前「xMaxField」、Text「10」 ２８． rightPanel1 に y 範囲指定のためのコンポーネントを配置 ・JTextField 名前「yMinField」、Text「-10」 ・JLabel 名前「yRangeLabel」、Text「 ≦ y ≦ 」 ・JTextField 名前「yMaxField」、Text「10」 ２９． rightPanel1 にグラフ描画ボタンを追加
Components の一番左にある「JButton」を選んで rightPanel1 に貼り付け 名前「graphButton」、Text「グラフ描画」
３０． ボタンが押されたときに実行されるメソッドのひな型を作成
graphButton を選択し、Event Name のリスト中の ActionListner を開いて actionPerformed を handler method に設定する
３１． GraphPanel を innerPanel1 の Center に追加
innerPanel1 を選択（上の段のパネル中央をクリック）→右クリック→Add…→Add Custom →Add custom class or layout を選択
「GraphPanel」と入力して OK
名前をgraphPanel とし、Constraints の中の direction が Center になっていることを確認して OK
