การบันทึกและเปิดข้อมูล File โดยใช้ Flex by Ziah
Dec0
ในโปรเจ็คล่าสุดต้องมีการทำ Editor ให้ทาง Designer ได้จัดการหน้าตาต่างๆ เลยต้องมีการบันทึกไฟล์ เพื่อให้พวกเขาได้เปิดมาแก้ไขและบันทึกกลับไปใหม่ได้ และยังได้ข้อมูลที่ได้ทำการจัดการเสร็จแล้วเพื่อนำไปใช้จริงได้อีกด้วย วันนี้เลยมาแนะนำการบันทึกและเปิด Text File ใน Flex ครับ
เริ่มด้วยการบันทึก
var fileReference:FileReference = new FileReference; //ประกาศตัวแปรเรียกดูไฟล์
fileReference.save("ข้อมูลที่จะทำการบันทึก","ตัวอย่าง.txt"); //parameter ตัวแรกคือข้อมูลที่เราจะทำการบันทักลงในไฟล์ ตัวที่สองคือชื่อไฟล์ที่จะตั้งเป็น Default
จะได้ผลลัพธ์ดังนี้
ต่อไปเป็นการเปิดไฟล์
var fileReference:FileReference = new FileReference; //ประการตัวแปรเรียกดูไฟล์
fileReference.browse([new FileFilter("Text File", "*.txt")]) //ใช้คำสั่ง Browse เพื่อดูไฟล์โดยรับ parameter เป็น FileFilter หรือตัวกรองไฟล์นั่นเองโดยมีสอง parameter คือชื่อของไฟล์ที่ต้องการจะเรียกและ นามสกุลของไฟล์ที่จะเรียก
fileReference.addEventListener(Event.COMPLETE, onFileLoaded); //สร้าง Event เมื่อเปิดไฟล์เสร็จให้เข้าฟังก์ชั่นดังกล่าว
fileReference.addEventListener(Event.SELECT, function():void{fileReference.load();}); //สร้าง Event เมื่อมีการเลือกไฟล์ให้ทำการ Load ทันที
private function onFileLoaded(e:Event):void{ //ฟังก์ชั่นที่รองรับการโหลดไฟล์เสร็จ
var string:String = e.currentTarget.data.readUTFBytes(e.currentTarget.data.length); //ตัวแปร e.currentTarget.data คือข้อมูลที่ได้ทำการเปิดไฟล์มาซึ่งจะอยู่ในรูปของ ByteArray ซึ่งเราต้องนำไปทำการ Read ในแบบต่างๆตามข้อมูลของเรา (ในตัวอย่างเป็น String)
}
เพียงเท่านี้เราก็จะสามารถเขียนบันทึกและเปิดอ่านไฟล์ในแอปบลิเคชั่น Flex ของเราได้แล้วล่ะครับ
วิธีการทำให้รูป Facebook Profile สามารถแก้ไข/ใส่เพิ่มใน ActionScript ได้ by Ziah
Oct0
โดยปกติเราเมื่อเรานำรูปโปรไฟล์เฟซบุ๊คไปทำการ redraw, แก้ไข หรือนำไปใส่ในไฟล์ AS ต่างๆ ก็จะมี Error ขึ้นมาเตือนเรื่อง Security ว่าไม่สามารถทำงานได้ ดังตัวอย่างเช่นเราใช้ capture รูปของ Spark Group ที่มีรูปโปรไฟล์เฟซบุ๊คหนึ่งอยู่ ตามฟังก์ชั่นดังนี้
public function captureImg(imageObject:IBitmapDrawable):String { //รับกรุ๊ปเข้ามา
var ohSnap:ImageSnapshot;
ohSnap = ImageSnapshot.captureImage(imageObject, 0, pngEnc); //ทำการ Capture รูป ซึ่งจะบั๊คที่บรรทัดนี้
var imageByteArray:ByteArray = ohSnap.data as ByteArray;
return ImageSnapshot.encodeImageAsBase64(ohSnap);
}
จะทำให้เกิด Error หน้าตาแบบนี้
SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://localhost/****.swf/[[DYNAMIC]]/2 cannot access http://profile.ak.fbcdn.net/hprofile-ak-prn1/*****.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
at flash.display::BitmapData/draw()
ซึ่งวิธีการแก้ไขคร่าวๆของเราก็คือ การขอ Security Domain ต่างๆของรูปโปรไฟล์เฟซบุ๊คเอาไว้ก่อนหน้า ดังนี้
var domainList:Array = ['http://profile.ak.fbcdn.net','http://profile.cc.fbcdn.net','http://fbcdn-profile-a.akamaihd.net','http://photos-a.ak.fbcdn.net','http://photos-b.ak.fbcdn.net','http://photos-c.ak.fbcdn.net','http://photos-d.ak.fbcdn.net','http://photos-e.ak.fbcdn.net','http://photos-f.ak.fbcdn.net','http://photos-g.ak.fbcdn.net','http://photos-h.ak.fbcdn.net','http://static.ak.facebook.com','http://static.ak.fbcdn.net','http://b.static.ak.fbcdn.net'];
for each (var domain:String in domainList) {
Security.loadPolicyFile(domain+'/crossdomain.xml');
Security.allowDomain(domain);
Security.allowInsecureDomain(domain);
}
เพียงเท่านี้แอปพลิเคชั่นของเราก็จะสามารถรันได้เป็นปกติแล้วล่ะครับ
การปรับค่าลักษณะต่างๆของ Text แต่ละบรรทัดใน RichEditableText by Ziah
Jul0
จากบล็อคที่แล้วที่ได้แสดงถึงการสร้าง Chat ด้วย RichEditableText ในบล็อคนี้จะอธิบายอีกหนึ่งความสามารถของ RichEditableText ที่มีความยืดหยุ่นมากกว่า TextArea อีกอย่างนึงครับ
โดยปกติแล้ว TextArea จะสามารถแก้ไข Property ของ Text ได้ แต่ว่าจะทำการแก้ไขทั้งหมดไม่สามารถแก้ไขเป็นส่วนๆได้ ซึ่งความสามารถนี้มีใน RichEditableText ตามชื่อของมันเลย เรามาเริ่มจากการดู Property ของมันกันเลยครับ
จากการนั่งเจาะดู Property ของมันทำให้ผมเห็นได้ว่า จริงๆแล้วการเก็บ Text ของ RichEditableText นั้นสามารถเก็บแยกๆกันเป็น Paragraph ได้เท่านี้ก็พอเดาได้ใช่ไหมครับว่าเราจะแก้ไข Text แยกกันเป็นส่วนๆได้อย่างไร โดยโค้ดมีหน้าตาดังนี้ครับ
var pe:ParagraphElement = new ParagraphElement; //สร้างตัวแปรย่อหน้า
var se:SpanElement = new SpanElement; //สร้างตัวแปรบรรทัด
se.text = obj.message; //ใส่ค่ากับ Span0
se.color = "#00FFFF"; //ใส่สี ในส่วนนี้สามารถกำหนดค่าลักษณะต่างๆของ Text ส่วนนี้ได้เลยครับ
pe.addChild(se) //กำหนดเสสร็จแล้วก็จับใส่ตัวแปรย่อหน้าเลยครับ
txtChat.content.addChild(pe); //แล้วก็ไปจับใส่ RichEditableText ได้เลยครับ โดยนำไป addChild ใส่ Property content ที่เป็น TextFlow
จากโค้ดข้างต้นเราจะใช้โค้ดดังกล่าวแทน txtChat.text+=obj.message เหมือนทั่วๆไป แต่เราจะสร้างตัวแปรเพื่อกำหนัดคุณลักษณะต่างๆของ Text ก่อนแล้วค่อยในไปใส่ RichEditableText ของเรา แล้วเราจะได้ผลลัพธ์ดังนี้เลยครับ