目次


XPages入門

前編

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: XPages入門

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:XPages入門

このシリーズの続きに乞うご期待。

学習の成果を得るために、すべての演習は次のように構成されています。

学習内容

演習で扱う機能および概念の説明です。

タスクの説明

目的の機能または動作のハイレベルの説明です。

詳細手順

実行する内容を手順ごとに示します。必要な場合は、スクリーン・ショットやサンプル・コードも提供されます。

結果

成果がどのように表示されるのか、または演習を通じてどのような機能が得られるのかを、通常はスクリーン・ショットを使用して説明します。

追加内容

現在の学習ステップのバリエーションまたは拡張について説明します。クラスルームの設定では、これによって、学習を速く進めた人が理解をさらに深めることができます。また、トレーニング演習後の提案としても役立ちます。提案されたアクティビティーは、トレーニングの達成には関連しません。

参考資料

学習トピックに関連するドキュメンテーション用のリンクとポインター、記事、Wiki、またはブログ・エントリーです。また、トピックに関するユーザー固有のメモもここに示されます。

プレゼンテーション

次のプレゼンテーションでは、XPages および IBM Lotus Domino Designer 8.5 の概要を示し、下記の演習の進め方のヒントを含め、XPages のチュートリアルの手順を解説します。

詳細情報

このワークショップは、Philippe Riand、Maureen Leland、Tony McGuckin、および Eamon Muldoon のアイデアに基づいています。演習は Stephan Wissel および Tim Clark によって作成されました。演習の構成は、Stephan Wissel の寄与によるものです。

XPages の概要 – 演習 1

1. 学習内容

XPages エディターとコンポーネント・パレットの基本作業に習熟します。

2. タスクの説明

必須の「Hello World」コード・サンプルを作成し、後の演習で用いる構造を準備します。

3. 詳細手順

1. サーバーで新規データベースを作成し (Ctrl + N)、「xpages1」という名前を付けます。

 

2. XPages を 1 つ作成します。

図. hwPage
図. hwPage
図. hwPage

3. カスタム・コントロールを 1 つ作成します。

図. hwControl
図. hwControl
図. hwControl

4. ラベル・コントロールをテスト・コントロール (「hello XPages world!」) として追加します。

 
 
下に続く
下に続く
下に続く

Ctrl + S キーを押し、保存します (または、メニューから「ファイル」->「保存」を選択します)。

新しい hwControl カスタム・コントロールを hwPage XPage に追加します。

 
 

Ctrl + S キーを押し、保存します (または、メニューから「ファイル」->「保存」を選択します)。

5. Anonymous に「管理者」のアクセス権を許可するようアクセス制御オプションを設定します。

6. 「アプリケーションのプロパティー」で Web 起動オプションを設定します。

  • 指定した XPage (hwPage) を開きます。
  • 「ブラウザーでプレビュー」ボタンをクリックします。
 

4. 結果

 

5. 検討事項

  • 静的な「Hello World」から現在の時刻を含むように出力を変更できますか。(JavaScript および date() 関数の入力にはキャレットを使用します。)
  • 「Hello World」とともにあなたの名前 (ログインしていない場合は Anonymous) を表示できますか。

XPages の概要 – 演習 2

1. 学習内容

XPages での、条件に応じた情報表示に習熟します。全体の更新と部分更新の違いを理解します。

2. タスクの説明

ユーザー名を収集する入力フィールドと、ページを更新して「Hello [入力された名前]」と表示するためのボタンを含むように、カスタム・コントロールを変更します。

3. 詳細手順

1. hwControl カスタム・コントロールにパネルを追加し、「helloPanel」という名前を付けます。

 
 

2. パネルに「Your Name please」というラベルを追加します。

 
 

3. 編集ボックスを追加し、「yourName」という名前にします。

 
 

4. ボタンを追加し、ラベルを「Say Hello」にします。

 
 

5. カスタム・コントロールにカスタム・プロパティーを追加します (ページの空の部分をクリックします)。

 

6. ボタンの onClick イベントにコードを追加します。

 

7. - 基本: スクリプトの実行

var txtControlValue = getComponent("yourName").getValue();
getComponent("label2").setValue("Hello "+txtControlValue);
compositeData.iknowyou = true;
 

8. 結果をテストします。

9. 入力ボックスおよびボタンの「表示」プロパティーを計算結果に変更します。

 

次の式を使用します。

!compositeData.iknowyou

 

10. 結果をプレビューします。

メモ: カスタム・コントロールはプレビューできないので、結果をプレビューするには、フォーカスを hwPage に変更する必要があります。 プレビュー・ボタンを押す前に、両方を保存してください。

11. ボタンのイベントのサーバー・オプションを「すべて更新」から「部分更新」に変更し、helloPane を選択します。

 

12. パネルの上下にテキストを少し追加します。

13. ブラウザーで結果をプレビューします。

4. 結果

 
 

XPages の概要 – 演習 3

1. 学習内容

サンプル・アプリケーションの土台を構築し、アプリケーションのスタイル設定を容易にするアプリケーション構造について学習します。

2. タスクの説明

サンプル・アプリケーションへのアクセスを提供する 3 つの XPages を作成します。以降の演習のための構造を準備します。

3. 詳細手順

この演習用のリソース

1. xScrapbook という新規データベースを作成します。

 

アクセス制御リストで「Anonymous」のデフォルトのアクセス権を必ず変更してください。

2. 次の 3 つの XPages を作成します。

  • home
  • results
  • profile
 

以降の各 Xpage について、3、4、5 を繰り返します。

3. カスタム・コントロールを 1 つ作成します。

  • container
 

4. ネストしたパネルをカスタム・コントロールに追加します。パネルは、HTML レンダリングを使用して DIV 要素に変換されますが、追加ロジックを持つことができます。パネルは、スタイル設定または部分更新オペレーションによく使用されます。

重要: 必ず、以下の名前を使用してください。

(以下のアウトラインは図に一致しませんが、以下のテキストは正しい内容です。)

パネル: frame

  • パネル: header
    • パネル: headerInner
  • パネル: main
    • パネル: tabBar
    • パネル: content

5. headerInner パネルにラベル・コントロールを追加し、Scrapbook というラベルを付けます。

6. 各 XPages (home、results、profile) に、新規のコンテナー・カスタム・コントロールを追加します。

 

7. ワークショップのリソース・メディアから、css スタイルシートをスタイルシート・リソースの styles.css にインポートします。(メディアはクラスによって異なります: メモリー・スティック、CD、URL、ネットワーク・ロケーション)

この演習用のリソース

 
 

8. すべてのイメージをイメージ・リソースにインポートします。

 

9. container カスタム・コントロールに styles.css スタイル・リソースを追加します。

 
 

10. 各パネル (6 パネル) のスタイル・タブで、クラスをそれに対応する名前付きのスタイルシート・クラスにマッピングします。

 

ヒント – アウトラインを使用すると、パネルを容易にナビゲートできます。

11. headerInner パネルに追加したラベルに戻り、それを headerInnerTitle クラスにマッピングします。

 

12. 「アプリケーションのプロパティー」で Web 起動オプションを設定します。

  • 指定した XPage (home) を開きます。
 

4. 結果

ページでプレビュー・ボタンを使用して、結果を表示します。

 

5. 検討事項

  • 現在のユーザー名 (ログインしていない場合は「Anonymous」) を表示するカスタム・コントロールを作成し、新規作成したページにそれを追加できますか。
  • カスタム・コントロールを画面の一隅 (1 つを選択) に配置するスタイルを作成してください。

XPages の概要 – 演習 4

1. 学習内容

カスタマイズ可能なコンテンツ領域を持つカスタム・コントロールの作成方法を学習します。サンプル・アプリケーションでコントロールを使用します。

2. タスクの説明

タブ付きのコントロールおよびコンテンツ領域を持つように既存のコンテナー・コントロールを拡張します。コンテンツ領域には個々のコンテンツを追加することが可能で、新しいタイプのコンテナー・コントロールを効率よく作成できます。

3. 詳細手順

1. コンテナー・カスタム・コントロールを開きます。

2. 「コンテナー・コントロール」パレットから「タブ付きパネル」をドラッグ・アンド・ドロップすることにより、タブ付きパネルを tabBar パネル・コントロールに追加します。

3. タブ付きパネルには、次の 3 つのタブが必要です。

  • Home (名前: homeTab)
  • Results (名前: resultsTab)
  • Profile (名前: profileTab)

タブ付きパネルを右クリックして、別のタブを追加します。

 

アウトラインを使用してタブを選択し、そのプロパティーに移動します。

4. 編集可能領域コントロールをコンテンツ領域に追加します。図の中で「facet_1」がある場所に、これをドロップします。

 

5. さらに、次の 3 つのカスタム・コントロールを作成します。

  • searchForm
  • profileForm
  • searchResults

ヒント: これらのコントロールに一時的なコンテンツを追加し、適切なオペレーションを表示できるようにします。

6. 次に示すように、新規の各カスタム・コントロールを、それぞれのオーナーである XPage 編集可能領域に追加します。

  • searchForm を home へ
  • searchResults を results へ
  • profileForm を profile へ

たとえば、searchForm カスタム・コントロールを home XPage 上の緑色の円の上にドラッグ・アンド・ドロップします。

4. 結果

URL を変更して、各ページ (例: home.xsp、results.xsp、および profile.xsp) を表示します。

演習 14 でナビゲーション・タブの接続を設定します。

 
 
 

5. 検討事項

  • 編集可能領域を XPages に追加できますか。
  • 複数の編集可能領域を 1 つのカスタム・コントロールに追加できますか。

XPages の概要 – 演習 5

1. 学習内容

フォームのプロパティーと簡単なデータ・バインディングを使用して Notes 文書を XPages に表示する方法を学習します。

2. タスクの説明

プロファイル・フォーム (Classic 版の Lotus Notes) を作成し、プロファイル・フォームを XPage にマッピングします。Notes フォームに格納されたデータを表示するために、データ・バインディングを profile XPage に追加します。

3. 詳細手順

1. 「profile」という名前の新規の Notes フォームを作成します。次のフィールドを使用します。

  • FullName (計算結果テキスト)
    式: @Trim(FirstName + " " + LastName)
  • Email (テキスト)
  • TimeZone (テキスト)
  • AboutMe (リッチ・テキスト)
  • Gender (テキスト)
  • Country (テキスト)
  • FirstName (テキスト)
  • LastName (テキスト)
  • DOB (日時)
 

2. フォームでは、「Web アクセス」のデフォルトとして「代わりに XPage を表示」を使用します。このプロパティーに「profiles XPages」を設定してください。

 

3. 「profiles」という名前で、選択式「SELECT form=”profile”」および次の列を持つ新規ビューを作成します。

  • FullName (昇順でソート、ソート可能 / クリックしてソート – 両方向)
  • TimeZone
  • Email

4. Lotus Notes クライアントで profile フォームを使用していくつかの文書を作成します。次に、ブラウザーでビューをプレビューし、ビューから文書を開きます (ヘッダー以外はほとんど空の状態です)。

 

5. profileForm カスタム・コントロール (演習 04 で作成) を開きます。設計エディターでページ上をクリックし、フォーカスを移動します。

6. データ・タブで Domino Document データ・ソースを追加します。フォームとして「profile」を選択します。

 

7. 「すべてのプロパティー」タブをクリックし、「データ」エントリーを展開します。次に、dominoDocument エントリーを展開し、computeWithForm オプションに「OnSave」を選択します。

 

8. カスタム・コントロールを保存して閉じます。再びこのコントロールを開いてデータ・パレットを更新します。

9. データ・パレットを選択し、「[コントロールの選択] ダイアログ・ボックス」ボタンを使用可能にします。

 

10. 「Full Name」と「DOB」を除くすべてのフィールド・バインディングを選択します (shift + クリックで複数を選択できます)。

 

11. 選択したすべてのフィールド・バインディングを設計エディターの profileForm ページにドラッグ・アンド・ドロップします。

12. ヘルパー・ダイアログで、次のコントロールの種類を変更します。

  • About Me: リッチ・テキスト
  • Gender: コンボ・ボックス
  • TimeZone: コンボ・ボックス
 

「OK」をクリックします。

13. 結果として得られた表のセル内で右クリックし、ヘルパー・ダイアログで3 つの行を追加するよう選択します。

14. ドラッグ・アンド・ドロップを使用して行のコンテンツを並べ替え、関連するフィールドをグループ化します。

 

15. DOB フィールド用に、ラベル・コントロールと日時ピッカー・コントロールを追加します。必要であれば、表に新しい行を追加します。

16. 日時ピッカーを DOB フィールドにバインドします。

表示タイプを「日付/時刻」に設定します。

 

ブラウザーで空の状態およびデータを入力し、XPage のコントロールをプレビューします (現在はアクション・ボタンがないので、Notes フォームを使用して手動で入力する必要があります)。

 

4. 結果

 

5. 検討事項

  • starsign フィールドを profile フォームに追加し、星印を選択肢として持つコンボ・ボックスを作成します。

XPages の概要 – 演習 6

1. 学習内容

XPages でのページ・フローの機能およびアクション・ボタンでのアクションのコーディング方法を学習します。

2. タスクの説明

演習 5 で作成した profileForm カスタム・コントロールを完成させます。

3. 詳細手順

1. styles.css を profileForm カスタム・コントロールに追加します (快適にスタイルを選択するために必要です)。

2. 表の最後の行に 4 つのボタン・コントロールを追加し (必要であれば、表に 1 行追加します)、次のラベルを付けます。

  • Save
  • Delete
  • Cancel
  • Edit
 

3. Save ボタンの種類を「送信」に変更します。

 

4. スタイル・タブで、クラスを profilesButtonSubmit に設定します。

5. イベント・タブでシンプル・アクションを追加します。:「ページを開く」: home.xsp

 

6. Delete ボタンに計算結果の「表示」プロパティーを追加します。

 

JavaScript エディターで、次の式を追加します。

!document1.isNewNote()

7. クラスを profilesButtonCommand に設定します。

8. 別のシンプル・アクション (文書を削除して home.xsp ページに戻る) を追加します。

 

9. Cancel ボタンの種類を「キャンセル」に変更します。

10. クラスを profilesButtonCancel に変更します。

11. home.xsp を開くシンプル・アクションを追加します。

12. profilesButtonCommand クラスを Edit ボタンに適用します。次の式を使用して、Edit ボタンの計算結果「表示」プロパティーを作成します。

!document1.isEditable()

13. イベントにシンプル・アクション「文書モード: 編集モード」を追加します。

ブラウザーでページをプレビューします。

4. 結果

 

5. 検討事項

  • 現在の分が奇数 (1、3、5 ... 59) の場合は、編集ボタンを非表示にします (意味はありませんが、おもしろい例です)。
  • ページ・プロパティーをチェックすると、成功および失敗の場合のページ・ナビゲーションとして代替手法があります。
 

コメント

1) 現在の分が奇数の場合は編集ボタンを非表示にします

Brijesh Yadav | 8/25/2009 3:34:28 AM ET

「表示」プロパティーで次のコードを使用すると、現在の分が奇数の場合に Edit ボタンを非表示にできます。

var dd = new Date();
var min = dd.getMinutes();
if((min%2) ==0)
{ profiledoc.isEditable();
}
else
{ !profiledoc.isEditable();
}

XPages の概要 – 演習 7

1. 学習内容

XPages 上の別のコントロールにデータを渡す方法、および XPages で先行入力機能を有効にする方法について学習します。

2. タスクの説明

profileForm カスタム・コントロールには、コンボ・ボックス設計要素があります。静的または動的な検索によって、このコントロール用の選択肢の値を生成します。

3. 詳細手順

1. 「keywords」という名前の Notes フォームを作成します。

次のフィールドを追加します。

  • Name (テキスト)
  • Values (テキスト、複数値も可)

以下の両方のオプションで、唯一の区切り記号として「改行」を選択します。

 

2. 「keywordLookup」という Notes ビューを作成します。

選択式は次のとおりです。

SELECT form=”keywords”

Name フィールドを表示するよう、最初の列を変更します。

この列を昇順にソートします。

3. Lotus Notes クライアントでフォームをプレビューし、文書に「TimeZones」という名前を付け、codeSnippets/TimeZones.txt からテキストを追加します。文書を保存して閉じます。

もう 1 度フォームをプレビューし、この文書に「Countries」という名前を付け、codeSnippets/Countries.txt からテキストを追加します。

文書を保存して閉じます。

4. profileForm カスタム・コントロールで Gender コンボ・ボックスを選択します。「値」タブで、次のように指定します。

  • “Male”
  • “Female”
  • “Confused”
 

5. Country 編集ボックス・コントロールを選択します。「タイプ・アヘッド」タブで、「タイプ・アヘッドを有効化」ボックスにチェック・マークを付け、モードを「部分」に指定します。

6. Suggestions を計算結果値にして、次の式を追加します。

@DbLookup(@DbName(), "keywordLookup", "Countries", "Values")

7. 「大文字と小文字を区別」チェック・ボックスのチェック・マークを外します。

8. TimeZones コンボ・ボックス・コントロールを選択します。「値」タブで「式項目の追加」をクリックし、次の式を追加します。

@DbLookup(@DbName(), "keywordLookup", "TimeZones", "Values")

 

4. 結果

 
 

5. 検討事項

  • Country 編集ボックスをコンボ・ボックスに変更します。このコンボ・ボックスが、先行入力で使用したものと同じデータ・ソースで機能するようにします。

XPages の概要 – 演習 8

1. 学習内容

XPages で Notes ビューからのデータを表示する方法を学習します。

2. タスクの説明

XPages によって、Domino ビューからのデータをページ内に表示できます。より多くのことが可能です。この演習では、プロファイルのリストを結果ページに表示します。

3. 詳細手順

1. searchResults カスタム・コントロールを開きます。

2. styles.css リソースをカスタム・コントロールに追加します。

3. コントロールの一番上に、3 つの新しい行を追加します (後で、ここに内容を追加します)。

4. ビュー・コントロールをコントロール・パレットからページ・キャンバス上にドラッグします。

 

5. ヘルパー・ダイアログで「profiles」を表示オプションとして選択します。「OK」をクリックします。

 

6. 設計エディターでビューをクリックし、幅を 100% に設定します。

7. 「表示」タブで最大行数を 10 に設定します。

8. Full Name 列ヘッダーをクリックします。「ビューの列のヘッダー」タブで「列のソート」オプションをオンにします。

 

9. Full Name 列をクリックします。「列の値をリンクとして表示する」チェック・ボックスをオンにします。

10. 読み取り専用オプションを選択します。

 

ブラウザーで結果をプレビューします。

4. 結果

 

5. 検討事項

  • 「Edit」という単語だけを含む列を追加し、文書を編集モードで開きます。
  • その単語を編集アイコンで置き換えます。
  • 同じ国のすべての連絡先をリストする列を追加します (これには、データベースに追加ビューが必要となるでしょう)。

6. 参考資料

http://www.lotus911.com/nathan/escape.nsf/d6plinks/NTFN-7FRG79

XPages の概要 – 演習 9

1. 学習内容

拡張データ・バインディングをともなう XPages スコープ・コンテキストの使い方、およびフォーム間でのデータの伝搬方法について学習します。さらに、ビュー・データのサブセットだけを表示する方法についても学習します。

2. タスクの説明

検索ページを完成させ、検索結果を結果ページに表示します。結果ページには、検索結果またはすべてのプロファイルのいずれかを表示します。

3. 詳細手順

1. XPages エディターで SearchForm カスタム・コントロールを開きます。

2. New profile ボタンを追加し、これを profilesButtonCommand スタイルにマッピングします。

3. ページのシンプル・アクションをボタンに追加します。

 

5. 「サーバー・オプション」ペインで「データの検証を行わない」ボックスのチェック・マークをオンにします。

6. 「Profile Search」というラベルを追加し、太字にします。

7. 「Enter the search criteria:」というラベルを追加します。

8. 編集ボックスを追加し250px の幅に拡大します。

9. 「Search」という名前で、profilesButtonCommand クラスのボタンを追加します。

  • ブラウザーで home XPage をプレビューします。

10. 編集ボックスに拡張データ・バインディングを追加します。

  • スコープ変数: requestScope
  • 変数名: nameToSearch
 

11. 編集ボックスを選択し、「タイプ・アヘッド」タブに移動します。「部分」を選択し、次の式を使用して計算結果の候補リストを指定します。

@DbColumn(@DbName(), "profiles", 0)

12. 「大文字と小文字を区別」ボックスのチェック・マークを外します。

13. 検索ボタンにシンプル・アクション「スクリプトの実行」を追加し、次の式を追加します。

sessionScope.nameToSearch = requestScope.nameToSearch

14. 2 つ目のシンプル・アクション「ページを開く」->「results.xsp」を追加します。

15. searchResults カスタム・コントロールを開きます。

16. 一番上に、計算結果フィールド・コントロールを追加します。これに「resultsComputedField」という名前を付け、「searchInfo」クラスにマッピングします。

17. フィールドの「値」タブで JavaScript を選択し、次のスクリプトを追加します。

var criteria =  sessionScope.nameToSearch; 
  var title =  "Profile search results for: ";
  if(null  != criteria && criteria != ""){ 
  title  += criteria; 
  }
  else{ 
  title = "No  search criteria provided."; 
  }
  return title;

18. ビュー・コントロールを選択し、「すべてのプロパティー」タブをクリックします。データ・エントリーを展開します。

キー用の次の計算結果式を追加します。

sessionScope.nameToSearch

 

4. 結果

 
 

5. 検討事項

アプリケーションのコンテキストに検索語を書き込みます (これを行うには適切な javascript オブジェクトが必要です)。次に、最も使用頻度が高い検索ストリングとともに、「Today's popular searches:」というテキストをページに表示します。

XPages の概要 – 演習 10

1. 学習内容

サンプル・アプリケーションのフォームにデータ検証を追加します。

2. タスクの説明

データ検証を検索とプロファイルのフォームに追加します。必須フィールド、最小入力長フィールド、およびカスタム検証フィールドを使用します。

3. 詳細手順

1. searchForm カスタム・コントロールを開き、searchBox を選択します。

2. 「検証」タブで、検索フィールドの最小値 (3) および最大値(40) を指定します。

3. エラー・メッセージを指定します。

 

4. ページをテストします。

 

5. profileForm カスタム・コントロールを開きます。

6. 「必須フィールド」を FirstName と LastName に追加し、結果をチェックします。LastName フィールドに検証を追加します。つまり、Save ボタンの onClick イベントに移動し、イベントのクライアント・スクリプトで FirstName と同じでないことを確認します。次のスクリプトを入力します。

var firstName =  dojo.byId("#{id:FirstName}"); 
  var lastName =  dojo.byId("#{id:LastName}"); 
  if  (firstName.value == lastName.value){ 
  alert("The  First Name and Last Name must be different"); 
  return false; 
  }else{ 
  return true;

4. 結果

 

5. 検討事項

  • JavaScript の正規表現を使用して (Google が役立ちます)、「Is this a valid email」を電子メール・フィールドに追加します。
  • 文書がドラフト・モードの場合は、requestScope 変数の isDraft を使用して検証を回避します (ドラフト・モードがどのように機能するかを考慮します)。

6. 参考資料

XPages の概要 – 演習 11

1. 学習内容

データ検証のさまざまなモードを調べ、サーバー・サイドの検証とエラー表示コンポーネントを使用します。XPages のエラー処理の概念および機能に習熟します。

2. タスクの説明

xScrapbook データベースで新規ページを作成し、2 つのサーバー・サイドのエラー処理コントロールとその使い方を調べます。この演習は、サンプル・アプリケーションの一部とはなりません。

3. 詳細手順

1. Scrapbook データベースを開き、「validationTest」という名前の新しい XPages を作成します。

2. 以下の 5 つのフィールドを作成します。

Name、TagLine、Color (選択肢がred、yellow、green のドロップダウン・リスト)、myCheckbox (チェック・ボックス)、itemCount

 

3. Name フィールドを必須フィールドにして、エラー・メッセージを追加します。

 

4. TagLine フィールドの最小長を 4、最大長を 40 に指定し、エラー・メッセージを作成します。

5. 「データ」で itemCount を数値表示にして、

 

「すべてのプロパティー」で「データ」->「Converter」->「xp:convertNumber」を確認します。

 

ブラウザーで結果をプレビューします – ここに、サーバー・サイドの検証を導入します。

6. Name コントロールの横に、「エラー表示」コントロールを追加します。この「次のエラー・メッセージを表示」プロパティーを「name」に設定します。

 

7. 「すべてのプロパティー」で Name コントロールを選択します。「データ」セクションで、「disable clientSideValidation」を true に設定します。

 

「送信」ボタンを追加し、ブラウザーでテストします。

8. フィールドと「送信」ボタンの間の適当な場所に、「複数エラー表示」コントロールを追加します。

 

9. TagLine コントロールで、「disableClientSideValidation」を設定します。

ブラウザーでテストします。

4. 結果

 

5. 検討事項

  • 検証にスクリプト・ライブラリーを使用します。
  • どのような場合に、クライアント・サイドまたはサーバー・サイドの検証を使用しますか。

XPages の概要 – 演習 12

1. 学習内容

検証 (または他の目的) 用のサーバー・サイドおよびクライアント・サイドの JavaScriptライブラリーの使い方について学習します。

2. タスクの説明

サンプル・コード (用意されているもの) を使用して、2 つの JavaScript ライブラリーを作成します。1 つはクライアントの JavaScript で、もう 1 つはサーバーの JavaScript です。この 2 つをサンプル・アプリケーションにリンクします。

3. 詳細手順

1. Designer のナビゲーターで「コード」を展開し、「スクリプト・ライブラリー」をダブルクリックします。

2. 新規 JavaScript ライブラリーを作成し、「ClientSideValidation」という名前を付けます。

3. 次のコードをライブラリーに貼り付けます。

function  checkSearchField(element, length, message){ 
if(null !=  element){ 
if(element.value  == ""){ 
alert(message); 
element.focus(); 
return  false; 
}
if(element.value.length  < length){ 
alert( 
"Please enter  a value of at least " + 
length + "  characters." 
);
element.select(); 
return false; 
}
return true; 
}}

4. validationTest ページでリソース・パネルを選択し、「スクリプト・ライブラリーの追加」を選択して「ClientSideValidation」ライブラリーを追加します。

 

送信ボタンを選択し、onClick イベント、クライアント・サイドを選択します。

次のコードを追加します。

var element =  dojo.byId("#{id:TagLine}"); 
checkSearchField(element,  4, "We need a tag line");
 

5. 新規スクリプト・ライブラリー「New Server Side Script Library」を追加します。

これに「ServerSideValidation」という名前を付けます。

6. 次のコードを追加します。

function  requiredFieldCheck(editBoxComponent, labelComponent, requiredMessage){ 
  var value =  editBoxComponent.getValue(); 
  if(null == value  || value == ""){ 
  labelComponent.setValue(requiredMessage); 
  return false; 
  }
  return true; 
  }

7. このサーバー・サイド・スクリプト・ライブラリーをページに追加します。

8. TagLine 編集コントロールの背後に新規ラベルを追加し、「TagLabel」という名前にします。ラベル自体はブランクにします。

9. シンプル・アクション・グループ「Execute script」を送信ボタンに追加します。

requiredFieldCheck( 
  getComponent("TagLine"), 
  getComponent("TagLabel"), 
  "Please  provide a tag line!");
 

ブラウザーでプレビューします。

4. 結果

 

5. 検討事項

  • アラート・ボックスに代わる方法として、どのような代替手法を使用できますか。

ダウンロード可能なリソース


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=975828
ArticleTitle=XPages入門: 前編
publish-date=08022010