Java スクリプトコントロールと JavaScript 関数の埋め込み
初版 2006/09/01 新規作成 第2 版 2006/09/12 構成変更
目 次 1 プロジェクト概要 2 ソフトウエア 2.1 対象NXJバージョン 2.2 アプリケーションサーバ 2.3 使用プロジェクト 3 実行環境設定手順 3.1 プロパティ設定 3.2 データベース接続設定 3.3 データベーステーブル作成 3.4 プロジェクトをMake 3.5 MySQLデータベースを利用時の構成 3.5.1 JDBCドライバのダウンロードとインストール 3.5.2 クラスパスの追加 4 機能解説 4.1 Clockフォーム 4.1.1 JavaScriptファイル 4.1.2 JavaScriptコントロール設定 4.2 GetNXJControlValueフォーム 4.2.1 JavaScriptファイル 4.2.2 JavaScriptコントロール設定 4.2.3 NXJコントロールの表示している値の参照方法 4.2.4 JSPページ 4.3 CallNXJCommand1 フォーム 4.3.1 JavaScriptファイル 4.3.2 JavaScriptコントロール設定 4.3.3 CallJavaScriptCmd開発者定義コマンド 4.4 CallNXJCommand2 フォーム 4.4.1 JavaScriptファイル 4.4.2 JavaScriptコントロール設定 4.4.3 CallAutoDataSet開発者定義コマンド 4.5 forms.sampleパッケージ 4.5.1 JavaScript関数からNXJフィールドコントロールに値を表示 4.5.2 onBlurFormフォーム 4.5.3 onChangeFormフォーム 4.5.4 onClickFormフォーム 4.5.5 onDoubleClickFormフォーム 4.5.6 onFocusFormフォーム 4.5.7 onKeyPressFormフォーム 4.5.8 onKeyUpFormフォーム 4.5.9 onMouseOutFormフォーム 4.5.10 onMouseOverFormフォーム 4.5.11 onMouseUpFormフォーム 4.5.12 onMouseDownFormフォーム
5 実行手順
5.1 アプリケーションサーバの起動 5.2 プロジェクトの配備及び実行 付録A DataServer Connection設定例 付録B Oracle Connection設定例 付録C MySQL Connection設定例 付録D ツールバー 実行ボタン
1 プロジェクト概要
NXJ が実装する Java スクリプトコントロールを使って JavaScript 関数を利用し、NXJ フォームの JSP ペ ージにJavaScript 関数を埋め込み、利用するフォーム集です。
2 ソフトウエア 2.1 対象 NXJ バージョン NXJ 10.5D 以降 2.2 アプリケーションサーバ JBoss アプリケーションサーバ (NXJ バンドル版) 2.3 使用プロジェクト プロジェクト名称 JavaScriptControl [プロジェクト構成] JavaScriptControl.prj プロジェクト設定ファイル databases フォルダ データベーススクリプト格納フォルダ sources フォルダ NXJ 開発ソースファイル格納フォルダ 以下のフォルダは、Make を実行時に作成されるフォルダです。 output フォルダ J2EE アプリケーションアーカイブファイル格納フォルダ temp フォルダ 一時ファイル格納フォルダ プロジェクトは、NXJ アプリケーションデザイナを使ってプロジェクト設定ファイルを開きます。
3 実行環境設定手順 プロジェクトをMake&配備し、フォームを実行する前の設定及び確認項目を以下に示しています。 NXJ アプリケーションデザイナは、Windows スタートメニューから、 [プログラム]->[Unify NXJ]->[アプリケーションデザイナ]を選択することで起動します。 3.1 プロパティ設定 アプリケーションに固有の設定はありません。 3.2 データベース接続設定
このプロジェクトの Connections に作成している DataServer, Oracle または、MySQL の Connection を設定してデータベース接続を確認します。
DataServer Unify DataServer データベース接続用 Connection 定義 Oracle Oracle データベース接続用 Connection 定義
MySQL MySQL データベース接続用 Connection 定義 [例] DataServer Connection を利用する場合 DataServer Connection を開いて、以下の情報を入力します。 タイプ DataServer になっていることを確認します。 Jar/Zip ファイル SimbaJDBC.jar ファイルが選択されていることを確認します。 ユーザ名 DataServer データベースに接続するユーザ名を指定します。 パスワード ユーザ名に対するパスワードを指定します。 実行時のデータソース DataServer になっていることを確認します。 ホスト DataServer データベースサーバのホスト名を指定します。 ポート DataServer データベースがリスンしているポート番号を指定します。 DNS 接続するデータベースのDNS を指定します。 このコネクションをデフォルトにする チェックボックスをチェックします。 上記設定を行った後、テストボタンをクリックして接続が成功することを確認し、OK ボタンをクリ ックして設定を終了します。
[例] Oracle Connection を利用する場合 Oracle Connection を開いて、以下の情報を入力します。 タイプ Oracle になっていることを確認します。 Jar/Zip ファイル ojdbc14.jar ファイルが選択されていることを確認します。 ユーザ名 Oracle データベースに接続するユーザ名を指定します。 パスワード ユーザ名に対するパスワードを指定します。 実行時のデータソース Oracle になっていることを確認します。 ホスト Oracle データベースサーバのホスト名を指定します。 ポート Oracle データベースがリスンしているポート番号を指定します。 SID 接続するデータベースのSID を指定します。 このコネクションをデフォルトにする チェックボックスをチェックします。 上記設定を行った後、テストボタンをクリックして接続が成功することを確認し、OK ボタンをクリ ックして設定を終了します。 [参照] 付録B Oracle Connection設定例 [例] MySQL Connection を利用する場合 MySQL Connection を開いて、以下の情報を入力します。 タイプ MySQL になっていることを確認します。 Jar/Zip ファイル mysql.jar ファイルが選択されていることを確認します。 ユーザ名 MySQL データベースに接続するユーザ名を指定します。 パスワード ユーザ名に対するパスワードを指定します。 実行時のデータソース MySQL になっていることを確認します。 ホスト MySQL データベースサーバのホスト名を指定します。 ポート MySQL データベースがリスンしているポート番号を指定します。 dbname 接続するデータベースのデータベース名を指定します。 このコネクションをデフォルトにする チェックボックスをチェックします。 上記設定を行った後、テストボタンをクリックして接続が成功することを確認し、OK ボタンをクリ ックして設定を終了します。 [備考] MySQLデータベースを利用する場合は、3.5 MySQLデータベースを利用時の構成 を参照してくだ さい。 [参照] 付録C MySQL Connection設定例
3.3 データベーステーブル作成 プロジェクトの databases フォルダにあるスクリプトを使ってデータベーステーブルとテストデータ を作成します。 [例] DataServer Connection を使用する場合 DataServer.sql スクリプトにあるテーブルとテストデータを作成します。 [例] Oracle Connection を使用する場合 Oracle.sql スクリプトにあるテーブルとテストデータを作成します。 [例] MySQL Connection を使用する場合 MySQL.sql スクリプトにあるテーブルとテストデータを作成します。 3.4 プロジェクトを Make NXJ アプリケーションデザイナのメニューバーから[プロジェクト]->[すべて Make]を選択し、プロジ ェクトをMake し、エラー無く終了することを確認しておきます。
Make を実行するとプロジェクトから J2EE アプリケーションアーカイブファイルの EAR または、 ZIP ファイルを生成します。
3.5 MySQL データベースを利用時の構成 MySQL データベースを利用してプロジェクトを実行する場合、事前に準備しなければならないことを 説明します。 3.5.1 JDBC ドライバのダウンロードとインストール MySQL データベース用の JDBC ドライバは、Unify NXJ には含まれていません。 NXJ のドキュメント Unify NXJ がサポートする構成(Configurations.pdf) をご参照の上 MySQL データベース用の JDBC ドライバをダウンロードし、インストールを行って下さい。 ここでは、JDBC ドライバを、Unify NXJ をインストールしたフォルダの lib¥jdbcDrivers に mysql.jar としてインストールしたものとして以降の説明をしています。 [備考] Unify NXJ のインストールフォルダは、C:¥unify¥nxj フォルダにインストールしているものと します。 3.5.2 クラスパスの追加 MySQL データベース用の JDBC ドライバクラスを JBoss アプリケーションサーバのクラスパス に追加します。
Unify NXJ をインストール時、Windows サービスとして登録した場合は、run.bat スクリプトと、 Windows サービスの両方にクラスパス設定を追加します。
●run.bat スクリプトの場合
run.bat スクリプトをエディタで編集し、JBOSS_CLASSPATH に MySQL の JDBC ドライバク ラスのJar ファイルへのパスを追加します。 run.bat スクリプトは、インストールフォルダの jboss¥bin フォルダにあります。 [追加例] set JDBCDRIVERS=%UNIFY_HOME%¥lib¥jdbcDrivers set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥ojdbc14.jar set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥orai18n.jar set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥Fositex.jar set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥jconn2.jar set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥jtds-0.8.1.jar set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥SimbaJDBC.jar set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥JdbcOraWrapper.jar set JBOSS_CLASSPATH=%JBOSS_CLASSPATH%;%JDBCDRIVERS%¥mysql.jar [備考] UNIFY_HOME : Unify NXJ をインストールしたフォルダへのパスを示しています。
●Windows サービスの場合
JBoss サービスのレジストリエントリに MySQL の JDBC ドライバクラスの Jar ファイルへのパ スを設定します。
[レジストエントリ] (場所)
マイコンピュータ¥HKEY_LOCAL_MACHINE¥System¥CurrentControlSet¥Services¥ Unify NXJ Development Server¥Parameters
(追加するプロパティ名) -Djava.class.path (文字列値) JVM Option Number XX XX : 設定するプロパティ名を含むエントリの番号に置き換えます。 例えば、16 に上記のプロパティ名が含まれている場合は、文字列値は以下のようにな ります。 JVM Option Number 16 (追加する設定値) MySQL の JDBC ドライバクラスの Jar ファイルへのパス [設定値例] 設定値の最後に追加 (JVM Option Number 16 文字列値) ;C:¥unify¥nxj¥lib¥jdbcDrivers¥mysql.jar [備考] この操作は、レジストリ情報に変更を加えます。 レジストリ情報のバックアップを作成する等、十分注意して行ってください。 レジストリエントリの場所を改行して記述していますが、1 つの場所を示しています。
4 機能解説 JavaScript コントロールをフォームに配置して、NXJ フォームと JavaScript 関数を呼び出すフォームです。 4.1 Clock フォーム パッケージ forms このフォームは、JavaScritp コントロールに周期的に実行される JavaScript 関数を設定し、NXJ フォ ーム上にデジタル時計を表示しています。 4.1.1 JavaScript ファイル drawClock()関数の JavaScript ファイルは、プロジェクトに格納しています。 場所 Static Content/JavaScript フォルダ ファイル名 clock.js 4.1.2 JavaScript コントロール設定 JavaScript コントロールのプロパティに以下の設定を行います。 [プロパティ設定] プロパティ名称 設定値
Component/Include (JavaScript ファイル) JavaScript/clock.js Component/JavaScript( JavaScript 関数名) drawClock()
4.2 GetNXJControlValue フォーム パッケージ forms JavaScript 関数から NXJ コントロールがフォームに表示している値を参照するフォームです。 各コントロール横のボタンをクリックすることで、現在の値を JavaScript の alert() 関数で表示しま す。 [備考] ここで参照する値は、フォーム上に表示されているデータであり、NXJ コントロールにセットされて いるデータではありません。 4.2.1 JavaScript ファイル NXJ コントロールの表示している値を参照する関数の JavaScript ファイルは、プロジェクトに格 納しています。 場所 Static Content/JavaScript フォルダ ファイル名 NXJControlValue.js このファイルJavaScript ファイルには、以下の関数があります。 (1) getNXJButtonTitle()関数 フォーム上のNXJ ボタンコントロールの Button/Title プロパティに設定されているボタンラ ベルの表示を参照します。 動的変数を利用している場合は、現在表示されているボタンラベルを参照します。 (2) getNXJTextFieldValue()関数 フォーム上のNXJ テキストフィールドコントロールの表示している値を参照します。 複数値を取るテキストフィールドの場合、現在カレントとなっているレコードの表示値を参照 します。 (3) getNXJTextAreaValue() フォーム上のNXJ テキストエリアコントロールの表示している値を参照します。 複数値を取るテキストエリアの場合、現在カレントとなっているレコードの値を参照します。 (4) getNXJListBoxValue() フォーム上のNXJ リストボックスコントロールの表示している値を参照します。 複数値を取るリストボックスの場合、現在カレントとなっているレコードの値を参照します。 (5) getNXJDropdownListBoxValue() フォーム上の NXJ ドロップダウンリストボックスコントロールの表示している値を参照しま す。 複数値を取るドロップダウンリストボックスの場合、現在カレントとなっているレコードの値 を参照します。
(6) getNXJDynamicTextFieldValue()
フォーム上のNXJ ダイナミックテキストコントロールの表示している値を参照します。 現在表示されている Text/Expression に設定されている表示値を参照します。
4.2.2 JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/NXJControlValue.js Component/JavaScript( JavaScript 関数名) なし 4.2.3 NXJ コントロールの表示している値の参照方法 JavaScript 関数内から NXJ コントロールがフォーム上に表示している値を参照するには、以下の 方法で行います。 参照することの出来るコントロールは、以下のコントロールの値になります。 [参照可能なコントロール] テキストフィールドコントロール テキストエリアコントロール リストボックスコントロール ドロップダウンリストボックスコントロール ボタンコントロール (タイトル) ダイナミックテキストフィールドコントロール ラジオコントグループコントロール [参照方法] document.forms['NXJForm'].elements['ControlName.'].value 'NXJForm'：固定値 ControlName：参照するコントロールの名称にドット(.) を付加した名称 [参照例] テキストフィールドコントロール Text1 の表示している値をダイアログに表示 alert ( document.forms['NXJForm'].elements['Text1.'].value);
4.2.4 JSP ページ このフォームの JSP ページに、各ボタンをクリックした時に呼び出す JavaScript 関数の JavaScript イベントを追加しています。 (1) button100 テキストフィールドコントロールの値を表示するgetNXJTextFieldValue()関数を onclick イベ ントにセットしています。 [例] onclick="getNXJTextFieldValue()" (2) button200 テキストエリアコントロールの値を表示する getNXJTextAreaValue() 関数を onclick イベン トにセットしています。 [例] onclick="getNXJTextAreaValue()" (3) button300 リストボックスコントロールの値を表示するgetNXJListBoxValue() 関数を onclick イベント にセットしています。 [例] onclick="getNXJListBoxValue()" (4) button400 ドロップダウンリストボックスコントロールの値を表示する getNXJDropdownListBoxValue() 関数を onclick イベントにセットしています。 [例] onclick="getNXJDropdownListBoxValue()" (5) button500 ボタンコントロールのタイトルを表示するgetNXJButtonTitle () 関数を onclick イベントにセ ットしています。 [例] onclick="getNXJButtonTitle()"
(6) button600
ダイナミックテキストコントロールのタイトルを表示する getNXJDynamicTextFieldValue() 関数をonclick イベントにセットしています。
[例]
4.3 CallNXJCommand1 フォーム パッケージ forms.interval JavaScript 関数から NXJ コマンドを呼び出すフォームです。 このフォームは、JavaScript 関数から NXJ コマンドを周期的に呼び出しています。 4.3.1 JavaScript ファイル NXJ コマンドを周期的に呼び出す為の関数の JavaScript ファイルは、プロジェクトに格納してい ます。 場所 Static Content/JavaScript フォルダ ファイル名 NXJCmd.js 10 秒周期で、NXJCommand()関数を呼び出します。 この JavaScript ファイルには、以下の関数があります。 (1) NXJCommand()関数 NXJ が準備している JavaScript 関数 callNxjCommand()関数を使って NXJ コマンドを呼び 出します。 この関数は、CallJavaScriptCmd 開発者定義コマンドを呼び出します。 callNxjCommand("CallJavaScriptCmd",""); [構文] callNxjCommand(commandName, dataview) commandName 呼び出すNXJ コマンドの名称 dataview 呼び出すNXJ コマンドが実装されているデータビュー 省略した場合は、カレントデータビュー [例] JavaScript コントロールが配置されているフォームの C1 コマンドを呼び出す callNxjCommand(“C1”, “”) 4.3.2 JavaScript コントロール設定 このJavaSctipt コントロールは、実行時にはフォームに何も表示しません。 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/interval/NXJCmd.js Component/JavaScript( JavaScript 関数名) NXJCommand()
4.4 CallNXJCommand2 フォーム JavaScript 関数から NXJ コマンドを呼び出すフォームです。 このフォームは、JavaScript 関数から NXJ コマンドを周期的に呼び出しています。 呼び出される NXJ コマンドは、ターゲットフィールドにデータをセットし、データベーステーブルに レコードを追加します。 そして、レコードを追加したテーブル(JAVASCRIPT_CONTROL)を検索し、その結果を繰返し領域に 表示しています。 4.4.1 JavaScript ファイル NXJ コマンドを周期的に呼び出す為の関数の JavaScript ファイルは、プロジェクトに格納してい ます。 場所 Static Content/JavaScript フォルダ ファイル名 NXJCmd2.js 10 秒周期で、callAuto()関数を呼び出します。 このファイル JavaScript ファイルには、以下の関数があります。 (1) setData()関数 NXJ が準備している JavaScript 関数 callNxjCommand()関数を使って NXJ コマンドを呼び 出します。 この関数は、CallAutoDataSet 開発者定義コマンドを呼び出します。 [例] callNxjCommand(‘CallAutoDataSet’,’’); (2) callAuto()関数 setData()関数を呼び出します。 4.4.2 JavaScript コントロール設定 このJavaSctipt コントロールは、実行時にはフォームに何も表示しません。 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/interval/NXJCmd2.js Component/JavaScript( JavaScript 関数名) callAuto()
4.4.3 CallAutoDataSet 開発者定義コマンド このコマンドは、以下の処理を行っています。 (1) フォームのターゲットテーブルにレコード挿入 フォームのターゲットフィールドに挿入レコードをセットし、updateCurrentRecord() メソッ ドを実行してテーブルに挿入しています。 (2) データビューを検索 データビューに配置したターゲットテーブル(JAVASCRIPT_CONTROL)を検索し、繰返し領 域にレコードを表示しています。
4.5 forms.sample パッケージ
このパッケージのフォームは、主なJavaScript イベントから JavaScript 関数を呼び出す為のイベント をNXJ フォームに埋め込んだサンプルフォームです。
[備考]
JavaScript 関数を NXJ フォームに埋め込む場合、NJX Active Web 機能との関連で正しく動作しない 場合もあります。
例えば、onKeyDown イベントは、NXJ Active Web 機能が、このイベントをハンドリングするため、 NXJ フォームに埋め込んだ JavaScript 関数は、このイベントで処理ができません。 また、JavaScript 関数から表示したデータは、JSP ページのフィールドにデータを表示しているだけ で、NXJ コントロールの値にセットするものではありません。 4.5.1 JavaScript 関数から NXJ フィールドコントロールに値を表示 JavaScript 関数から NXJ フィールドコントロールへの値の表示は、以下の方法で行っています。 [構文] document.forms['NXJForm'].elements['NXJVariable.'].value = Value; NXJForm 固定値 NXJVariable. 値をセットするNXJ フィールドコントロールの名称 名称の最後に必ず ドット(.) を付加 Value NXJ フィールドに表示する値 4.5.2 onBlurForm フォーム テキストフィールドコントロールにJavaScript イベント onblur を埋め込んだフォームです。 テキストフィールドコントロールにデータが表示されている時に、そのフィールドから入力フォー カスが無くなると、JavaScript 関数からその値を表示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onBlurJ.js 関数名 blur1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onBlurJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 blur1 [例] onblur="blur1()"
4.5.3 onChangeForm フォーム テキストフィールドコントロールにJavaScript イベント onchange を埋め込んだフォームです。 テキストフィールドコントロールのデータを変更後、そのフィールドから入力フォーカスが無くな ると、JavaScript 関数からその値を表示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onChangeJ.js 関数名 change1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onChangeJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 change1 [例] onchange=" change1()" 4.5.4 onClickForm フォーム テキストフィールドコントロールにJavaScript イベント onclick を埋め込んだフォームです。 テキストフィールドコントロールをクリックすると、JavaScript 関数からその値を表示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onClickJ.js 関数名 click1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onClickJ.js Component/JavaScript( JavaScript 関数名) なし
(3) JavaScript 関数呼び出し
NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 click1
4.5.5 onDoubleClickForm フォーム テキストフィールドコントロールにJavaScript イベント ondblclick を埋め込んだフォームです。 テキストフィールドコントロールをダブルクリックすると、、JavaScript 関数からその値を表示し ます。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onDoubleClickJ.js 関数名 dclick1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onDoubleClickJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 dclick1 [例] ondblclick="dclick1()" 4.5.6 onFocusForm フォーム テキストフィールドコントロールにJavaScript イベント onfocus を埋め込んだフォームです。 テキストフィールドコントロールが、入力フォーカスを得ると、JavaScript 関数からその値を表 示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onFocusJ.js 関数名 focus1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onFocusJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 focus1 [例] onfocus="focus1()"
4.5.7 onKeyPressForm フォーム テキストフィールドコントロールに JavaScript イベント onkeypress を埋め込んだフォームです。 テキストフィールドコントロールで英数文字キーを押下した時、JavaScript 関数からその値を表 示します。 表示するデータは、キー押下前のテキストフィールドコントロールの値を表示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onKeyPressJ.js 関数名 keyPress1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/ onKeyPressJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 keyPress1 [例] onkeypress="keyPress1()" 4.5.8 onKeyUpForm フォーム テキストフィールドコントロールにJavaScript イベント onkeyup を埋め込んだフォームです。 テキストフィールドコントロールにデータを入力する為にキーを押下して放すタイミングで、 JavaScript 関数からその値を表示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onKeyUpJ.js 関数名 keyUp1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onKeyUpJ.js Component/JavaScript( JavaScript 関数名) なし
4.5.9 onMouseOutForm フォーム テキストフィールドコントロールにJavaScript イベント onmouseout を埋め込んだフォームです。 テキストフィールドコントロールからマウスが離れた時、JavaScript 関数からその値を表示しま す。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onMouseOutJ.js 関数名 mouseOut1 ) (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onMouseOutJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 mouseOut1 [例] onmouseout="mouseOut1()" 4.5.10 onMouseOverForm フォーム テキストフィールドコントロールに JavaScript イベント onmouseover を埋め込んだフォームで す。 テキストフィールドコントロールにマウスが入った時、JavaScript 関数からその値を表示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onMouseOverJ.js 関数名 mouseOver1 () (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onMouseOverJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 mouseOver1 [例] onmouseover="mouseOver1()"
4.5.11 onMouseUpForm フォーム テキストフィールドコントロールに JavaScript イベント onmouseup を埋め込んだフォームです。 テキストフィールドコントロールをマウスでクリックした後にマウスボタンを離した時に、 JavaScript 関数からその値を表示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onMouseUpJ.js 関数名 mouseUp1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/ onMouseUpJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 mouseUp1 [例] onmouseup="mouseUp1()" 4.5.12 onMouseDownForm フォーム テキストフィールドコントロールにJavaScript イベント onmousedown を埋め込んだフォームで す。 テキストフィールドコントロールをマウスでクリックした時に、JavaScript 関数からその値を表 示します。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onMouseDownJ.js 関数名 mouseDown1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/ onMouseDownJ.js Component/JavaScript( JavaScript 関数名) なし
4.5.13 onSelectForm フォーム テキストフィールドコントロールにJavaScript イベント onselect を埋め込んだフォームです。 テキストフィールドコントロールのデータを選択すると、JavaScript 関数からその値を表示しま す。 (1) JavaScript ファイル 場所 Static Content/JavaScript/sample フォルダ ファイル名 onSelectJ.js 関数名 select1() (2) JavaScript コントロール設定 [プロパティ設定]
Component/Include (JavaScript ファイル) JavaScript/sample/onSelectJ.js Component/JavaScript( JavaScript 関数名) なし (3) JavaScript 関数呼び出し NXJ フォームの JSP ページに JavaScript イベントコードをコーディング。 テキストフィールドコントロール名 selectF1 [例] onselect="select1()"
5 実行手順
プロジェクトの実行手順を説明します。
NXJ アプリケーションデザイナがインストールされたマシンに構成されている JBoss アプリケーションサー バを使用した手順で説明します。
5.1 アプリケーションサーバの起動
JBoss アプリケーションサーバを Windows サービスまたは、run.bat スクリプトを利用して起動しま す。
[Windows サービスによる起動]
(1) Windows サービスを表示します。
(2) Windows サービスパネルから Unify NXJ Development Server を開始します。 [run.bat スクリプトによる起動]
(1) Windows コマンドプロンプトを実行します。
(2) Unify NXJ をインストールしたフォルダの jboss¥bin フォルダに移動します。 (3) run.bat バッチファイルを実行します。
5.2 プロジェクトの配備及び実行 プロジェクトをアプリケーションサーバに配備し、実行する手順を説明します。 (1) NXJ アプリケーションデザイナの起動 Windows スタートメニューから [プログラム]->[Unify NXJ]->[アプリケーションデザイナ]を選択 します。 (2) プロジェクトを開く NXJ アプリケーションデザイナのメニューバーから [ファイル]->[プロジェクトを開く]を選択し、JavaScriptControl.prj ファイルを選択します。 (3) 実行 NXJ アプリケーションデザイナの実行ツールバーをクリックまたは、実行ツールバーの▼をクリッ クしてフォームリストからフォームを選択して実行します。 NXJ アプリケーションデザイナが、JBoss アプリケーションサーバにプロジェクトを配備し、ブラ ウザを立ち上げてフォームを表示します。 [参照] 付録D ツールバー 実行ボタン 付録E ツールバー 実行ボタン フォームリスト表示 [備考１] NXJ アプリケーションデザイナは、Make されていないプロジェクトに対して配備または、実行コ マンドが選択された場合には、自動的に Make を実行し、正常終了した後にプロジェクトをアプリ ケーションサーバへ配備を実行します。 [備考２] NXJ リリース 11.5 は、ツールバー実行ボタンをクリックすると、プロジェクトプロパティの全般 パネルの デフォルトエントリポイント に指定されているフォームが実行されます。
付録A DataServer Connection 設定例 ユーザ administrator ホスト senna
ポート 1583 DNS senna_ds82
付録B Oracle Connection 設定例 ユーザ honda ホスト senna ポート 1521 SID ora92
付録C MySQL Connection 設定例 ユーザ root ホスト senna ポート 3307 dbname test
付録D ツールバー 実行ボタン
付録E ツールバー 実行ボタン フォームリスト表示
