web template คือ แม่แบบของหน้าเว็บ หรือการสร้าง layout ของหน้าเว็บไว้สำหรับทำเป็นแม่แบบ เพื่อให้หน้าเว็บอื่นๆ มาเรียกใช้งานแม่แบบนั้น เช่นเรามีหน้าเว็บอยู่ 10 หน้า ทุก ๆ หน้ามีโครงสร้างส่วนหัวหรือส่วนเมนูข้างซ้ายเหมือนกันทั้งหมด แทนที่เราจะต้องเขียนโค๊ดส่วนหัวหรือส่วนเมนูใหม่ในทุก ๆ หน้า เราก็แค่เขียนแม่แบบหรือเทมเพลตขึ้นมาแล้วให้หน้าเว็บอื่นๆ มาเรียกใช้แทน ดังนั้นเว็บทั้ง 10 หน้าของเรา ก็จะมีโครงสร้างเดียวกันทั้งหมด เวลาแก้ไข เราก็ไปแก้ที่เทมเพลตแทน ทั้ง 10 หน้านั้นก็จะเปลี่ยนแปลงไปตามเทมเพลตนั้นๆ
เรามาดูวิธีการเขียนกันดีกว่าครับ ซึ่งในที่นี้ผมจะใช้ JSF 2.0 + primefaces ในการสร้าง template มาใช้งาน
1. สร้าง tamplate หลัก
tempalte/main.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>TODO supply a title</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north"
style="background : red;"
size="100">
<h:outputText value="header template"/>
</p:layoutUnit>
<p:layoutUnit position="west"
style="background : yellow;"
size="220">
<h:outputText value="left menu template"/>
</p:layoutUnit>
<p:layoutUnit position="center"
style="background : green;">
<h:outputText value="center"/>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
2. ต่อมาแก้ไข code ใหม่นิดหน่อยครับ ว่าตรงไหนจะให้หน้าอื่นมาแทนที่ ซึ่งในที่นี้ ผมจะให้มาแทนในส่วนของ center น่ะครับ โดยเพิ่ม <ui:insert /> ลงไปใน center ดังนี้
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>TODO supply a title</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north"
style="background : red;"
size="100">
<h:outputText value="header template"/>
</p:layoutUnit>
<p:layoutUnit position="west"
style="background : yellow;"
size="220">
<h:outputText value="left menu template"/>
</p:layoutUnit>
<p:layoutUnit position="center"
style="background : green;">
<h:outputText value="center"/>
<!-- template replace *************** -->
<ui:insert name="centerReplace"/>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
3. เขียนหน้าเว็บใหม่ขึ้นมา เพื่อเรียกใช้ template นั้นดังนี้page1.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition template="template/main.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<ui:define name="centerReplace">
hello page1.xhtml
</ui:define>
</ui:composition>
ในหน้าใหม่เราจะใช้ tag <ui:composition/> เป็น root tag น่ะครับ จากนัั้นก็กำหนดว่าจะใช้ template ตัวไหน โดยการกำหนดลงไปใน attribute template เช่น template="template/main.xhtml"จากนั้นใน <ui:composition/> ให้ประกาศ <ui:define/> ขึ้นมา และกำหนดชื่อในส่วนที่ต้องการแทนค่าลงไป ซึ่งใน template/main.xhtml เราบอกว่าจะให้ไปแทนที่ centerReplace เราก็ define เป็น <ui:define name="centerReplace"> ซึ่งในส่วนนี้แหล่ะ ที่จะเอาไปแทนในหน้า template นั้น
ทดสอบลองหน้าอื่นๆ ดูครับ
page2.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition template="template/main.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<ui:define name="centerReplace">
bye bye page2.xhtml
</ui:define>
</ui:composition>
page3.xhtml
เห็นมั้ยครับ ว่าเราไม่จำเป็นต้องเขียนในส่วนของ header และ left menu ใหม่ในทุกๆ หน้า เพราะเรามี template ให้เรียกใช้งานแบบสบายๆ นั่นเอง ถึงจะมีเป็นร้อยๆ หน้า ก็สบายยยยยยยยยยย
ไม่มีความคิดเห็น:
แสดงความคิดเห็น