Poolsawat's Blog

<strong>Gunicorn (Green Unicorn)</strong> คือ HTTP server ที่รองรับ WSGI (Web Server Gateway Interface) สำหรับภาษา Python โดยออกแบบมาเพื่อรันแอพพลิเคชันเว็บที่ใช้ Python เช่น Flask, Django, Pyramid และอื่น ๆ อีกมากมาย

สร้าง Project JSF Primeface ด้วย Maven พร้อมกับสอนทำระบบ Template Layout

pool1343302 mins

Sharing is caring!

Java Server Faces (JSF) เป็นเว็บแอ็พพลิเคชันที่ใช้ Java ซึ่งมีจุดมุ่งหมายเพื่อลดความซับซ้อนในการพัฒนาอินเทอร์เฟซสำหรับผู้ใช้บนเว็บ JavaServer Faces เป็นเทคโนโลยีการแสดงผลแบบมาตรฐานซึ่งได้รับการประกาศไว้ในข้อกำหนดผ่านกระบวนการ Java Community Process

JSF ถูกนำไปพัฒนาต่อยอดความสามารถโดยบริษัทขนาดใหญ่ หลายบริษัท

  • Apache MyFaces – The Apache Foundation JSF implementation with Ajax components
  • Backbase Enterprise Ajax – JSF Edition – Ajax framework
  • BootsFaces Open source JSF Framework based on Bootstrap
  • IBM Notes – XPages
  • ICEfaces – open-source, Java JSF extension framework and rich components, Ajax without JavaScript
  • JBoss RichFaces (derived from and replaces Ajax4jsf) – Ajax-enabled JSF components for layout, file upload,
  • forms, inputs and many other features. It reached its end-of-life in June 2016.
  • OmniFaces – open-source JSF utility library
  • Open Faces – Ajax framework with JSF components
  • Oracle ADF Faces Rich Client – Oracle Application Development Framework
  • PrimeFaces – Ajax framework with JSF components
  • Sun Java BluePrints AJAX components
  • ZK – Ajax framework with JSF components





Primeface เป็น Framework ที่ไม่หยุดพัฒนาและมี UI Component มากมายและสวยงาม

ด้วยความสม่ำเสมอในการพัฒนาและมีการปรับปรุง framework อยู่ตลอดเวลา ออกผลิตภัณฑ์ตัวใหม่ออกมา เช่น PrimeNG ,PrimeReact ,PrimeUI เป็นต้น ทำให้เลือก Primeface เป็นตัวเลือกในการพัฒนา Project Webapp นี้

มาเริ่มสร้าง Project กัน

  1. Build Maven Project (maven-archetype-webapp) ขึ้นมา
  2. เพิ่ม Dependencies
    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.poolsawat</groupId>
    <artifactId>jsf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>jsf Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>
    <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
    <plugin.war.version>2.4</plugin.war.version>
    <plugin.tomcat.version>2.2</plugin.tomcat.version>
    <logback.version>1.1.2</logback.version>
    <slf4j.version>1.7.7</slf4j.version>
    <log4j.version>2.10.0</log4j.version>
    <primefaces.version>6.2</primefaces.version>
    <servlet.version>3.1.0</servlet.version>
    <jsf.version>2.2.8</jsf.version>
    </properties>
    <dependencies>
    <!-- Primeface JSF -->
    <dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>${primefaces.version}</version>
    </dependency>
    <!-- Primeface Use Themes -->
    <!-- https://www.primefaces.org/themes.html -->
    <dependency>
    <groupId>org.primefaces.themes</groupId>
    <artifactId>all-themes</artifactId>
    <version>1.0.10</version>
    </dependency>
    <!-- JSF -->
    <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>${servlet.version}</version>
    <scope>provided</scope>
    </dependency>
    <dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>${jsf.version}</version>
    </dependency>
    <dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-impl</artifactId>
    <version>${jsf.version}</version>
    </dependency>
    <!-- Logger -->
    <dependency>
    <groupId>org.apache.logging.log4j</groupId>
    <artifactId>log4j-api</artifactId>
    <version>${log4j.version}</version>
    </dependency>
    <!-- Logging -->
    <dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>${slf4j.version}</version>
    <scope>compile</scope>
    </dependency>
    <dependency>
    <groupId>ch.qos.logback</groupId>
    <artifactId>logback-classic</artifactId>
    <version>${logback.version}</version>
    <scope>runtime</scope>
    </dependency>
    <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.11</version>
    <scope>test</scope>
    </dependency>
    </dependencies>
    <repositories>
    <repository>
    <id>prime-repo</id>
    <name>Prime Repo</name>
    <url>http://repository.primefaces.org</url>
    </repository>
    </repositories>
    <build>
    <finalName>jsf</finalName>
    <pluginManagement>
    <plugins>
    <plugin>
    <artifactId>maven-clean-plugin</artifactId>
    <version>3.0.0</version>
    </plugin>
    <plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.0.2</version>
    </plugin>
    <plugin>
    <artifactId>maven-compiler-plugin</artifactId>
    <version>3.7.0</version>
    </plugin>
    <plugin>
    <artifactId>maven-surefire-plugin</artifactId>
    <version>2.20.1</version>
    </plugin>
    <!-- <plugin> <artifactId>maven-war-plugin</artifactId> <version>3.2.0</version>
    </plugin> -->
    <plugin>
    <artifactId>maven-install-plugin</artifactId>
    <version>2.5.2</version>
    </plugin>
    <plugin>
    <artifactId>maven-deploy-plugin</artifactId>
    <version>2.8.2</version>
    </plugin>
    </plugins>
    </pluginManagement>
    </build>
    </project>
    view raw primeface-pom hosted with ❤ by GitHub
  3. สร้างไฟล์ webapp/WEB-INF/faces-config.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <faces-config
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
    version="2.2">
    </faces-config>
    view raw primeface-faces-config hosted with ❤ by GitHub
  4. เพิ่ม Configure Faces Servlet in webapp/WEB-INF/web.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
    <display-name>Archetype Created Web Application</display-name>
    <!-- Project Stage Level -->
    <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
    </context-param>
    <context-param>
    <param-name>primefaces.THEME</param-name>
    <!-- <param-value>glass-x</param-value> -->
    <!-- <param-value>excite-bike</param-value> -->
    <param-value>hot-sneaks</param-value>
    </context-param>
    <!-- JSF Servlet is defined to container -->
    <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <!-- Welcome Page -->
    <welcome-file-list>
    <welcome-file>pages/page1.xhtml</welcome-file>
    </welcome-file-list>
    </web-app>
    view raw primeface-web hosted with ❤ by GitHub
  5. สร้างไฟล์ webapp/templates/layout.xhtml
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
    <ui:insert name="title"/>
    </h:head>
    <h:body>
    <p:layout fullPage="true">
    <p:layoutUnit position="north" size="100" header="Top"
    resizable="true" closable="true" collapsible="true">
    <h:outputText value="Top unit content." />
    </p:layoutUnit>
    <p:layoutUnit position="south" size="100" header="Bottom"
    resizable="true" closable="true" collapsible="true">
    <h:outputText value="South unit content." />
    </p:layoutUnit>
    <p:layoutUnit position="west" size="200" header="Left"
    resizable="true" closable="true" collapsible="true">
    <h:form>
    <ui:include src="../templates/themeMenu.xhtml" />
    </h:form>
    </p:layoutUnit>
    <!-- <p:layoutUnit position="east" size="200" header="Right"
    resizable="true" closable="true" collapsible="true" effect="drop">
    <h:outputText value="Right unit content." />
    </p:layoutUnit> -->
    <p:layoutUnit position="center">
    <ui:insert name="content">Put default content here, if any.</ui:insert>
    </p:layoutUnit>
    </p:layout>
    </h:body>
    </html>
    view raw primeface-layout hosted with ❤ by GitHub
  6. สร้างไฟล์ webapp/templates/themeMenu.xhtml เพื่อทำเป็น navigator Menu ลิ้งไปที่หน้าอื่น ๆ
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <p:menu>
    <p:menuitem value="Page1" outcome="page1"/>
    <p:menuitem value="Page2" outcome="page2"/>
    <p:menuitem value="Page3" outcome="page3" />
    <p:menuitem value="Page4" outcome="page4"/>
    </p:menu>
    </ui:composition>
    view raw primeface-menu hosted with ❤ by GitHub
  7. สร้าง page webapp/pages/page1.xhtml ,page2.xhtml ,page3.xhtml ,page4.xhtml
    <ui:composition template="../templates/layout.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <ui:define name="title">Page 1</ui:define>
    <ui:define name="content">
    <h2>Content Page1</h2>
    </ui:define>
    </ui:composition>
    view raw primeface-page1 hosted with ❤ by GitHub

    1. จุดที่สำคัญคือเพิ่ม template=”../templates/layout.xhtml” เข้าไปเพิ่มที่ ui:composition ทำให้อ้างถึง template layout ได้
  8. การเปลี่ยน Primeface Theme ของ website

    /* เพิ่ม dependency */
    <dependencies>
    ...
    <!-- Primeface Use Themes -->
    <!-- https://www.primefaces.org/themes.html -->
    <dependency>
    <groupId>org.primefaces.themes</groupId>
    <artifactId>all-themes</artifactId>
    <version>1.0.10</version>
    </dependency>
    ...
    </dependencies>
    <repositories>
    <repository>
    <id>prime-repo</id>
    <name>Prime Repo</name>
    <url>http://repository.primefaces.org</url>
    </repository>
    </repositories>
    /* เปลี่ยนชื่อ theme ในไฟล์ web.xml */
    <context-param>
    <param-name>primefaces.THEME</param-name>
    <!-- <param-value>glass-x</param-value> -->
    <!-- <param-value>excite-bike</param-value> -->
    <param-value>hot-sneaks</param-value>
    </context-param>
    view raw primeface-theme hosted with ❤ by GitHub
  9. ตัวอย่างหน้า web site

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

Related News