เวลาเขียนโปรแกรมเราก็มักจะมีคำสั่งที่ต้องพิมพ์บ่อยๆ ซึ่งก็มักจะหลายๆ บรรทัด ครั้นจะให้เปิดไฟล์เก่าขึ้นมาเพื่อ copy ก็ยังไงอยู่ บางทีก็หาโค้ดเก่าๆ ไม่เจอก็มี บน Text Editor ที่ใช้สำหรับเขียนโปรแกรมส่วนใหญ่ก็มักจะมีฟังชั่นให้เราสร้าง snippet ซึ่งก็คือการสร้างคำสั่งลัดเอาไว้ใช้งาน ผมเรียกถูกหรือเปล่าไม่แน่ใจ แต่ก็ประมาณว่าถ้าเราพิมพ์ keyword ที่กำหนดไว้มันก็จะสร้างโค้ดที่กำหนดไว้ขึ้นมาให้เราเลย บน ATOM Text Editor ก็มีฟังชั่นนี้ให้ใช้งานเช่นกัน อธิบายอาจจะไม่เห็นภาพ ไปลองทำกันจริงๆ เลยดีกว่า

บทความก่อนหน้านี้ได้ทดลองนำ WebView มาใช้กันบ้างแล้ว และเป็นการใช้ WebView เรียกไปยัง website ข้างนอก แต่หากว่าเราต้องการจะนำ HTML ยัดลงไปในโปรเจคด้วยนี้จะทำยังไง โปรแกรมบางโปรแกรมเราไม่ได้ต้องการใช้ความสามารถของเครื่องอะไรมากนัก เราสามารถที่จะใช้ HTML และ JavaScript สร้างมันขึ้นมาได้ไม่ยาก และสำหรับคนที่ทำ website เป็นงานหลักอย่างผมแล้วเนี้ย มันดูจะประหยัดเวลามากกว่าการเขียนทั้งหมดด้วย Java เพียงอย่างเดียวซะอีก ^^

จากครั้งที่แล้วได้เริ่มการทดลองสร้างโปรเจ็คของ android กันไปแล้ว แต่ก็ยังไม่ได้ลงมือเขียน code สักบรรทัด เพราะยังไม่รู้ว่าจะเอาอะไรมาเป็นตัวอย่างดี วันนี้คิดออกหละ เรามาต่อที่เรื่องง่ายๆกันก่อน โดยเริ่มจากการสร้าง web browser นี้หละง่ายดี ใช้ control ไม่กี่ตัวก็สร้างได้แล้ว อย่างน้อยที่สุดเราก็จะได้รู้วิธีการเรียกใช้ Event onClick เป็นอย่างน้อย ^^

อย่างแรกสร้างโปรเจ็คขึ้นมาใหม่ก่อน ตั้งชื่อว่า “EasyWebView” หากจำวิธีสร้างไม่ได้ให้กลับไปดูบทความที่แล้วกันก่อน https://www.unzeen.com/article/927/index.html จากนั้นก็ follow ตามนี้เลย

พอดีพึงได้เจอปัญหามากับตัวเองเรื่องการเรียกใช้ jQuery คนละเวอร์ชั่นในหน้าเดียวกันมาสดๆร้อนๆ ถือโอกาสเอามาแบ่งปันความรู้กันหน่อยว่าเราจะจัดการกับมันยังไงได้บ้าง จริงๆเขียนเป็น note ลงใน facebook ไปแล้วรอบหนึง ทีแรกคิดว่ามันจะหาเจอได้จาก Google แต่ลองหาเท่าไรก็หาไม่เจอ เลยเอามาลงใน Blog อีกรอบหละกันเผื่อมีใครที่อาจจะเจอปัญหาแบบเดียวกันจะได้เอาไปใช้งานด้วย ซึ่งการใช้งาน jQuery ร่วมกับ library ตัวอื่นๆก็มีอยู่สองแบบหลักๆ (แบ่งเองนะเนี้ยคงไม่มีตำราที่ไหนแบ่งแบบนี้) คือ

1. การใช้ jQuery หลายเวอร์ชั่นร่วมกัน
2. การใช้ jQuery ร่วมกับ library อื่นๆ เช่น prototype

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

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

เวลาเปิดเจอเว็บสวยๆเราก็อยากจะรู้หละว่าเค้าใช้ font อะไร สีไหน ขนาดเท่าไร และการจะดูได้ ก็ต้อง view source ซึ่งบ่อยครั้งก็ดูลำบากเหลือเกิน ไหนจะ css อีก ปัญหานี้ช่วยได้ด้วย CSSViewer ซึ่งเป็น ads-on ของ FireFox ไปแอบดูมันหน่อยว่ามันทำอะไรได้บ้าง ตามมา..

บางคนอาจจะเคยประสบปัญหาเวลาที่จะต้องทำการกำหนดค่าให้กับ input ต่างๆ ใน html form โดยเฉพาะอย่างยิ่งพวก radio button, select, checkbox ซึ่งหากว่ามีไม่กี่ตัวก็คงไม่ลำบากเท่าไร แต่หากว่ามีเยอะหละก็ความยุงยากก็จะตามมา

ดูตัวอย่างก่อน ได้ที่นี้เลย https://www.unzeen.com/example/setFormValue.html

วันนี้แนะนำการใช้ jQuery + Validate Form Plugin สำหรับการตรวจสอบค่าในฟอร์ม ว่าถูกป้อนข้อมูลเข้ามาครบหรือยังก่อนที่จะทำการกด submit ซึงปกติแล้วเราอาจจะใช้ JavaScript ในการเช็คซึงถ้าเขียนเองก็อาจจะยุ่งยากไปหน่อย แต่ Validate Form Plugin ช่วยเราได้

เริ่มจากการ download jQuery มาก่อน http://www.jquery.com/
จากนั้นก็ download Validate Plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/