クライアントサイドのスクリプト

Client イベントの起動により、その JavaScript コードと XPage コンテキストが、ユーザーのクライアント上のインタープリタに送信されます。

クライアントサイドのインタープリタには以下の特性があります。

クライアントの Document Object Model (XML と HTML 用) にアクセスできます。
文書ストアへのアクセスなどのアクティビティを実行するために、サーバー JavaScript ライブラリにアクセスすることはできません。
式には使用できません。
クライアントのスクリプトライブラリのみにアクセスできます。
ユーザーのクライアントで検出された標準 JavaScript を使用します。

サーバー情報の取得

クライアントサイドのスクリプトに XSP 形式で式を埋め込むことで、サーバーからクライアントに情報を渡すことができます。 JavaScript の構文は次のとおりです。

#{javascript:statements}

次の例は、ボタンの onclick イベントに付加されたクライアントサイドのスクリプトを示したものです。このスクリプトをクライアントにロードする前に、共通のユーザー名がストリング定数としてクライアントサイドの alert メソッドに表示されるように、埋め込まれたサーバーサイドのスクリプトが実行されます。

window.alert("#{javascript:session.getCommonUserName()}")

DOM 要素の ID を取得する

ランタイムでは、設計コントロールの名前に基づいて DOM 要素に ID を割り当てます。例えば、inputText1 のランタイム ID は、view:_id1:inputText1 のようになります。 ID は予測可能でないため、リテラルとして指定しないでください。

次の構文をクライアントサイドのスクリプトに埋め込むことで、ID をクライアントに渡すことができます。

#{id:control_name}

例えば、次のコードは inputText1 という名前の編集ボックス用のクライアントサイドの onchange イベントです。

var e = window.document.getElementById("#{id:inputText1}");
e.value = e.value.toUpperCase()

イベント情報の取得

識別子 thisEvent を使用して、クライアントコードが実行されているイベントの Event オブジェクトを取得できます。これにより、イベントの標準プロパティにアクセスできます。

編集ボックスを対象とする以下のクライアントサイド onclick イベントでは、現在のコントロールの要素識別子を thisEvent の target プロパティから取得しています。編集ボックスが空である場合、ユーザーが編集ボックス内をクリックすると「enter valid name」というストリングが表示されます。

var e = window.document.getElementById(thisEvent.target.id);
if (e.value == "") {
	e.value = "enter valid name"
}

1 つのイベントに 2 つのスクリプトを付加する

クライアントサイドのスクリプトとサーバーサイドのスクリプトを同じイベントに付加することができます。

まず、イベントのサービス要求がサーバーに送信される前に、クライアントサイドのスクリプトが実行されます。
次に、サービス要求の受信時に、サーバーサイドのスクリプトが実行されます。ただし、クライアントサイドのスクリプトが false を返した場合は実行されません。戻り値が false である場合、サービス要求は取り消されます。

別の方法として、シンプルアクションまたはシンプルアクショングループを付加できます。イベントの一方のサイド (クライアントまたはサーバー) にスクリプトを付加し、もう一方のサイドにシンプルアクションまたはシンプルアクショングループを付加できます。 [スクリプトの実行] または [クライアントスクリプトの実行] のシンプルアクションをシンプルアクショングループで使用することによって、1 つのイベントに複数のスクリプトを付加できます。シンプルアクションを参照してください。

ボタンの onclick イベントに 2 つのイベントがあるとします。以下に示すクライアントサイドのスクリプトは、[OK] と [キャンセル] ボタンを含むダイアログを表示してユーザーに確認を求めます。ユーザーが [OK] をクリックすると、サーバーサイドのスクリプトが実行されます。ユーザーが [キャンセル] をクリックすると、サーバーサイドのスクリプトは実行されません。

if(window.confirm("Do you want to continue?") != true)
	return false

サーバースクリプトからのクライアントスクリプトのトリガー

view グローバルオブジェクトからアクセス可能な UI ビュールートには、サーバーがクライアントに返答した後にスクリプトを実行する postScript メソッドがあります。ボタンの onclick イベントに、2 つのシンプルアクションを伴うサーバーイベントがあるとします。最初のシンプルアクションは Save Document、2 番目のシンプルアクションは次のように指定されたスクリプトの Execute Script です。

view.postScript("alert('document saved')")

ユーザーがボタンをクリックすると、サーバーサイドイベントでは、XPage データを文書に保存してから、通知ダイアログが表示される時刻をクライアントに返答します。

エラーを検出する

クライアントサイドのエラーは設計時点では報告されません。正しくないコードがエディタで強調表示される場合もありますが、[問題] ビューでエラーが報告されず、展開プロセスでもエラーは表示されません。実行時のエラーコードが報告されることもありますが、障害が発生してもエラーが出されない場合もあります。

例えば、ボタンの onclick イベントに対する次のクライアントサイドのスクリプトには、単純な構文エラーが含まれています。しかし、エラーが報告されることなくスクリプトが展開されます。実行時にボタンをクリックしても何も実行されません。また、ページ上の他のスクリプトも正常に機能しない可能性があります。

window.alert("hello client world)

クライアントサイドのエラーを検出するには、ブラウザのエラーコンソール、JavaScript コンソール、Java™ コンソールをオンにします。通常はこれによって、エラーを報告する別のウィンドウが表示されます。例えば、Mozilla Firefox では、[ツール] > [エラーコンソール] をクリックします。例では、開くウィンドウには unterminated string literal が表示されています。