2009/12/24

XPages Tutorial Part 16: ホームページの見た目を改善

A Better Homepage Look {Original Source}


前回は「content_HomePage」カスタムコントロールにビューコントロールを追加しました。そしてアプリケーション内のビューからその内容を表示させることをやってきました。
単純なビューでそれを表示させるだけであればこの方法でも良いかもしれませんが、繰り返しコントロールを使ってビューコントロールの代わりをさせることにたくさんの利点があると思います。

では初めに、ビューコントロールを削除することから始めましょう。
設計タブで視覚的に表示されているものだけでなく、コードもすべて取り除くことが大事です。
取り除いた後は、データソースの定義、div のセクション、「lotusContent」クラスの指定されたパネルだけの定義だけです。

確認できたら、まず最初に繰り返しコントロールをドラッグアンドドロップします。

その後に、繰り返しコントロールの中に表コントロールをドラッグアンドドロップします。
どのような表にしたいかを訊いてくるダイアログボックスが表示されるはずです。

2行3列の指定をし、その他の項目はそのままで OK ボタンを押します。
ここで繰り返しコントロールのプロパティに切り替え、サイドバーでデータソースを指定して以前行ったことと同じことを行います。
コレクション名と索引名の指定を下のように行ってください。

表に関して、ヘッダーの部分はテキストを下のように直接入力してください。
そして、2行目に計算結果フィールドをドラッグアンドドロップで 3 つそれぞれの列に追加します。
追加したあとは下のようになります。

サイドバーのところで行った指定方法と同じやり方をここでも行っていきます。
JavaScript を選び、rowData.getColumnValue("ビューの列名") といった感じで表示させたい列の指定を行います。

この時点で保存をし、ブラウザの再読み込みをすると下のようなページが表示されるはずです。


もうお分かりだと思いますが、何かがおかしいと気付きます。表全体が繰り返しコントロールの中にあるためヘッダーとデータがそれぞれ繰り返し表示されています。
これを修正するためには、ソースを直接変更しなければなりません。表の最初の行であるヘッダー部分を繰り返しコントロールの外に出し、表の2行目を繰り返しコントロールの中に入れます。
ここで注意しなければならないのは表の始まりと終わりの HTML の記述です。
下のコードとまったく同じになるように修正を加えてください。


あともう一つだけ大変重要なことがあります。それは繰り返しコントロールの名前を削除することです。
もしこれを行わないと表の中に DIV が表示されるようになり CSS によって表示が壊れてしまいます。名前を削除するにはソースタブのコードから「id="repeat1"」を探し出しその部分を削除してください。

完了したら保存をし、ブラウザでページを再読み込みしてみてください。
下のようなページが表示されるはずです。


次回はカスタムの CSS を作成して、この表への適用をしていきます。

1 件のコメント:

  1. 古い記事へのコメントで申し訳ありません。

    >あともう一つだけ大変重要なことがあります。それは繰り返しコントロールの名前を削除することです。
    > もしこれを行わないと表の中に DIV が表示されるようになり CSS によって表示が壊れてしまいます。
    >名前を削除するにはソースタブのコードから「id="repeat1"」を探し出しその部分を削除してください。

    この意味が分かりません。。。

    返信削除