สร้าง Application แรกด้วย JSF 2

สร้าง Application แรกด้วย JSF 2

ฝาก code ไว้ใน Blog

download jstl

code ที่ใช้ในวิดีโอ นะครับ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>JSF Tutorial!</title>
</head>
<body>
test
<br/>
   #{helloWorld.message}
</body>
</html>

Tweet

https://www.facebook.com/coachingcode

อ่านต่อ »

สอน Java พื้นฐานอย่างง่าย - Java Virtual Machine (JVM)

Java Virtual Machine (JVM)

Java virtual machine คืออะไร

               Java virtual machine หรือ JVM ก็คือโปรแกรมคอมพิวเตอร์ที่ประมวลโปรแกรมได้เสมือนเป็นเครื่องจริงๆ ซึ่งตัว JVM นี้จะถูกเขียนขึ้นมาอย่างแตกต่างๆ สำหรับแต่ละแพลตฟอร์ม เช่น Window, UNIX, หรือ Mac OS  เพื่อให้รองรับการรันภาษา Java ได้ทุกๆแพลตฟอร์ม

               โปรแกรม Java จะถูกคอมไพล์โดย Java คอมไพเลอร์ ให้อยู่ในรูปแบบ bytecode ซึ่ง JVM จะทำการแปล bytecode และจะทำการประมวลผลโปรแกรม Java

               โปรแกรม Java จะถูกแปลงจากภาษาระดับสูงไปเป็นคำสั่งของ JVM ตั้งแต่ตอนคอมไพล์โปรแกรม  ดังนั้นตอนทำงานจึงเพียงแค่แปลจากคำสั่งของ JVM ไปเป็นคำสั่งที่หน่วยประมวลผลนั้นๆทำงานได้ซึ่งเรียกว่า native code
ซึ่งแต่ละแพลตฟอร์มก็จะมี native code ที่ไม่เหมือนกัน แต่เราไม่จำเป็นจะต้องเข้าใจ native code เหล่านี้ เพราะทางผู้พัฒนาภาษา Java เขาทำตัวแปลงให้เราเอาไว้เรียบร้อยแล้ว

Tweet

https://www.facebook.com/coachingcode

อ่านต่อ »

สอน Java พื้นฐานอย่างง่าย - Compilation and Interpretation

Compilation and Interpretation

               ภาษาระดับสูง (high level language) เช่น C, C++, Java ถูกสร้างขึ้นมาเพื่อให้สามารถเขียนโปรแกรมได้ง่าย ทำให้เราไม่ต้องเข้าใจโครงสร้าง และชุดคำสั่งของหน่วยประมวลผลมากนัก ก็สามารถเขียนโปรแกรมได้

               อย่างไรก็ตามหน่วยประมวลผลทั่วไปไม่สามารถทำงานกับโปรแกรมภาษาระดับสูงได้โดยตรงจึงต้องมีตัวแปลภาษาที่เปลี่ยนโปรแกรมต้นฉบับที่เราเขียนขึ้นมา (source code) ที่เขียนด้วยภาษาระดับสูง ให้เป็นชุดคำสั่งที่หน่วยประมวลผลสามารถเข้าใจได้ (executable code) 

โดยมีวิธีแปลอยู่ 2 แบบ คือ

1. Interpretation ซึ่งเราจะเรียกตัวแปลภาษาแบบนี้ว่า Interpreter(อินเตอร์พรีเตอร์) ซึ่งทำการแปลง source code ให้เป็น executable code ทีละบรรทัดและทำงาน  จากนั้นก็จะทำแบบเดิมไล่ลงไปทีละบรรทัด  ซึ่งแบบนี้จะอธิบายง่ายๆว่า แปลไปประมวลผลไป

2. Compilation ซึ่งเราจะเรียกตัวแปลภาษาแบบนี้ว่า Compiler(คอมไพเลอร์) จะทำการวิเคราะห์ source code ก่อน แล้วจะได้ executable code เพื่อนำมาประมวลผลต่อไป ซึ่งแบบนี้จะอธิบายง่ายๆว่า แปลให้เสร็จทั้งหมดก่อน แล้วค่อยนำมาประมวลผล

ภาพด้านล่างจะบอกกระบวนการของการนำ code JAVA ที่เราเขียนไปใช้งานนะครับ

Tweet

https://www.facebook.com/coachingcode

อ่านต่อ »

สอน Java พื้นฐานอย่างง่าย - Overview

สอน Java พื้นฐานอย่างง่าย

Java Technology

               ในบทความนี้ผมจะอธิบายคร่าวๆเกี่ยวกับ Java ซึ่งอยากให้ผู้อ่านเข้าใจภาพรวมอย่างคร่าวๆ เพื่อใช้ในการศึกษา  ซึ่งผมคิดว่าการศึกษาแต่เพียงนิยาม อาจจะทำให้มองไม่เห็นภาพเท่าไร  แต่ผมคาดว่าทุกๆท่านจะเข้าใจมากขึ้นเมือได้ลองดูการเขียน code พร้อมกับการสอดแทรกเนื้อหาเข้าไปด้วย  ซึ่งผมจะทำการอธิบายพร้อมการเขียนโปรแกรมไปพร้อมๆกันด้วยในบทต่อๆไป

มาเริ่มกันเลยครับ

               Java technology นั้นเป็นทั้งภาษาเขียนโปรแกรมและแพลตฟอร์ม

               ภาษา Java ถูกออกแบบมาเพื่อการพัฒนา Application บนความแตกต่างกันทางระบบปฏิบัติการที่ต่างแพลตฟอร์มกัน  ซึ่งเราสามารถเขียนครั้งเดียวและสามารถใช้ได้บนทุกแพลตฟอร์มไม่ว่าจะเป็น Window, UNIX, หรือ Mac OS

               ภาษา Java นั้นมีต้นกำเนิดมาจากส่วนหนึ่งของโครงการวิจัยเพื่อพัฒนาซอฟท์แวร์สำหรับอุปกรณ์ network ที่หลากหลายและ embedded systems  โดยมีเป้าหมายในการพัฒนาขนาดเล็ก  มีความน่าเชื่อถือ  เคลื่อนย้ายง่าย  สามารถแจกจ่ายได้ และเป็นเป็นแพลตฟอร์มที่ทำงานแบบ real-time

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

               อีกข้อได้เปรียบของภาษา Java ก็คือ มีชุดการทำงานของคลาสต่างๆ (เรียกว่า library) เป็นจำนวนมากมาให้เราใช้งานโดยที่ไม่ต้องเสียค่าใช้จ่ายใดๆ อีกทั้ง Java ยังถูกออกแบบมาเพื่อความปลอดภัยโดยไม่ยอมให้มีการอ้างอิง Address ของตัวแปรโดยการใช้ Pointer รวมทั้งยังมีกลไกจัดการหน่วยความจำที่ไม่ได้ใช้ เพื่อให้นำกลับมาใช้ใหม่ได้ โดยที่ไม่ต้องทำการคืนหน่วยความจำเหมือนภาษาอื่นๆ เช่น ภาษา C

               Java ยังมีความน่าสนใจในเรื่องการจัดการกับข้อผิดพลาด หรือที่เรียกว่า Exception Handling ซึ่งกลไกนี้จะช่วยให้โปรแกรมสามารถทำงานต่อไปได้หากเกิด error

ทีนี้มาดูจุดเด่นของ Java เป็นเรื่องๆกันครับ

Object Oriented - Java นั้นมีกลไกการเขียนโปรแกรมเชิงวัตถุ

Platform independent - ไม่ขึ้นกับ Platform ใดๆ คือสามารถเขียนครั้งเดียว รันได้ทุกที่

Simple - Java ถูกออกแบบมาเพื่อให้ง่ายต่อการเรียนรู้

Secure - Java มีฟังก์ชันเกี่ยวกับความปลอดภัยให้ใช้งาน เช่นการเข้ารหัส

Architectural-neutral - Java คอมไพเลอร์จะทำการสร้าง architecture-neutral object file format ที่จะทำให้ code ที่ถูกคอมไพล์สามารถประมวลผลได้บนเครื่องใดก็ได้ที่มี Java virtual machine

Portable - เนื่อจากความที่เป็น Architectural-neutral ทำให้เราสามารถนำ code ที่เราเขียนเอาไว้ไปรันบนเครื่องไหนๆก็ได้ที่มี Java virtual machine

Robust - มีความแข็งแกร่ง เนื่องจาก Java จะเน้นการตรวจสอบ error ในช่วง compile time และ runtime

Multithreaded - เราสามารถที่จะเขียน Java ให้รันพร้อมๆกันได้ในเวลาเดียวกัน

Interpreted - Java byte code จะถูกแปลงให้เป็น ภาษา native ที่ทำให้เครื่องที่ทำการรันเข้าใจ

High Performance - ด้วย Just-In-Time compilers ทำให้ Java มีประสิทธิภาพที่สูง

Distributed - Java ถูกออกแบบมาเพื่อให้สามารถแบ่งปันบน Internet ได้

สิ่งที่อธิบายทั้งหมดนี้เป็นเพียงการแนะนำให้รู้จัก JAVA เบื้องต้นพอคร่าวๆนะครับ
อยากจะให้ทุกท่านรู้เอาไว้เพื่อทราบ ไม่จำเป็นต้องรู้เพื่อจำนะครับ  เพราะถ้าเราคลุกคลีอยู่กับการเขียนโปรแกรม เดี๋ยวสิ่งต่างๆเหล่านี้มันก็จะเกิดขึ้นมาให้เราเห็นในระหว่างที่เราเขียนเองครับ

Tweet

https://www.facebook.com/coachingcode

อ่านต่อ »

JSF Life Cycle (วัฏจักรชีวิตของ JSF)

JSF Life Cycle (วัฏจักรชีวิตของ JSF)

               ต้องขอเกริ่นนำเอาไว้ก่อนเลยว่าการอธิบายสิ่งเหล่านี้อาจจะไม่ทำให้มองเห็นภาพซักเท่าไร แต่จะเป็นการให้ข้อมูลเอาไว้ก่อน  ซึ่งผมจะอธิบายส่วนเหล่านี้เอาไว้ในบทถัดๆไป พร้อมกับการเขียน code ซึ่งจะทำให้เราเข้าใจในส่วนนี้มากขึ้น

JSF application life cycle ประกอบด้วย 6 ส่วน

1. Restore view phase
2. Apply request values phase
3. Process validations phase
4. Update model value phase
5. Invoke application phase
6. render response phase

Phase 1 : Restore view

               JSF จะเริ่ม Restore View Phase ในทันทีที่มีการกด link หรือ button

จากนั้น JSF จะรับ request  ซึ่งใน Phase นี้ JSF จะทำการสร้าง view ซึ่งจะผูกตัวจัดการ event (event handler) และ validators กับ UI Components และทำการ save ลงใน view ซึ่งอยู่ใน FaceContext instance

Phase 2 : Apply request values

               หลังจากที่ component tree ถูกสร้างหรือถูกเก็บใน view   component tree แต่ละตัวจะทำการแปลงค่าเพื่อเก็บเป็น request parameter

               ถ้าหากเกิด error ในการแปลงค่า จะมี error message ที่ถูกสร้างโดยอัตโนมัติเก็บไว้ใน FacesContext ในรูปแบบ queue ซึ่ง error message เหล่านี้จะถูกแสดงผลใน render response phase

Phase 3 : Process validation

               ใน phase นี้  จะเป็น phase ที่ทำการตรวจสอบข้อมูลจากตัว validator ถ้าการ validate ผิดจะทำมี error message ออกมาและจะทำการกระโดดข้ามไปที่ render reponse phase ทันที

Phase 4 : Update model values

               หลังจากที่ JSF ได้ทำการตรวจสอบข้อมูลใน phase validation เรียบร้อยแล้ว JSF จะทำการ update ค่าต่างๆลงที่ bean properties ซึ่งก็คือ field ของ java bean ที่ผูกกับ input component

Phase 5 : Invoke application

               ใน phase นี้ JSF จะจัดการ event ในทุกๆ application-level  เช่น การกด submit form หรือการ link ไปที่หน้าอื่นๆ

Phase 6 : Render response

               ใน phase นี้ JSF จะทำการแสดงผลหน้าเพจ   หลังจากที่ข้อมูลต่างๆถูกแสดงผลแล้ว จะมีการเก็บ reponse state เอาไว้เพื่อใช้ใน request ครั้งต่อๆไป

จบเรื่อง JSF Life Cycle กันแล้วนะครับ ซึ่งผมจะอธิบายส่วนเหล่านี้พร้อมกับการเขียน code ในส่วนต่อๆไปนะครับ  ^ ^

Tweet

https://www.facebook.com/coachingcode

อ่านต่อ »

การ Set up JSF 2 บน Eclipse อย่างง่าย

การ Set up JSF 2 บน Eclipse

               วันนี้ผมจะมาสอนการติดตั้ง JSF 2 บน Eclipse กันนะครับ  ก่อนอื่นผมจะแสดงรายการโปรแกรมที่ต้องลงก่อนนะครับ

โปรแกรมที่ต้องลงก่อนเพื่อที่จะใช้งาน JSF 2

1. JDK version 1.6.0_45  หรือจะโหลด version อื่นๆก็ได้นะครับแต่ขอให้เป็น version 6 

2. โปรแกรม Eclipse (ผมใช้ Eclipse ตัว Kepler นะครับ) download มาแล้วก็วางตาม drive ที่ต้องการได้   เลยโดยที่ไม่ต้อง install ครับ

3. Apache Tomcat 6 download ตัวที่เป็น Core นะครับ (ซึ่งในบทที่ผมจะสอน ผมจะใช้ tomcat เป็น server นะครับ) โหลดเสร็จแล้วให้แตกไฟล์วางที่ไหนก็ได้ครับ โดยที่ไม่ต้อง install

วิธีการติดตั้ง

1. ลง JDK ให้เสร็จเรียบร้อยก่อน 

2. วางไฟล์ Eclipse ไว้ที่ drive ไหนก็ได้ที่ต้องการ

2. วางไฟล์ tomcat  ไว้ที่ drive ไหนก็ได้ที่ต้องการ

ทีนี้มาลองเปิด Eclipse กันนะครับ 

ผมจะตั้งชื่อ workspace ว่า E:\learn_jsf_2 นะครับ หากไม่เคยสร้างโฟลเดอร์ที่ชื่อ learn_jsf_2 ตัว Eclipse จะทำการสร้างให้โดยอัตโนมัตินะครับ

ติดตั้ง JSF 2 บน Eclipse

1. คลิกที่ File > New > Other...

2. เลือก Dynamic Web Project แล้วกด Next

3. Project name (ชื่อโปรเจคจะใส่อะไรก็ได้) : ผมจะใส่เป็น EASY_JSF_2 นะครับ

4. จากนั้นกดที่ปุ่ม New Runtime... ที่อยู่ตรงหัวข้อ Target runtime ครับ

5. จากนั้นให้เลือก Apache Tomcat v6.0 แล้วกด Next ครับ

6. ตรงส่วน Name เป็นชื่อของ Server ครับ ซึ่งเราจะตั้งใหม่ก็ได้ครับ ผมจะเปลี่ยนเป็น My tomcat 6 นะครับ  

     ในส่วน Tomcat installation directory ให้ใส่ path ที่เราวาง tomcat เอาไว้นะครับ ซึ่งผมได้วางเอาไว้ที่ E:\tomcat\apache-tomcat-6.0.41  จากนั้นกด Finish ครับ

7. ต่อไปให้กดที่ปุ่ม Modify... ตรงหัวข้อ Configuration 

8. ตรง Java ให้เลือกเป็น version 1.6 ครับ แล้วให้ติ๊กถูกที่ JavaServer Faces และให้เลือกเป็น version 2 ด้วยครับ จากนั้นให้กด OK ครับ

9. ต่อไปให้กด Next ครับ

10. กด Next อีกทีครับ

11. แล้วก็กด Next อีกเช่นเคย

12. ทีนี้มันจะบอกเราว่าขาด user library ให้เราคลิกที่ปุ่มตามรูปครับ

13. จากนั้นให้เลือกตามที่ผมเลือกแล้วกด Next ครับ

14. ต่อมาให้ติ๊กถูกที่  I accept the terms of this license. แล้วกด Finish ครับ ซึ่งหลังจากที่เรากด Finish แล้ว Eclipse จะทำการโหลดไฟล์ Library ซักครู่นึงครับถ้าอินเตอร์เน็ตของเราแรงหน่อย

15. พอเสร็จแล้วก็จะได้หน้าตาแบบนี้ครับ  แล้วก็กดปุ่ม Finish ได้เลยครับ

16. ทีนี้เราก็จะได้ Project ที่มีลักษณะหน้าตาเป็นแบบนี้ครับ

17. ต่อมาก็ให้เลือก Window > Show View > Other...

18. เลือก Servers แล้วกด OK ครับ

19. ให้คลิกที่ No servers are available. Click this link to create a new server ครับ

20. จากนั้นให้กด Next ครับ

21. จากนั้นให้คลิกที่ Project ที่อยู่ได้ซ้ายแล้วกด Add ครับ

22. จากนั้นให้กด Finish ครับ

23. จากนั้นให้เรา double-click ที่ Server อีกที แล้วจะได้หน้าต่างดังรูปจากนั้นให้ Use Tomcat installation ตามรูปเลยครับ จากนั้นกด Ctrl + S เพื่อ Save

24. ต่อมาให้เข้าที่ Window > Preferences

25. จากนั้นให้เข้าไปที่ Menu ตามรูปเลยครับ แล้วกด Add

26. เลือก Standard VM แล้วกด Next ครับ

27. จากนั้นให้ใส่ที่อยู่ของ JDK เราครับแล้วกด Finish

28. จากนั้นให้เราติ๊กถูกตัวที่เราเพิ่ง Add เข้ามาแล้วกด OK ครับ

29. ต่อมาให้เราเข้าที่ Window > Preference เหมือนเดิมครับ

30. จากนั้นให้ไปที่เมนู Java > Compiler แล้วเปลี่ยน Compiler compliance level ให้เป็น 1.6 ครับ จากนั้นกด OK จากนั้นจะมี Pop-up ขึ้นมาให้เรากด Yes ครับ

31. ทีนี้เรามาแก้ไขไฟล์ web.xml กันครับ โดยเพิ่ม <welcome-file>index.xhtml</welcome-file> ตามรูปเลยครับ

32. ต่อมาเรามาสร้างไฟล์ index.xhtml กันครับ โดยการคลิกขวาที่ WebContent > New > File โดยใส่ชื่อไฟล์ว่า index.xhtml ครับ จากนั้นกด Finish ครับ

33. ทีนี้นำ code เหล่านี้ไปใส่ใน file แล้วกด save ได้เลยครับ

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" 

 xmlns:c="http://java.sun.com/jsf/core"

 xmlns:ui = "http://java.sun.com/jsf/facelets"

 xmlns:h = "http://java.sun.com/jsf/html">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Insert title here</title>

</head>

<h:body>

<h:outputLabel value="Hello World"></h:outputLabel>

</h:body>

</html>

34. จากนั้นกด click ขวาที่ server แล้วเลือก Start ครับ

35. ทีนี้เราลองมาเข้า URL ตามนี้กันครับ  http://localhost:8080/EASY_JSF_2/faces/index.xhtml

เมื่อเราเข้า URL ตามนี้แล้วก็จะได้ผลลัพธ์ดังนี้ครับ

Tweet

https://www.facebook.com/coachingcode

อ่านต่อ »

JSF Overview

JSF คืออะไร

               JSF (JavaServer Faces) ก็คือ MVC web framework ที่ใช้ Java เป็นตัวขับเคลื่อน ซึ่งมี UI Component ให้ใช้งานมากมาย

JSF มีประโยชน์อย่างไร

1. มี UI Component ที่สามารถนำกลับมาใช้ใหม่ได้

2. มีความง่ายในการส่งข้อมูลระหว่าง UI Components

3. สามารถจัดการ UI State จากหลายๆ Server Request ได้

4. สามารถทำ Components ใช้งานเองได้

5. สนับสนุนการใช้งานทั้งด้าน Client และ Server

               อย่างที่บอกเอาไว้ตอนต้นว่า JSF คือ MVC web framework ซึ่งเราจะมาทำความเข้าใจกันว่า MVC คืออะไร

M - Model       ใช้ในการเก็บข้อมูล

V - View          ใช้เป็นส่วนแสดงผลของ User Interface ซึ่งก็คือหน้าเว็บนั่นเอง

C - Controller  เป็นส่วนที่เอาไว้ควบคุมหรือจัดการข้อมูลต่างๆ

ซึ่งวัตถุประสงค์ของการใช้ MVC design pattern ก็คือ เพื่อแยกส่วนของข้อมูลและส่วนแสดงผลออกจากกัน ทำให้นักพัฒนาสามารถ focus ในการเขียนโค้ดเป็นส่วนๆได้มากขึ้น และ code ดูเป็นระเบียบมากขึ้น

ทำให้นักพัฒนาทำงานได้ง่ายขึ้น เช่น Designer ก็จะ focus ส่วนที่เป็น View ส่วน Developer ก็จะ Focus ในส่วนของ Model และ Controller (ในกรณีที่มีการแบ่งงานกันทำ)

Tweet

https://www.facebook.com/coachingcode

อ่านต่อ »