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

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


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

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

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

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

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

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

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

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

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

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

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

	int xNumber;(横のセルの数)
	int yNumber;(縦のセルの数)
	int cellX;(横のセルのサイズ)
	int cellY;(縦のセルのサイズ)

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

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

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

	public class AllKeywords extends VisualizationModule implements MouseMotionListener

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

	int mousex;
	int mousey;
	int mouseX;
	int mouseY;
	int lastTouchedKeywordNumber;
	int touchedKeywordNumber;

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

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


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

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

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

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

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

-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)他の可視化モジュールからの連動を可能にする処理を記述します [#pd7d2fcc]

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

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

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

		}		
	}

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

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

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

	public class AllKeywords extends VisualizationModule implements MouseMotionListener, MouseListener

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

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

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

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

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS