>> เรื่องนี้สมชายต้องจัดเต็ม เลิกลูกทุ่งมุ่งสู่อนาคต part 2 (จบ)
>> ต่อจาก if else มหาโหดที่ซ้อนกันเป็นตับเพื่อจัดการกับขนาดหน้าจอที่แตกต่างกันโดยไม่คิดจะใช้เรื่อง web responsive มาแก้ปัญหา และสมชายกับสมปองยังคงนั่งผลิต if else แห่งชะตากรรมต่อไป ส่งผลให้งานไหนก็ตามที่มีเรื่องขนาดจอภาพเข้ามาเกี่ยวจำต้องไปเขียนกระจุกกันตรงนั้น
>> แม้สมปองจะเคยมาอ่านบทความนี้ก็ตาม เธอยังคงคิดว่ามันทำงานได้ก็ให้มันทำงานต่อไป สนใจใช่เรื่อง จะหาเรื่องใส่ตัวทำไมชิมิ จากที่มี 50 บรรทัดผ่านคืนวันอันอบอุ่นก็กลายเป็น 500 บรรทัด และกลายเป็น 5000 บรรทัดในสองปี คราวนี้จะยัดอะไรลงไปก็เริ่มลำบากใจกลัวว่ามันจะไปกระทบกับส่วนอื่นๆ เอ๋หรือเปล่านะ? ส่งผลให้กระบวนการ test ยืดยาวใช่เหตุ ต้องตามมา test ของเก่าค้างปีที่เคยทำงานได้ดีในอดีตชาติ ทั้งๆที่ต้องการใส่ปุ่มกดแค่ปุ่มเดียว หากเป็นปุ๋ยอินทรีย์ต้นไม้คงได้เฮออกดอกออกผล แต่นี่เป็นโค้ดจาวาเพื่อจัดการหน้าตา (interface) หน้าบ้านที่ต้องฉายต่อประชาคมโลก มันจึงไม่ออกดอกผลิผลสักที แต่รอวันยืนต้นตายเท่านั้นเอง (เศร้าใจจริงๆ)
>> สมชายก็เลยปลอบใจสมปองว่า ช่างเถอะ มันมีมานานแล้ว เราทำอะไรไม่ได้หรอก (ห๊ะอะไรนะ?) ทั้งๆที่รู้แก่ใจแล้วแท้ๆสองคนนี้ยังเฉย สมควรถูกเรียกว่ามนุษย์ยุคหิน เออนะ ถ้าไม่รู้นี่ไม่ว่าเลย แล้วถ้าอยากจะแก้ไขล่ะ (ปรบมือ เฮ ดีที่ยังมีความรับผิดชอบ) ผู้รู้เขาบอกมาว่าอย่างนี้
- พยายามแยกส่วนที่เป็นการแสดงผลออกจาก business logic จะได้มากได้น้อยต้องค่อยๆทำไป ยอมรับความจริงว่าต้องเสียเวลากับมัน ต้องยอมลงแรงทำสิ่งที่จะเป็นรากฐานอันมั่นคงสู่ลูกหลาน (เพื่อนๆคุณเธออะ)
- สร้างชายแดนเกาหลีเหนือและเกาหลีใต้ออกมา (middleware) เพื่อที่ชายแดนนี้จะไปจับโค้ดเน่ากับโค้ดใหม่เข้าด้วยกัน และเมื่อมีเวลาค่อยไปจัดการโค้ดเน่าให้ดีขึ้นดุจโค้ดใหม่ ขอให้หาเวลาไปจัดการ ต้องยอมเจ็บปวดแลกกับอนาคต แต่ถ้าอ้างว่าไม่มีเวลา งานเร่ง หัวหน้าก็ควรตัดสินใจเลิกจ้างสมชายเพื่อที่เขาจะได้ไม่ตายคู่สมปองและพา app บริษัทดิ่งลงเหวไปด้วยกัน (แหม ซีรี่เกาหลี)
- เปิดใจใช้เทคโนโลยีใหม่ที่สามารถจัดการ ทั้งยังอำนวยความสะดวกสบายในการโค้ด โค้ดน้อยลง แลดูเป็นระเบียบ สะอาดสุขภาพจิตแจ่มใส ส่งงานทัน ลูกค้ายิ้มรับของที่สั่งได้ในเร็ววัน (ขายฝัน)
>> วันหนึ่งทีมนี้รับสมทรงเข้ามาช่วยงาน แวบแรกที่สมทรงเห็นสุดยอดสังฆกรรมงานบุญที่สมชายทำไว้กับสมปองจนท้องมีลูกเต็มไปหมด เธอก็อุทานโดยไม่รู้ตัวว่า ต๊าย!นี่มันตัวเงินตัวทอง! สมทรงแก้ไขทันที อย่างน้อยๆเธอก็แกะส่วนที่จัดการขนาดของหน้าจอกับการตัดข้อความแล้วใส่จุดจุดจุดออกมาได้ เธอบอกกับทั้งสองสมว่า ต่อไปอย่าเอาจาวาโค้ดมาคำนวณขนาดอีกนะจ๊ะ สมชายยืนขึ้นแล้วตอบกลับ ครับผมจะแก้ไขมัน (เฮ ปรบมือ)
>> อย่างที่บอกไปว่าเขียนด้วย GWT ก็จะเห็นโค้ดจาวา ในที่นี้เพื่อให้คนที่ไม่รู้ GWT พอจะนำโค้ดและหลักการไปประยุกต์ใช้ จึงขอถอด GWT ออกเป็น HTML, CSS และ Java script ดังนี้ครับ
1) ลบ if else นั่นออกไปแล้วหันไปใช้ div แทน
<div></div>
2) ให้ div ข้างต้นหมายถึงพื้นที่สำหรับวางข้อความลงไป สมมติให้มีความกว้าง 60% ของพื้นที่ทั้งหมด เป็นสีชมพู มีความสูงเท่ากับ 18px เราจึงบรรยายลักษณะที่ว่านี้ด้วย CSS คลาสได้เป็น
.demo-area {
width: 60%;
min-height: 18px;
background-color: pink;
}
3) จับใส่ div จึงเขียนได้ว่า
<div class="demo-area"></div>
4) ใช้หลักการของ relative และ absolute สร้างพื้นที่ที่ใช้บรรจุข้อความไว้ภายใน พร้อมกำหนด CSS คลาสและ id
<div class="demo-area">
<div class="container" id="container">
<div class="text-container text-container-width" id="textContainer">
<div class="text-content" id="textContent">
</div>
</div>
</div>
</div>
ดูง่ายๆว่า demo-area อยู่นอกสุด ถัดมาคือ container ถัดมาคือ text-container ถัดไปอีกคือ text-content ก่อนจะใส่ข้อความตัวอย่างลงไป ดังนี้
<div class="text-content" id="textContent">
Android App (The Android developer's cookbook)
</div>
5) โดยให้คลาส container เป็น relative ที่จะขึ้นอยู่กับขนาดของพื้นที่สีชมพู สีชมพูขยายมันขยายตาม สีชมพูหดมันหดตาม
.container {
position: relative;
}
6) ให้คลาส text-container เป็น absolute ลอยอยู่บน container ณ ตำแหน่ง top และ left เป็น 0 (มุมบนซ้าย) เจ้าตัวนี้จะคอยบอกว่าเมื่อไรที่ข้อความยาวเกินกว่าพื้นที่สีชมพู (คีย์สำคัญ)
.text-container {
position: absolute;
top: 0px;
left: 0px;
}
7) เมื่อไรก็ตามที่ text-container ต้องการแสดง ... (จุดจุดจุด) เมื่อความยาวของข้อความเกินกว่าพื้นที่สีชมพู มันต้องถูกจำกัดขอบเขต โดยการเพิ่มคลาสนี้ลงไปด้วย
.text-container-wrap {
width: 100%;
}
8) ให้คลาส text-content คอยจัดการการแสดงผลของข้อความ ในที่นี้คือแสดงให้หมดภายในบรรทัดเดียว เกินกว่าพื้นที่สีชมพูให้ใส่ ... (จุดจุดจุด) ต่อท้าย
.text-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
9) และเมื่อไรก็ตามที่มีจุดจุดจุดเกิดขึ้น นั่นแสดงว่าต้องมีป๊อปอัพดึ๋งดั๋งขึ้นมา (ตรงจุดนี้ไม่สำคัญมากนัก แล้วแต่จะประยุกต์ว่าอยากได้ป๊อปอัพหน้าตาอย่างไร มีอีกหลายชื่อ เช่น text balloon บ้างก็เรียก tool-tip ซึ่งก็จะลอยไปติดเจ้า container .tooltip {
position: absolute;
top: 20px;
left: 10px;
padding: 5px;
border: 1px solid gray;
border-radius: 8px;
}
10) ที่เหลือก็ java script เพื่อคำนวณความกว้างของพื้นที่สีชมพูเทียบกับความยาวของข้อความ โค้ดทั้งหมดสามารถดาวน์โหลดไปดูได้จากลิงค์นี้ครับ
http://www.mediafire.com/view/a3p5op5davfrtil/absolute_example.html
>> นี่อาจจะไม่ใช่วิธีการแก้ปัญหาที่ดีที่สุด รู้แค่ไหนเราแก้ไขไปเท่านั้น ไม่รู้ก็ต้องศึกษา เมื่อรู้ก็นำมาแก้ไขให้งานของเราดีขึ้น แม้เพียงน้อยนิดหากเทียบกับสิ่งที่ทำอยู่ ก็อย่าได้ลืมว่าเราเป็นผู้สร้างเรารู้ดีที่สุด ถึงเราจะไม่ได้สร้างยังมีใจแก้ไข นี่แหละหัวใจของความรับผิดชอบและคิดถึงส่วนรวมครับ ผมน่ะเชื่ออย่างนี้ คืนนี้สวัสดีครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น