可視化モジュール作成２(バージョン0.43まで)

チュートリアルで試せる内容 †

• 可視化インタフェースモジュールの作り方?
• パネルサイズに応じた表示更新
  • 5)まで、または6)まで
• フォーカス情報による可視化連動
  • 7)まで、または8)まで
• フォーカス情報による処理連動

1)作成する処理モジュールの仕様を決めます †

• [モジュール名] AllKeywords（全キーワード）
• [入力] なし
• [処理] すべてのキーワードをマトリクス（格子状のセル内）に表示
• [出力] すべてのキーワードを一覧で表示

2)SampleDisplay2.java を利用して，モジュール作成の準備をします †

• tetdmのフォルダ内の，moduleフォルダ内のVisualizationModuleフォルダ内にある，SampleDisplay2フォルダを，フォルダごとコピーします
• コピーしてできたフォルダの名前を，作成するモジュール名「AllKeywords」に変更します
• コピーして作成したフォルダ内のファイル名を変更します
  • SampleDisplay2.java -> AllKeywords.java
  • SampleDisplay2.txt -> AllKeywords.txt (テキストファイルの中身も「全キーワード」に変更します)
  • 必要に応じて，モジュール完成後にREADME.txtを修正します

3)AllKeywords.java を編集し，プログラム作成の準備をします †

• プログラム中の SampleDisplay2 と書かれている箇所をすべて BarGraph に変更します（コメント内を含め4カ所）
  • // AllKeywords.java Version 0.30
  • package module.VisualizationModules.AllKeywords;
  • public class AllKeywords extends VisualizationModule
  • public AllKeywords()

コンストラクタの記述の修正 †

• モジュールのIDを決め，コンストラクタ内のメソッド setModuleID の引数として与えます（今回は9978とします）

	public AllKeywords()
	{
		setModuleID(9978);	// Set your module ID after you have got it	
	}

4)一度コンパイルして，AllKeywordsモジュールの動作を確認します †

• make または ant コマンドでコンパイルします
• コンパイル後TETDMプログラムを起動して，いずれかのテキストを読み込みます
• 環境設定の「ツール設定」で，処理ツール「マイニングなし」のチェックボックスをチェックして，つづけて右の可視化ツールの「全キーワード」のチェックボックスをチェックして，「チェックしたツールをメニューに追加」ボタンを押した後，「設定終了」ボタンを押して戻ります．
• パネル上部のモジュール選択メニューで処理モジュールに「マイニングなし」を選び，つづけて「全キーワード」を可視化モジュールに選んで下さい．
• 楕円とテキストの一文目が表示されるのを確認して下さい （SampleDisplay2.java の処理）

• 以下，5),6),7),8),9)のそれぞれの修正を終えた段階で，コンパイルして，動作を確認します
  • 7),8),9)の動作確認の方法は，10)を参照して下さい

5)キーワードの一覧を表示するプログラムを作成します †

• 一つのセルの最小サイズを100x20として，パネルの表示領域を分割します．
• パネルのサイズは，paintComponent() メソッド内の，getPanelSize() メソッドの呼び出しにより，変数 sizeX, sizeY に格納されます．

セルのサイズに関する変数を，グローバル領域で宣言します †

	int xNumber;（横のセルの数）
	int yNumber;（縦のセルの数）
	int cellX;（横のセルのサイズ）
	int cellY;（縦のセルのサイズ）

drawData() 内でセルの表示，およびキーワードを表示する処理を記述します †

	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)マウスで触っているキーワードをハイライトする処理を追加します †

クラスの定義を修正します †

	public class AllKeywords extends VisualizationModule implements MouseMotionListener

マウスの座標，触っているキーワードに関する変数を，グローバル領域で宣言します †

	int mouseX;
	int mouseY;
	int lastTouchedKeywordNumber;
	int touchedKeywordNumber;

初期化用のメソッドを用いて，マウスモーションリスナーを追加、変数を初期化します †

	public void initializePanel()
	{
		addMouseMotionListener(this);	//MouseMotionListener	
	}

	public void initializeData()
	{
		lastTouchedKeywordNumber = -1;
		touchedKeywordNumber = -1;
	}

マウスモーションリスナー用のメソッドをオーバーライドして，マウスで触ったキーワードを特定します †

	//MouseMotionListener
	public void mouseDragged(MouseEvent me){}	
	public void mouseMoved(MouseEvent me)
	{
		mouseX = me.getX();
		mouseY = me.getY();
	
		touchedKeywordNumber = (mouseX/cellX) + (mouseY/cellY) * xNumber;
	
		if(touchedKeywordNumber != lastTouchedKeywordNumber)
		{
			lastTouchedKeywordNumber = touchedKeywordNumber;
			repaint();
		}
	}

マウスで触ったキーワードをハイライトする処理を追加します †

	public void drawTouched(Graphics2D g2)
	{
		if(touchedKeywordNumber >= 0 && touchedKeywordNumber < text.keywordNumber)
		{
			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);
	}

7)他の可視化モジュールと連動させるフォーカス連動処理を記述します †

• mouseMoved() メソッドを修正します
• フォーカス情報のうち，メインキーワードにマウスで触ったキーワードをセットします
• これにより，メインキーワードを利用している他の可視化モジュールで，同時にハイライトと処理が行われるようになります．

	public void mouseMoved(MouseEvent me)
	{
		mouseX = me.getX();
		mouseY = me.getY();
	
		touchedKeywordNumber = (mouseX/cellX) + (mouseY/cellY) * xNumber;
	
		if(touchedKeywordNumber != lastTouchedKeywordNumber)
		{

			text.focus.mainFocusKeyword = touchedKeywordNumber;
			repaintOthersByTouch();

			lastTouchedKeywordNumber = touchedKeywordNumber;
			repaint();
		}
	}

8)他の可視化モジュールからの連動を可能にする処理を記述します †

• displayOperations() メソッドを修正します
• フォーカス情報として格納されている メインキーワードを，マウスで触ったキーワードとして取り扱います
• マウスで触ったときに動作させるためには，case 4501 番に記述します

	public void displayOperations(int optionNumber)
	{
		switch(optionNumber)
		{
			case 0:
				repaint();
				break;

			case 4501:
				touchedKeywordNumber = text.focus.mainFocusKeyword;
				repaint();
				break;

		}		
	}

9)他の処理モジュールと連動させるフォーカス連動処理を記述します †

• マウスリスナーを追加します

クラスの定義を修正します †

	public class AllKeywords extends VisualizationModule implements MouseMotionListener, MouseListener

初期化用のメソッドを用いて，マウスリスナーを追加します †

	public void initializePanel()
	{
		addMouseMotionListener(this);	//MouseMotionListener
		addMouseListener(this);	//MouseListener		
	}

マウスリスナー用のメソッドをオーバーライドして，マウスをクリックしたときに連動する処理を記述します †

	//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)コンパイルして動作を確認します †

• 5),6),7),8),9)のそれぞれの修正を終えた段階で，コンパイルして，動作を確認します
• 5)で，キーワード一覧の表示，6)でマウスで触ったキーワードのハイライト，がなされることを確認します．
• 7)の確認の方法
  • 他のパネルで，処理モジュール「マイニングなし」をセットした後，可視化モジュール「連動可視化」をセットします．
  • 「連動可視化」が表示されているパネル下部の「キーワード」の上の「メイン」をクリックします
  • 「全キーワード」モジュール内でキーワードを触ると，触ったキーワードが「連動可視化」内でも表示されます．
• 8)の確認の方法
  • 他のパネルでも，処理モジュール「マイニングなし」をセットした後，可視化モジュール「全キーワード」をセットします．
  • どちらの「全キーワード」モジュール内のキーワードをマウスで触っても，両方の「全キーワード」内で同じキーワードがハイライトされます
• 9)の確認の方法
  • 環境設定の「ツール設定」で，処理ツールの「フォーカスチェック」をチェックして追加して，「チェックしたツールをメニューに追加」ボタンを押した後，「設定終了」ボタンを押して戻ります．
  • 他のパネルの上部で，処理モジュール「フォーカスチェック」（可視化モジュールは「Htmlテキスト」になる）を選択します（入力テキストが表示されます）
  • 「全キーワード」モジュール内で，キーワードを触った状態でクリックすると，「フォーカスチェック」モジュールが動作して，テキスト中の選択したキーワードがハイライトされます．