เอาล่ะครับ เราก็ได้เรียนร การทำ OFBiz application อย่างง่ายๆ แสนง่าย โดยใช้ jsp page เป็น view เราก็แค่สร้าง jsp page แล้ว add มันลงไปใน controller แต่สำหรับการใช้ decorator ก็มีกระบวนทำเพิ่มขึ้นมาีอีกนิดหน่อย
การใช้ decorator คือการเขียน FreeMarker (.ftl file) แล้วเรียกใช้เป็น widget ภายใน OFBiz application ประโยชน์คือทำให้เราสามารถนำ widget มา reuse ใช้งานได้ไม่ต้องเขียนใหม่หากเป็น widget ที่ทำงานเหมือนๆ กัน
เพื่อได้ง่ายขึ้น ไม่มั่ว มาดู structure ที่เปลี่ยนไปหากเราอยากใช้พวก widget กันนะครับ
เพื่อได้ง่ายขึ้น ไม่มั่ว มาดู structure ที่เปลี่ยนไปหากเราอยากใช้พวก widget กันนะครับ
ขออธิบายแบบ bottom up นะครับ ตั้งแต่การเริ่มสร้างไฟล์ จนไปถึงการ config เพื่อนำไปใช้ใน file ต่างๆ
จริงๆ ก็เหมือนๆ การสร้าง jsp file นั่นแหละครับ แต่อันนี้เปลี่ยนเป็นสร้าง ftl file ก็ให้เราสร้างไฟล์พวกนี้ไว้ที่ app_home/webapp/web และสร้าง folder ftl ขึ้นมา และสร้างไฟล์ ftl ไว้ในนี้ โดย ftl file ก็จะมีหน้าตาคล้าย html file เป็นอันมากนะคะ แต่จะมี tag เฉพาะที่แตกต่างออกไปจาก html แต่ก็ทำความเข้าใจได้ไม่ยากครับ
จาก โค๊ด สร้าง page3.ftl ไว้ใน directory ftl/ และสร้าง main-decorator.ftl ไว้ใน directory include/ นะครับ หน้าตาของมันจะเป็นแบบนี้ครับ
page3.ftl
CODE <b>orangegears</b>
main-decorator.ftl
CODE <body>
<h>Hello world</h>
${screens.render(“component://web/widget/web/screens/MyWeb.xml#main-body”)}
</body>
CODE ${screens.render(“component://web/widget/web/screens/MyWeb.xml#main-body”)}
หมาย ถึง render screen name ชื่อ main-body ใน MyWeb.xml
หน้าตาของ MyWeb.xml เป็นดังนี้ครับ
CODE <?xml version=”1.0″ encoding=”UTF-8″?> <screens xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”http://www.ofbiz.org/dtds/widget-screen.xsd”>
<screen name=”page3″>
<section>
<widgets>
<decorator-screen name=”main-decorator” location=”component://web/widget/web/screens/MyWeb.xml”>
<decorator-section name=”section-body”>
<platform-specific>
<html><html-template location=”component://web/webapp/web/ftl/page3.ftl”/></html>
</platform-specific>
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>
<screen name=”main-decorator”>
<section>
<widgets>
<platform-specific>
<html>
<html-template location=”component://web/webapp/web/includes/main-decorator.ftl”/>
</html>
</platform-specific>
</widgets>
</section>
</screen>
<screen name=”main-body”>
<section>
<widgets>
<decorator-section-include name=”section-body”/>
</widgets>
</section>
</screen>
</screens>
และ แน่นอน ต้องเพิ่มใน controller.xml ด้วยนะครับ
CODE <request-map uri=”page3″>
<security https=”false” auth=”false”/>
<response name=”success” type=”view” value=”page3″/>
</request-map>
<view-map name=”page3″ type=”screen” page=”component://web/widget/web/screens/MyWeb.xml#page3″/>
จะ เห็นว่า view-map จะเป็น type=screen และลิงค์ไปที่ page ที่เป็น component เป็น widget จะแตกต่างกับการกำหนด view-map ของ jsp นะครับ
หลักการทำ งานของมัน ก็จะงงอยู่พอสมควร แต่จะอธิบายให้ดูเป็น step ละกัน
คือ เืรื่องมันมีอยู่ว่า หลังจากเราเรียกไปที่ URL: https://localhost:8443/web/control/page3 สิ่งที่เกิดขึ้นภายในก็คือ
QUOTE Hello world orangegears
คง จะรู้สึกว่า จะปรินท์แค่นี้ทำไมต้องวุ่นวาย แต่อันนี้เป็นเพียงตัวอย่างการใ้ช้ decorator ครับ
ถ้าจะทำให้ดีก็ลองประยุกต์เอาตามสบายเลยครับ
จริงๆ ก็เหมือนๆ การสร้าง jsp file นั่นแหละครับ แต่อันนี้เปลี่ยนเป็นสร้าง ftl file ก็ให้เราสร้างไฟล์พวกนี้ไว้ที่ app_home/webapp/web และสร้าง folder ftl ขึ้นมา และสร้างไฟล์ ftl ไว้ในนี้ โดย ftl file ก็จะมีหน้าตาคล้าย html file เป็นอันมากนะคะ แต่จะมี tag เฉพาะที่แตกต่างออกไปจาก html แต่ก็ทำความเข้าใจได้ไม่ยากครับ
จาก โค๊ด สร้าง page3.ftl ไว้ใน directory ftl/ และสร้าง main-decorator.ftl ไว้ใน directory include/ นะครับ หน้าตาของมันจะเป็นแบบนี้ครับ
page3.ftl
CODE <b>orangegears</b>
main-decorator.ftl
CODE <body>
<h>Hello world</h>
${screens.render(“component://web/widget/web/screens/MyWeb.xml#main-body”)}
</body>
CODE ${screens.render(“component://web/widget/web/screens/MyWeb.xml#main-body”)}
หมาย ถึง render screen name ชื่อ main-body ใน MyWeb.xml
หน้าตาของ MyWeb.xml เป็นดังนี้ครับ
CODE <?xml version=”1.0″ encoding=”UTF-8″?> <screens xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”http://www.ofbiz.org/dtds/widget-screen.xsd”>
<screen name=”page3″>
<section>
<widgets>
<decorator-screen name=”main-decorator” location=”component://web/widget/web/screens/MyWeb.xml”>
<decorator-section name=”section-body”>
<platform-specific>
<html><html-template location=”component://web/webapp/web/ftl/page3.ftl”/></html>
</platform-specific>
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>
<screen name=”main-decorator”>
<section>
<widgets>
<platform-specific>
<html>
<html-template location=”component://web/webapp/web/includes/main-decorator.ftl”/>
</html>
</platform-specific>
</widgets>
</section>
</screen>
<screen name=”main-body”>
<section>
<widgets>
<decorator-section-include name=”section-body”/>
</widgets>
</section>
</screen>
</screens>
และ แน่นอน ต้องเพิ่มใน controller.xml ด้วยนะครับ
CODE <request-map uri=”page3″>
<security https=”false” auth=”false”/>
<response name=”success” type=”view” value=”page3″/>
</request-map>
<view-map name=”page3″ type=”screen” page=”component://web/widget/web/screens/MyWeb.xml#page3″/>
จะ เห็นว่า view-map จะเป็น type=screen และลิงค์ไปที่ page ที่เป็น component เป็น widget จะแตกต่างกับการกำหนด view-map ของ jsp นะครับ
หลักการทำ งานของมัน ก็จะงงอยู่พอสมควร แต่จะอธิบายให้ดูเป็น step ละกัน
คือ เืรื่องมันมีอยู่ว่า หลังจากเราเรียกไปที่ URL: https://localhost:8443/web/control/page3 สิ่งที่เกิดขึ้นภายในก็คือ
- ไปดูใน controller.xml ว่า view-map ที่ชื่อ page3 เรียกไปที่ไหน ซึ่งจะเห็นได้ว่า จะไปที่ MyWeb.xml ที่ screen name ชื่อ page3
CODE <screen name=”page3″>
<section>
<widgets>
<decorator-screen name=”main-decorator” location=”component://web/widget/web/screens/MyWeb.xml”>
<decorator-section name=”section-body”>
<platform-specific>
<html><html-template location=”component://web/webapp/web/ftl/page3.ftl”/></html>
</platform-specific>
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>
ใน page3 จะไปเรียนก decorator ที่ชื่อว่า main-decorator ต่อ โดยมันบอกว่า location ของ main-decorator อยู่ในไฟล์ MyWeb.xml นี่แหละ แสดงว่า มันกำหนด screen name ชื่อ main-decorator ไว้อีกอัน ก็คือ อันนี้
CODE <screen name=”main-decorator”>
<section>
<widgets>
<platform-specific>
<html>
<html-template location=”component://web/webapp/web/includes/main-decorator.ftl”/>
</html>
</platform-specific>
</widgets>
</section>
</screen>
โดย screen name นี้เรียกไปที่ component://web/webapp/web/includes/main-decorator.ftl ที่สร้างเอาไว้ ซึ่งเราจะเห็นจาก code ที่แปะด้านบนแล้วนครับว่า main-decorator.ftl จะสั่ง render screen name ชื่อ main-body ใน MyWeb.xml - main-body เป็น decorator-section-include คือแสดงว่า ส่วนนี้เป็นการประกาศการทำงานของ main-body ที่อยู่ใน decorator โดย main-body ประกาศต้วเองว่าจะ include เข้าไปใช้งานใน decorator โดยใช้ชื่อว่า section-body ซึ่ง section-body อยู่ใน screen name=page3
CODE <decorator-section name=”section-body”>
<platform-specific>
<html><html-template location=”component://web/webapp/web/ftl/page3.ftl”/></html>
</platform-specific>
</decorator-section>
โดย มันจะทำการไปเรียก page3.ftl มา
QUOTE Hello world orangegears
คง จะรู้สึกว่า จะปรินท์แค่นี้ทำไมต้องวุ่นวาย แต่อันนี้เป็นเพียงตัวอย่างการใ้ช้ decorator ครับ
ถ้าจะทำให้ดีก็ลองประยุกต์เอาตามสบายเลยครับ