หน้าเว็บ

วันพุธที่ 5 ธันวาคม พ.ศ. 2555

Java Web Application Tutorial JSF(PrimeFaces) (3) : Change Theme

1. ไปที่  http://primefaces.org/themes.html  จากนั้นเลือก theme ที่ต้องการ


2. ไปที่ pom.xml  ใน tag dependencies  ให้เพิ่ม dependency ต่อไปนี้ลงไป  เพื่อโหลด theme ที่ต้องการมา
<dependency>
 <groupId>org.primefaces.themes</groupId>
 <artifactId>bootstrap</artifactId>
 <version>1.0.8</version>
</dependency>
ในที่นี้ผมเลือก theme twitter bootstrap (bootstrap)




3. ไปที่ web.xml  เพิ่ม code ต่อไปนี้ลงไป  ซึ่งบอกว่าเราจะใช้ theme twitter bootstrap (ถ้าเราไม่กำหนด  โดย default จะเป็น theme aristo)
<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>bootstrap</param-value>
</context-param>


4. Build Project ด้วยการคลิกขวา แล้วไปที่ Clean and Build 5.


5. เขียน code html test 
<?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>JSF Learning</title>
    </h:head>
    <h:body>
        <h:outputText value="hello world!"/>
        <p:inputText value=""/>
        <p:commandButton value="ok"/>
        <p:dataTable value="" 
                     var="count"
                     rows="25"
                     lazy="true"
                     sortBy=""
                     sortOrder="ASCENDING"
                     rowIndexVar="counter"
                     paginator="true"
                     paginatorPosition="bottom"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     rowsPerPageTemplate="5,10,15,25,50">
            <p:column headerText="No.">
                no1
            </p:column>
            <p:column headerText="first name">
                first name1
            </p:column>
            <p:column headerText="last name">
                last name1
            </p:column>
            <p:column headerText="action">
                action1
            </p:column>
        </p:dataTable>
        <p:selectOneMenu value="" var="item">
            <f:selectItem itemLabel="item1" itemValue="value1"/>
            <f:selectItem itemLabel="item2" itemValue="value2"/>
            <f:selectItem itemLabel="item3" itemValue="value3"/>
        </p:selectOneMenu>

        <p:selectOneRadio value="">
            <f:selectItem itemLabel="item1" itemValue="value1"/>
            <f:selectItem itemLabel="item2" itemValue="value2"/>
            <f:selectItem itemLabel="item3" itemValue="value3"/>
        </p:selectOneRadio>
    </h:body>
</html>
6. คลิกขวาที่ project --> Run Program


เขียนโดย ที่
ป้ายกำกับ: , ,

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

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

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