สร้าง Media Browser ไม่ยากอย่างที่คิด!!
Tagged:  •    •  

ใน Application ชุด iLife'08 จะมีสิ่งหนึ่งที่เพิ่มขึ้นมาอย่างชัดเจน นั่นคือ Media Browser ดังจะเห็นได้้ชัดๆเลยก็อย่างเช่น iDVD, iMovie เป็นต้น (ตัวอื่นๆก็มีครับ แต่ที่เห็นชัดๆเลยคือ 2 ตัวนี้)

ประโยชน์ของ Media Browser(ขอเรียกว่า MB นะครับ) ก็คือ ช่วยให้เราค้นหาไฟล์ Media แต่ละประเภท ได้แก่ เพลง, รูปภาพ และ Video ที่เราเก็บอยู่ใน iLife App มาใช้ได้ง่ายๆโดยที่ไม่ต้องเปิด iLife App พวกนั้นขึ้นมาเลย พร้อมทั้ง Preview ได้ในตัว Browser เลย เพลงก็ลองฟังได้เลย วิดีโอก็ลองเล่นได้เลย รูปก็ขึ้นมาเป็น Thumbnail ให้ดูเลย พร้อมทั้งมีฟีเจอร์การ Search ให้เสร็จสรรพ

ในการพัฒนา Application ถ้าตามเอกสารของ Apple จะบอกว่าให้เราไป Parsing ในตัว XML ของแต่ละโปรแกรมเอาเอง หรือถ้าเราจะใช้แบบ Open Source อย่างของ Karellia ก็ได้ครับ แต่ Implement ไม่ได้ดั่งใจเท่าไรเพราะโค้ดซับซ้อนมาก (เคยโหลดแบบ SVN มาประมาณ 50MB !!) แถมบั๊กมาให้อีกเพียบเลย

แต่อันที่จริงแล้ว ไม่ต้องลำบากขนาดนั้นเราก็ทำ MB มาใช้ใน App ของเราได้ โดยการเขียนโค้ดแค่ไม่กี่บรรทัด เริ่มจาก

1 .เราต้องติดตั้ง iLife'08 Application ซะก่อนครับ จำเป็นเพราะเราจะเอา Media Browser Framework ที่ถูกแอบซ่อนอยู่มาใช้นั่นเอง
2. Add MB Framework เข้ามา ซึ่งจะถูกเก็บอยู่ที่ /System/Library/PrivateFrameworks/iLifeMediaBrowser.framework เข้ามาใน Project ของเรา
3. จากนั้น ไปที่ Interface ของ App ที่เราสร้างขึ้น สร้าง Custom View ขึ้นมา และกำหนดคลาสของ Custom View ตัวนั้นให้เป็นคลาสที่ชื่อว่า "ILMediaBrowserView" เซฟและกลับไปที่หน้า XCode
4. ลองรันดู จะพบว่า Custom View ของเรากลายเป็น Music MB ไปแล้ว ยังไม่ได้ทำอะไรเลยนะเนี่ย!!

ถ้าเราต้องการจะทำให้เป็น Image MB หรือ Video MB ก็มีขั้นตอนเพิ่มอีกนิดหน่อยครับ
อย่างแรกคือ ต้องมีไฟล์ ILMediaBrowserView.h ซื่งได้มาจากการ dump header ของ ILMediaBrowser.framework หรือเอาจากตัวอย่างโค้ดด้านล่างก็ได้ จากนั้น Add ลงไปใน Project

1. จากนั้น ในหน้า XCode สร้าง NSObject Class ขึ้นมาตัวหนึ่ง สมมติให้ชื่อคลาสว่า MediaBrowserController จะได้ MediaBrowserController.h กับ BrowserController.m มานะครับ

ใน MediaBrowserController.h
- import ILMediaBrowserView.h เข้าไป
- สร้าง Attribute IBOutlet ขึ้นมาตัวหนึ่ง เพื่อชี้ไปยัง Custom View ที่เราทำเป็น MB เพื่อกำหนด Attribute ว่าจะให้เป็น Browser อะไร ให้ชื่อ mediaBrowser
- สร้าง Attribute IBOutlet อีกตัวหนึ่งสำหรับชี้ไปที่ Popup Button ที่เราจะเอาไว้ใช้สำหรับเลือก Browser ให้ชื่อ selector
- สร้าง Method(IBAction) ขึ้นมาหนึ่ง Method เพื่อให้เป็น Action สำหรับเปลี่ยนชนิดของ Browser สมมติชื่อ selectBrowser
จะได้โค้ดดังนี้

2. ไปจัดการกับ Interface ของโปรแกรมกันต่อ

ใน Interface Builder
- สร้าง Popup Button ขึ้นมา กำหนดให้ค่าใน Menu มีสามค่า คือ Music ให้ Tag = 0, Image ให้ Tag = 1, Video ให้ Tag = 2

- สร้าง Object ขึ้นมาตัวหนึ่ง กำหนดให้เป็น Class MediaBrowserController ตามที่เราสร้างขึ้น และลากจุดเชื่อมต่อกับหน้า Interface ให้ครบ

- เซฟและกลับมาที่หน้า XCode

3. กลับมากำหนด Action

ใน MediaBrowserController.m
- ให้ Method selectBrowser ที่เราสร้างขึ้น ทำการหนดชนิดของ Browser ด้วย Tag Value ของ Popup Button ที่ผู้ใช้เลือก ด้วยโค้ดดังนี้

- เซฟและลองรันดู ก็จะได้ MediaBrowser แล้วครับ

เท่านี้เราก็ได้ Media Browser แล้ว หวังว่าคงไม่งงจนเกินไปนะครับ

ปล. Entry แรกใน Thaimacgeeks ฝากเนื้อฝากตัวด้วยครับ ผิดพลาดยังไงก็แนะนำด้วยนะครับ

[Update#1] : ดาวน์โหลดโค้ดตัวอย่างได้ ที่นี่
[Update#2]: อธิบายให้เป็นข้อๆตามที่พี่เดฟแนะนำแล้วครับ ขอบคุณสำหรับคำแนะนำครับ

ผมไปเจอตัวนี้มาครับ =)

คาดว่าน่าจะมาจาก concept เดียวกัน

ทำ media browser เอาไว้ใช้กับโปรแกรมอื่น ๆ ได้ด้วย

และทาง developer เค้าแจกให้ใช้ฟรีครับ =)

http://www.karelia.com/imedia/

งงนิดๆ แฮะ

งงนิดๆ แฮะ เดี๋ยวต้องไปลองทำตามดู ถ้าขึ้นตอนท้ายๆ อธิบายเป็น stepๆ ได้มากกว่านี้จะช่วยได้มากกว่านี้ครับ

อีกอย่าง ... อ่า .... คุณลืมเปลี่ยนสี font กลับหรือเปล่าหว่า