« PHPを用いた入力データのエラーチェック処理 | ホーム | メディア技術基礎（ネットワーク・画像処理） 第2回課題 »

2011年6月19日

メディア技術基礎（ネットワーク・画像処理） 第1回課題

メディア技術基礎（ネットワーク・画像処理）の第１回課題について、こちらに提出させていただきます。

【▼目次】

  1. プログラム一覧
  2. プログラムの解説
  3. 実行画面
  4. クラス・インスタンス、イベントとイベントリスナーの概念解説
  5. おわりに

プログラム一覧

※PDFデータでも見ることが出来ます。
////////////////////////////////////////////////////////////////////////////////////////////////
//
//		▽インポートデータ
//
////////////////////////////////////////////////////////////////////////////////////////////////
import java.awt.*;
import java.awt.event.*;// ActionListenerのインポート
import javax.swing.*;//JFrameのインポート
import javax.swing.event.*;//HyperlinkListenerのインポート
import javax.swing.JButton;//JButtonのインポート
////////////////////////////////////////////////////////////////////////////////////////////////
//
//		▽HTMLViewerクラス
//
////////////////////////////////////////////////////////////////////////////////////////////////
public class HTMLViewer implements ActionListener, HyperlinkListener{
	
	JTextField addrField;//URLを入力してもらう部品
	JEditorPane htmlPane;//HTMLを表示してもらう部品
	JButton homeButton;//ホームボタン部品
	JButton sfcButton;//SFCボタン部品
	
	public HTMLViewer(){
		//部品としてのウィンドウを作成：newする JFrameという部品のコンストラクタを呼び出す。
		JFrame frame = new JFrame("Simple HTML Viewer");//JFrameのオブジェクトを作成する
			frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
			frame.addWindowListener(
					new WindowAdapter() {
						public void windowClosed(WindowEvent e){
							System.exit(0);
						}
					}
			);
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽URL入力フォームについて
		//
		////////////////////////////////////////////////////////////////////////////////////////
			
		addrField = new JTextField("http://");//テキストフィールドオブジェクトの作成。
			addrField.addActionListener(this);
			
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽Webページ表示画面について
		//	
		////////////////////////////////////////////////////////////////////////////////////////
			
		htmlPane = new JEditorPane();//JEditorPaneオブジェクトの作成
			htmlPane.setEditable(false);
			htmlPane.setContentType("text/html");
			htmlPane.addHyperlinkListener(this);//クリックされたら知らせるよう設定
		
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽ホームボタンとSFCボタンの作成と、ボタンを押した時に呼び出す仕事の設定
		//	
		////////////////////////////////////////////////////////////////////////////////////////
			
		homeButton = new JButton("HOME");//JButtonオブジェクトの作成
			homeButton.addActionListener(new HomeActionListener());
		sfcButton = new JButton("SFC");//JButtonオブジェクトの作成
			sfcButton.addActionListener(new sfcActionListener());
		
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽オブジェクトの描画、レイアウトなどについて
		//	
		////////////////////////////////////////////////////////////////////////////////////////
			
		
		JPanel topContainer = new JPanel();
			topContainer.setLayout(new GridLayout(1,2));
			topContainer.add(homeButton);
			topContainer.add(sfcButton);
		
		JPanel bottomContainer = new JPanel();
			bottomContainer.setLayout(new BorderLayout());
			bottomContainer.add(addrField, BorderLayout.NORTH);
			bottomContainer.add(new JScrollPane(htmlPane), BorderLayout.CENTER);
		
		frame.getContentPane().add(topContainer, BorderLayout.NORTH );
		frame.getContentPane().add(bottomContainer, BorderLayout.CENTER );
		
		frame.setSize(640,480);
		frame.setVisible(true);//ウィンドウが見えるようにセットする
	}
	
	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽URLを入力し、エンターキーが押されたら実行する仕事について
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public void actionPerformed(ActionEvent e){
		String url = addrField.getText();
		System.out.println(url);
		try{
			htmlPane.setPage(url);
		}catch(Exception err){
			System.out.println("無効なURLを指定していませんか？");
		}
	}

	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽ホームボタン、SFCボタンそれぞれが押されたら実行される仕事について
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public class HomeActionListener implements ActionListener {
        public void actionPerformed(ActionEvent e) {
        	String url = "http://yahoo.co.jp/";
        	System.out.println(url);
        	try{
    			htmlPane.setPage(url);
    		}catch(Exception err){
    			System.out.println("ページジャンプに失敗しました。");
    		}
        }
    }

	public class sfcActionListener implements ActionListener {
        public void actionPerformed(ActionEvent e) {
        	String url = "http://www.sfc.keio.ac.jp/";
        	System.out.println(url);
        	try{
    			htmlPane.setPage(url);
    		}catch(Exception err){
    			System.out.println("ページジャンプに失敗しました。");
    		}
        }
    }

	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽Webページ内のリンクについて
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public void hyperlinkUpdate(HyperlinkEvent e){
		if(e.getEventType() != HyperlinkEvent.EventType.ACTIVATED){
			return;
		}
			String url = e.getURL().toString();//どのリンクがクリックされたかを取得
			addrField.setText(url);//取得した文字列をurl変数に格納する
			try{
				htmlPane.setPage(url);
			}catch(Exception err){
				
			}
		
	}
	
	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽プログラムの実行処理
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public static void main(String[] args){//全てのプログラムが始まる所ところ
		HTMLViewer my_viewer = new HTMLViewer();//自分で設計した部品を１つ生成：newする
	}
}

プログラムの解説

▽ホームボタンとSFCボタンの作成
まず、ソース上部でJButtonクラスをインポートします。 
import javax.swing.JButton;
そして、HTMLViewerクラスのはじめに、新たにつくるホームボタンと、SFCボタンの宣言を行います。 
public class HTMLViewer implements ActionListener, HyperlinkListener{
        JButton homeButton;//ホームボタン部品
        JButton sfcButton;//SFCボタン部品
宣言を行ったら、JButtonをnewして、二つのボタンを作成します。
青字の部分に、文字列を指定することで、その文字列をボタンに描画することができます。 
homeButton = new JButton("HOME");//JButtonオブジェクトの作成
sfcButton = new JButton("SFC");//JButtonオブジェクトの作成

▽ボタンをクリックしたときのイベントの設定
ボタンを押したら、指定したURLにアクセスしてページが表示されるように設定をします。
先ほど設定したhomeButton,sfcButtonに、addActionListenerメソッド追加し、ボタンがActionEventを受け取ることができるようにします。
homeButton.addActionListener(new HomeActionListener());
sfcButton.addActionListener(new sfcActionListener());
これで、ホームボタンを押した時には、HomeActionListener()を、SFCボタンを押した時には、sfcActionListener()を呼び出すことが出来るようになったので、呼び出すクラスをそれぞれ定義しておきます。
public class HomeActionListener implements ActionListener {
        public void actionPerformed(ActionEvent e) {
        	String url = "http://yahoo.co.jp/";
        	System.out.println(url);
        	try{
    			htmlPane.setPage(url);
    		}catch(Exception err){
    			System.out.println("ページジャンプに失敗しました。");
    		}
        }
}
同様に、SFCボタンには、urlをSFCのホームページのURLを渡して表示させるようにしました。

▽オブジェクトの描画、レイアウトなどについて
次に、ボタンの描画、レイアウトについてのプログラムについて解説します。
JPanelオブジェクトを２つ作成し、
１つはボタンをグリッドレイアウトで横並びに２つ配置するコンテナ、
もう１つは、URL入力フォームとページを描画するフレームを配置するコンテナです。
配置の概念図（これで伝わるかは微妙ですが。。。）は以下のようになります。

lauout.jpg 
JPanel topContainer = new JPanel();
	topContainer.setLayout(new GridLayout(1,2));
	topContainer.add(homeButton);
	topContainer.add(sfcButton);
		
JPanel bottomContainer = new JPanel();
	bottomContainer.setLayout(new BorderLayout());
	bottomContainer.add(addrField, BorderLayout.NORTH);
	bottomContainer.add(new JScrollPane(htmlPane), BorderLayout.CENTER);
topContainerではGridLayoutを用いました。1行2列のレイアウトで、２つのボタンを配置しました。
bottomContainerではBorderLayoutを用いました。NORTHにURL入力フォームを、CENTERにページ表示フレームを配置しました。

最後に、topContainerと、bottomContainerをContentPaneオブジェクトに配置します。
frame.getContentPane().add(topContainer, BorderLayout.NORTH );
frame.getContentPane().add(bottomContainer, BorderLayout.CENTER );
これで、ボタン、URL入力フォーム、ページ表示画面の描画、レイアウトを設定しました。

実行画面

スクリーンショット（2011-06-19 17.18.48）.png
▲初期実行画面
スクリーンショット（2011-06-19 17.20.53）.png
▲ホームボタン実行画面
スクリーンショット（2011-06-19 17.20.57）.png
▲SFCボタン実行画面
スクリーンショット（2011-06-19 17.21.08）.png
▲URL入力&エンターキー実行画面

クラス・インスタンス、イベントとイベントリスナーの概念解説

▼クラス・インスタンスの概念解説
クラスは、部品の設計図、インスタンスは、その設計図を基に作られた実際の部品を指します。インスタンスを作成する際には、引数を設定することが出来、それによって同じクラスから作成したインスタンスでも、中身のデータを異なるものにすることができます。
※本プログラムでは、ボタンを押された際の実行イベントについてクラスをボタンの数だけ作成しました。しかし、これを一つにして、インスタンス生成時に引数を渡すことで異なるURLを指定することが出来たと思います。

▼イベントとイベントリスナーの概念解説
イベントは、
  • ボタンが押された
  • エンターキーが押された
  • 文字列が入力された
    • etc...
何かが起きることを言います。

イベントリスナーは、あるイベントが起こった時にその内容を受け取るオブジェクトです。
※まだ、マウスイベントやテキストイベントについては、どのように動作するのかイメージがつかめていません。

おわりに

特に骨が折れたのは、作成したオブジェクトをどのように描画、レイアウトをするかでした。
JPanelオブジェクトを使うことになったのですが、JPanelとcontentPaneの概念を理解するのにまず苦戦しました。borderLayoutだけで、描画しようとするとどうしてもレイアウトが微妙なものになってしまうので、JPanelを使いました。borderLayout以外にもgridLayoutを用いたり組み合わせることで、なんとか自分の中で納得のいく描画、レイアウトを実現できました。
イベント部分の実装については、これがベストのプログラムだとは思っていません。クラスに引数をうまく渡すことでもっとシンプルにボタンを押した際のイベントを実装できたと思います。

HAKASHUN (15:36)

タグ: , ,

HAKASHUNはこれを読んで勉強しました。

検索

カテゴリ

月別 アーカイブ

OpenID対応しています OpenIDについて

このブログ記事について

このページは、HAKASHUNが2011年6月19日 15:36に書いたブログ記事です。

ひとつ前のブログ記事は「PHPを用いた入力データのエラーチェック処理」です。

次のブログ記事は「メディア技術基礎（ネットワーク・画像処理） 第2回課題」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。