- 追加された行はこの色です。
- 削除された行はこの色です。
#freeze
*チュートリアルで試せる内容 [#t068f5e5]
-[[可視化インタフェースモジュールの作り方]]
-[[パネルサイズに応じた表示更新]]
--動作確認のために,[[処理モジュール作成1改2]]の処理モジュールを先に作成して下さい
--5)まで、または6)まで
-[[フォーカス情報による可視化連動]]
--7)まで、または8)まで
-[[フォーカス情報による処理連動]]
*1)作成する処理モジュールの仕様を決めます [#d459e832]
-[モジュール名] BarGraph(棒グラフ)
-[入力] String型配列,int型配列
-[処理] int型配列で与えられる数字による棒グラフを作成,各棒の名前にString配列で与えられる文字を利用して,棒グラフを作成
-[出力] 作成した棒グラフを表示
-[モジュール名] AllKeywords(全キーワード)
-[入力] なし
-[処理] すべてのキーワードをマトリクス(格子状のセル内)に表示
-[出力] すべてのキーワードを一覧で表示
*2)SampleDisplay2.java を利用して,モジュール作成の準備をします [#a5103840]
-tetdmのフォルダ内の,moduleフォルダ内のVisualizationModuleフォルダ内にある,SampleDisplay2フォルダを,フォルダごとコピーします
-コピーしてできたフォルダの名前を,作成するモジュール名「BarGraph」に変更します
-コピーしてできたフォルダの名前を,作成するモジュール名「AllKeywords」に変更します
-コピーして作成したフォルダ内のファイル名を変更します
--SampleDisplay2.java -> BarGraph.java
--SampleDisplay2.txt -> BarGraph.txt (テキストファイルの中身も「棒グラフ」に変更します)
--SampleDisplay2.java -> AllKeywords.java
--SampleDisplay2.txt -> AllKeywords.txt (テキストファイルの中身も「全キーワード」に変更します)
--必要に応じて,モジュール完成後にREADME.txtを修正します
*3)BarGraph.java を編集し,プログラム作成の準備をします [#mf1b4fad]
*3)AllKeywords.java を編集し,プログラム作成の準備をします [#mf1b4fad]
-プログラム中の SampleDisplay2 と書かれている箇所をすべて BarGraph に変更します(コメント内を含め4カ所)
---// BarGraph.java Version 0.30
---package module.VisualizationModules.BarGraph;
---public class BarGraph extends VisualizationModule
---public BarGraph()
---// AllKeywords.java Version 0.30
---package module.VisualizationModules.AllKeywords;
---public class AllKeywords extends VisualizationModule
---public AllKeywords()
**コンストラクタの記述の修正 [#s00e5fc6]
-モジュールのIDを決め,コンストラクタ内のメソッド setModuleID の引数として与えます(今回は9977とします)
-モジュールのIDを決め,コンストラクタ内のメソッド setModuleID の引数として与えます(今回は9978とします)
public BarGraph()
public AllKeywords()
{
setModuleID(9977); // Set your module ID after you have got it
setModuleID(9978); // Set your module ID after you have got it
}
*4)一度コンパイルして,BarGraphモジュールの動作を確認します [#p88279f0]
*4)一度コンパイルして,AllKeywordsモジュールの動作を確認します [#p88279f0]
-make または ant コマンドでコンパイルします
-コンパイル後TETDMプログラムを起動して,いずれかのテキストを読み込みます
-[[処理モジュール作成1改2]]で作成した処理モジュール「名詞TOP10」があれば,これを選択して,楕円とテキストの一文目が表示されるのを確認して下さい
-「環境設定」で,処理ツール「マイニングなし」のチェックボックスをチェックして,つづけて右の可視化ツールの「全キーワード」のチェックボックスをチェックして,再び「環境設定」ボタンを押して戻ります.
-パネル上部のモジュール選択メニューで処理モジュールに「マイニングなし」を選び,つづけて「全キーワード」を可視化モジュールに選んで下さい.
-楕円とテキストの一文目が表示されるのを確認して下さい
(SampleDisplay2.java の処理)
*5)棒グラフを表示するプログラムを作成します [#p455d0cc]
-以下,5),6),7),8),9)のそれぞれの修正を終えた段階で,コンパイルして,動作を確認します
--7),8),9)の動作確認の方法は,10)を参照して下さい
**ファイルからの日本語の読み込み(今回は不要) [#q23a9bf6]
-もとからある下記変数とメソッドの内容は,インタフェース内に日本語を表示させたい場合は利用して下さい
-String outputInJapanese;
-String outputText;
-initializePanel()
-initializeData()
*5)キーワードの一覧を表示するプログラムを作成します [#p455d0cc]
**処理モジュールからデータを受け取り,棒グラフの表示に必要なデータを保存する変数を,グローバル領域で宣言します [#h8f8c1bf]
-一つのセルの最小サイズを100x20として,パネルの表示領域を分割します.
-パネルのサイズは,paintComponent() メソッド内の,getPanelSize() メソッドの呼び出しにより,変数 sizeX, sizeY に格納されます.
String names[];
int values[];
**セルのサイズに関する変数を,グローバル領域で宣言します [#h8f8c1bf]
**initializeData() 内で変数の初期化を行います(オーバーライド) [#f53ae334]
-棒グラフの表示に必要なデータがない場合にエラーを出さないようにします
int xNumber;(横のセルの数)
int yNumber;(縦のセルの数)
int cellX;(横のセルのサイズ)
int cellY;(縦のセルのサイズ)
**drawData() 内でセルの表示,およびキーワードを表示する処理を記述します [#f53ae334]
public void drawData(Graphics2D g2)
{
xNumber = sizeX/100;
yNumber = sizeY/20;
cellX = sizeX/xNumber;
cellY = sizeY/yNumber;
g2.setColor(Color.white);
for(int i=0;i<xNumber;i++)
g2.drawLine(cellX*i,0,cellX*i,sizeY);
for(int i=0;i<yNumber;i++)
g2.drawLine(0,cellY*i,sizeX,cellY*i);
g2.setFont(new Font("Dialog", Font.BOLD, 20));
for(int i=0;i<yNumber;i++)
for(int j=0;j<xNumber;j++)
{
if(i*xNumber+j == text.keywordNumber)
return;
g2.drawString(text.keyword[i*xNumber+j].word, j*cellX, (i+1)*cellY);
}
}
*6)マウスで触っているキーワードをハイライトする処理を追加します [#xc771a92]
**クラスの定義を修正します [#i512128c]
public class AllKeywords extends VisualizationModule implements MouseMotionListener
**マウスの座標,触っているキーワードに関する変数を,グローバル領域で宣言します [#h8f8c1bf]
int mousex;
int mousey;
int lastTouchedKeywordNumber;
int touchedKeywordNumber;
**初期化用のメソッドを用いて,マウスモーションリスナーを追加、変数を初期化します [#h8f8c1bf]
public void initializePanel()
{
addMouseMotionListener(this); //MouseMotionListener
}
public void initializeData()
{
names = new String[0];
values = new int[0];
lastTouchedKeywordNumber = -1;
touchedKeywordNumber = -1;
}
**処理モジュールからデータを受け取るメソッド,setDataを作成します(オーバーライド) [#w751b2ec]
-switch,case文を用いて作成します
-今回は case 11:を利用することとします
**マウスモーションリスナー用のメソッドをオーバーライドして,マウスで触ったキーワードを特定します [#z6f3a65e]
public void setData(int dataID, String data[])
//MouseMotionListener
public void mouseDragged(MouseEvent me){}
public void mouseMoved(MouseEvent me)
{
switch(dataID)
mouseX = me.getX();
mouseY = me.getY();
touchedKeywordNumber = (mouseX/cellX) + (mouseY/cellY) * xNumber;
if(touchedKeywordNumber != lastTouchedKeywordNumber)
{
case 11:
names = data;
break;
lastTouchedKeywordNumber = touchedKeywordNumber;
repaint();
}
}
public void setData(int dataID, int data[])
**マウスで触ったキーワードをハイライトする処理を追加します [#zfdd0416]
public void drawTouched(Graphics2D g2)
{
switch(dataID)
if(touchedKeywordNumber >= 0 && touchedKeywordNumber < text.keywordNumber)
{
case 11:
values = data;
break;
}
g2.setColor(Color.yellow);
g2.drawString(text.keyword[touchedKeywordNumber].word,
(touchedKeywordNumber%xNumber)*cellX, (touchedKeywordNumber/xNumber+1)*cellY );
}
}
//////////paint
public void paintComponent(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
getPanelSize();
drawBackground(g2); //background
drawData(g2);
drawTouched(g2);
}
**棒グラフの表示プログラムを作成します [#r905245e]
-displayOperations メソッドの case 0: が自動的に実行されますので,そこから呼び出されるところに記述します
-case 0:にrepaint(); を記述している場合は,paintComponent(Graphics g)から呼び出されるところに記述します
-今回は,可視化モジュール ScoreDist の内容をほぼ転用して作成しています
-スーパークラス内の変数,sizeX, sizeYには,表示できるパネルの縦と横のサイズが,メソッドgetPanelSize()が呼び出されるたびに格納されますので,この値を利用してパネルサイズの変更に対応できるようにします
*7)他の可視化モジュールと連動させるフォーカス連動処理を記述します [#cc50c247]
int width;
-mouseMoved() メソッドを修正します
-フォーカス情報のうち,メインキーワードにマウスで触ったキーワードをセットします
-これにより,メインキーワードを利用している他の可視化モジュールで,同時にハイライトと処理が行われるようになります.
//background
public void drawBackground(Graphics2D g2)
public void mouseMoved(MouseEvent me)
{
if(values.length == 0)
width = 0;
else
width = (sizeY-10)/values.length;
g2.setColor(Color.cyan);
g2.fillRect(0,0, sizeX, sizeY);
g2.setColor(Color.white);
g2.drawRect(10,10, sizeX-20, values.length*width);
mouseX = me.getX();
mouseY = me.getY();
touchedKeywordNumber = (mouseX/cellX) + (mouseY/cellY) * xNumber;
if(touchedKeywordNumber != lastTouchedKeywordNumber)
{
text.focus.mainFocusKeyword = touchedKeywordNumber;
repaintOthersByTouch();
lastTouchedKeywordNumber = touchedKeywordNumber;
repaint();
}
}
public void drawData(Graphics2D g2)
*8)他の可視化モジュールからの連動を可能にする処理を記述します [#if268982]
-displayOperations() メソッドを修正します
-フォーカス情報として格納されている メインキーワードを,マウスで触ったキーワードとして取り扱います
-マウスで触ったときに動作させるためには,case 4501 番に記述します
public void displayOperations(int optionNumber)
{
int max=1;
for(int i=0;i<values.length;i++)
if(values[i] > max)
max = values[i];
g2.setColor(Color.white);
for(int i=0;i<values.length;i++)
g2.fillRect(10,10+width*i, (int)((sizeX-20)*(double)values[i]/max), width);
g2.setFont(new Font("Dialog", Font.BOLD, 20));
g2.setColor(Color.black);
for(int i=0;i<names.length;i++)
if(i < values.length)
g2.drawString(names[i]+"("+values[i]+")", 20,(int)(10+width*i+width*0.5));
else
g2.drawString(names[i], 20,(int)(10+width*i+width*0.5));
switch(optionNumber)
{
case 0:
repaint();
break;
case 4501:
touchedKeywordNumber = text.focus.mainFocusKeyword;
repaint();
break;
}
}
//////////paint
public void paintComponent(Graphics g)
*9)他の処理モジュールと連動させるフォーカス連動処理を記述します [#xe88a9de]
-マウスリスナーを追加します
**クラスの定義を修正します [#i512128c]
public class AllKeywords extends VisualizationModule implements MouseMotionListener, MouseListener
**初期化用のメソッドを用いて,マウスリスナーを追加します [#h8f8c1bf]
public void initializePanel()
{
Graphics2D g2 = (Graphics2D)g;
getPanelSize();
drawBackground(g2); //background
if(values.length == 0)
return;
drawData(g2);
addMouseMotionListener(this); //MouseMotionListener
addMouseListener(this); //MouseListener
}
*6)コンパイルして動作を確認します [#q14f3f29]
-浦島太郎を入力し,「名詞TOP10」と組み合わせた場合,各名詞と頻度に応じた棒グラフ,および名詞と頻度が表示されます.
-統合環境のウインドウのサイズを変えても,パネル内の表示がサイズに応じて変更されることを確認します
**マウスリスナー用のメソッドをオーバーライドして,マウスをクリックしたときに連動する処理を記述します [#z6f3a65e]
//MouseListener
public void mousePressed(MouseEvent me){} //Press
public void mouseReleased(MouseEvent me){} //Release
public void mouseEntered(MouseEvent me){} //Enter an area
public void mouseExited(MouseEvent me){} //Exit an area
public void mouseClicked(MouseEvent me) //Click
{
if(touchedKeywordNumber >= 0 && touchedKeywordNumber < text.keywordNumber)
executeOthersByClick();
}
-処理モジュールの処理には時間がかかることがありますので,触ったときではなく,クリック時に連動させることが望ましいです.
*10)コンパイルして動作を確認します [#q14f3f29]
-5),6),7),8),9)のそれぞれの修正を終えた段階で,コンパイルして,動作を確認します
-5)で,キーワード一覧の表示,6)でマウスで触ったキーワードのハイライト,がなされることを確認します.
-7)の確認の方法
--他のパネルで,処理モジュール「マイニングなし」をセットした後,可視化モジュール「連動可視化」をセットします.
--「連動可視化」が表示されているパネル下部の「キーワード」の上の「メイン」をクリックします
--「全キーワード」モジュール内でキーワードを触ると,触ったキーワードが「連動可視化」内でも表示されます.
-8)の確認の方法
--他のパネルでも,処理モジュール「マイニングなし」をセットした後,可視化モジュール「全キーワード」をセットします.
--どちらの「全キーワード」モジュール内のキーワードをマウスで触っても,両方の「全キーワード」内で同じキーワードがハイライトされます
-9)の確認の方法
--「環境設定」で,処理モジュールに「フォーカスチェック」を追加して,再び「環境設定」ボタンを押して戻ります
--他のパネルの上部で,処理モジュール「フォーカスチェック」(可視化モジュールは「Htmlテキスト」になる)を選択します(入力テキストが表示されます)
--「全キーワード」モジュール内で,キーワードを触った状態でクリックすると,「フォーカスチェック」モジュールが動作して,テキスト中の選択したキーワードがハイライトされます.