今回は、XPagesで簡単に作成できるカード型UIをご紹介します。

カード型UIとは？
「カード」とは、小さな長方形でその中に詳細な情報への入り口となる画像やテキストが配置されたデザインのことをいいます。
カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にとても役立ちます。

まずは完成イメージをご覧ください。

1.フォームとビューの準備
フォームを準備します。

筆者の方では、以下のフィールドを用意しました。

No ：テキスト 編集可能 No
リンク先名：テキスト 編集可能 Title
URL ：テキスト 編集可能 Urls
詳細 ：テキスト 編集可能 Memo
画像 ：リッチテキスト 編集可能 Body

ビューを準備します。
筆者の方では、以下のビューを用意しました。

1列目：No 降順
2列目：リンク先名
3列目：URL

 

 

 

 

 

2.XPageの作成

新規XPageを作成します。
ここではわかりやすく名称は xRepeat などとしておきましょう。

1)ビューのデータバインディングを行います。

先ほど準備したビューをバインドします。

 

ラベルを配置し、「My Link」などと書いておきましょう。

 

２）改行を2つしてから繰り返しコントロールを配置します。

繰り返しコントロールのプロパティのオプション＞コレクション名をここでは「viewEntry」とします。

 

３）繰り返しコントロールの中にパネルコントロールを配置します。

 

４）パネルコントロールの中に計算結果フィールドコントロールを２つ追加します。
下記の図のように、改行したりフォントタブで色を変えておくと、イメージが湧きやすくなります。

上に配置されている計算結果フィールドコントロールの値タブですが
単純データバインディングでデータソースに「viewEntry」、バインド先に｛ビューの列名｝を指定します。

 

下に配置されている計算結果フィールドコントロールの値タブですが
JavaScriptを選択して以下のコードを書き込みます。

 

viewEntry.getDocument().getItemValueString('フィールド名');

 

5）XPageを保存します。

3.ブラウザで確認

2で作成したXPageをブラウザから確認すると以下のように表示されます。

 

応用編１
XPageはCSS（カスケードスタイルシート）を使用することが出来ます。

以下のサンプルのようなCSSを準備し、Notesデータベースの中に取り込んでおきます。

１）先ほど作成したXPageを開き、XPage＞リソースタブにある追加からスタイルシートを選択します。

２）パネルコントロールを選択し、スタイルタブから以下の画面のように使いたいものを選択します。（ここではCSSで自作した「linkPanel」を選んでいます）

 

３）XPageを保存します。

4.ブラウザで確認（応用編１）
応用編１で作成したXPageをブラウザから確認すると、ブログの冒頭に紹介したものと同じページが表示されました。

XPagesで簡単にカード型UIが出来ました。
工夫したいで以下のようにも出来るので、皆様チャレンジしてみてください。