当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。

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

2014年4月10日木曜日

Dojo リストテキストボックスを使ってタグっぽく表現してみよう

気が付いたら4月10日です。社会人生活も25年目に入りました。そのうち、Notes/Dominoを20年(実際には途中に何度か浮気?してますが・・・)って・・・どんだけ好きなんだろう?って話ですが。

兎にも角にも、今日も元気でやっていきましょう。

ということで、ボタンクリックから始めましょう。
にほんブログ村 IT技術ブログへ


さて、今日もXPagesの話題です。
そういえば、最近「qA9 for ICS(Lotus) Developers」(リンクはこちら)というQ&Aサイトがオープンしました。ぜひ、アクセスしてNotes/DominoのQ&Aをみなさんでシェアしましょう!
ちなみにこのサイトはXPagesで作成されています。以前にあった「ドミノ懇談室」もそうですが、Notes/DominoはWeb上でもしっかり動くんですね。


今日は最近のWebサイト上でみかけるタグについての設定方法についてです。
以前、タグクラウドを使ってみようでは設定されているタグクラウドの表示方法についてでしたが、今回はタグそのものを設定する方法についてみていきます。

ですが・・・タグと言いつつ、利用するコントロールは「Dojo リストテキストボックス」です。
Extension Libraryを利用するか、8.5.3 Upgrade Pack1を利用するか、Notes/Domino 9.0 SEを利用するかのいずれかになりますが、設定方法は変わりません。
今回はNotes/Domino 9.0 SEでの画面での紹介です。

コントロールビューの「Dojo フォーム」タブから「Dojo リストテキストボックス」を選択してドラッグ&ドロップします。
Dojo リストテキストボックスをドラッグ&ドロップ

コントロールのプロパティは以下のように設定します。
valueフォームのどのフィールドに関連付けるのかを設定
multipleSeparatorテキストボックスに複数値が入力された場合の区切り文字。
ここで設定した文字はテキストの値としては利用できなくなるので要注意!

コントロールのプロパティ設定

「Dojo リストテキストボックス」自身の設定はこれだけですが、このコントロールには値を直接入力することができません。
そこで、このコントロールに値を入力する方法を追加します。

今回のサンプルでは、「ボタン」コントロールのクリックイベントを使って設定するようにします。
用意するのは「編集ボックス」コントロールと「ボタン」コントロールです。

「編集ボックス」は、特にプロパティを変更する必要はありません。
「ボタン」コントロールはonClickイベントにSSJSを記述します。
var inputTag = getComponent( "inputText1" ).getValue();
getComponent( "djextListTextBox1" ).setValue( inputTag );
簡単に書くとこんな感じでしょうか。ただこれでは、複数の値が入力できないし、重複チェックも行われていません。
そのあたりは、ご自分で実装してみてください。


そのあたりを実装したサンプル画面は以下の通りになります。
1_ビュー画面

初期画面ですね。わかりやすくするためにサンプルデータをあらかじめ作成しておきました。

2_新規作成画面
新規作成画面です。「タグ」の編集ボックス欄に入力して、[入力したタグの追加]ボタンをクリックすることでタグが追加されます。
3_タグが追加された状態
ボタンをクリックしてタグを追加した状態です。編集状態では「Dojo リストテキストボックス」はタグ値に「x」が続けて表示されます。これは、タグ値をクリックすることで追加したものを消去できますよ。ということを表しています。
4_文書を保存した後のビュー画面
[保存]ボタンをクリックして、文書を保存するとビューページに戻ります。
作成された文書が表示されています。タグ値が「,」で区切られているのがわかります。
5_読込モードで文書を開く
文書タイトルのリンクをクリックして、文書を読込モードで表示した状態です。
「Dojo リストテキストボックス」にスタイルを設定して、タグっぽく表示しています。
※「アプリケーションのテーマ」を"OneUI"にしておくと、自動でスタイルを決めてくれますので、その方が楽です。
6_クリックしたタブ値を表示
「Dojo リストテキストボックス」にonClickイベントを設定しておくと、どのタグ値をクリックしたのかを取得することができます。
※ここはちょっとしたコツがあり、そのまま「Dojo リストテキストボックス」の値を取得しても表示されない(はず)です。
7_編集モードにしてタグを1つ消去した
[編集]ボタンをクリックして、文書を編集状態にして、現在のタグ値をクリックすると、消去されます。
この状態で[保存]ボタンをクリックすると・・・
8_編集した文書を保存しなおした状態のビューページ
ビューに戻ってみると、確かにタグ値が一つになっています。

とこんな感じで、タグ値を設定することができます。
後は、この値を「タグクラウド」コントロールと組み合わせれば、タグの出来上がりです。

理解するまでに時間がかかりますが(私も一週間近くかかりました・・・)、便利に使えるのでぜひ覚えましょう!



では、今日はこの辺で・・・(午前中にアップするつもりだったのに、なんでこんな時刻に???)








【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: