Category: JSF

สถาปัตยกรรมของ JSF

JSF เป็น framework สำหรับพัฒนาในฝั่ง server ด้าน User Interface และใช้ในเทคโนโลยี web application.JSF อยู่บนพื้นฐานสถาปัตยกรรมแบบ Model View Controller (MVC) เพื่อแบ่งแยกส่วน Presentation กับ Logic การทำงานของโปรแกรม

อะไรคือ MVC Design Pattern?

MVC design pattern ออกแบบ application โดยแบ่งเป็น 3 โมดูล

โมดูล คำอธิบาย
Model จัดการข้อมูล
View แสดงส่วน User Interface
Controller จัดการ process การทำงานของ application

อ่านเพิ่มเติม สถาปัตยกรรมของ JSF

การเตรียม Environment JSF

ในบทนี้จะสอนให้คุณได้รู้วิธีการเตรียมสิ่งแวดล้อม (environment) สำหรับเริ่มต้นพัฒนาโปรแกรมร่วมกับ JSF Framework และสอนการ setup JDK, Eclipse, Maven, และ Tomcat บนเครื่องคอมพิวเตอร์ก่อนที่จะ setup JSF Framework

ความต้องการของระบบ (System Requirement)

JSF ต้องการ JDK 1.5 หรือมากกว่า ดังนั้นแรกสุดเลยคุณต้องมี JDK อยู่ในเครื่องก่อนจะลงอย่างอื่นต่อไป

JDK 1.5 หรือมากกว่า
Memory ไม่ได้กำหนด
Disk Space ไม่ได้กำหนด
Operating System ไม่ได้กำหนด

การเตรียมสิ่งแวดล้อมสำหรับพัฒนา application ให้ทำตามขั้นตอนต่อไปนี้

ขั้นตอนที่ 1 – ตรวจสอบการติดตั้ง Java บนเครื่อง

เปิด console และเรียกคำสั่ง execute java ตามในตารางด้านล่าง

OS Task Command
Windows เปิด Command Console c:\> java -version
Linux เปิด Command Terminal $ java -version
Mac เปิด Terminal machine:~ joseph$ java -version

ทำการตรวจสอบ output ที่ได้จะออกมาเหมือนหรือคล้ายกับตารางด้านล่าง

OS Generated Output
Windows java version “1.6.0_21”
Java(TM) SE Runtime Environment (build 1.6.0_21-b07)
Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)
Linux java version “1.6.0_21”
Java(TM) SE Runtime Environment (build 1.6.0_21-b07)
Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)
Mac java version “1.6.0_21”
Java(TM) SE Runtime Environment (build 1.6.0_21-b07)
Java HotSpot(TM)64-Bit Server VM (build 17.0-b17, mixed mode, sharing)

ขั้นตอนที่ 2 – ติดตั้ง Java Development Kit (JDK):

ถ้ายังไม่ได้ติดตั้ง Java Software Development Kit (SDK) ให้ไปดาวน์โหลดจากเว็บของ Oracle : Java SE Downloads เมื่อเปิดเว็บตามลิ้งแล้วก็จะเจอกับปุ่มดาวน์โหลดให้ทำการดาวน์โหลดตัว JDK แล้วติดตั้งลงเครื่อง สุดท้ายทำการกำหนด PATH และ JAVA_HOME ใน environment variables เป็นไดเร็กทอรี่ที่เก็บ java และ javac ซึ่งปกติจะอยู่ใน [java_install_dir]/bin กับ [java_install_dir] ตามลำดับ

กำหนดค่า JAVA_HOME ในตัวแปร environment โดยอ้างตาม directory ที่วาง Java เอาไว้

ตัวอย่าง

OS Output
Windows Set the environment variable JAVA_HOME to C:\Program Files\Java\jdk1.6.0_21
Linux export JAVA_HOME=/usr/local/java-current
Mac export JAVA_HOME=/Library/Java/Home

Append Java compiler location to System Path.

OS Output
Windows Append the string ;%JAVA_HOME%\bin to the end of the system variable, Path.
Linux export PATH=$PATH:$JAVA_HOME/bin/
Mac not required

Alternatively, if you use an Integrated Development Environment (IDE) like Borland JBuilder, Eclipse, IntelliJ IDEA, or Sun ONE Studio, compile and run a simple program to confirm that the IDE knows where you installed Java, otherwise do proper setup as given document of the IDE.

ขั้นตอนที่ 3 – ติดตั้ง Eclipse IDE

ในบทเรียนนี้เราจะใช้โปรแกรม Eclipse ในการพัฒนาโปรแกรม แนะนำให้ทำการลงโปรแกรม Eclipse เวอร์ชันล่าสุดที่เข้ากันไปกับ operation system (OS) ในเครื่อง

ในการ install Eclipse IDE ให้ทำการดาวน์โหลด Eclipse ที่รองรับ WTP จาก http://www.eclipse.org/downloads/เมื่อดาวน์โหลดตัว install เสร็จแล้วให้ทำการแตกไฟล์ไปในที่ไหนก็ได้แล้วแต่สะดวกเช่น C:\eclipse สำหรับ windows หรือ /usr/local/eclipse สำหรับ Linux/Unix

Eclipse สามารถรันได้จากคำสั่งบนเครื่อง windows หรือเปิดจากการ double click ที่ไฟล์ eclipse.exe ก็เปิดโปรแกรมได้ง่ายๆ

 %C:\eclipse\eclipse.exe

Eclipse สามารถรันได้จากคำสั่งบนเครื่อง Unix (Solaris, Linux, etc.)

$/usr/local/eclipse/eclipse

หลังจากเปิดเสร็จแล้ว ถ้าทุกอย่างเรียบร้อยดีผลจะเป็นดังรูปด้านล่าง

EclipseHomePage

 

*หมายเหตุ: การติดตั้ง m2eclipse plugin บน eclipse ให้ใช้ eclipse software update site

m2eclipse Plugin – http://m2eclipse.sonatype.org/update/.

plugin นี้จะทำให้ผู้พัฒนารันคำสั่ง maven ภายในโปรแกรม eclipse ด้วย embedded และ external maven

ขั้นตอนที่ 4: Download Maven archive

Download Maven 2.2.1 จาก http://maven.apache.org/download.html

OS Archive name
Windows apache-maven-2.0.11-bin.zip
Linux apache-maven-2.0.11-bin.tar.gz
Mac apache-maven-2.0.11-bin.tar.gz

ขั้นตอนที่ 5: Extract the Maven archive

แตกไฟล์ไว้ในไดเร็กทอรี่ที่คุณต้องการ install Maven 2.2.1 โดยที่ subdirectory apache-maven-2.2.1 จะเกิดจากการแตกไฟล์

OS Location (can be different based on your installation)
Windows C:\Program Files\Apache Software Foundation\apache-maven-2.2.1
Linux /usr/local/apache-maven
Mac /usr/local/apache-maven

ขั้นตอนที่ 6: Set Maven environment variables

เพิ่ม M2_HOME, M2, MAVEN_OPTS ใน environment variables.

OS Output
Windows กำหนด environment variables ใช้ system properties.
M2_HOME=C:\Program Files\Apache Software Foundation\apache-maven-2.2.1M2=%M2_HOME%\binMAVEN_OPTS=-Xms256m -Xmx512m
Linux เปิด command terminal และกำหนด environment variables.
export M2_HOME=/usr/local/apache-maven/apache-maven-2.2.1export M2=%M2_HOME%\binexport MAVEN_OPTS=-Xms256m -Xmx512m
Mac เปิด command terminal และกำหนด environment variables.
export M2_HOME=/usr/local/apache-maven/apache-maven-2.2.1export M2=%M2_HOME%\binexport MAVEN_OPTS=-Xms256m -Xmx512m

ขั้นตอนที่ 7: Add Maven bin directory location to system path

ต่อตัวแปล M2 ใน System Path

OS Output
Windows ต่อ string ;%M2% ท้าย system variable, Path.
Linux export PATH=$M2:$PATH
Mac export PATH=$M2:$PATH

ขั้นตอนที่ 8: ตรวจสอบการติดตั้ง Maven

เปิด consoleเรียกคำสั่ง mvn

OS ขั้นตอน คำสั่ง
Windows เปิด Command Console c:\> mvn –version
Linux เปิด Command Terminal $ mvn –version
Mac เปิด Terminal machine:~ joseph$ mvn –version

สุดท้ายเราจะได้ Output จากการเรียกคำสั่งเป็นไปตามตารางด้านล่าง

OS Output
Windows Apache Maven 2.2.1 (r801777; 2009-08-07 00:46:01+0530)
Java version: 1.6.0_21
Java home: C:\Program Files\Java\jdk1.6.0_21\jre
Linux Apache Maven 2.2.1 (r801777; 2009-08-07 00:46:01+0530)
Java version: 1.6.0_21
Java home: C:\Program Files\Java\jdk1.6.0_21\jre
Mac Apache Maven 2.2.1 (r801777; 2009-08-07 00:46:01+0530)
Java version: 1.6.0_21
Java home: C:\Program Files\Java\jdk1.6.0_21\jre

ขั้นตอนที่ 9: ติดตั้ง Apache Tomcat:

คุณสามารถดาวน์โหลด Tomcat เวอร์ชันล่าสุดได้จาก http://tomcat.apache.org/ เมื่อคุณดาวน์โหลดเสร็จให้ทำการแตกไฟล์ในไดเร็กทอรี่ที่สะดวกในการจัดการ ตัวอย่างเช่น C:\apache-tomcat-6.0.33 สำหรับ windows หรือ /usr/local/apache-tomcat-6.0.33 สำหรับ Linux/Unix และทำการกำหนด CATALINA_HOME environment variable ชี้ไปที่ไดเร็กทอรี่ที่แตกไฟล์

Tomcat สามารถเริ่มได้โดย execute คำสั่งสำหรับ windows หรือเริ่มง่ายๆโดยการ double click ที่ไฟล์ startup.bat

 %CATALINA_HOME%\bin\startup.bat
 
 หรือ
 
 C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcat สามารถเริ่มได้โดย execute คำสั่งสำหรับ Unix (Solaris, Linux, อื่นๆ)

$CATALINA_HOME/bin/startup.sh
 
หรือ
 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

หลังจากรัน Tomcat สำเร็จหน้าเว็บ default ที่มากับ Tomcatจะเปิดได้โดยเข้าไปที่ url http://localhost:8080/ ถ้าทุกอย่างปกติดีควรจะแสดงผลดังรูป

TomcatHomePage

 

นอกจากนี้ข้อมูลอื่นๆ เกี่ยวกับการ config และรัน Tomcat สามารถหาอ่านได้จาก Tomcat web site: http://tomcat.apache.org

 

Tomcat สามารถหยุด (stop) ได้โดย execute คำสั่ง (windows)

 

%CATALINA_HOME%\bin\shutdown
 
หรือ
 
C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat สามารถหยุด (stop) ได้โดย execute คำสั่ง (Unix, Solaris, Linux, อื่นๆ)

 

$CATALINA_HOME/bin/shutdown.sh

 

หรือ
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh
  1. JSF
  2. ภาพรวมของ JSF
  3. JSF – การเตรียม Environment
  4. JSF – สถาปัตยกรรม
  5. JSF – Life Cycle
  6. JSF – HelloWorld
  7. JSF – การจัดการ Beans
  8. JSF – Page Navigation
  9. JSF – Basic Tags
  10. JSF – Facelets Tags
  11. JSF – Convertor Tags
  12. JSF – Validation Tags
  13. JSF – Data Tables
  14. JSF – Composite Components
  15. JSF – Ajax
  16. JSF – Event Handling
  17. JSF – JDBC Integration
  18. JSF – Spring Integration
  19. JSF – Expression Language
  20. JSF – Internationalization

อ่านบทความถัดไป>

JSF ภาพรวม และประโยชน์

JSF คืออะไร? (JSF ภาพรวม)

JSF  ภาพรวม – JavaServer Faces เป็น MVC web framework ที่ช่วยให้ง่ายในการสร้าง user interface (UI; ส่วนติดต่อผู้ใช้งาน) สำหรับ server-based applications โดยใช้หลักการนำ UI มาใช้ใหม่ (reuseable) ในหน้า page.JSF อื่นๆ ซึ่งเจ้า JSF มีสิ่งอำนวนความสะดวกในการทำให้ UI เชื่อมต่อกับแหล่งข้อมูล (data source) และเชื่อมต่อกับการจัดการอีเว้นท์ (event handler) ในฝั่งเซิร์ฟเวอร์ รายละเอียดของ JSF เป็นกลุ่มของ UI มาตรฐานและจัดหา Application Programming Interface (API) สำหรับการพัฒนา components.JSF ซึ่งยอมให้ นำไปใช้ใหม่ได้ และยังสามารถทำเป็นส่วนเสริม (extension) ให้กับ UI มาตรฐานที่มีอยู่เดิมได้ด้วย

ประโยชน์

JSF ช่วยลดเวลาในการสร้างและดูแล application ลง ซึ่งรัน (run) อยู่บน Java application server และจะแสดงผล UI บน client.JSF ซึ่งอำนวยความสะดวกในการพัฒนา Web application ดังนี้

  • UI ที่ทำขึ้นสามารถนำมาใช้ใหม่ได้
  • ทำให้การส่งผ่านข้อมูลระหว่าง UI ง่ายขึ้น
  • จัดการ UI state ข้ามหลายๆ server requests ได้
  • ยอมให้มีการทำ custom UI เป็นของเราได้
  • เชื่อมต่อ event ฝั่ง client sideไปฝั่ง server side application ได้

JSF UI component model

สิ่งที่ JSF มีมาให้นักพัฒนาโปรแกรมช่วยให้สามารถสร้าง Web application จาก UI ที่รวมเอาไว้ ซึ่งจะแสดงผลได้ด้วยตัวมันเองในหลากหลาย client (ตัวอย่าง เว็บบราวเซอร์, อุกรณ์ไร้สาย หรืออุปกรณ์ WAP)

สิ่งที่ JSF มีมาให้

  • library หลัก (core)
  • เซตขององค์ประกอบ UI พื้นฐาน – input ของ HTML มาตรฐาน
  • ส่วนเสริมขององค์ประกอบ UI พื้นฐานที่ใช้ในการสร้าง UI library ของเราเองหรือแต่งเติม UI เดิม
  • สามารถแสดงผล JSF UI โดยที่มี client หลายหลายแบบได้
  1. JSF
  2. ภาพรวมของ JSF
  3. JSF – การเตรียม Environment
  4. JSF – สถาปัตยกรรม
  5. JSF – Life Cycle
  6. JSF – HelloWorld
  7. JSF – การจัดการ Beans
  8. JSF – Page Navigation
  9. JSF – Basic Tags
  10. JSF – Facelets Tags
  11. JSF – Convertor Tags
  12. JSF – Validation Tags
  13. JSF – Data Tables
  14. JSF – Composite Components
  15. JSF – Ajax
  16. JSF – Event Handling
  17. JSF – JDBC Integration
  18. JSF – Spring Integration
  19. JSF – Expression Language
  20. JSF – Internationalization

อ่านบทถัดไป>

คำค้น: JSF ภาพรวม, ประโยชน์ของ JSF

สอน JavaServer Faces (JSF)

สอน JavaServer Faces (JSF)
JavaServer Faces (JSF) คือ Java-based web application framework ทำออกมาเพื่อต้องการใหการพัฒนาเว็บในส่วนของ user interface ง่ายขึ้น JavaServer Faces เป็นเทคโนโลยีมาตรฐานที่กำหนดขึ้นโดยกลุ่มชุมชน Java

ในบทเรียนนี้จะสอนพื้นฐานของ JSF ซึ่งจะนำคุณไปสู่ระดับสูงขึ้นต่อไป

กลุ่มเป้าหมายผู้ศึกษา
บทเรียนนี้สำหรับผู้เริ่มต้น จะช่วยให้เข้าใจพื้นฐาน JSF programming หลังจากจบบทเรียนนี้แล้วคุณจะทำให้คุณกลายเป็นผู้มีความรู้เกี่ยวกับ JSF ระดับกลางซึ่งคุณจะสามารถต่อยอดความรู้เกี่ยวกับ JSF programming ต่อไปได้

สิ่งที่ต้องรู้มาก่อน
ก่อนจะเริ่มบทเรีนคุณจะต้องมีความเข้าใจพื้นฐานภาษา Java การใช้ Text Editor และการรันโปรแกรม เพราะเรากำลังจะเริ่มพัฒนา Web Application ที่ใช้ JSF ดังนั้นเทคโนโลยีที่ต้องเข้าใจมาก่อนก็จะต้องมีพวก HTML, CSS, AJAX และอื่นๆ ที่เกี่ยวกับการพัฒนา Web Application ทั่วๆ ไป

  1. JSF
  2. ภาพรวมของ JSF
  3. JSF – การเตรียม Environment
  4. JSF – สถาปัตยกรรม
  5. JSF – Life Cycle
  6. JSF – HelloWorld
  7. JSF – การจัดการ Beans
  8. JSF – Page Navigation
  9. JSF – Basic Tags
  10. JSF – Facelets Tags
  11. JSF – Convertor Tags
  12. JSF – Validation Tags
  13. JSF – Data Tables
  14. JSF – Composite Components
  15. JSF – Ajax
  16. JSF – Event Handling
  17. JSF – JDBC Integration
  18. JSF – Spring Integration
  19. JSF – Expression Language
  20. JSF – Internationalization

อ่านบทถัดไป >