เพื่อให้ง่ายต่อการใช้งานของผู้ใช้ Imas จึงเลือกที่จะนำเอา Dojo มาสร้าง User Interface ซึ่งจะได้ form ในรูปแบบนี้
จาก form นี้ ผู้ใช้งานสามารถเลือกดู report ได้ว่า ต้องการช่วงไหนบ้าง
การนำเอา dojo มาช่วยใน user interface ในส่วนของ form มีขั้นตอนดังนี้
1. ค้นหารายงานที่ต้องการสร้าง dojo ui เช่น ในส่วนของ Payable - Recievable (เจ้าหนี้-ลูกหนี้) ต้องการสร้าง form แบบ calendar เพื่อให้ผู้ใช้สามารถเลือกช่วงเวลาที่ต้องการแสดงรายงานได้ โดย list ของรายงานเจ้าหนี้-ลูกหนี้ แสดงตาม url นี้
https://localhost:8443/imas-report/control/fourth
2. สร้าง form ของ calendar โดยการสร้างไฟล์ชื่อ ARAccruedInvoiceDialog.ftl ลงในโฟลเดอร์ ofbiz.9.04/hot-deploy/imas-report/webapp/imas-report/report/receivable/page ดังนี้
<form id="ARAccruedInvoiceForm" name="ARAccruedInvoiceForm" dojoType="dijit.form.Form" target="_blank" action="/imas-report/control/ARAccruedInvoice?externalLoginKey=${externalLoginKey}" method="POST">
<table cellspacing="0">
<tr>
<td>${uiLabelMap.CommonFromDate}:</td>
<td>
<input id="ARAccruedInvoicefromDate" type="text" name="fromDate" dojoType="dijit.form.DateTextBox" constraints={datePattern:'dd-MM-yyyy'}
onChange="dijit.byId('ARAccruedInvoicetoDate').constraints.min = arguments[0];"
/>
</td>
<td>${uiLabelMap.CommonThruDate}</td>
<td>
<input id="ARAccruedInvoicetoDate" type="text" name="toDate" dojoType="dijit.form.DateTextBox" constraints={datePattern:'dd-MM-yyyy'}
onChange="dijit.byId('ARAccruedInvoicefromDate').constraints.max = arguments[0];"
/>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td colspan="3">
<div align="center">
<button id="ARAccruedInvoicesubmit" name="ARAccruedInvoicesubmitButton" dojoType="dijit.form.Button" type="submit" iconClass="dijitEditorIcon dijitEditorIconSave" onClick="dijit.byId('ARAccruedInvoiceDialog').hide();">${uiLabelMap.CommonSubmit}</button>
<button id="ARAccruedInvoicecancel" name="cancelButton" dojoType="dijit.form.Button" type="button" iconClass="dijitEditorIcon dijitEditorIconCancel" onClick="javascript:dijit.byId('ARAccruedInvoiceDialog').hide();">${uiLabelMap.CommonCancelled}</button>
</div>
</td>
</tr>
</table>
</form>
อธิบายโค้ด
ไฟล์ ARAccruedInvoiceDialog.ftl นี้จะสร้างฟอร์มที่มี id = ARAccruedInvoiceForm และ name = ARAccruedInvoiceForm และมี action ไปที่ uri-map ชื่อ ARAccruedInvoice
ทำการสร้าง text field ที่มี id = ARAccruedInvoicefromDate โดยมี dojoType="dijit.form.DateTextBox" เพราะต้องการแสดงผลเป็น calendar ให้ผู้ใช้เลือกวันที่ได้ โดยกำหนด datePattern เป็น dd-MM-yyyy และส่งค่าที่เลือกนี้ไปกับ form
ทำการสร้าง text field ที่มี id = ARAccruedInvoicetoDate โดยมี dojoType="dijit.form.DateTextBox" เพราะต้องการแสดงผลเป็น calendar ให้ผู้ใช้เลือกวันที่ได้ โดยกำหนด datePattern เป็น dd-MM-yyyy และส่งค่าที่เลือกนี้ไปกับ form เช่นกัน
สร้างปุ่มที่มี id="ARAccruedInvoicesubmit" และ name="ARAccruedInvoicesubmitButton" เมื่อมีการกดปุ่มนี้ จะทำการซ่อน form ที่มี id = ARAccruedInvoiceDialog ในไฟล์ iMAS-ReportScreens.xml
สร้างปุ่มที่มี id="ARAccruedInvoicecancel" และ name="cancelButton" เมื่อมีการกดปุ่มนี้ จะทำการซ่อน form ที่มี id = ARAccruedInvoiceDialog ในไฟล์ iMAS-ReportScreens.xml
3. ที่ controller สร้าง request-map และ view-map ดังนี้
<request-map uri="ARAccruedInvoiceDialog"><security https="true" auth="true"/><response name="success" type="view" value="ARAccruedInvoiceDialog"/></request-map> <view-map name="ARAccruedInvoiceDialog" type="screen" page="component://imas-report/widget/iMAS-ReportScreens.xml#ARAccruedInvoiceDialog"/>
อธิบายโค้ด
สร้าง request-map ชื่อ ARAccruedInvoiceDialog ที่มีการเรียกใช้ view-map ชื่อ ARAccruedInvoiceDialog ที่มีการเรียกใช้ screen ชื่อ ARAccruedInvoiceDialog ในไฟล์ imas-report/widget/iMAS-ReportScreens.xml มาแสดงผล
4. ที่ imas-report/widget/iMAS-ReportScreens.xml สร้าง screen ชื่อ ARAccruedInvoiceDialog ดังนี้
<screen name="ARAccruedInvoiceDialog">
<section>
<actions>
<property-map resource="iMAS-ReportUiLabels" map-name="uiLabelMap" global="true"/>
<property-map resource="iMAS-PurchaseUiLabels" map-name="uiLabelMap" global="true"/>
<property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/>
<set field="headerItem" value="ARAccruedInvoiceDialog"/>
</actions>
<widgets>
<platform-specific>
<html>
<html-template location="component://imas-report/webapp/imas-report/report/receivable/page/ARAccruedInvoiceDialog.ftl"/>
</html>
</platform-specific>
</widgets>
</section>
</screen>
</screens>
อธิบายโค้ด
สร้าง screen ชื่อ ARAccruedInvoiceDialog ที่ทำการ include ไฟล์ ftl ชื่อ ARAccruedInvoiceDialog.ftl มาแสดงผล
5. แก้ไข link ที่ fourth.ftl เพื่อให้เรียกใช้ screen ชื่อ ARAccruedInvoiceForm ได้
<div class="browsecategorytext"><a href="#" id="ARAccruedInvoiceButton" onclick="javascript:dijit.byId('ARAccruedInvoiceDialog').show();">${uiLabelMap.ARAccruedInvoice} FF</button></div>
<div dojoType="dijit.Dialog" id="ARAccruedInvoiceDialog" title="${uiLabelMap.ARAccruedInvoice}" href="/imas-report/control/ARAccruedInvoiceDialog?formTarget=ARAccruedInvoice&dialogName=ARAccruedInvoiceDialog" ></div>
อธิบายโค้ด
เมื่อมีการกดลิ้ง จะมีการเรียก ARAccruedInvoiceDialog มาแสดงผล
ในบทความต่อไปจะพูดถึงเรื่องการทำ lookup ให้กับการเลือกดูฟอร์ม โดยใช้ dojo
