วันจันทร์ที่ 7 มิถุนายน พ.ศ. 2553

การสร้างและการเรียกใช้งาน Screen Decorator ใน OFBiz

ในการสร้างหน้าเพจ มักจะมีส่วนของการแสดงผลที่ซ้ำๆ กัน เช่น ส่วนของ menu, header, footer เป็นต้น ซึ่งใน OFBiz จะมีการสร้าง Screen Decorator ไว้สำหรับเป็น template และหากมีการเปลี่ยนแปลงเฉพาะส่วนย่อยๆ จะเปลี่ยนเฉพาะ Screen บางส่วนเท่านั้น ซึ่งในการสร้าง Screen Decorator สามารถสร้างได้ดังนี้

1. ในเทมเพลนมีส่วนที่ซ้ำกันทุกหน้าคือ header และ footer ให้ทำการแยกโค้ดในส่วนของ header และ footer เก็บไว้ในเพจ .ftl เช่น header.ftl และ footer.ftl
2. โค้ดในส่วนที่เหลือจาก header.ftl และ footer.ftl ให้เซฟเก็บไว้เป็นไฟล์ index.ftl
3. เปิดไฟล์ CommonScreens.xml ซึ่งจะอยู่ในโฟลเดอร์ hot-deploy/culinary/widget/CommonScreens.xml
4. ทำการสร้าง Screen สำหรับที่จะใช้เป็น template ภายใต้แท็ก <screens></screens> ดังโค้ดต่อไปนี้

<screen name="CommonDecorator">
        <section>
            <widgets>
                <!-- header section -->
                <platform-specific>
                    <html>
                        <html-template location="component://culinary/webapp/culinary/includes/header.ftl"/>
                    </html>
                </platform-specific>
                <decorator-section-include name="body"/>
                <!-- right -->
                <platform-specific>
                    <html>
                        <html-template location="component://culinary/webapp/culinary/includes/right.ftl"/>
                    </html>
                </platform-specific>
                <!-- footer section -->
                <platform-specific>
                    <html>
                        <html-template location="component://culinary/webapp/culinary/includes/footer.ftl"/>
                    </html>
                </platform-specific>
            </widgets>
        </section>
    </screen>

อธิบายโค้ด
 <screen name="CommonDecorator"> ตั้งชื่อ screen นี้ว่า CommonDecorator

<platform-specific>
      <html>
              <html-template location="component://culinary/webapp/culinary/includes/header.ftl"/>
      </html>
</platform-specific>
ดึงไฟล์ header.ftl มาเป็นส่วนหนึ่งของเทมเพลต


<decorator-section-include name="body"/>
เตรียมพื้นที่ไว้รอแสดงส่วนเนื้อหาจากหน้าอื่น

<platform-specific>
    <html>
        <html-template location="component://culinary/webapp/culinary/includes/footer.ftl"/>
    </html>
</platform-specific>
ดึงไฟล์ header.ftl มาเป็นส่วนหนึ่งของเทมเพลต

เมื่อเสร็จขั้นตอนนี้ จะได้ เทมเพลตที่ประกอบไปด้วยส่วน header และ footer ที่ไม่มีการเปลี่ยนแปลงของ screen และมีส่วน body ที่ define ไว้รอสำหรับการนำเอาเนื้อหาที่มีการเปลี่ยนแปลงในแต่ละหน้ามาแสดงผล

5. ในโฟลเดอร์ widget จะมีไฟล์ xml ที่ใช้จัดการกับ screen อีก 3 ไฟล์ ซึ่งจะมี 1 ไฟล์ที่ชื่อเดียวกับชื่อ component เช่น ถ้า component ชื่อ culinary ไฟล์นี้จะชื่อ CulinaryScreens.xml ทำการเปิดไฟล์นี้และเพิ่มโค้ดดังนี้

<screen name="home">
        <section>
            <widgets>
                <decorator-screen name="CommonDecorator" location="component://culinary/widget/CommonScreens.xml">
                    <decorator-section name="body">
                        <platform-specific>
                            <html>
                                <html-template location="component://culinary/webapp/culinary/home.ftl"/>
                            </html>
                        </platform-specific>
                    </decorator-section>
                </decorator-screen>
            </widgets>
        </section>
    </screen>

อธิบายโค้ด
<decorator-screen location="component://culinary/widget/CommonScreens.xml" name="CommonDecorator">
ตั้งชื่อ screen ว่า CommonDecorator และ url ของ screen นี้ถูกกำหนดลงใน location

<decorator-section name="body">
    <platform-specific>
        <html>
            <html-template location="component://culinary/webapp/culinary/home.ftl"/>
        </html>
    </platform-specific>
</decorator-section>
อธิบายโค้ด
ในส่วน decorator-section ชื่อ body ให้เรียกไฟล์ home.ftl มาแสดงผล

6. ทำการกำหนด controller และ view ในไฟล์ webapp/culinary/WEB-INF/controller.xml ดังนี้

<request-map uri="home">
<security https="false" auth="true"/>
<response name="success" type="view" value="home"/></request-map>
<view-map name="home" type="screen" page="component://culinary/widget/CulinaryScreens.xml#home"/>

7. ทดสอบเรียกหน้า home ขึ้นมาแสดงผล
เขียนโดย ที่
ป้ายกำกับ: ,

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)