slack

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

2009/12/21

XPages Tutorial Part 8: アプリケーションタイトルを表示する

Adding The Application Title {Original Source}

前回まではアプリケーションの上部に表示されるバナーを完成させました。
今回はアプリケーションのタイトルを表示させるタイトルバーについて見ていきます。
アプリケーションのタイトルを直接ハードコーディングしてもよいのですが、このアプリケーションは後で再利用できるようにすることが目的なので、直接ハードコーディングしたりするのはあまりよい考えではなさそうです。

バナー作成の Part 5 { Link } で習得したのと同じ方法でテキストの書かれている部分を削除し 2 つのパネルをドラッグアンドドロップで貼り付けます。最初のひとつは 'lotusRightCorner' というスタイルクラスを指定し、 2 詰めのパネルは、最初のパネルからネストした形で貼り付け、'lotusInner' というスタイルクラスを指定します。指定が終わったら保存し、 XPage をプリビューしてください。

このタイトルバーは波型のグラフィカルな背景になったと思います。
OneUI のテーマのお陰でパネルに対してスタイルクラスを指定するだけで必要な CSS と HTML が適用されこのような形に見えます。
'lotusInner' のスタイルクラスが指定されているこのパネルは 'lotusTitleBar' というスタイルをもつ div の中にあり、グラフィカルな背景を表示するようになっています。
実際には defaulttheme.css の css には次のように定義されています。
#lotusTitleBar .lotusInner, .lotusTitleBar .lotusInner {
background-image:url(./images/titlebarLeft.png);
}

パネルが正しく設定できたと思いますので、次はアプリケーションの名前を取得する 2 つの方法ついて見ていきます。

簡単なほうから行きたいと思います。データベースにはデータベースタイトルがあるので式言語の @DbTitle やロータススクリプトの NotesDatabase.GetTitle() と同じようなものを使ってタイトルバーに名前を表示させてみましょう。
パネルコントロールの中に計算結果フィールドコントロールをドラッグアンドドロップし、そのプロパティを開いてください。

まずそのコントロールの名前に 'mainTitle' という名前を付け、値プロパティタブに切り替えます。単純バインディングデータはここでは無視し、次の JavaScript にチェックをし、「database.getTitle()」と入力します。入力後保存して XPage をプリビューしてみてください。
データベースタイトルは表示されますが、まだこのままでは見た目がよくありません。
そこで OneUI のスタイルに従い、下のコードを参考にしながら <h2></h2>で計算結果フィールドを囲みます。

保存してから XPage をプリビューすると以下のように表示されるはずです。

次回はプロフィール文書の値を取得し、それをタイトルバーに表示されていきます。

0 件のコメント:

コメントを投稿