เริ่มกันเลยนะคับ สร้างไฟล์ 01-create-hello.html ที่จะทำการเรียก create-hello.js ซึ่งก็คือ พื้นที่ทดลอง code ต่างๆของ ExtJS
File: 01-create-hello.html
ตรงนี้มีจุดน่าสนใจอันนึงคับ ลองดูใน tag <body></body>ไม่ปรากฎร่องรอยหลักฐานใดๆทั้งสิ้น มีแต่ความว่างเปล่า อันนี้ไม่ใช่เซ็นนะคับ หุหุ เพราะบทพระเอกเป็นของ create-hello.js แต่เพียงผู้เดียว COPY&PASTE จากไฟล์ทั้งข้างบน และข้างล่างใส่ Notepad หรือ Wordpad แล้ว save ไว้ที่พื้นที่ทำงานของเรา ในที่นี้ขอใช้ C:\extjs-test กันนะคับ (สร้าง folder ชื่อ extjs-test เอาไว้ใต้ Drive C: แล้ว save file 01-create-hello.html กะ create-hello.js เอาไว้ด้วยกันตรงนี้
ตอนนี้เราจะมี 2 files ที่ folder C:\extjs-test กันแล้วนะคับ
เอ่อ แบบว่า มือใหม่หัดขับเหมือนกันคับ เคยใช้แต่ Firefox เขามี File -> Open Location ให้เลยหาง่าย แต่ Google Chrome นี่พยายามหาแล้ว แต่ไม่เจอ ต้องใช้บริการอากู๋ search แล้วได้ข้อเสนอแนะว่า Ctrl + O คับ เอาก้อเอา กดปุ่ม Control และแป้น O ป๊าบบบ ได้ Browse Window ขึ้นมาให้ แต่จะเป็นของ Windows หรือ Chrome เดี๋ยวได้รู้กันละ Open -> C: -> extjs-test -> 01-create-hello.html
ลองดู under the hood กันหน่อยคับว่าเกิดอะไรขึ้น ด้วยเครื่องมือที่จะขาดเสียมิได้ Developer Tools
1 มีการ load document ใช้เวลา 34 milliseconds แท่งสีน้ำเงิน พอดูด้านซ้ายก็จะพบว่า คือ 01-create-hello.html
เมื่อเรา click ที่ error บริเวณ create-hello.js จะเห็น code ที่หน้าต่างด้านขวามือ และยังแสดงข้อผิดพลาดที่ตรวจพบให้เราทราบอีกด้วย ตามรูปคือ Ext is not defined แปลเป็นไทยว่า ไม่รู้จัก Ext เพราะยังไม่มีใครแนะนำให้รู้จัก Ext คือคนแปลกหน้า แม่เคยสอนว่า ไม่ให้คุยกับคนแปลกหน้า
/ext/resources /ext/adapter /ext ทั้งหมด จะได้มาจากการติดตั้ง ExtJS ซึ่งเราจะได้พูดถึงในขั้นต่อไป
ขั้นตอนการติดตั้ง Ext JS
หลังจากที่รอมานาน คราวนี้มีโอกาสจะได้ใช้ของ original มั่ง แต่ก่อนพอได้อาศัย chart ของ Google Chart API ตามรูปข้างล่าง
หากสนใจอยากสร้าง chart รูปแบบอื่นๆเพื่อนำไปใช้งานแก้ขัดก่อน ไปตาม Link ข้างล่างนี้ได้เลยคับ
เริ่มดูจาก URL Format ไล่ดูตัวอย่างไปเรื่อยๆ ไม่เกิน 10 นาที ก็จะสามารถต่อยอดได้แล้ว คนไทยจะถนัดนักเรื่อง C&D ถือได้ว่าเป็นจุดแข็งโป๊กทีเดียว อ่อ Copy and Development อะคับสำหรับท่านที่ยังไม่ทราบ
จากนั้น ย้อนกลับไป refresh หน้าโครม อ๋อ ไม่ใช่ไปดึงหน้า พอกหน้าด้วยโคลนนะคับ คนละเรื่องกัน เราใช้ Chrome กันอยู่ไงคับ
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>01-create-hello</title>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="create-hello.js"></script>
</head>
<body>
</body>
</html>
ตรงนี้มีจุดน่าสนใจอันนึงคับ ลองดูใน tag <body></body>ไม่ปรากฎร่องรอยหลักฐานใดๆทั้งสิ้น มีแต่ความว่างเปล่า อันนี้ไม่ใช่เซ็นนะคับ หุหุ เพราะบทพระเอกเป็นของ create-hello.js แต่เพียงผู้เดียว COPY&PASTE จากไฟล์ทั้งข้างบน และข้างล่างใส่ Notepad หรือ Wordpad แล้ว save ไว้ที่พื้นที่ทำงานของเรา ในที่นี้ขอใช้ C:\extjs-test กันนะคับ (สร้าง folder ชื่อ extjs-test เอาไว้ใต้ Drive C: แล้ว save file 01-create-hello.html กะ create-hello.js เอาไว้ด้วยกันตรงนี้
File: create-hello.js
Ext.onReady (function(){
Ext.BLANK_IMAGE_URL = "/ext/resources/images/default/s.gif";
Ext.Msg.show({
title: "Greeting"
,msg: "Hello, world"
,buttons: {
yes: true
,no: true
,cancel: true
}
});
});
ตอนนี้เราจะมี 2 files ที่ folder C:\extjs-test กันแล้วนะคับ
- 01-create-hello.html
- create-hello.js
อธิบาย
Ext.onReady (function) {
.....
}
ทำหน้าที่บอกให้บรรดา code Ext JS ทั้งหลายให้รู้จักมีมารยาทรอคอย จนกว่า DOM (Document Object Model) ทั้งหลายจะถูกสร้างเสร็จเรียบร้อยเสียก่อน ถึงจะเริ่มทำหน้าที่ของตัวเองได้
คงจะเริ่มร้อนวิชา ใช้ Web Browser เปิดดูกันเลยครับ ที่แนะนำและกำลังมาแรงคือ Google Chrome เขามีเครื่องมือสำหรับ Developer สมัครเล่นแบบเราๆท่านๆแถมมาให้แล้วครับ หากจะใช้ Firefox ก็ต้องทำการติดตั้ง Extension Firebugs เพิ่มเติมเอาครับ แต่ไม่แนะนำ IE นะคับ (ทั้งไอ้ละอี ไม่ขอยุ่งด้วย อิอิ)
ถ้ารักจะใช้ Firefox คงต้องหาทางติดตั้ง Firebugs และลองหัดใช้ Firebugs ดูเอาเองนะคับ เพราะผุ้เขียนจะขอใช้ Google Chrome โดยตลอด ถ้ามีปัญหากับ Firefox Firebugs ใช้วิธีเขียนมาถามกันดีกว่า
เอ่อ แบบว่า มือใหม่หัดขับเหมือนกันคับ เคยใช้แต่ Firefox เขามี File -> Open Location ให้เลยหาง่าย แต่ Google Chrome นี่พยายามหาแล้ว แต่ไม่เจอ ต้องใช้บริการอากู๋ search แล้วได้ข้อเสนอแนะว่า Ctrl + O คับ เอาก้อเอา กดปุ่ม Control และแป้น O ป๊าบบบ ได้ Browse Window ขึ้นมาให้ แต่จะเป็นของ Windows หรือ Chrome เดี๋ยวได้รู้กันละ Open -> C: -> extjs-test -> 01-create-hello.html
มีแต่ความว่างเปล่า แหะๆ แต่อย่างน้อยก็ได้รู้กันไปว่า option Ctrl + O นี้ใช้กับ Chrome ได้
ลองดู under the hood กันหน่อยคับว่าเกิดอะไรขึ้น ด้วยเครื่องมือที่จะขาดเสียมิได้ Developer Tools
Ctrl+Shift+I (คอนโทรล ชิ๊ป ไอ : ไอนะคับ ไม่ใช่ ไฮ เดวอ่านลากยาวไป จะโดนกบว.แบนชัวร์) ก็ได้ แต่ขอไม่จำดีกว่า เปลืองพื้นที่ว่างในรอยหยักของสมองโผมมม
มีข้อมูลที่น่าสนใจอะไรบ้าง
1 มีการ load document ใช้เวลา 34 milliseconds แท่งสีน้ำเงิน พอดูด้านซ้ายก็จะพบว่า คือ 01-create-hello.html
2 มีการ load script ใช้เวลา 3 ms แท่งสีส้ม ดูด้านซ้ายก็จะพบว่า คือ create-hello.js
3 มีสัญญลักษณ์กลมสีแดง มีหมายเลข 1 ที่บริเวณด้านขวาสุดจอง create-hello.js กับสัญญลักษณ์กลมแดง กำกับด้วยเลข 1 ด้านขวาล่าง และมีแท่งสีเทาๆอีก 3 แท่ง ที่ยังไม่ถูก load เพราะเกิด ERROR เสียก่อน ที่ create-hello.js จำนวน 1 error และจำนวนรวม error = 1 ด้านล่าง รวมเวลาที่ใช้ในการ load ทั้งหมด 37 ms (34+3)
เมื่อเรา click ที่ error บริเวณ create-hello.js จะเห็น code ที่หน้าต่างด้านขวามือ และยังแสดงข้อผิดพลาดที่ตรวจพบให้เราทราบอีกด้วย ตามรูปคือ Ext is not defined แปลเป็นไทยว่า ไม่รู้จัก Ext เพราะยังไม่มีใครแนะนำให้รู้จัก Ext คือคนแปลกหน้า แม่เคยสอนว่า ไม่ให้คุยกับคนแปลกหน้า
พอเหลือบตาลงดูอีก 2-3 files ด้านซ้ายมือ จะพอมองเห็นเป็นเลาๆว่า มันคงต้องการ C:/ext แต่เรายังไม่มีให้เค้า
ขั้นตอนต่อไปคือการ หา ext มาให้ตามที่เขาต้องการ
ถ้าเราย้อนกลับไปดูใน 01-create-hello.html จะพบว่า มีอยู่ 3 บรรทัดที่ระบุถึง path ที่เกี่ยวข้องกับ Ext ได้แก่
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
/ext/resources /ext/adapter /ext ทั้งหมด จะได้มาจากการติดตั้ง ExtJS ซึ่งเราจะได้พูดถึงในขั้นต่อไป
ขั้นตอนการติดตั้ง Ext JS
1 Download Source Application ตาม Link ข้างล่าง ณ เวลาที่เขียน อยู่ที่ Version 3.1.0
2 ระหว่างกำลังรอการ download กว่าจะเสร็จ มีเวลาไปดูหนังตัวอย่างเล็กๆน้อยๆที่นี่ได้เลยคับ อย่าลืม click ที่ Download ด้านท้ายของ Ext JS 3.1.0 Public Release ก่อนจะไปดูตัวอย่างนะคับ
ตัวอย่างที่โดนใจมากมายได้แก่รายการดังต่อไปนี้ ...
หลังจากที่รอมานาน คราวนี้มีโอกาสจะได้ใช้ของ original มั่ง แต่ก่อนพอได้อาศัย chart ของ Google Chart API ตามรูปข้างล่าง
Google-o-meters เป็นรูป meter มีลูกศรชี้ไปตามขนาดของข้อมูล ตามรูปตัวอย่างคือ 70% ทำเองก็ได้ง่ายจัง แค่สร้าง URL เฉพาะกิจตามนี้
chs = chart size
cht = chart type
gom = google-o-meters
chd = chart data
chl = chart label
หากสนใจอยากสร้าง chart รูปแบบอื่นๆเพื่อนำไปใช้งานแก้ขัดก่อน ไปตาม Link ข้างล่างนี้ได้เลยคับ
เริ่มดูจาก URL Format ไล่ดูตัวอย่างไปเรื่อยๆ ไม่เกิน 10 นาที ก็จะสามารถต่อยอดได้แล้ว คนไทยจะถนัดนักเรื่อง C&D ถือได้ว่าเป็นจุดแข็งโป๊กทีเดียว อ่อ Copy and Development อะคับสำหรับท่านที่ยังไม่ทราบ
มัวแต่เม้าไปมา อ้าว download เสร็จตั้งแต่เมื่อไร ไม่ทันเห็น ลงมือแตก zip ไปไว้ที่ C:\ ตามแผนได้เลยคับ Extract เสร็จ มีขั้นตอนอีกนิดนึงคับ คือ เราต้อง rename folder นี้เสียก่อน จาก ext-3.1.0 ให้เหลือแค่ ext ก็พอ หรืออยากทำเท่ห์ จะใช้ C:\ext-3.1.0 ก็แค่กลับไปเปลี่ยน 01-create-hello.html ให้รุมกันชี้ไปที่ /ext-3.1.0 ให้หมดเสียทุกอัน แล้วพอตอนหลังอย่าหลงไปเขียนเป็นอย่างอื่นซะนะ เดี๋ยวจะพาลไม่รู้จักกันอีก ตกลงจะขอเลือกใช้การเปลี่ยนชื่อ-สกุล ให้เหลือแค่ ext เพื่อความสะดวกของผู้เขียนเองนะคับ
จากนั้น ย้อนกลับไป refresh หน้าโครม อ๋อ ไม่ใช่ไปดึงหน้า พอกหน้าด้วยโคลนนะคับ คนละเรื่องกัน เราใช้ Chrome กันอยู่ไงคับ
ว๊าวววว พระเจ้าช่วย กล้วยทอด บังเกิดความมหัศจรรย์ พันลึกเลยคับ ที่เครื่องได้แบบนี้อะคับ
create-hello.js (JavaScript) สำแดงฤทธิ์ ออกมาเป็น Hello World รุ่นไฮโซ เริดซะไม่มีอะ
ย้อนกลับไปดูคำสั่งใน create-hello.js จะเห็นว่า อ่อ หรือจะ ไม่เห็นว่ามีอะไรมากมายเลย
ไหน ขอดู Developer Tools กันอีกที อ้าววว Error เมื่อกี้ อันตรธานหายไปหมดแระ
จนถึงตอนนี้ ท่านผู้อ่านที่ได้ติดตามมาโดยตลอด และหวังว่า คงจะลงมือทำด้วยตัวเองกันนะคับ อยากจะเขียนโปรแกรมให้เก่ง ต้องลงมือทำเอง
แถมอีกนิดนึง ภาษาไทยก็ใช้งานได้ดีนะคับ ลองเปลี่ยน Hello, world เป็น สวัสดี, โลก ดูคับ ถ้าภาษาไทย ถูก Ext JS เล่นตลก กลายเป็นภาษาต่างดาว ไม่ต้องตกใจคับ เรามียารักษาให้ ก่อนอื่น encoding ของ Editor ที่ save file js-01.js ของเรา ควรต้องตรงกับ encoding ที่ ส่วนหัวของ html นะคับ เช่น ถ้าระบุว่า UTF-8 ก็ให้ save เป็น UTF-8 ละกัน แต่ถ้า save เป็นแบบ ANSI ต้องเปลี่ยน encoding ของ Chrome ให้เป็น Thai นะคับ วิธีทำก็ตาม link นี้เลย
ขอจบตอนที่ 1 ก่อนแต่เพียงแค่นี้คับ
ไม่รู้จะบอกยังไงนะครับ คือ ขอบคุณมากๆๆๆๆๆๆๆๆๆ ครับ ที่เอื้อเฟื้อความรู้ ให้กับทุกๆ คน ผมอ่านหมดแล้วนะครับ สุดยอดมาก
ตอบลบ(กำลังรอ ExtJs บทความ ต่อๆ ไปนะครับ) ^^...
ขอบคุณมากๆเหมือนกันค่ะ ได้ความรู้มากมายจริงๆ
ตอบลบกำลังรอบทความต่อไปเช่นกันค่ะ ^_^
สุดยอดครับ รอบทความต่อๆ ไปอีกเรื่อยๆ ครับ ผมจะนำไปประยุกต์ ใช้ครับผม ขอบคุณมากมายอีกครั้ง
ตอบลบ