« Mac De Oracle : Oracleのバージョン確認(FAQ) #6 | トップページ | DashCodeのjavascript debugger »

2007年5月 1日 (火)

DashCode Public Beta - Dashboard de OTN-J #10

前回のつづきです。
ひとまず、今回で、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の文字色を赤から黄色に変化させ、クリックすると、当ブログのトップページを開くようにしてある。(ハイパーリンクにすれば簡単なのだが、あえて、そのようにしてある。)

10_1 10_2 10_3
10_4 10_5 10_6

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)

|

トラックバック


この記事へのトラックバック一覧です: DashCode Public Beta - Dashboard de OTN-J #10:

コメント

コメントを書く