演習3：AJAXEX3 非同期処理の使用

Visual LANSA

previous page next page

ステップ

· 「メモ帳」を使用して「AJAXページAJAXEX3.HTM」のDHTML-JavaScriptコードをコピーして貼り付け、フレームワークのプライベート作業フォルダーにAJAXEX3.HTMという名前のAJAXページ・ファイルとして保存します。

· 「AJAXファンクションAJAXEX3」のAJAXファンクション・コードをコピーして、VL-IDEでAJAXEX3という名前のRDMLXファンクションに貼り付けます。Webサーバーで実行できるようにRDMLファンクションAJAXEX3をコンパイルします。

· ビジネス・オブジェクトAJAXで、AJAXページ・ファイルAJAXEX3.HTMとAJAXファンクションAJAXEX3を、次のようにコマンドAJAXEX3と関連付けるコマンド・ハンドラーとしてフレームワークにスナップインします。

· フレームワークを保存、再起動し、Webブラウザーで実行します。アプリケーション'AJAX Examples'を選択し、ビジネス・オブジェクトAJAXを選択します。これにより、デフォルト・コマンドAJAXEX1が実行されます。AJAXEX3タブをクリックしてAJAXEX3コマンドを実行します。

このAJAX例の目的は、AJAX処理の非同期の性質を示すことです。

人物に関連付けられている郵便番号を更新します。郵便番号を変更して、EnterキーまたはTabキーを押すと、変更内容が処理のためにサーバーに送信されます。送信されている間でも他の郵便番号を更新できます。

次のステップを試してみてください。

· 最初の郵便番号をクリックして選択します。

· できるだけ速く「1」と入力、Tabキーを押す、「2」、Tabキー、「3」、Tabキーを繰り返します。

次のように表示されるはずです。

変更を行ってTabキーを押すと、変更内容が妥当性検査のためにすぐにサーバーに送信されます。サーバーがこの要求を処理している間も変更を続けることができます。

実際のアプリケーションでは、受注明細を入力する可能性が高く、変更内容はすぐにサーバー・データベースで更新されます。

AJAXEX3.HTMのJavaScript/DHTMLコードとAJAXファンクションAJAXEX3のRDMLコードを見直して、コードの動作と実行方法の基本部分を理解する必要があります。

AJAX ページ AJAXEX3.HTM

<HTML>

/* ======================================================================== */

/* ======================== Handle Page Initialization ==================== */

/* ======================================================================== */

function VF_AJAX_Initialize()

{

/* Insert the variable style sheet (ie: XP, WIN, WEB style) into this page */

{

var objLink = document.createElement("LINK");

objLink.rel = "stylesheet"; objLink.type = "text/css";

objLink.href = STYLESHEET();

document.getElementById("HEAD_Tag").insertAdjacentElement("afterBegin",objLink);

}

/* Finished */

return;

}

/* ======================================================================== */

/* ======================== Handle Page Execution ========================= */

/* ======================================================================== */

function VF_AJAX_Execute()

{

/* Request that the server makes up 10 example name/address/zipcode details */

SENDREQUEST(window,"","LOAD10","",LOAD10_response);

/* Finished */

return;

}

/* ======================================================================== */

/* ======================= Handle Page Termination ======================== */

/* ======================================================================== */

function VF_AJAX_Terminate()

{

return;

}

/* -------------------------------------------------------- */

/* Rationalized virtual clipboard access to name space AJAX */

/* -------------------------------------------------------- */

function Put(val,np2,np3,inst) {AVSAVEVALUE(val,"AJAX",np2,np3,inst);}

function GetA(np2,np3,inst) {return(AVRESTOREAVALUE("","AJAX",np2,np3,inst));}

function GetN(np2,np3,inst) {return(AVRESTORENVALUE(0,"AJAX",np2,np3,inst));}

/* ---------------------------------- */

/* Handle server responding to LOAD10 */

/* ---------------------------------- */

function LOAD10_response(strFunction,strRequest,strPayload,objObject,flagFatalError,strFatalMessage)

{

var inst = 0;

/* Handle a fatal error in the server function */

if (flagFatalError) { alert(strFatalMessage); SETBUSY(false); return; }

/* Otherwise load the tabe with the 10 results and display to the user */

for (inst = 1; inst <= 10; inst++)

{

var objTR = TBODY_Tag.rows(inst - 1);

var objTDName = objTR.children(0);

var objTDAddress = objTR.children(1);

var objINZipCode = objTR.children(2).children(0);

var objTDStatus = objTR.children(3);

objTDName.innerText = GetA("EX3","NAME",inst);

objTDAddress.innerText = GetA("EX3","ADDRESS",inst);

objINZipCode.value = GetN("EX3","ZIPCODE",inst).toString();

objINZipCode.__validatedvalue = objINZipCode.value;

objTDStatus.innerText = " Loaded from Server ";

objTDStatus.style.backgroundColor = "palegreen";

}

/* Hide the message panel and show the table panel */

DIV_Message.style.visibility = "hidden"; DIV_Message.style.display = "none";

DIV_Table.style.visibility = "visible"; DIV_Table.style.display = "inline";

/* Drop busy status */

SETBUSY(false);

/* Finished */

return;

}

/* ------------------------------------------------------------ */

/* Handle key press in TBODY and tabbing to next input zip code */

/* ------------------------------------------------------------ */

function NextZipCode(objINZipCode)

{

var intNext = parseInt(objINZipCode.__Instance,10) + 1;

if (intNext > 10) intNext = 1;

var objNextINPUT = document.getElementById("IN" + intNext.toString());

if (objNextINPUT != null) objNextINPUT.focus();

}

function TBODY_onkeydown()

{

/* Ignore if not valid, or not enter or ab key */

if ((event.keyCode != 13) && (event.keyCode != 9)) return;

if (typeof(event.srcElement.__validatedvalue) == "undefined") return;

/* Extract the INPUT field involved, ignore if not zip code or not changed */

{

var objINZipCode = event.srcElement;

/* If unchanged do nothing */

if (objINZipCode.__validatedvalue == objINZipCode.value )

{

if (event.keyCode == 13) NextZipCode(objINZipCode);

}

else

{

while (objINZipCode.value.length < 5) objINZipCode.value = "0" + objINZipCode.value;

var floatNumber = parseFloat(objINZipCode.value);

/* var intInstance = parseInt(objINZipCode.__Instance,10); */

var intInstance = parseInt(objINZipCode.getAttribute("__Instance"),10);

if (isNaN(floatNumber)) { alert("Invalid number entered"); return; }

/* reaching here means a zip code that has been changed, so send validation request */

{

var objTDStatus = objINZipCode.parentElement.nextSibling;

objTDStatus.innerText = " Validating at Server ";

objTDStatus.style.backgroundColor = "gold";

}

objINZipCode.contentEditable = false;

Put(floatNumber,"EX3","ZIPCODE",intInstance);

SENDREQUEST(window,"","VALIDATE",intInstance.toString(),VALIDATE_response,objINZipCode);

if (event.keyCode == 13) NextZipCode(objINZipCode);

}

/* Finished */

return;

}

/* ------------------------------------ */

/* Handle server responding to VALIDATE */

/* ------------------------------------ */

function VALIDATE_response(strFunction,strRequest,strPayload,objINZipCode,flagFatalError,strFatalMessage)

{

var objTDStatus = objINZipCode.parentElement.nextSibling;

/* Handle a fatal error in the server function */

if (flagFatalError) { alert(strFatalMessage); return; }

objINZipCode.contentEditable = true;

if (GetA("EX3","RESPONSE") == "OK")

{

objINZipCode.__validatedvalue = objINZipCode.value;

objTDStatus.innerText = " Validated and Updated by Server ";

objTDStatus.style.backgroundColor = "springgreen";

}

else

{

objTDStatus.innerText = " Validation by Server failed - " + GetA("EX3","MESSAGE") + " ";

objTDStatus.style.backgroundColor = "tomato";

}

/* Zap the object reference */

objINZipCode = null;

}

</script>

</HEAD>

<P align='center'>High Volume Update</p>

<P align='center'>Loading ... please wait</p>

</div>

<table>

<thead>

<tr>

<th>Name</th><th>Address</th><th>Zip Code</th><th>Status</th></tr>

</thead>

</tbody>

</table>

</div>

</BODY>

</HTML>

AJAX ファンクション AJAXEX3

* This is just a simple RDMLX function.

* It is NOT a WAM.

* It is driven by the virtual clipboard

Function Options(*DIRECT *HEAVYUSAGE)

* Define local fields

Define Field(#REQUEST) Reffld(#STD_OBJ)

Define Field(#PAYLOAD) Reffld(#STD_TEXTL)

Define Field(#INSTANCE) Type(*DEC) Length(7) Decimals(0)

* Get the action and paylaod Javascript supplied ....

Execute Subroutine(GETA) With_Parms(SYSTEM REQUEST 1 #REQUEST)

Execute Subroutine(GETA) With_Parms(SYSTEM PAYLOAD 1 #PAYLOAD)

* Now switch on the requested action

Case Of_Field(#REQUEST)

* Load 10 sample entries

When Value_Is(= LOAD10)

Execute Subroutine(Load10)

* Validate a zip code

When Value_Is(= VALIDATE)

Execute Subroutine(VALIDATE)

* Handle a bad request

Otherwise

Abort Msgid(DCM9899) Msgf(DC@M01) Msgdta(('Unknown request ' + #REQUEST + ' received by ' + *FUNCTION))

Endcase

* Finished

Return

* =====================================================

* Request handling subroutines

* =====================================================

Subroutine Name(Validate)

* The paylaod contains the instance number of the zip code

* that is to be validated by this request, so get it as a number

#Instance := #Payload.AsNumber()

* Now get the zip code number associated with the instance

Execute Subroutine(GetN) With_Parms(EX3 ZipCode #Instance #Std_Num)

* Now validate the zip code and give response codes and error messages

Case (#Std_Num)

When (< 123)

Execute Subroutine(PutA) With_Parms(EX3 Response 1 ER)

Execute Subroutine(PutA) With_Parms(EX3 Message 1 ('Zip code ' + #Std_Num.AsString() + ' is less than 123'))

When (> 77777)

Execute Subroutine(PutA) With_Parms(EX3 Response 1 ER)

Execute Subroutine(PutA) With_Parms(EX3 Message 1 ('Zip code ' + #Std_Num.AsString() + ' is greater than 77777'))

Otherwise

Execute Subroutine(PutA) With_Parms(EX3 Response 1 OK)

Endcase

Endroutine

Subroutine Name(Load10)

#Instance := 0

Execute Subroutine(Add) With_Parms('Fred Bloggs' '121 Smith St' 32627)

Execute Subroutine(Add) With_Parms('Mark Bloggs' '121 Smith St' 32627)

Execute Subroutine(Add) With_Parms('Bill Bloggs' '121 Smith St' 32627)

Execute Subroutine(Add) With_Parms('John Doe' '11 Jones St' 40210)

Execute Subroutine(Add) With_Parms('Susan Doe' '11 Jones St' 40210)

Execute Subroutine(Add) With_Parms('Junior Doe' '11 Jones St' 40210)

Execute Subroutine(Add) With_Parms('John Handcock' '15 Wash Road' 40314)

Execute Subroutine(Add) With_Parms('Helen Handcock' '15 Wash Road' 6314)

Execute Subroutine(Add) With_Parms('Fred Handcock' '15 Wash Road' 60314)

Execute Subroutine(Add) With_Parms('Mark Smith' '151 Teller Avenue' 60315)

Endroutine

Subroutine Name(Add) Parms((#Std_text *received) (#Std_textl *received) (#std_num *received))

#Instance += 1

Execute Subroutine(PutA) With_Parms(EX3 Name #Instance #Std_Text)

Execute Subroutine(PutA) With_Parms(EX3 Address #Instance #Std_Textl)

Execute Subroutine(PutN) With_Parms(EX3 ZipCode #Instance #Std_Num)

Endroutine

* =====================================================

* Rationalized subroutines for virtual clipboard access

* =====================================================

* Rationalized subroutines for virtual clipboard access

* =====================================================

Subroutine Name(PUTA) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#AVAL *RECEIVED))

Define Field(#NP2) Type(*CHAR) Length(28)

Define Field(#NP3) Type(*CHAR) Length(24)

Define Field(#INST) Type(*DEC) Length(7) Decimals(0)

Define Field(#AVAL) Type(*CHAR) Length(256)

Use Builtin(VF_SAVEAVALUE) With_Args(#AVAL AJAX #NP2 #NP3 #INST)

Endroutine

Subroutine Name(PUTN) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#NVAL *RECEIVED))

Define Field(#NVAL) Type(*DEC) Length(30) Decimals(9)

Use Builtin(VF_SAVENVALUE) With_Args(#NVAL AJAX #NP2 #NP3 #INST)

Endroutine

Subroutine Name(GETA) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#AVAL *RETURNED))

Use Builtin(VF_RESTOREAVALUE) With_Args(' ' AJAX #NP2 #NP3 #INST) To_Get(#AVAL)

Endroutine

Subroutine Name(GETN) Parms((#NP2 *RECEIVED) (#NP3 *RECEIVED) (#INST *RECEIVED) (#NVAL *RETURNED))

Use Builtin(VF_RESTORENVALUE) With_Args(0 AJAX #NP2 #NP3 #INST) To_Get(#NVAL)

Endroutine

previous page start next page