หน้าเว็บ

วันจันทร์ที่ 14 มกราคม พ.ศ. 2556

รู้จักกับ JSF(JavaServer Faces) + JSF Primefaces

JSF คืออะไร?

        JSF เป็น java framework ตัวนึง ที่ช่วยให้การเขียน java web application  นั้นง่ายขึ้นครับ  เพราะมันจะมี tag พิเศษต่างๆให้มากมาย  เรียกว่า JSF Component เช่น tag dataTable ที่เอาไว้แสดงข้อมูลที่เป็นตารางให้   โดยที่เราไม่ต้องเขียน html เอง  tag ajax ที่เอาไว้เรียกใช้งาน ajax ได้โดยที่ไม่ต้องเขียน javascript เอง  tag convertDateTime ที่เอาไว้แปลงรูปแบบเวลาได้ตามที่ต้องการ  tag input  หรือ tag output  ที่สามารถผูกเข้ากับ input หรือ output ของ managed bean (web controller) ได้โดยตรงเลย  และ tag พิเศษอื่นๆ  อีกเยอะแยะที่ช่วยให้การเขียน html นั้นเป็นเรื่องหมูๆ  ไปเลยครับ   และ managed bean ก็ยังสามารถกำหนด scope การทำงานได้ด้วย  ว่าจะให้เป็น  request scope, session scope หรือ application scope  อีกอย่างใช้ระยะเวลาในการศึกษาสั้นมากๆ  ศึกษาแค่ไม่กี่วันก็เขียนได้แล้วครับ  ข้อดีอีกอย่างของ JSF คือเราสามารถ  สร้าง tag ต่างๆ ขึ้นมาใช้งานเองได้  ด้วยเหตุผลนี้  จึงทำให้มี  Extension JSF version ต่างๆ ออกมามากมายให้เลือกใช้  และบางอันก็เป็นของฟรีซ่ะด้วย  เช่น Primefaces, Richface, ICEFaces, OpenFaces และอื่นอีกเยอะแยะ  ซึ่งแต่ละเจ้า  สามารถนำมาผนวกใช้งานร่วมกันได้  เนื่องจากว่ามันเป็น JSF เหมือนกัน


ในการผูกข้อมูลหรือการทำ Data Binding จากหน้าบ้าน html เข้ากับหลังบ้านที่เป็น  java หรือ managed bean  เช่นการเรียกใช้งาน  method หรือ action ต่างๆ ของ managed bean  เราจะเรียกผ่าน  Expression Language  “#{ }”  เช่น อยากเรียกใช้งาน method save() ของ UserManagementMB  เราสามารถทำได้ดังนี้ 





ภายใน #{ } ยังสามารถทำ condition บางอย่างได้ด้วย  เช่น  if else  แบบสั้น  การดำเนินการ boolean  AND OR NOT  การ + - * /  หรือแม้กระทั่งเรียกใช้งาน method บางอย่างของ java ได้





องค์ประกอบของ  JSF   จะมีอยู่ 2 ส่วนคือ 

1. View หรืออาจจะเรียกว่า  JSF Component  ซึ่งก็คือ tag พิเศษต่างๆ  นั่นเองครับ   มันจะเป็น XML UI เฉพาะของมันเอง  แต่เราก็สามารถใช้งานร่วมกับ  tag html ต่างๆ ได้เหมือนกัน


JSF Primefaces



ตามที่บอกไปน่ะครับว่า  การ binding ไปยังหลังบ้าน  เราจะกระทำผ่าน Expression Language  #{ }

2. Managed Bean  ซึ่งเปรียบเสมือน Web Controller   เวลาที่เราต้องการเขียน code ที่เกี่ยวกับการตัดสินใจ หรือ business logic อะไรต่างๆ  เราจะมาเขียนไว้ที่ Managed Bean ครับ  เราจะมองว่า 1 method ใน managed bean หมายถึง 1 action ที่เกิดขึ้น เมื่อมีการ request เข้ามา


JSF Primefaces       

        เราได้กล่าวไปแล้วว่า primefaces นั้นเป็น JSF ตัวหนึ่ง  โดยที่เจ้าตัว Primefacs นั้นเขาได้สร้าง tag พิเศษอื่นๆ  และ feature ต่างๆ เพิ่มเติมขึ้นมามากมาย  ให้สามารถเรียกใช้งานได้สะดวกมากยิ่งขึ้น  
คุณสมบัติของมันนั้น  เช่น  ใน tag  dataTable ได้เพิ่ม เรื่องของ table paging,  table expansion, table sorting, table filter…  โดยที่เราไม่ต้องเขียนในส่วนนี้เอง   มี component tree ให้  มี component upload file,  download file ให้  มี component report graph ต่างๆให้  และมีอะไรอื่นๆ  อีกเยอะแยะครับ  ซึ่งก็ถือว่าสะดวกขึ้นกว่าเดิมเยอะ  ซึ่งสามารถศึกษาการใช้งานของ component  ต่างๆ ได้ที่   http://www.primefaces.org/showcase/ui/home.jsf

        เขาจะอธิบายการทำงาน  และการเรียกใช้งาน component ต่างๆ  ไว้เป็นหมวดหมู่ให้ครับ  





8 ความคิดเห็น:

  1. อยากทราบว่า tag ที่ มี h:body กับ body เฉยๆ ต่างกันยังไงหรอคับ

    ตอบลบ
    คำตอบ
    1. ความคิดเห็นนี้ถูกผู้เขียนลบ

      ลบ
    2. h:body เป็นของ jsf ครับ ส่วน body เป็นของ html ธรรมดาๆตัวหนึ่งครับ ผิดถูกยังไงก็ขออภัย

      ลบ
  2. <h:body/> เป็น tag พิเศษของ JSF ครับ ที่ JSF จะเอา content ที่อยู่ภายใน <h:body/> ไปประมวลผล
    คือเอา tag ต่างๆ ภายใน <h:body/> ไปแปลงเป็น html อีกที
    สังเกตตรง root tag ที่มี xmlns:h="http://java.sun.com/jsf/html"
    ถ้าเราใส่แค่ body ธรรมดา JSF จะไม่ทำงานครับ

    ตอบลบ
  3. สอบถามหน่อยครับ เราจะลดช่องว่างระหว่าง p:layoutUnit ยังไงครับ ขอบคุณมากครับ

    ตอบลบ
  4. ใน p:layoutUnit ให้กำหนดที่ attribute gutter ครับ เช่น gutter="0"
    แต่ว่าการที่จะกำนด gutter ได้นั้น จะต้องกำหนด collapsible="true" ด้วยครับ

    ตอบลบ
  5. http://na5cent.blogspot.com/2013/01/layout-jsf-primefaces.html

    ตอบลบ
  6. ตอนนี้เพิ่งจบ โปรเจคจากงาน ที่ใช้ jsf+primefaces ครับหมดสัญญาจ้างเดือนหน้าแล้ว อยากหางานที่ใหม่ ที่ใช้ ตัวนี้ทำ หากมีที่แนะนำ รบกวนแนะนำให้ผมหน่อยครับ aof_bs@hotmail.com

    ตอบลบ