nascent: การสร้าง Layout หน้าเว็บ ด้วย JSF primefaces

<?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>Layout Learning</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true"
                  expandTitle="ขยาย"
                  closeTitle="ปิด"
                  collapseTitle="ย่อ">

            <p:layoutUnit id="north"
                          position="north"
                          size="100"
                          gutter="0"
                          collapsible="true">
                <h:outputText value="header"/>
            </p:layoutUnit>

            <p:layoutUnit id="west"
                          position="west"
                          size="220"
                          effectSpeed="1000"
                          closable="true"
                          effect="slide"
                          header="left header"
                          collapsible="true"
                          gutter="0">
                <h:outputText value="left"/>
            </p:layoutUnit>

            <p:layoutUnit id="east"
                          position="east"
                          size="100"
                          gutter="10"
                          collapsible="true">
                <h:outputText value="right"/>
            </p:layoutUnit>

            <p:layoutUnit id="center"
                          position="center">
                <h:outputText value="center"/>
            </p:layoutUnit>

            <p:layoutUnit id="south"
                          position="south"
                          size="40"
                          gutter="0"
                          collapsible="true">
                <h:outputText value="bottom"/>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

อธิบาย code

1. <p:layout/> คือ root ของ layout
- fullPage="true" คือการบอกว่าให้ layout นั้นเต็มหน้า page หรืออาจกล่าวได้ว่า root layout
คือ tag html body ก็ได้ครับ
- expandTitle="ขยาย" คือทุกๆ layout ที่สามารถขยายหรือ expand ได้ให้แสดง title ของปุ่ม
expand ว่า "ขยาย"
- closeTitle="ปิด" คือทุกๆ layout ที่สามารถปิดหรือ close ได้ให้แสดง title ของปุ่ม
close ว่า "ปิด"
- collapseTitle="ย่อ" คือทุกๆ layout ที่สามารถย่อหรือ collapse ได้ให้แสดง title ของปุ่ม
collapse ว่า "ย่อ"
2. <p:layoutUnit/> คือ ส่วนย่อยของ layout ในแต่ละส่วน
- id="north" คือการกำหนดให้ layoutUnit นั้นมี id เป็น north
- position="north" คือตำแหน่งของ layoutUnit ที่เราต้องการให้อยู่ ในที่นี้คือส่วนบน (north)
ซึ่งค่า layoutUnit ที่สามารถกำหนดได้มีอยู่ 5 ค่า คือ
- north คือ ส่วนบน
- west คือ ส่วนซ้าย
- east คือ ส่วนขวา
- south คือ ส่วนล่าง
- center คือ ส่วนกลาง
- size="100" คือเราต้องการให้ layoutUnit นั้นกว้างเท่าไหร่ ในที่นี้คือ 100px
- gutter="0" คือช่องว่าง หรือระยะห่างของแต่ละ layoutUnit ว่าจะให้ห่างกันเท่าไหร่ ซึ่งในที่นี้คือ 0px
หมายเหตุ gutter จะสามารถกำหนดขนาดได้ก็ต่อเมื่อมีการกำหนด collapsible="true" เท่านั้น
- collapsible="true" คือ layoutUnit นั้นสามารถย่อได้
- effect="slide" คือต่อที่ย่อหรือขยาย layoutUnit นั้นจะให้ใช้ effect อะไร
ค่าที่สามารถกำหนดได้มีดังต่อไปนี้
- blind
- clip
- drop
- explode
- fold
- puff
- slide
- scale
- bounce
- pulsate
- shake
- size
- effectSpeed="1000" คือให้ effect นั้นมีความเร็วเท่าไหร่ หน่วยเป็นมิลลิวินาที (millisecond)
ในที่นี้คือ 1 วินาที
- header="left header" เป็นการกำหนด text header ที่จะให้แสดงบน header ของ layoutUnit

หมายเหตุ : เราสามารถเขียนเป็น layout ซ้อน layout ได้ นั่นคือ <p:layout/> อยู่ภายใต้ <p:layoutUnit/> อีกที

nascent

หน้าเว็บ

วันอาทิตย์ที่ 6 มกราคม พ.ศ. 2556

การสร้าง Layout หน้าเว็บ ด้วย JSF primefaces

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

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