Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Notes and Domino Application Development wiki
  • All Wikis
  • All Forums
  • THIS WIKI IS READ-ONLY. Learn more...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileTsutomu Sasaki
Contribution Summary:
  • Articles authored: 5
  • Articles edited: 5
  • Comments Posted: 0

Recent articles by this author

XPages コントロールの紹介:「計算結果フィールド」コントロール

利用方法 計算結果フィールド 計算結果フィールド コントロールは、コアコントロールからドラッグ&ドロップすることで利用することができる。 {{11.gifコアコントロール} 設計要素 画面上では、以下の

XPages コントロールの紹介: 「ファイルのアップロード」と「ファイルのダウンロード」コアコントロール

利用方法 「ファイルのアップロード」と「ファイルのダウンロード」 「ファイルのアップロード」「ファイルのダウンロード」コントロールは、コアコントロールからドラッグ&ドロップすることで利用すること

XPages コントロールの紹介: 「タブ付パネルビュー」 コンテナコントロール

概要は提供されていません。

FireBugによるデバッグ方法

XPages アプリケーション開発を助けるデバッグの方法について解説します。

XPages - OpenNTF NamesPicker 解説

概要は提供されていません。
Community articleXPages - OpenNTF NamesPicker 解説
Added by Tsutomu Sasaki | Edited by IBM contributorHiroaki Komine on November 12, 2010 | Version 35
expanded Abstract
collapsed Abstract
概要は提供されていません。
Tags: Xpages, OpenNTF
ShowTable of Contents
HideTable of Contents
  • 1 Webサイト:OpenNTF
    • 1.1 検索
    • 1.2 テンプレートダウンロード
  • 2 機能概要
    • 2.1 ドミノディレクトリ検索機能
    • 2.2 ドミノディレクトリ設定機能
    • 2.3 ユーザ削除機能
  • 3 データベース構成
    • 3.1 XPage-Test
    • 3.2 カスタムコントロール-youatnotesNamepicker
      • 3.2.1 検索パネル-ynNamepickerInput
      • 3.2.2 検索結果パネル-ynNamepickerResultPanel
    • 3.3 スクリプトライブラリ
      • 3.3.1 ユーザ追加処理
      • 3.3.2 画面リフレッシュ処理
    • 3.4 CSS デザイン
  • 4 処理概要
    • 4.1 初期表示処理
      • 4.1.1 XPageを開く
      • 4.1.2 カスタムコントロールを開く
      • 4.1.3 初期化
      • 4.1.4 ライブラリの読み込み
      • 4.1.5 画面表示
      • 4.1.6 初期化関数を呼び出す。
      • 4.1.7 ynNamepickerInit()の実行
      • 4.1.8 ynNamepickerRefreshDisplay()の実行
    • 4.2 検索処理
      • 4.2.1 XPageを開く
      • 4.2.2 検索条件を入力して、検索する
      • 4.2.3 検索結果を取得する
      • 4.2.4 検索結果「ynPeople」を <li> タグで1つずつ表示する
      • 4.2.5 検索結果の <li> タグをクリックし、ynNamepickerAddName(this)を実行する
      • 4.2.6 ynNamepickerRefreshDisplay()の実行

Webサイト:OpenNTF


 

検索


Webブラウザで以下のURLにアクセスし、「XPages△namepicker」(△:スペース)で検索する
http://www.openntf.org/Internal/home.nsfexternal link
 
【OpenNTF-TOPページ】
 OpenNTF-TOPページ
 
【検索結果画面】
 検索結果画面
 

テンプレートダウンロード


「yn_xnamepicker_11a.zip」をダウンロードする
【Releasesページ】
 Releasesページ
 
 

機能概要


 

ドミノディレクトリ検索機能


検索フィールドに入力されたキーワードに従って、ドミノディレクトリを検索します。
該当するユーザ名があれば検索結果を表示します。
 
 ドミノディレクトリ検索
 

ドミノディレクトリ設定機能


検索結果の中から選択したユーザを設定フィールドに設定します。
 
 ドミノディレクトリ設定
 

ユーザ削除機能


選択されたユーザの横にある「×」ボタンをクリックすることで選択を解除します。
 
 ユーザ削除  
 

データベース構成



本アプリケーションは、以下の設計要素で構成されています。
設計要素
設計名称
備考
    XPage
    Test

    カスタムコントロール
    youatnotesNamepicker

    スクリプトライブラリ
    ynNamepicker
    Javascript

XPage-Test



カスタムコントロール「youatnotesNamepicker」を表示する
 
 カスタムコントロール「youatnotesNamepicker」

カスタムコントロール-youatnotesNamepicker



ドミノディレクトリの検索を行うカスタムコントロール
 
 カスタムコントロール「youatnotesNamepicker」

検索パネル-ynNamepickerInput


 
 検索パネル「ynNamepickerInput」

検索結果パネル-ynNamepickerResultPanel


 
 検索結果パネル「ynNamepickerResultPanel」

※ Lotus Domino にランゲージパック「日本語」が適用されている場合は、以下の修正が必要です。
    (修正前) rowData.getColumnValue("FullName")
    (修正後) rowData.getColumnValue("フルネーム")

スクリプトライブラリ



ユーザ追加処理


 

function ynNamepickerAddName(e) {

    ynNamepickerClick = 1;

    //id = "view:_id1:ynNamepickerNames";

    newname = e.innerHTML;

    //alert(newname+" id="+id);

    //dojo.byId(id)

    nameElem = dojo.query("[id$='ynNamepickerNames']")[0];

    v = nameElem.value;

    if (typeof v != "undefined" && v != "") {

        if (v.indexOf(newname) == -1) v = v + ", "+newname;

    } else {

        v = newname;

    }

    v = v.split(",");

    nameElem.value = v;

    ynNamepickerRefreshDisplay();     //画面リフレッシュ処理

}

 

画面リフレッシュ処理


 

function ynNamepickerRefreshDisplay() {

    nameElem = dojo.query("[id$='ynNamepickerNames']")[0];

    v = nameElem.value;

    if (v == "") return;

    v = v.split(",");

    html = "";

    var displayName;

    for (i = 0; i < v.length; i++) {

        if (v[i].indexOf("/") > 0) {

            displayName = (v[i].indexOf("/")?v[i].substring(0, v[i].indexOf("/")) : v[i]);

        } else {

            displayName = v[i];

        }

        html += '<li>'+displayName+'<span onClick="ynNamepickerRemovename(\''+v[i]+'\')"

        class="ynNamepickerRemover">x</span></li>';

    }

    elem = dojo.byId("ynNamepickerDisplay");

    elem.innerHTML = html;

} 



CSS デザイン



カスタムコントロール内に、CSS が直接入力されているので、本値を変更することでデザインを修正することができます。
 CSS デザイン 
 

処理概要



初期表示処理



XPageを開く



Webブラウザ上に以下のURLを入力し、XPageを開きます。
http://localhost/yn_xnamepicker.nsf/test.xsp

カスタムコントロールを開く



XPageをオープンすると、その中に埋め込まれているyouatnotesNamePickerカスタムコントロール
が開かれます。

初期化



カスタムコントロールをロードする際に、セッションスコープ変数「ynNamepickerResult」を
初期化する

 

<xp:this.beforePageLoad>

<![CDATA[#{javascript:sessionScope.put("ynNamepickerResult", "")}]]>

</xp:this.beforePageLoad>



ライブラリの読み込み



JavaScriptライブラリ「ynNamepicker.js」を読み込みます。

 

<xp:this.resources>

<xp:script src="/ynNamepicker.js" clientSide="true"></xp:script>

</xp:this.resources>



画面表示



パネル「ynNamepickerInput」の内容が表示される。
パネル「ynNamepickerResultPanel」の内容が表示される。


初期化関数を呼び出す。



dojo.addOnLoad()で、HTMLページが読み込まれた後に呼び出される初期化関数を指定します。

 

<script type="text/javascript">

 dojo.addOnLoad(ynNamepickerInit);

</script>


    解説

    dojo.addOnLoad()は、bodyタグにonLoad属性を書く方法と、windows.onLoad()を利用する方法と同じ動作をする。
    しかし、Dojoではwindows.onLoadを上書きしているため、dojo.addOnLoadで呼び出す必要がある。

ynNamepickerInit()の実行



「4.1.4. ライブラリの読み込み」で読み込んだJavaScriptライブラリのynNamepickerInit()を実行する。

1) カスタムコントロールの <div> オブジェクトを取得し、非表示とする。

 

elem = dojo.byId("ynNamepickerResultBox");

dojo.style(elem, {display: 'none'});



2) <div> オブジェクトの onclick イベントが呼び出された時に、実行されるメソッドを定義する。

 

dojo.connect(elem, "onclick", null, function(e) {

 if (ynNamepickerClick == 0) ynNamepickerHideResult; else ynNamepickerClick = 0;

});



3) カスタムコントロールの <div> オブジェクトを取得し、onkeyupイベントが呼び出された時に、
ynNamepickerHandleKey()を実行するように定義する。

 

elem = dojo.byId("ynNamepickerDisplayBox");

dojo.connect(elem, "onkeyup", null, function(e) {

 ynNamepickerHandleKey(e);

});



4) カスタムコントロールの <div> オブジェクトを取得し、onkeyupイベントが呼び出された時に、
ynNamepickerHandleKey()を実行するように定義する。

 

elem = dojo.byId("ynNamepickerResultBox");

dojo.connect(elem, "onkeyup", null, function(e) {

 ynNamepickerHandleKey(e);

});



ynNamepickerRefreshDisplay()の実行



「4.1.4. ライブラリの読み込み」で読み込んだJavaScriptライブラリのynNamepickerRefreshDisplay ()を実行する。

1) カスタムコントロールに定義されたynNamepickerNames要素を取得する。
    解説

    dojo.query()は、CSS3のセレクタを表す文字列を引数に取り、NodeListというクラスのインスタンスを返す。

2) ynNamepickerNames要素が空白のため、以下の処理は実行されない。 

 

if (v == "") return;

v = v.split(",");

html = "";

var displayName;

for (i = 0; i < v.length; i++) {

if (v[i].indexOf("/") > 0) {

  displayName = (v[i].indexOf("/")?v[i].substring(0, v[i].indexOf("/")) : v[i]);

 } else {

  displayName = v[i];

 }

html+='<li>'+displayName+'<span onClick="ynNamepickerRemovename(\''+v[i]+'\')" 

class="ynNamepickerRemover">x</span></li>';

}



3) ynNamepickerDisplay要素のHTMLを「null値」に入れ替える。

 

elem = dojo.byId("ynNamepickerDisplay");

elem.innerHTML = html;



検索処理



XPageを開く



Webブラウザ上に以下のURLを入力し、XPageを開きます。
http://localhost/yn_xnamepicker.nsf/test.xsp

検索条件を入力して、検索する



検索ボタンをクリックしたタイミングで、カスタムコントロールのynNamepickerResultPanel パネルを部分更新する。
 
 検索条件の入力フィールドとボタン

 

<xp:button id="bynNamepickerSearch">

 <xp:this.value>

  <![CDATA[#{javascript:var v = compositeData.get("buttonSearchLabel");

  (v == null || v == "") ? "search" : v}]]>

 </xp:this.value>

 <xp:this.rendered>

  <![CDATA[#{javascript:var v = compositeData.get("buttonSearchVisible");

  (v == null) ? true : v}]]>

 </xp:this.rendered>

 <xp:eventHandler event="onclick" submit="true" refreshMode="partial"

  refreshId="ynNamepickerResultPanel">

 </xp:eventHandler>

</xp:button>



検索結果を取得する



1) サーバ上のドミノディレクトリにある「($VIMPeople)」ビューを以下のキーワードで検索する。


検索キーワード:[FullName]=a*



2) ビューの検索結果を「ynPeople」に代入する。

 

<xp:this.data>

 <xp:dominoView viewName="($VIMPeople)" var="ynPeople">

  <xp:this.databaseName>

   <![CDATA[#{javascript:database.getServer()+"!!names.nsf"}]]>

  </xp:this.databaseName>

  <xp:this.search>

   <![CDATA[#{javascript:

    var q = viewScope.get("ynNamepickerQ");

    if (q != null && q != "") "[FullName] = "+q+"*"; else "[YNDUMMY] = ##NONE##";

   }]]>

  </xp:this.search>

 </xp:dominoView>

</xp:this.data>



検索結果「ynPeople」を @nowiki@5 タグで1つずつ表示する


 
 検索結果「ynPeople」を @nowiki@6 タグで1つずつ表示する
 

<ul id="ynNamepickerResult" class="ynNamepickerResult">

 <xp:repeat id="repeat1" rows="50" value="#{ynPeople}" var="rowData" indexVar="rowIndex">

  <xp:text escape="false" id="computedField1">

   <xp:this.value>

    <![CDATA[#{javascript:'<li class="ynNamepickerLi"

     onMouseover="dojo.addClass(this, \'ynNamepickerResultActive\')"

     onMouseout="dojo.removeClass(this, \'ynNamepickerResultActive\')"

     onClick="ynNamepickerAddName(this)">'

+rowData.getColumnValue("フルネーム")+"</li>"}]]>

    </xp:this.value>

   </xp:text>

 </xp:repeat>

</ul>



検索結果の @nowiki@7 タグをクリックし、ynNamepickerAddName(this)を実行する



クリックしたユーザ名の <li> タグをynNamepickerNamesオブジェクトに「,」区切りで入力する。
 
 ynNamepickerAddName(this)
 
 

function ynNamepickerAddName(e) {

 ynNamepickerClick = 1;

 //id = "view:_id1:ynNamepickerNames";

 newname = e.innerHTML;

 //alert(newname+" id="+id);

 //dojo.byId(id)

 nameElem = dojo.query("[id$='ynNamepickerNames']")[0]; 

 v = nameElem.value;

 if (typeof v != "undefined" && v != "") {

  if (v.indexOf(newname) == -1) v = v + ", "+newname;

 } else { 

  v = newname;

 }

 v = v.split(",");

 nameElem.value = v;

 ynNamepickerRefreshDisplay();

}



ynNamepickerRefreshDisplay()の実行



「4.1.4.」で読み込んだJavaScriptライブラリのynNamepickerRefreshDisplay ()を実行する。

1) カスタムコントロールに定義されたynNamepickerNames要素を取得する。
<li> タグが「,」区切りで入力されている。

2) ynNamepickerNames要素に <li> タグが入力されているため、以下の処理が実行される。 
ドミノディレクトリから取得されたユーザ名を変換して、@nowiki@11タグ+@nowiki@12タグに置き換える。

 

if (v == "") return;

v = v.split(",");

html = "";

var displayName;

for (i = 0; i < v.length; i++) {

if (v[i].indexOf("/") > 0) {

  displayName = (v[i].indexOf("/")?v[i].substring(0, v[i].indexOf("/")) : v[i]);

 } else {

  displayName = v[i];

 }

html+='<li>'+displayName+'<span onClick="ynNamepickerRemovename(\''+v[i]+'\')" 

class="ynNamepickerRemover">x</span></li>';

}



3) ynNamepickerDisplay要素のHTMLを上記で変換したものに入れ替える。
 
 ynNamepickerDisplay 要素のHTML で変換したもの

 

elem = dojo.byId("ynNamepickerDisplay");

elem.innerHTML = html;

expanded Attachments (15)
collapsed Attachments (15)
File TypeSizeFile NameCreated OnDelete file
image/x-png 93 KB 1_OpenNTF_TOPPage.PNG 11/12/10, 2:01 AM
image/x-png 102 KB 2_SearchResult.PNG 11/12/10, 2:01 AM
image/x-png 51 KB 3_ReleasePage.PNG 11/12/10, 2:08 AM
image/x-png 114 KB 4_DominoDirectorySearch.PNG 11/12/10, 2:09 AM
image/x-png 111 KB 5_DominoDirectorySetting.PNG 11/12/10, 2:11 AM
image/x-png 111 KB 6_RemoveUser.PNG 11/12/10, 2:14 AM
image/x-png 58 KB 7_XPage_Test.PNG 11/12/10, 2:14 AM
image/x-png 12 KB 8_CustomControl.PNG 11/12/10, 2:15 AM
image/x-png 93 KB 9_ynNamepickerInput.PNG 11/12/10, 2:16 AM
image/x-png 83 KB 10_ynNamepickerResultPanel.PNG 11/12/10, 2:18 AM
image/x-png 107 KB 11_CSS_Design.PNG 11/12/10, 3:26 AM
image/x-png 9 KB 12_choose_a_name.PNG 11/12/10, 3:30 AM
image/x-png 107 KB 13_ynPeople.PNG 11/12/10, 3:41 AM
image/x-png 10 KB 14_ynNamepickerAddName.PNG 11/12/10, 3:44 AM
image/x-png 19 KB 15_ynNamepickerDisplay.PNG 11/12/10, 3:46 AM
expanded Versions (36)
collapsed Versions (36)
Version Comparison     
VersionDateChanged by              Summary of changes
36Nov 12, 2010, 3:48:17 AMHiroaki Komine  IBM contributor
This version (35)Nov 12, 2010, 3:46:31 AMHiroaki Komine  IBM contributor
34Nov 12, 2010, 3:45:18 AMHiroaki Komine  IBM contributor
33Nov 12, 2010, 3:42:09 AMHiroaki Komine  IBM contributor
32Nov 12, 2010, 3:31:07 AMHiroaki Komine  IBM contributor
31Nov 12, 2010, 3:26:58 AMHiroaki Komine  IBM contributor
30Nov 12, 2010, 3:21:53 AMHiroaki Komine  IBM contributor
29Nov 12, 2010, 3:02:44 AMHiroaki Komine  IBM contributor
27Nov 12, 2010, 2:32:53 AMHiroaki Komine  IBM contributor
26Nov 12, 2010, 2:32:31 AMHiroaki Komine  IBM contributor
25Nov 12, 2010, 2:19:04 AMHiroaki Komine  IBM contributor
25Nov 12, 2010, 2:19:04 AMHiroaki Komine  IBM contributor
24Nov 12, 2010, 2:16:51 AMHiroaki Komine  IBM contributor
23Nov 12, 2010, 2:15:56 AMHiroaki Komine  IBM contributor
22Nov 12, 2010, 2:15:15 AMHiroaki Komine  IBM contributor
21Nov 12, 2010, 2:14:23 AMHiroaki Komine  IBM contributor
20Nov 12, 2010, 2:12:18 AMHiroaki Komine  IBM contributor
19Nov 12, 2010, 2:09:23 AMHiroaki Komine  IBM contributor
18Nov 12, 2010, 2:08:34 AMHiroaki Komine  IBM contributor
17Nov 12, 2010, 2:02:06 AMHiroaki Komine  IBM contributor
16Nov 12, 2010, 2:01:00 AMHiroaki Komine  IBM contributor
15Nov 12, 2010, 1:56:22 AMHiroaki Komine  IBM contributor
14Nov 12, 2010, 1:54:24 AMHiroaki Komine  IBM contributor
13Nov 12, 2010, 1:51:50 AMHiroaki Komine  IBM contributor
12Nov 12, 2010, 1:44:03 AMHiroaki Komine  IBM contributor
11Nov 12, 2010, 1:34:42 AMHiroaki Komine  IBM contributor
10Nov 12, 2010, 1:30:49 AMHiroaki Komine  IBM contributor
9Nov 12, 2010, 1:27:13 AMHiroaki Komine  IBM contributor
8Nov 12, 2010, 1:19:23 AMHiroaki Komine  IBM contributor
7Nov 12, 2010, 12:49:26 AMHiroaki Komine  IBM contributor
6Nov 4, 2010, 8:50:57 AMHiroaki Komine  IBM contributor
5Nov 4, 2010, 8:44:03 AMHiroaki Komine  IBM contributor
4Nov 4, 2010, 8:19:14 AMHiroaki Komine  IBM contributor
3Oct 29, 2010, 5:02:58 AMHiroaki Komine  IBM contributor
2Oct 29, 2010, 4:54:45 AMHiroaki Komine  IBM contributor
1Oct 29, 2010, 2:17:01 AMTsutomu Sasaki  
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • FacebookIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use