チュートリアル > XPages Site Finder チュートリアル >
< 前へ | 次へ >

編集用の XPage を作成する

フォームを使用して Web ページを設計することもできますが、XPage では、より多くの UI オプションを使用することができ、より少ない労力で、外観をさらに詳細に制御することができます。 データバインディング用にフィールドのリストを提供するためのフォームも用意しておくと便利です。 XPage にコードを用意するのではなく、フォームを使用して、計算結果フィールドをフィールド式によって計算することもできます。

このレッスンでは、ページにテキストを追加する方法、ページにコントロールを追加する方法、スタイルシートでページの外観を調整する方法、ページにデータソースをバインドする方法について学習します。 多くのステップがありますが、一つずつ取り上げます。

以下の手順を実行します。

  1. XPage のリストの先頭で、[新規 XPage] をクリックします。 または、右クリックして [XPage] > [新規 XPage] を選択します。
  2. 新しい XPage に「サイト」という名前を付けて、[OK] をクリックします。 XPage とフォームの名前は同じにする必要はありませんが、同じ名前にしておくとよいでしょう。 これらに同じ名前を付けると、このチュートリアルには含まれていない特定の自動動作が可能になります。
  3. 以下のようにして、スタイルシートをページに追加します。
    1. 最後のペインで [スタイル] をクリックします。
    2. 末尾までスクロールし、[スタイルシートをページに追加する] をクリックします。
    3. [スタイルシートをページに追加する] ボックスで、[styles.css] を選択します。
    4. [OK] をクリックします。
    これらの CSS ファイルは、サンプルアプリケーションに組み込まれているスタイルシート設計要素です。
  4. 以下のように、ページのタイトルを追加して、スタイルを設定します。
    1. XPage で、ページのタイトル (「サイトの説明」など) を入力して、Enter を押します。
    2. テキストを強調表示します。
    3. 最後にあるペインで、[スタイル] をクリックします (まだフォーカスされていない場合)。
    4. [styles.css] の下のリストで、[.title] をクリックします。
    選択したスタイルに合わせてテキストの体裁が変更されます。
  5. 以下のようにして、XPage を Domino バックエンドデータストアに関連付けます (バインドします)。
    1. XPage のテキスト以外の部分をクリックして、ページ自体をフォーカスします。
    2. 下部ペインの [プロパティ] で、[データ] をクリックします。
    3. [追加] をクリックして、[Domino 文書] を選択します。

      document1 という名前のデータソースが表示されます。

    4. ペインの端のほうにある [フォーム] で、ドロップダウンリストから [Site] を選択します。

      これで、XPage が Site フォームのデータ定義に関連付けられます。

  6. 以下のようにして、データパレットをセットアップします。
    1. ペインの最下部にある [データパレット] リンクをクリックします。 [データ] タブがサイドペインに表示されます。[ウィンドウ] > [Eclipse ビューの表示] > [データ] をクリックして、[データ] タブを表示することもできます。
    2. [データ] タブで、[データソース] に [document1] を選択します。 新規データソースがデータパレットに表示される前に、XPage をフォーカスしておく必要があります。

      フィールド名とデータソースのタイプが、データソースの名前の下に表示されます。

    3. [データ] タブの左上隅で、[コントロールの選択ダイアログボックス] のアイコンをクリックして有効にします。

      [コントロールの選択ダイアログボックス] のアイコンは、以下のとおりです。

  7. データパレットのすべてのフィールドを選択して、XPage のタイトルの下にドラッグします。

    [データバウンドコントロールの選択] ダイアログボックスが開きます。

  8. 以下のようにダイアログボックスに入力します。
    1. すべてのチェックボックスにチェックマークを付けたままにしておき、フィールドを組み込むことを指定します。
    2. ラベルのテキストはすべてそのままにします。
    3. [サイトタイプ]を選択し、ドロップダウンメニューを使用して、そのコントロールタイプを [コンボボックス] に変更します。
    4. [Amenities] のコントロールタイプを [リストボックス] に変更します。
    5. [方向] のコントロールタイプを [複数行入力域ボックス] に変更します
    6. [生成されたコードに送信ボタンを追加する] にチェックマークを付けます。
    7. [生成されたコードにメッセージコントロールを追加する] にチェックマークを付けます。

    ダイアログボックスは、以下のようになります。

    [データバウンドコントロールの選択] ダイアログボックス

  9. [OK] をクリックします。

    これで、最初の列にラベル、2 番目の列にコントロールが表示された 2 列の表が作成されます。 2 番目の列には、検証エラーと [送信] ボタンを表示するための領域もあります。

  10. [サイトタイプ] フィールドにフォーカスを移動して、以下のように調整します。
    1. 最後のペインの [プロパティ] にある [データ] をクリックし、デフォルト値として「オフィス」と入力します。
    2. サイトタイプとして他の選択項目を追加するには、[プロパティ] に続いて [値] をクリックします。 [項目の追加] を 3 回クリックします。 各項目のラベルを選択して、[無題] から [オフィス]、[小売店]、[レストラン] に変更します。

      格納された値が表示値と異なっていない限り (ここでは当てはまりません)、[値] に何も入力する必要はありません。

  11. [Amenities] フィールドにフォーカスを移動して、以下のように調整します。
    1. 最後のペインの [プロパティ] にある [リストボックス] をクリックして、[複数選択を許可する] にチェックマークを付けます。
    2. [プロパティ] にある [値] をクリックします。 [項目の追加] を 4 回クリックします。 各項目のラベルを選択して、[無題] [カフェテリア]、[フィットネスセンター]、[ビジターセンター]、[エグゼクティブブリーフィングセンター] に変更します。
    3. 列 1 のセル内部でラベルコントロール ([アメニティ: (Amenities:)]) 以外の場所をクリックします。 [プロパティ] にある [表のセル] をクリックして、[セルの縦位置] で [上] を選択します。

      これで、ラベルがセルの先頭に位置合わせされます。

    アメニティにチェックボックスを使用する場合は、リストボックスを削除して、[コントロール] パレットからチェックボックスグループをドラッグします。 [プロパティ] で [データ] をクリックし、[バインド先] ドロップダウンメニューから [Amenities] を選択して、チェックボックスグループをバインドします。前述のステップ 11 のように、[値] タブに値を入力します。

    [City] と [searchCity] の両方のフィールドが用意されているのは、実際のサイト名とは異なる市区町村を検索できるようにするためです。 例えば、サンプルサイトの 1 つが Brighton (Boston 近郊) にある場合に、検索では Boston を指定します。 ただし、国ついては、実際の国と検索する国は同じであると想定しています。

    XPage は、以下のようになります。

    サイトの説明 XPage

    この時点で、XPage は、Site1 (比較対象として開くことができる) と類似したページになっています。

  12. 表を調整して、ページが編集可能になっていない場合に、[送信] ボタンを含む行が非表示になるようにします。 小規模な JavaScript が必要です。
    1. [送信] ボタンを含む表のセル (ボタンではなくセル) をクリックします。
    2. 下部ペインの [プロパティ] で、[表のセル] をクリックします (まだ選択されていない場合)。
    3. [表示] の横にあるひし形をクリックして、[値の計算] をクリックします。 スクリプトエディタが開きます。
    4. スクリプトエディタで、グローバル変数のリストの [document1] をダブルクリックして、ピリオドを入力します。

      グローバル変数 document1 は、XPage が表示している現在の文書を表す、NotesXspDocument タイプのオブジェクトです。 ピリオドを入力すると、そのオブジェクト用のメソッドのリストが表示されます。

    5. メソッドのリストを末尾までスクロールし、[isEditable()] をダブルクリックします。
      これは、文書が編集可能である場合は true、そうでない場合は false を返します。 式は、以下のようになります。
      document1.isEditable()
    6. [OK] をクリックします。

      スクリプトエディタが閉じ、コードが保存されます。

    このコードは、戻り値が false の場合、ボタンを含むセルを非表示にします。 セルではなくボタンを非表示にすることもできます。
  13. XPage で、コントロール以外の部分をクリックしてページをフォーカスし、[Ctrl] + [S] を押してページを保存します。
  14. [設計] > [Web ブラウザでのプリビュー] > [デフォルトのシステム Web ブラウザ] (または別のブラウザ) をクリックします。 値を入力して [送信] をクリックすることにより、アプリケーションをテストできます。 これで、新規文書がデータベースに入ります。 文書のリストを表示するには、Notes® クライアントを使用します。 作業が完了したら、ブラウザを閉じます。

    この時点で、XPage は、SiteFinal (比較対象として開くことができる) に類似したページになっています。

  15. 中央ペインの右上にある X をクリックして、Site XPage を閉じます。
< 前へ | 次へ >