slack

テクてく Lotus 技術者 Slack に参加しよう!

2010/01/07

XPages Tutorial Part 29 : 表の上にマウスを置いたときの反応を工夫する

Giving The Tables Some Feedback {Original Source}

アプリケーションとしてだんだん実態がともなってきましたが、エンドユーザーがより使いやすいようにすることができるいくつかの改善余地があります。現在ロケーションと氏名のリストをブラウザにレンダリングしている中でエンドユーザーが氏名の上をクリックして Person Details のページを出すのですが、どの人の名前のをクリックしたかを判別するのが難しい点です。
ページ上では下のようにプレーンの表だけが出ているだけです。.


これを解決する方法として「custom.css」に下のような CSS を後ほど追加することにします。
#phonebook tr:hover, .phonebook tr:hover { 
background-color:orange; 
color:#FFFFFF; 
cursor:pointer; 
} 
この CSS はマウスを表の上にポイントしたとき、どの人が選択されているかを背景色がオレンジ、テキストを白色に変えてどこをポイントしているかをはっきりさせることができます。

もし皆さん方のエンドユーザーが FireFox、Chrome、Opera、あるいは Internet Explorer 8 を使っていれば問題ありませんので、これ以降は読まなくても構わないと思います。

もしユーザーが、IE 6、IE 7 を使用している場合は以下の対応が必要となります。
なぜならブラウザが :hover のCSS を認識しないため単なるリンクだけになってしまうからです。対処方法としては JavaScript と Dojo を使ってマウスがそのエリア(行)に入った、出たをその行のスタイルクラスを使って置換える方法があります。

この対処方法を使う場合は「custom.css」に先ほどの CSS を追加し、:hover の部分を .over に変更してください。

次に「context_Location」カスタムコントロールを再び開き、ソースビューに切り替え繰り返しの中の表の行を探してください。下のようにアウトラインビューから指定すると分かりやすいと思います。表中の行を選択した状態でイベントタブを切り替えて onmouseover イベントへの処理を行います。
また、クライアントサイドであることも確認してください。

今回は dojo の機能を使うため言語は「カスタム」を選び、上のコードを入力してください。
この dojo.addClass には 2 つのパラメーターがあり、指定されたノード ID の class= の行に対して指定された CSS クラス(2つ目のパラメーターで今回は over)を追加するというファンクションです。

その他の部分で言えば、#{} は XPages の機能のひとつで、コードがブラウザに送られる前に XPages のランタイムによって #{} の中に囲まれているコンテンツが(今回の場合では「trow」) HTML の要素 ID に変換されます。XPages によってレンダリングされた HTML のソースを見ると次のように trow を確認することができると思います。

実際にはページがレンダリングされブラウザに表示される前にその ID の拡張プリフィックスになるのかは定かではありませんが、いづれにせよ #{id:trow} と指定したものはレンダリングの最中に正しい ID に置き換えられます。

では次に onmouseout イベントに over クラスを取り除くコードを記述します。
dojo.removeClass("#{id:trow}","over");

ではここまででカスタムコントロールを保存し、再度ブラウザに読み込んでマウスを移動させて色がオレンジ色に変わるか確認してください。

もし時間があればホームページの表に対しても同じように試みてください。

0 件のコメント:

コメントを投稿