วันพุธที่ 25 สิงหาคม พ.ศ. 2553

การเพิ่มข้อความ successMessage ให้แสดงข้อความแจ้งว่าทำงานสำเร็จแล้ว

โดยปกติเมื่อมีการทำงานสำเร็จแล้ว เช่น ทำการอัพเดตงานสำเร็จ หรือทำการสร้างงานสำเร็จ ควรจะมีการแจ้งผลของงาน ว่าสำเร็จหรือไม่ ดังรูป


ทำได้โดยการเพิ่มโค้ดดังนี้ ใน service ที่มีการทำงาน

<property-to-field resource="DefaultMessages" property="service.default.message" field="successMessage"/>

เช่นต้องการสร้างข้อความแสดงผลของการ update Project Phase จึงเพิ่มโค้ดในไฟล์ ProjectsServices.xml เป็นต้น
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,

วันพฤหัสบดีที่ 19 สิงหาคม พ.ศ. 2553

การสร้าง List โดยใช้ Dojo

ในการสร้างฟอร์มเพื่อช่วยคัดกรองรายงานในโมดูล report ของ imas จะมีขั้นตอนดังบทความ การเพิ่ม filter ในการแสดงรายงานโดยใช้ dojo และ การทำ lookup ให้กับการเลือกดูฟอร์ม โดยใช้ dojo ดังนั้น ในบทความนี้จะแสดงเฉพาะในส่วนของการสร้าง List โดยใช้ Dojo มีขั้นตอนดังนี้

1. ใน form ทำการสร้าง drop down list ดังนี้

<select id="ProductTypeInventory" name="ProductTypeInventory" dojoType="dijit.form.ComboBox" autocomplete="false" >
                        <option value="">${uiLabelMap.CommonSelect}</option>
                            <#list productTypeList as productTypeListMap>
                                <option value="${productTypeListMap.productTypeId}">${productTypeListMap.description}</option>
                             </#list>
</select>

2. สร้าง screen ดังนี้

<screen name="ProductSummaryDialog">
        <section>
            <actions>
                <property-map resource="iMAS-ReportUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="iMAS-AccountingUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="iMAS-InventoryUiLabels" map-name="uiLabelMap" global="true"/>
                <set field="headerItem" value="ProductSummaryDialog"/>
                <entity-condition list="productTypeList" entity-name="ProductType">
                </entity-condition>
            </actions>
            <widgets>
                    <platform-specific>
                        <html>
                            <html-template location="component://imas-report/webapp/imas-report/report/inventory/page/ProductSummaryDialog.ftl"/>
                        </html>
                    </platform-specific>
            </widgets>
        </section>
    </screen>

อธิบายโค้ด
กำหนดว่าจะดึงข้อมูลจาก entity ไหน โดยใช้คำสั่ง
<entity-condition list="productTypeList" entity-name="ProductType"></entity-condition>
จากตัวอย่าง จะเป็นการเลือกข้อมูลจาก entity ชื่อ ProductType

จะได้ฟอร์มที่สามารถเลือกข้อมูลจาก drop down list ของ ProductType ได้ดังนี้


เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,

การทำ lookup ให้กับการเลือกดูฟอร์ม โดยใช้ dojo

จากบทความ การเพิ่ม filter ในการแสดงรายงานโดยใช้ dojo ก่อนหน้านี้ ได้พูดถึงการอำนวยความสะดวกให้แก่ผู้ใช้งานโปรแกรม โดยการใช้ calendar ของ dojo ในการเลือกวันที่ ส่วนในบทความนี้จะพูดถึงการใช้ dojo ดึงเอา Lookup ของ OFBiz มาแสดงเป็น popup แบบ ajax ที่มีลักษณะดังรูป


มีขั้นตอนดังนี้

1. เพิ่มฟิลด์ที่ลงในไฟล์ ARAccruedInvoiceDialog.ftl ดังนี้

<input name="partyIdFrom" size="25" id="findCommEvents_partyIdFrom" type="text">
            <a href="javascript:call_fieldlookup2(document.ARCardForm.partyIdFrom,'LookupPartyName');">
                <img src="/images/fieldlookup.gif" alt="Lookup" border="0" height="14" width="15">
            </a>

อธิบายโค้ด
สร้าง input ชนิด textbox เพิ่มเข้าไปในฟอร์ม และสร้าง link โดยเรียกใช้ function ของ java script ชื่อ call_fieldlookup2 ซึ่งต้องส่ง parameter ดังนี้

call_fieldlookup2(target, viewName)

2. ทำการ include controller ของ module ที่มี lookup เข้าไปใน controller ของ component ที่ทำงานอยู่ เช่น จะเรียกใช้ lookup ที่มีการเรียก party id ใน component report ต้องทำการ include controller ของ party มา ดังนี้

<include location="component://imas-partymgr/webapp/partymgr/WEB-INF/controller.xml"/>

ผลที่ได้ จะสามารถใช้งาน lookup ได้

เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,

วันพุธที่ 18 สิงหาคม พ.ศ. 2553

การเพิ่ม filter ในการแสดงรายงานโดยใช้ dojo

โดยปกติการเรียกดู report ของ OFBiz จะมีข้อมูลที่จะต้องแสดงในปริมาณมาก จึงควรมีส่วนที่ให้ผู้ใช้งานสามารถสามารถเลือกดูได้ว่า จะดู report ของส่วนไหน และช่วงเวลาไหน

เพื่อให้ง่ายต่อการใช้งานของผู้ใช้ 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">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</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&amp;dialogName=ARAccruedInvoiceDialog" ></div>

อธิบายโค้ด
เมื่อมีการกดลิ้ง จะมีการเรียก ARAccruedInvoiceDialog มาแสดงผล

ในบทความต่อไปจะพูดถึงเรื่องการทำ lookup ให้กับการเลือกดูฟอร์ม โดยใช้ dojo
เขียนโดย ที่ 2 ความคิดเห็น:
ป้ายกำกับ: , , ,
สมัครสมาชิก: บทความ (Atom)