slack

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

2009/12/16

XPages Tutorial Part 5: バナーにイメージを追加

Adding an Image to the right side of the banner {Original Source}

これまでアプリケーションに必要な基本のレイアウトについて見てきましたが、実際の内容についてはまだ何もしていません。以降のチュートリアルでレイアウトのそれぞれのセクションについて見ていくことにします。そして実際の内容を配置し必要なコードを付け加えていくことにします。最初のレイアウトはページの一番上に表示されるバナーです。

IBM が提供する OneUI を使用したアプリケーションを見てもらうとわかりますが、バナーの位置は常に一定の場所にあります。バナーの左側にはロゴ、右側にはログイン/ログアウトのリンクが配置されています。ログインされている場合はユーザーの名前が表示されます。これから開発するアプリケーションにもこのような Look & Feel を取り入れていきたいと思います。ログインやログアウトのリンクの表示に関してはサーバーサイドの JavaScript を使うことになるでしょう。では早速バーナーに左側に表示させるイメージから取り掛かることにします。

では早速「layout_banner」カスタムコントロールを開いてください。プレースホールダーにあるテキストを削除してスクリーン右側のコンテナコントロールパネルから「パネル」をドラッグアンドドロップします。パネルコントロールは特殊なコントロールの一つでパネルの中にその他のコントロールを配置することができます。貼付けが終わったらプロパティを見てください。パネルの名前はブランクのままにし、「すべてのプロパティ」のタブに行きます。このパネルに OneUI の 'lotusRightCorner' をスタイルクラスに割り当てます。この Web ページがユーザーのブラウザに
<div class="lotusRightCorner">
とレンダリングされ OneUI の CSS ファイルのクラスを参照するようになっています。
次にもう一つのパネルコントロールをその中に埋め込み 'lotusInner' というスタイルクラスを指定します。

ではバナーにイメージを追加するために、どこからかそのイメージファイルを入手する必要があります。私の例では OpenNTF のロゴを使用していますが皆さんは会社のロゴなどご自分でお好きなロゴを使用してみてください。ここで使用するロゴはアプリケーションにフィットする高さが 24 ピクセルで背景色が透明のものを使用するとよいでしょう。使用するロゴが決まったら「イメージリソース」にそのイメージファイルを取り込んでおきます。
次に「layout_Banner」カスタムコントロールを開き、イメージのコアコントロールをドラッグしてネストされた2番目のパネルに貼り付けます。プロパティを開きます

イメージコントロールには「lotusLogo」という名前を付けます。そしてイメージリソースのフォルダアイコンから取り込みたいイメージファイルを選択します。またユーザーがこのアイコン上にマウスをフーバーしたときに表示させるテキストをして代替テキストを指定します。
最後に「すべてのプロパティ」タブを開き、「lotusLogo」というスタイルクラスを指定します。
以上ができたら保存してブラウザで表示させてみましょう。


バナーにイメージを追加できたところで今度はバナーの右端に 2 つのアイテムを追加していきます。次回は OneUI のスタイルを利用して下の図のような水平に並ぶメニューリストを追加していこうと思います。

0 件のコメント:

コメントを投稿