2009/12/21

XPages Tutorial Part 10: フッターの完成

Finalizing The Footer {Original Source}

電話帳アプリケーションの本題に取りかかる前に、ページフッターを仕上げておきたいと思います。OneUI のガイドラインでは、フッターの部分にはオンラインサポートやコンタクト情報などの場所として使われるとしていますが、このチュートリアルではもっとシンプルなものでいいのではないかと思います。というのはこのアプリケーションは最後には OpenNTF にリリースされるので「An OpenNTF project by Declan Lynch」とだけテキストを付け、 OpenNTF の website へのリンクを付けるだけにしたいと思います。

では、「layout_Footer」カスタムコントロールを開き、いくつかのパネルを追加していきたいと思います。
例によって、最初のパネルは「lotusRightCorner」というスタイルクラスを指定したもの、2 番目は「lotusInner」のスタイルクラスを指定したパネルで最初のパネルの中にネストさせます。そのInnerパネルの中にテキストを書き込みます。
では保存して XPage をプリビューしてみましょう。

これでもよさそうですが、追加したテキストを右側に持っていきたいと思います。「lotusRight」というスタイルクラスはスクリーンの右端に配置する CSS としてあらかじめ用意されています。
テキストの部分だけを選択してすべてのプロパティでこのスタイルを追加します。
ソースビューでも確認できますので、下のように記述されたか確認してください。

保存して Xpage をプリビューすると下のように表示されるか確認してください。


最後に OpenNTF という言葉にリンクを付けます。コアコントロールからリンクをドラッグアンドドロップし「OpenNTF」という言葉に上書きするような形でそのリンクを貼付けます。リンクを貼付けたらプロパティを参照してラベルに「OpenNTF」、URLに「http://www.openntf.org」と指定します。シンプルな固定のリンクなので計算のような処理は必要ありません。
この時点で保存しプリビューすると変な形で表示されると思います。設定したリンクはスクリーンの左側に表示されてしまっていると思います。これはそのリンクに「lotusRight」のスタイルクラスが指定していなかったからです。


その理由は SPAN がリンクの前と後の 2 つの異なるパートに分解してしまったためとリンクにはスタイルクラスが指定されていなかったことに起因します。これを修正する簡単な方法は下のスクリーンでハイライトしている SPAN が Designer によって自動的に追加されてしまったのでその部分を取り除くことです。リンクのタイトルの周りのスペースを入れる必要があります。

コードの修正が終わったら保存してプリビューしてください。そうすると今回は下のように表示されるはずです。

次回はフォームを使用してXPagesに表示されるデータを取り扱っていきたいと思います。

0 件のコメント:

コメントを投稿