DashCode Public Beta - Dashboard de OTN-J #10 Tweet

前回のつづきです。
ひとまず、今回で、Dashboard de OTN-J　widgetは完成です。

●　Dashboard de OTN-J widgetでは、OTN-Jのforum全体のfeedだけを読込む widgetにしてあります。

以下のfeed URL固定です。
feed://otn.oracle.co.jp/forum/rss/rssmessages.jspa?categoryID=2

ただし、アプリケーションパッケージに含まれる、attributes.js　にfeedのURLが定義されているので直接編集すれば変更することは可能です。（OTN-JのRSS2.0を対象にしています。また、rdfには元のコードが未対応で、atomも一部の情報は表示できません。）
feed urlを変更可能にしたり、atom対応など、OTN-J以外のfeedも表示するなどの version upは行うかもしれませんが、気分次第です。

以下、今回追加したコードの操作確認の模様。赤丸部分でマウスカーソルの形状変化させている。また、裏面では、URLの文字色を赤から黄色に変化させ、クリックすると、当ブログのトップページを開くようにしてある。（ハイパーリンクにすれば簡単なのだが、あえて、そのようにしてある。）

　　
　　

dashboard_de_otn.jsに追加したコード（一部抜粋）。
追加したコードは、マウスカーソル形状を変更するコードや、テキストの色を変更するコード、そして、裏面にあるblogのURLをクリックした際、該当blogをブラウザで開くといった細かい操作を行うためのコードを追加してある。

．．．．中略．．．．

/*****************************************************************
* added by mac de oracle  @2007/4/28                            */

function swapCursor(event) 
{
	if (event.type == "mouseover") {
		document.body.style.cursor = "pointer";
	} else if (event.type == "mouseout") {
		document.body.style.cursor = "auto";
	}
}

function swapTextColor(event)
{
	if (event.type == "mouseover") {
		event.currentTarget.style.color = "rgb(255, 255, 0)";
	} else if (event.type == "mouseout") {
		event.currentTarget.style.color = "rgb(255, 0, 0)";
	}
}

function addMouseCursorListeners(element, callback)
{
	element.addEventListener("mouseover", callback, true);
	element.addEventListener("mouseout", callback, true);
}

function openMyBlog()
{
	widget.openURL(this.innerText);
}

function addClickListeners(element, callback)
{
	element.addEventListener("click", callback, true);
}

/*	added by mac de oracle  @2007/4/28  
******************************************************************/

．．．．中略．．．．

function setHandlers()
{
	var backOver = new Image();
	backOver.src = "Images/backButton_over.png";
	var backDown = new Image();
	backDown.src = "Images/backButton_down.png";
	var forwardOver = new Image();
	forwardOver.src = "Images/forwardButton_over.png";
	var forwardDown = new Image();
	forwardDown.src = "Images/forwardButton_down.png";

	var backButton = document.getElementById("backButton");
	if (backButton) {
		addHilightListeners(backButton, backOver, backDown);
		
		// added by mac de oracle @2007/4/28
		addMouseCursorListeners(backButton, swapCursor);
	}

	var forwardButton = document.getElementById("forwardButton");
	if (forwardButton) {
		addHilightListeners(forwardButton, forwardOver, forwardDown);
		
		// added by mac de oracle @2007/4/28
		addMouseCursorListeners(forwardButton, swapCursor);
	}


		/****************************************************************
	***  added by mac de oracle @2007/4/28                       ***/
		
	var blogURLText = document.getElementById("myBlogURLText");
	if (blogURLText) {
		addMouseCursorListeners(blogURLText, swapCursor);
		addClickListeners(blogURLText, openMyBlog);
		addMouseCursorListeners(blogURLText, swapTextColor);
	}
	
	var done = document.getElementById("done");
	if (done) {
		addMouseCursorListeners(done, swapCursor);
	}
		
	var refreshButton = document.getElementById("refreshButton");
	if (refreshButton) {
		addMouseCursorListeners(refreshButton, swapCursor);
	}
	
	var info = document.getElementById("info");
	if (info) {
		addMouseCursorListeners(info, swapCursor);
	}
	
	/*** added by mac de oracle @2007/4/28                       
	***************************************************************/

}

ざっとこんなところ。。 javascriptのコードをこんなに書いたのも久々。。仕事以外では。。
ただ、javascriptのデバッガを搭載しているDashCodeのおかげで javascriptを久々に書いた
私でもそれほど苦労しなかった。。。便利になってきましたねぇ。ほんとうに！

ということで、ダウンロードはこちらから。dashboard_de_otn.wdgt.zip (216.5K)

参考として、DashCodeのテンプレートに手を加えていないオリジナルのWidgetもダウンロードして比べてみてください。 ダウンロード templete.wdgt.zip (119.7K)