*チュートリアルで試せる内容 [#padef05a]

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


*1)作成する可視化ツールの仕様を決めます [#j8cc5223]
-[ツール名] AllKeywords（全キーワード）
-[入力] なし
-[処理] すべてのキーワードをマトリクス（格子状のセル内）に表示
-[出力] すべてのキーワードを一覧で表示

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

*3)AllKeywords.java を編集し，プログラム作成の準備をします [#tca3ba42]
-プログラム中の SampleDisplay2 と書かれている箇所をすべて AllKeywords に変更します（コメント内を含め4カ所）
---// AllKeywords.java Version 0.30 
---package module.VisualizationModules.AllKeywords;
---public class AllKeywords extends VisualizationModule
---public AllKeywords()

**コンストラクタの記述の修正 [#v0c78042]

-ツールのIDを決め，コンストラクタ内のメソッド setModuleID の引数として与えます（今回は9978とします）
-int型の配列，dataNumbersの値を初期化して，受け取るデータ型とその数を指定します．
--今回は，受け取るデータはありません．
---&color(red){setToolType(1); [[ツールタイプ]]はシンプルになります．};

	public AllKeywords()
	{
		setModuleID(9978);	// Set your module ID after you have got it
		dataNumbers = new int[]{0,0,0,0,    // b,i,d,S
			0,0,0,0,    // bA,iA,dA,SA
			0,0,0};     // bA2,iA2,dA2
		setToolType(1);	
	}

*4)一度コンパイルして，AllKeywordsツールの動作を確認します [#h348e8b0]
-make または ant コマンドでコンパイルします
-コンパイル後TETDMプログラムを起動して，いずれかのテキストを読み込みます
-パネル上部の「ツール選択」で，処理ツール「マイニングなし」をクリックして，つづけて右の可視化ツールの「全キーワード」をクリックして、ツールを選択します．
-楕円とテキストの一文目が表示されるのを確認して下さい
（SampleDisplay2.java の処理）

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

*5)キーワードの一覧を表示するプログラムを作成します [#qa24e39d]

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

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

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

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

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

**クラスの定義を修正します [#pf0f09b3]

	public class AllKeywords extends VisualizationModule implements MouseMotionListener

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

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

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

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


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

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

	//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();
		}
	}

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

	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)他の可視化ツールと連動させるフォーカス連動処理を記述します [#j08f67e1]

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

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

			&color(red){setMainFocusKeyword(touchedKeywordNumber, true);};
			&color(red){repaintOthersByFocus();};
			setMainFocusKeyword(touchedKeywordNumber, true);
			repaintOthersByFocus();

			lastTouchedKeywordNumber = touchedKeywordNumber;
			repaint();
		}
	}

*8)他の可視化ツールからの連動を可能にする処理を記述します [#mc4c34cc]

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

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

			case 4501:
				touchedKeywordNumber = &color(red){getMainFocusKeyword();};
				touchedKeywordNumber = getMainFocusKeyword();
				repaint();
				break;

		}		
	}

*9)他の処理ツールと連動させるフォーカス連動処理を記述します [#a81c0457]

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

**クラスの定義を修正します [#gfcedcb5]

	public class AllKeywords extends VisualizationModule implements MouseMotionListener, MouseListener

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

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

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

	//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)
			&color(red){executeOthersByFocus();};
			executeOthersByFocus();
	}

-処理ツールの処理には時間がかかることがありますので，触ったときではなく，クリック時に連動させることが望ましいです．

*10)コンパイルして動作を確認します [#rbeb2189]
-5),6),7),8),9)のそれぞれの修正を終えた段階で，コンパイルして，動作を確認します
-5)で，キーワード一覧の表示，6)でマウスで触ったキーワードのハイライト，がなされることを確認します．
-7)の確認の方法
--他のパネルの上部の「ツール選択」ボタンを押して，処理ツール「なし」，可視化ツール「連動可視化」をセットします．
--「連動可視化」が表示されているパネル下部の「キーワード」の上の「メイン」をクリックします
--「全キーワード」ツール内でキーワードを触ると，触ったキーワードが「連動可視化」内でも表示されます．
-8)の確認の方法
--他のパネルでも，処理ツール「なし」，可視化ツール「全キーワード」をセットします．
--どちらの「全キーワード」ツール内のキーワードをマウスで触っても，両方の「全キーワード」内で同じキーワードがハイライトされます
-9)の確認の方法
--他のパネルで，処理ツール「フォーカスチェック」、可視化ツール「Htmlテキスト」をセットします．（入力テキストが表示されます）
--「全キーワード」ツール内で，キーワードを触った状態でクリックすると，「フォーカスチェック」ツールが動作して，テキスト中の選択したキーワードがハイライトされます．
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS