ชวนคุยจาวา part 6 : คำถามของ protected modifier

>> หลังจากเรียนรู้จาวาส่วนแรกกับพี่นรินทรไปแล้ว ผมก็ไม่ได้เขียนเรื่องจาวาพื้นฐานเพิ่มอีกเลยเป็นเวลายาวนานมาก สองสามวันที่ผ่านมาหัวหน้าแอบมาถามเพื่อนสาวผมว่า 'เราใช้ protected กับคลาสได้ไหม' เพื่อนสาวก็เอามาถามผมอีกที ผมคิดได้ในขณะนั้นทันทีว่า อ่อ ที่แท้มันสำคัญอย่างนี้

>> เพื่อนๆหลายคนรู้ดีว่าภาษานี้มี modifier อยู่สองประเภทใหญ่ๆ คือ
- Java Access Modifiers และ
- Java Non Access Modifiers

>> เน้นไปที่แบบ access modifiers ได้แก่
- Private Access
- Default Access
- Protected Access
- Public Access

>> คืออย่างนี้ครับ งานที่เป็น common นั้นมันจำเป็นต้องใช้เกือบทุก module สมมติว่างานของเรามี Financial Module, Supply Chain Module, Human Resource Module และ Customer Relationship Module การจะพัฒนา module ไหน จำต้อง include เจ้า Common Module มาด้วย (สมมติไง) คลาสที่เป็น general common ใน Common Module จะถูกหยิบไปใช้ ตรงกันข้ามคลาสที่เป็นของ module อื่นที่ไม่ใช่ common เจ้า Common Module จะต้องไม่เรียกใช้โดยเด็ดขาด งานลักษณะแบบนี้เขาจึงมัก design ให้ประดาคลาส general common ดังกล่าวเป็นตัวที่ต้องถูกสืบทอดไปใช้ (ไม่ถึงขนาดบีบบังคับ)

>> กล่าวคือ general common classes จะถูกนิยามด้วย protected ไม่ว่าจะเป็น data member หรือ method member หรือ inner class

>> ทีนี้กลับมาที่คำถามของหัวหน้าที่ว่า 'เราใช้ protected กับคลาสได้ไหม' คำตอบนั้นเพื่อนๆคงทราบแล้วจากข้อมูลข้างต้นว่า ไม่ได้ จะใช้ได้กับ data member หรือ method member หรือ inner class เท่านั้น (เท่าที่ผมทราบตอนนี้นะ ตกหล่นขออภัยยิ่ง)

>> ด้วยเหตุนี้ทำให้ผมนึกถึงอีกคำถามหนึ่งของรุ่นน้องที่มหาวิทยาลัย เขาถามว่า 'เนี่ย โค้ดของผมสามารถเข้าถึงสมาชิกของคลาสที่ประกาศ protected ได้ไม่ต่างจาก public เลยพี่ แล้วมันยังไงพี่' คำตอบในตอนนั้นก็คือ ถูกต้องครับ ถ้าเราตัดการสืบทอด (Extend) ออกไปแล้วใช้ protected modifier กับสมาชิกของคลาส ผลมันจะไม่ต่างจาก public modifier ซึ่งถูกต้องแน่แท้ แต่น้องลืมเรื่อง package ไป

>> จากนิยามที่ว่า protected : can only be accessed by classes in the same package or sub classes of this class. นี่แหละคือคำตอบที่น้องต้องการ protected มีผลกับคลาสลูกที่ไปสืบทอด data member หรือ method member หรือ inner class ที่มี modifier เป็น protected และจะเห็นผลอย่างชัดเจนเมื่อคลาสลูกดังกล่าวนั้นอยู่ต่าง package กับคลาสแม่ (ถ้าลูกกับแม่อยู่ package เดียวกัน ยังไงมันก็เห็นกันไม่ต่างจาก public อยู่แล้ว) พูดง่ายๆว่า คลาสที่เข้าถึงสมาชิกของแม่ได้ต้องเป็นลูกของแม่เท่านั้น โดยมีผลในทุก package

>> กลับมาที่ general common classes เมื่อมี package เป็นของตัวเอง สมมติว่าชื่อ common คลาสใดๆก็ตามที่สืบทอดจาก general common class เหล่านี้ก็สามารถเข้าถึงสมาชิกที่เป็น protected ได้นั่นเองครับ จบแล้วจ้า

AngularJS part 7

AngularJS with Kendo UI

>> Kendo UI ก็คือหนึ่งในหลายไลบรารีหน้าบ้านสวยๆที่เราสามารถเขียน AngularJS เพื่อเรียกใช้ได้ (บังเอิญค้นเจอ http://demos.telerik.com/kendo-ui/) ใจร้อนอยากลองเรื่องแผนภูมิ (chart) จึงได้ไปโค้ดตามตัวอย่างของเขาครับ รู้สึกติดใจจึงเอามาเล่าสู่กันฟัง

>> เข้าใจว่าตัว Kendo UI นั้นไม่ฟรีนะ ให้ทดลองใช้ในสามสิบวัน (แหมๆๆ)

>> โค้ดตามไปสองแผนภูมิครับ เป็น Bar Chart กับ Pie Chart และก็อย่างเคยๆแบบว่ารู้กันอยู่แล้วชิมิ แชร์เป็นความรู้แลความคึกคะนองครับ
- เชิญชม Bar Chart
- เชิญชม Pie Chart

>> ไว้พบกันอีกนะ เคี๊ยกๆ อ้อ ใครที่เปิดแล้วรู้สึกว่ามันแปลกๆ ให้เลือกที่เมนู Project ตามด้วย Refresh Project เน้อ

AngularJS part 6

Single Page Application (SPA) & Routing

>> Single Page Application หลักการนี้ก็คือ หนึ่งแอปพลิเคชันนั้นอยู่ในหนึ่งหน้า หนึ่งหน้า! ไม่ผิดครับ คือทั้งแอปแสดงอยู่ในหน้าเอกสาร html เพียงหน้าเดียวเท่านั้น เหอะๆ ด้วยความสามารถของ AngularJS มันถูกออกแบบมาเพื่อการนี้เลยเทียวล่ะ

>> Routing ก็คือการจัดการ URL หรือการควบคุม URL ครับ ตัวอย่างเช่น ต้องการหน้าที่ชื่อ customers.html หรือหน้าแสดงรายการต่างๆของคุณลูกค้าคนหนึ่ง สมมติมันถูกเก็บไว้ที่ projects/shopping/customers.html เราอาจกำหนด URL ให้เข้าถึงได้จาก shopping/C001 ก็จะหมายถึงให้ไปที่หน้า customers.html แล้วค้นหา id ของคุณลูกค้าคือ C001 แล้วแสดงรายละเอียดของเขาหรือเธอออกมาอย่างนี้ก็ได้

>> ผมได้เขียนโค้ดตัวอย่าง (ตามตัวอย่างอีกที) ไว้ที่ Coding ground editor แล้วก็นำมาแชร์ออนไลน์ ณ http://goo.gl/R0HK21 (เข้าไปดูสิ)
โดยเพื่อนๆสามารถคลิกเข้าไปดู แล้วกดปุ่ม Preview เพื่อชมผลลัพธ์ได้เลย การทำงานของมันก็คือ
- มีหน้าที่ชื่อ index.html เป็นหน้าหลักในการแสดงผล (SPA main page)
- มีหน้าย่อยๆสามหน้าเก็บไว้ใน folder ชื่อ views นั่นคือ home.html customer.html และ about.html
- เมื่อคลิกลิงค์ตรงด้านบนในหน้า index.html เหล่าหน้าย่อยจะถูกเรียกให้มาแสดงผลโดยไม่มีการ reload page เลยสักครั้ง
- หัวใจของหน้าหลัก index.html ก็คือ directive ที่ชื่อ ng-view มันมีผลให้หน้าย่อยที่ถูกเรียกถูกนำมาแสดง ณ ตรงจุดนี้ทั้งหมด
- อย่างไรก็ตามตัว routing จะเข้ามาจัดการ URL โดยเทียบเคียงจากลิงค์ของแท็ก a ที่เราได้กำหนดเอาไว้ เมื่อตรงกันกับเงื่อนไขของ $routeProvider.when ใดๆ AngularJS จะไปเรียกหน้าดังกล่าวมาให้โดยผ่านตัวแปรชื่อ templateUrl
- แต่ก่อนที่หน้าย่อยจะถูกนำมาแสดงนั้น เราได้บอกให้มันไปเรียก controller ใดๆขึ้นมาทำงานด้วยนะเออ ส่งผลให้ค่าของตัวแปรที่ชื่อ controllerName เปลี่ยนแปลงไปตามหน้าย่อยเหล่านั้นนั่นเองจ้า

>> ศึกษา SPA ตัวอย่างอื่นๆเพิ่มเติม
- http://hello-angularjs.appspot.com/spa#/searchtable
- http://www.w3schools.com/angular/angular_application.asp
- https://www.youtube.com/watch?v=2QJRifW-zbs

AngularJS part 5

Dependency Injection

>> พึ่งพาการฉีด? ใช่ครับ มันก็คือวิธีการออกแบบ software ให้จัดเตรียมบางสิ่งบางอย่างเอาไว้ (สมมติว่าเป็นวัคซีนในหลอดฉีดยา) แล้วส่งสิ่งเหล่านั้นให้กับผู้ที่ร้องขอ (จึงฉีดวัคซีนให้กับผู้ที่ต้องการ) เพื่อที่พวกเขาจะไม่ต้องเตรียมสิ่งดังกล่าวนี้เอง
- สร้าง controller ชื่อ textController
- ให้ textController นิยามฟังก์ชันแบบภาษาจาวาสคริปต์ที่เป็น anonymous (ฟังก์ชันแบบไม่มีชื่อ) แล้วร้องขอตัวแปรชื่อ $scope โดยวิธีการ inject (ตัวแปร $scope นั้น AngularJS เตรียมไว้ให้แล้วหรือก็คือวัคซีนแหละ พร้อมฉีดๆ)
- ผูก (bind) ตัวแปรชื่อ value เข้ากับตัวแปร $scope ให้ค่ามันเป็น "Where is the love?"
- เรียกใช้ controller ดังกล่าวด้วย directive ที่ชื่อ ng-controller ในแท็ก div
- แล้วแสดงผลค่าของตัวแปร value ที่แท็ก p ตามเคย

>> ผลลัพธ์คือ
- "Where is the love?" นั้นไปปรากฏอยู่ในแท็ก p เพราะ injection เข้ามาครับ

>> ศึกษาเพิ่มเติม
- https://docs.angularjs.org/guide/di

AngularJS part 4

Two-way Data Binding

>> หัวใจคือการสื่อสารสองทางระหว่าง model กับ view ง่ายๆว่าเมื่อ model กับ view ใช้ข้อมูลเดียวกัน ข้อมูลที่ model เปลี่ยนจะส่งผลให้ข้อมูลที่ view เปลี่ยน หรือข้อมูลที่ view เปลี่ยนจะส่งผลให้ข้อมูลที่ model เปลี่ยนตาม ดังตัวอย่างต่อไปนี้
- สร้างแท็ก input มีชนิดเป็น text สำหรับกรอกข้อมูลลงไป
- สร้างแท็ก p สำหรับแสดงผลข้อมูลที่เราได้กรอกลงไปในช่องแท็ก input ข้างต้น
- ใช้ directive ที่ชื่อ ng-model กับแท็ก input เพื่อผูก (bind) ตัวแปรสำหรับเก็บข้อมูลนั้นกับส่วนแสดงผล

>> ผลลัพธ์คือ
- เมื่อพิมพ์ข้อความใดๆในช่องของแท็ก input จะส่งผลให้ข้อความนั้นปรากฏในแท็ก p ด้วย

>> ศึกษาเพิ่มเติม
- https://docs.angularjs.org/tutorial/step_04

AngularJS part 3

อยากวาด chart

>> เป้าหมายคือ เราจะเขียน AngularJS ผนวกเข้ากับ Google Chart ดังเว็บนี้ครับ http://bouil.github.io/angular-google-chart/#/fat

>> โดยศึกษา how to จากหลายๆแหล่ง หนึ่งในนั้นที่ผมสนใจขณะนี้คือที่นี่
http://www.sitepoint.com/creating-visualization-app-using-google-charts-api-angularjs/

>> แล้วมาเริ่มต้นด้วยกันอีกครั้งตามแบบฉบับมือใหม่อยากรู้ในโอกาสต่อๆไปครับ ใครมีไอเดียดีๆ บอกกันได้เลยนะ

AngularJS part 2

เริ่มอย่างไร?

>> โดยอาจารย์ tutor4dev มีด้วยกัน 8 วิดีโอในขณะนี้ (ภาษาไทย) เป็นการปูพื้นที่ดีมากๆ

>> หลังจากนั้นแนะนำให้ต่อด้วยของอาจารย์ John Lindquist มีด้วยกัน 59 วิดีโอ (ภาษาอังกฤษ) จัดว่าแจ่ม

>> หลังจากนั้นเรามาเขียนร่วมกันอีกครั้งอย่างเคยใน part ต่อไปนะครับ

AngulaJS part1

ข่าวสารและความน่าสนใจ

สืบเนื่องจากต้องทำงานกับหน้าบ้าน หนีไม่พ้นเรื่องของ HTML และ CSS ซ้ำยังต้องเข้าไปเพิ่มเติมส่วนติดต่อที่ใช้ JavaScript บ้างเป็นบางครั้ง ทำให้สนใจที่จะศึกษาศาสตร์เหล่านี้

ต่อมาพบว่าหลักการ OOP จาก Desgin Patterns นี่มันสวดยอดมาก ผนวกเข้ากับ Interface แล้วนี่มัน !!!นี่มัน... dynamic typing ชัดๆ เพิ่งได้สัมผัสประสบการณ์การใช้ออบเจ็กต์อย่างที่มันควรจะเป็น เกิดมาไม่เสียชาติแล้วชีวิต!!!

พอได้จับโปรเจ็กต์ PHP OOP ยิ่งคั่วลึกล้ำ พวกอาจารย์นี่แมร่งเก่ง ไม่ว่าจะไทยหรือเทศ ต่างก็ติดปีกแสงกันทั้งนั้น แล้วเราเป็นใคร เงยหน้ามองฟ้ากว้างใยไม่ลองใส่ปีกกับเขาบ้างล่ะหือ?

เส้นทางเหล่านี้ในที่สุดก็โยงไปยังสุดยอดเทคโนโลยีหน้าบ้านแห่งยุค 2012 (ก่อกำเนิด) ชื่อของมันก็คือ AngulaJS โดยทีมพัฒนาของ Google โอ้โห~ ผมเป็นพวกชอบตื่นตะลึงครับ เมื่อเกิดความกระสันอยากในวิชานี้จึงได้ไปพบกับ PDF ภาษาไทย!!! (555 มาถึงตรงนี้ผมหัวเราะทำไมไม่รู้)

สรุปว่า เพื่อนคนไหนกำลังกระสันอยาก AngulaJS ก็ชวนกันศึกษาครับ ไว้เสร็จจากจุดนี้เราค่อยไปต่อกันที่ NodeJS เรียกได้คุมทั้งหน้าบ้านหลังบ้าน รู้สึกใช่ไหมครับ รู้สึกถึงพลังงานบางอย่าง ...ใช่ พวกเราสัมผัสได้ มันมีอยู่จริง!!!

>> ลิงค์อ่านออนไลน์นะ โม้มากชักเหนื่อย สวัสดีจ้า
http://www.panyasoft.com/download/Sample01_IntroductionToAngularJS.pdf