การทำงานระหว่าง Flash Catalyst CS5.5 และ Flash Builder 4.5 ในเวอร์ชั่นใหม่ by Ziah
Jul0
ในก่อนหน้านี้ Flash Catalyst 5 (ต่อจากนี้จะเรียกว่า Fc) และ Flash Builder 4 (ต่อจากนี้จะเรียกว่า Fb) ได้สร้างความสะดวกในการสร้าง UI ใน Fc แล้วจึงนำไปโค้ดดิ้งต่อใน Fb แต่หลังจากที่ตัวผมเองได้ทำงานกับทั้งสองโปรแกรมมาสักพัก ก็ได้พบความลำบากนิดหนึ่งในการใช้งานคือ มันเป็นโฟลว์ทางเดียว เมื่อคนออกแบบสร้าง Fc มาเสร็จแล้ว เราก็ต้องอิมพอร์ทเข้ามาทำงานใน Fb เพราะ Fc ไม่สามารถแก้ไขโค้ดใดๆได้เลย และเมื่อทางโค้ดดิ้งแก้ไขอะไรเรียบร้อยแล้ว เมื่อถึงเวลาจะมีการแก้ UI ต้องแก้ในโค้ดดิ้งเลย เพราะเมื่อเราทำการอิมพอร์ทเข้า Fb แล้ว เราจะไม่สามารถนำกลับไปทำใน Fc ได้อีก แต่หลังจากนั้นเพียงไม่นาน Adobe ก็ได้ปล่อยเวอร์ชั่นใหม่มาครับ คือเพิ่ม .5 เข้าไปเป็น Fc CS 5.5 และ Fb 4.5 ซึ่งส่วนใหญ่จะมากับการซัพพอร์ท Mobile ต่างๆ แต่ก็มีผลพลอยได้ด้วยคือ ทาง Fb สามารถเรียก Fc ขึ้นมาแก้ไข UI ได้แล้วล่ะครับ!
เรามาดูกันเลยดีกว่าว่าเป็นอย่างไร
• เรามาทำการ Import Flash Catalyst Project กันก่อนเลยครับ โดยตอนนี้ได้ย้ายที่แล้ว
• ก็จะได้โปรเจ็ค Flex จาก Fc เหมือนเวอร์ชั่นเดิมนะครับ
• จากนั้นเราลองมาแก้โค๊ดกันสักหน่อย
• ต่อไปเราก็ใช้ความสามารถใหม่ของ Fb 4.5 ครับ กดไปที่ Edit Project in Flash Catalyst
• จะทำให้เราเห็นโปรเจ็คใน Fb ของเราโดนล็อคดังรูป และโปรแกรม Fc ก็จะทำการเปิดโปรเจ็ค Fb ของเราใน Fc เองครับ
• เรามาดูกันใน Fc จะเห็นได้ว่าโค้ดที่เราแก้ไขไว้ได้เข้ามาใน Fc แล้ว ซึ่งทำให้เราสามารถแก้ไข UI หลังโค้ดดิ้งได้แล้วล่ะครับ
• เรามาลองใส่ State เพิ่มอีกตัว
• เมื่อเราแก้ไข UI ต่างๆ ใน Fc เสร็จแล้วเราก็มาเลือก Resume Working On Project in Flash Builder ครับ
- หรือถ้าต้องการทำการเริ่มการแก้ไขใหม่อีกครั้งจาก Fb ที่มีอยู่ให้เลือก Re-open Project in Flash Catalyst ครับ
- หรือถ้าต้องการยกเลิกการแก้ไขจาก Fc ให้เลือก Cancel Editing Project in Flash Catalyst ครับ
• เมื่อเราแก้ไขเสร็จแล้ว UI ที่ถูกแก้ไขก็จะถูกนำมาแก้ใน Fb Project ของเราในทันทีเลยล่ะครับ
Flow การทำงานแบบใหม่ของ Flash Catalyst CS5.5 และ Flash Builder 4.5
เราจะเห็นได้ว่าโฟลว์การทำงานของ Fc 5.5 และ Fb 4.5 ไม่ได้ไปทางเดียวเหมือนเวอร์ชั่นเก่าๆอีกต่อไปครับ เพราะเราสามารถแก้ไขไปมาระหว่างสองโปรแกรมได้อย่างอิสระแล้ว ทำให้ผู้ที่ทำ Flex มีความสะดวกสบายขึ้นในเวอร์ชั่นใหม่นี่ครับ
ทดสอบประสิทธิภาพเครื่องด้วย apachebench + newrelic by heha
Jul0
ช่วงนี้กำลังทดสอบประสิทธิภาพ server เลยต้องใช้งาน apachebench (ขอเรียกสั้นๆ ว่า ab) เป็น tools ในการทดสอบประสิทธิภาพ server อย่างหนึ่ง หลังจากลงโปรแกรมแล้ว เราสามารถทดสอบการใช้งานได้ดังนี้
ลองพิมพ์คำสั่งด้านล่างกัน โดย -n คือจำนวน request ทั้งหมดที่จะยิง และ -c คือจำนวน concurrent connection ที่จะใช้ (คือจำลองว่ามีผู้ใช้เข้าใช้งานพร้อมกันกี่คนนั่นเอง) โดยเวลาพิมพ์ชื่อเว็บอย่าลืมพิมพ์ / ต่อท้ายด้วยไม่งั้นจะยิงไม่ได้ ผลจะเป็นดังนี้
วิธีแก้ปัญหาเมื่อตาราง InnoDB ไม่สามารถ alter, optimize, dump ได้เลย by heha
Jun0
เนื่องจากช่วงนี้มีปัญหาโลกแตกที่ตาราง InnoDB อยู่ๆ ก็เกิด alter, optimize, dump ไมได้เลยซักกะอย่าง มันจะบอกว่า “MySQL server has gone away” หรือ “Error 2013: Lost connection to MySQL server during query when …” ซึ่งช่างเป็น error ที่สื่อความหมายได้ดีเยี่ยมเสียจริง! ไปดูใน log error ก็ฟ้องว่า thread MySQL ตายกลางทาง กรุณา submit bug ไปให้ MySQL เอ่อ… พอสั่ง Check table มันก็บอกว่าปกติดี เอะยังไง! สุดท้ายเนื่องจากจนปัญญาจึงต้องมานั่ง query ทีละ rowๆ ออกมาใส่ตารางใหม่ที่โครงสร้างเหมือนเดิม ซึ่งได้ผลดังนี้
1. ตารางที่ query มันใหญ่มาก! ไม่สามารถสั่ง INSERT INTO user2 (SELECT * FROM user) ได้ตรงๆ เลยแบบง่ายๆ
2. ลองสั่ง INSERT INTO user2 (SELECT * FROM user LIMIT 0,1000) ไรทำนองนี้ก็ไม่ให้อีก! มันฟ้องว่า subquery ไม่ support limit เวรจริงๆ ครับ 55
3. ลองใช้ php ช่วย คือสั่ง SELECT * FROM user WHERE user_id NOT IN (SELECT user_id FROM user2) LIMIT 0,1000 แล้วค่อยเอา user_id ที่ได้มา query ต่อเป็น “INSERT INTO user2 (SELECT * FROM user WHERE user_id IN(”.implode(’,', $a_user_id).”))” ก็ยังไม่ได้เพราะแต่ละ row มันใหญ่มาก กว่าจะเสร็จก็ช้ามากๆ
4. สุดท้ายจึงได้เป็น SELECT user_id FROM user WHERE user_id NOT IN (SELECT user_id FROM user2) LIMIT 0,1000 แล้วต่อด้วย ”INSERT INTO user2 (SELECT * FROM user WHERE user_id IN(”.implode(’,', $a_user_id).”))” เหมือนเดิม ก็ใช้ได้ละครับ 
5. รันไปซักพักพบ “MySQL Server has gone away” อีกแล้ว - -” จึงค่อยๆ ลด Limit มาเหลือ 1 ก็ยังพัง และค่อยๆ ลอง SELECT * FROM user WHERE id=1 ไปเรื่อยๆ โดยเปลี่ยน * เป็น field ในตารางที่มีทีละ field ปรากฏว่าก็เจอ field เจ้าปัญหาจนได้ เป็น Text field นี่เอง! ซึ่งเราไม่สามารถแม้กระทั่งสั่ง DELETE FROM user WHERE id=1 ช่างโหดร้ายยิ่ง!
6. ต่อมาจึงต้องใส่ offset เพื่อ skip row ที่มีปัญหาไป แล้วก็รันๆ ไปซักพักอีกก็เจออีก สรุปว่าข้อมูล user แสนคน เจอ row ที่มีปัญหาทั้งหมด 5 row มันไปทำอีท่าไหนถึงพังก็ไม่อาจทราบได้ และตอนนี้ก็สามารถกลับมาใช้งานได้ตามปกติซะที
ตัวนับเวลาถอยหลัง (Midnight-Daily-Reset) อย่างง่าย ด้วย Javascript by seeer
May0
จากที่เราเล่นเกมกันบ่อยๆ คงไม่มีใครไม่เคยเห็นระบบเล็กๆน้อยของเกม ที่กำหนดเวลาอนุญาตให้ทำ พูดง่ายๆก็อย่างเช่น ทำได้ทุกๆ สองชั่วโมง สิบสองชั่วโมง หรือ ธรรมดาๆก็ ทำทุกๆ 1 วัน อาทิเช่น ตีเมืองคนอื่นได้แค่วันละครั้ง ส่งของให้เพื่อนได้แค่วันละครั้ง อะไรแบบนี้เป็นต้น และเพื่อความเก๋ไก๋ เราก็ต้องมีตัวนับเวลาถอยหลัง โชว์เวลาถอยหลังให้ตื่นเต้นเล่นๆกันนิดหน่อย ตัวนับเวลาถอยหลังทำได้หลายแบบ เช่น นับจากวันที่กำหนดไว้ เหลือเวลาอีกเท่าไหร่จะถึงวันที่นี้ๆ เดือนนี้ๆ เป็นต้น ตัวนับที่นับถอยตามชั่วโมงที่มีให้เห็นได้ทั่วไป เราจะมาพูดถึง ตัวนับเวลาถอยหลัง ที่ทำทุกๆวัน หรือที่เรียกว่า Daily reset โดยที่ไม่ได้ reset โดยนับ 24 ชั่วโมง แต่จะ reset ตอนเที่ยงคืนของทุกวัน (เพราะเรานับวันใหม่หลังเที่ยงคืน เป็นอะไรที่มาตรฐาน)
มาดูกันว่า ถ้าเราอยากได้ ตัวนับถอยหลังที่นับจากเวลาเที่ยงคืน จะเขียนได้อย่างไรบ้าง
<html>
<head>
<title>Countdown to Mid-night</title>
<script type=”text/javascript”>
function ShowTimes() {
var now = new Date();
var hrs = 23-now.getHours();
var mins = 59-now.getMinutes();
var secs = 59-now.getSeconds();
// ถึงเที่ยงคืนแล้วจะให้ทำอะไรก็เชคไป บลาๆๆ
if(now.getHours() == 23 && now.getMinutes() == 59 && now.getSeconds() == 59)
{
document.getElementById(”start_butt”).style.display = “block”;
}
var str = ”;
str = now.toString();
str += ‘<br> Timeleft: ‘+hrs+’ hours ‘+mins+’ minutes ‘+secs+’ seconds’;
document.getElementById(’countdownToMidnight’).innerHTML = str;
}
var _cntDown;
function dontClick() {
document.getElementById(”start_butt”).style.display = “none”;
}
</script>
</head>
<body onload=”_cntDown=setInterval(’ShowTimes()’,1000)”>
<div id=”countdownToMidnight”></div>
<div id=”start_butt” style=”display:block”>
<button onclick=”dontClick()”>Start</button>
</div>
</body>
</html>
จากตัวอย่าง จะเห็นว่า ถ้ากดปุ่ม Start ไปแล้ว ปุ่มก็หายไป แล้วบอกเป็นนัยๆว่า รอกดใหม่พรุ่งนี้นะ บอกแล้วอย่างง่ายจริงๆ ขอบคุณบทความจาก http://www.webdeveloper.com/forum/archive/index.php/t-215504.html
การเปลี่ยนโค้ดจาก MX Compenent (Flex 3) มาเป็น Spark Component (Flex 4) by Ziah
Mar0
จากครั้งที่แล้วที่ผมได้อธิบายถึงการเปลี่ยนโค้ดจาก Flex 3 มาใช้ใน Flex 4 นะครับซึ่งจะเป็นรูปแบบของโค้ดหรือการทำงาน ซึ่งในครั้งนี้ผมจะอธิบาย Component ต่างๆที่ส่วนมากจะถูกเปลี่ยนมาใช้กับ Spark ใน Flex 4 กันนะครับ
แท็กที่ถูกเปลี่ยนจาก MX มาใช้แบบ Spark
| MX Component (Flex 3) | Spark Component (Flex 4) |
| <mx:Button> | <s:Button> |
| <mx:ButtonBar> | <s:ButtonBar> |
| <mx:CheckBox> | <s:CheckBox> |
| <mx:ComboBox> | <s:DropDownList> |
| <mx:HorizontalList> | <s:List>* |
| <mx:HRule> | <s:Line> |
| <mx:HScrollBar> | <s:HSlider> |
| <mx:List> | <s:List>** |
| <mx:NumericStepper> | <s:NumericStepper> |
| <mx:RadioButton> | <s:RadioButton> |
| <mx:RadioButtonGroup> | <s:RadioButtonGroup> |
| <mx:TextArea> | <s:TextArea> |
| <mx:TabBar> | <s:TabBar> |
| <mx:TextInput> | <s:TextInput> |
| <mx:TileList> | <s:List>*** |
| <mx:ToggleButtonBar> | <s:ButtonBar> |
| <mx:VideoDisplay> | <s:VideoPlayer> |
| <mx:VRule> | <s:Line> |
| <mx:VScrollBar> | <s:VScrollBar> |
| <mx:VSlider> | <s:VSlider> |
| <mx:Application> | <s:Application> |
| <mx:Window> | <s:Window> |
| <mx:WindowedApplication> | <s:WindowedApplication> |
| <mx:Canvas> | <s:Group> |
| <mx:HBox> | <s:HGroup> |
| <mx:Panel> | <s:Panel> |
| <mx:Tile> | <s:Group>*** |
| <mx:VBox> | <s:VGroup> |
*กำหนด Layout เป็น HorizontalLayout โดยใช้แท็ก <s:layout>
**กำหนด Layout เป็น VerticalLayout โดยใช้แท็ก <s:layout>
***กำหนด Layout เป็น TileLayout โดยใช้แท็ก <s:layout>
ตัวอย่างการใช้แท็ก Layout
<s:List>
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
แล้วอย่าลืมเปลี่ยน namespace อย่างที่ได้อธิบายใน การนำโปรเจ็คแอปพลิเคชั่นใน Flex Builder 3 ไปใช้งานใน Flash Builder 4 ไว้แล้วนะครับ เท่านี้ก็สามารถเปลี่ยน MX component ที่ใช้ใน Flex 3 มาเป็น Spark component ของ Flex 4 ได้แล้วล่ะครับ
Who are we?
