Tài liệu Programming Discussion p13 docx

Viết plugin cho Yahoo! Messenger 8 Như tất cả mọi người đã biết (ai ko biết thì giờ biết), Yahoo! Messenger 8 có một tính năng rất thú vị - đó là hỗ trợ plugin. Với khả năng này, về lý thuyết YM có thể được sử dụng để làm rất nhiều việc khác ngoài việc chat. Xem thời tiết, chơi game, xem bản đồ, . Impossible is nothing :-S Tut này được viết ra coi như hướng dẫn bước đầu cho những ai quan tâm và muốn viết plugin cho YM. Điều kiện để theo được tut bao gồm 4 "chút": 1. Chút kỹ năng lập trình 2. Chút hiểu biết về HTML và Javascript 3. Chút kiên nhẫn 4. Quan trọng nhất, chút thời gian. Giờ hãy bắt tay vào phần chính: 1. Đồ dùng cần chuẩn bị Để bắt tay vào viết plugin cho YM, bạn cần có: 1. YM bản mới nhất - 8.bao_nhiêu_đấy. Hãy coi như bạn cài nó vào thư mục C:\Program Files\Yahoo!\Messenger 2. YM Plugin SDK bản mới nhất - 1.1 . Down về tại http://developer.yahoo.com , mục Messenger. 2. Những điều cần biết về plugin của YM Plugin của YM thực chất là 1 thư mục. Thư mục đó chứa code viết bằng Javascript hoặc C++. Plugin có thể làm rất nhiều việc và tất cả những hàm phục vụ cho các việc đó đều có thể được tra cứu trong SDK đã down về. Về cơ bản có 2 loại plugin cho YM: Tab và Conversation. Loại Tab hiển thị ngay tại giao diệ n chính của chương trình, giống như plugin Y! 360, Y! Answer . Loại Conversation hiển thị trong cửa sổ chat, ví dụ như Y! Emote (hay cái tên nào đại loại thế - tớ ko nhớ rõ lắm). Loại Tab chỉ có 1 user trong khi Conversation hỗ trợ tối đa 2 user. Giờ hãy nói về thư mục plugin của YM: Thư mục của chúng ta sẽ bao gồm thư mục con MANIFEST chứa file plugin.properties. File này sẽ chứa mọi thông tin về plugin như tác giả, mục đích, đường dẫn t ới file mã nguồn . Cùng cấp với file MANIFEST có thể là mã nguồ cần sửa 3. Ý tư ở Plugin c - Anh. N ồn của plug đường dẫn ởng về plug của chúng ta Nghĩa của từ in, tuy vậy trong plug i gin a sẽ là một ừ sẽ được "c mã nguồn h in.propertie *từ điển bỏ chôm" từ V hoàn toàn c es cho thích ỏ túi* cho Y Vdict.com. G có thể đặt tr h hợp. YM, hỗ trợ t Giao diện đ rên một serv tra cứu Anh đại loại sẽ nh ver nào đó - h - Việt và V hư sau: - chỉ Việt Khi nhậ p tạm gọi có ngh ĩa CHÚ Ý nghĩa l à danh ng 4. Thực 4.1. Tạ o Bạn hã y mục MA thư mục Giờ hãy Code: Name= V Descrip English integrat e Id={79F Version Author= p từ vào ô T là thế - sẽ c a của từ, kết : Plugin sa à ko submit ghĩa tác giả hiện plugi o thư mục v y vào thư mụ ANIFEST v c Test. mở file pl u Vdict Integ ption=Integr words with ed. F8BB14-7F n=1.0.0 =Quang An Từ cần tra v chuyển từ "T t quả sẽ đượ au đây do id t. Mong mọ ả. Cảm ơn. in và file cần ục C:\Progr với file plug ugin.propert gration rate Vdict in hin seconds. F12-48d6-8 nh Do và chọn loại Trạng thái: ợc hiển thị t dentical viế ọi người tô thiết ram Files\Y gin.propertie ties và thêm nto Yahoo! . Unikey or 26F-22AFF i từ điển xo Sẵn sàng" trong cửa s ết, tuy chư ôn trọng bả Yahoo!\Mes es bên trong m vào các g ! Messenger r Vietkey is F465303C} ong, ta bấm sang "Đan g ổ khác. a submit c h ản quyền v ssenger\Plug g. Nhớ là th giá trị tương r. Looking not neede d nút Tra từ. g tra từ ." c ho Yahoo! à ko "sub m gin\Test, sa hư mục này g tự như sau up Vietnam d, as Viettyp Status bar chẳng hạn. K nhưng ko mit hộ" dư au đó tạo thư y nằm TRON u: mese and pingPlus is - Khi có ưới ư NG also Homepage=http://qad.donationcoders.com/ Timestamp=2006-07-14T00:00::00+7:00 Contracts=com.yahoo.messenger.contenttab Category=4 Plugin-type=4 Module-type=1 Locale=vi-VN Location= /vdict.html Icon=http://www.yahoo.com/plug-in/test.png Email=quanganhdo@gmail.com Company=Quang Anh Do Prefer-height=168 Prefer-width=284 Min-height=168 Min-width=284 Prefer-expanded-height=168 Prefer-expanded-width=284 Users=1 Activex=false Sendfile=false Sendim=false Voice=false Addressbook=false Một số giá trị có lẽ ko phải giải thích làm gì. Name, Description, Version, Author, Homepage, Icon, Users, Email, Company là những thông tin về plugin và tác giả. Các thông tin còn lại như sau: - Id : Với plugin TEST, luôn đặt như ví dụ. - Timestamp: Thời điểm làm plugin - Category: 1, 2, 3, 4 tùy mục đích plugin. Tương ứng với mục đích Games, Fun, Info- Share, Generic - Plugin-type: 1 với loại Conversation plugin, 4 với loại Tab plugin. - Module-type: Giá trị luôn là 1 - HTML - Locale: Để localize plugin. Ở đây là tiếng Việt. - Location: Đường dẫn tới mã nguồn plugin. Đ ây là file vdict.html nằm ở thư mục TEST. - Các giá trị liên quan đến Height, Width: Chiều dài chiều rộng của khu vực chứa plugin nằm trên tab. - Các giá trị như Sendfile, Sendim, Voice, Addressbook: Đặt là true thì plugin sẽ có quyền can thiệp vào quá trình gửi file, IM, . Cần chú ý: Càng mạnh và can thiệp sâu thì thời gian đợi Yahoo! kiểm duyệt sẽ càng lâu. :-S 4.2. Bắt tay vào làm *thật* 4.2.1. Thiết kế giao diện (nghe oai ác liệt :">) Bạn hãy nhảy khỏi thư mục MANIFEST để lên thư mục TEST. Tại đây, bạn tạo file vdict.html. Đây là file HTML nên bạn hãy thoải mái tự do mà thiết kế giao diện cho plugin. Để cho đơn giản và nhanh chóng, ta sẽ làm nhanh 1 input field, 1 drop-down box, 1 button và 1 *status bar*. Đây là code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="vi"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Vdict Integration</title> </head> <body> Từ cần tra <input type="text" id="what" value="Nhậ p vào đây ." /><br /> Loại từ điển <select id="which"> <option value="1"> Từ điển Anh - Việt </option> <option value="2"> Từ điển Việt - Anh </option> </select> <br /> <img src="lookup.gif" /><br /> <div id="qad_status">Trạng thái: Sẵn sàng</div> </body> </html> Chẳng có j` khó hiểu ở trên cả, nhỉ? Chỉ cần chú ý button của chúng ta là một ảnh gif (lookup.gif) - đặt cùng thư mục với file vdict.html. Cái *status bar* của chúng ta chính là một cái div có chỉ rõ id để dễ cập nhật và thay đổi nội dung. 4.2.2. Dive into YM Plugin (hay giai đoạn viết javascript) Hãy bổ sung một đoạn script js vào trong phần header của file vdict.html: Code: <script type="text/javascript"> function onLoad() { // Blah blah blah } </script> Hãy nhớ, onLoad() là hàm PHẢI có trong mọi plugin cho YM. Bạn cần sửa thẻ <body> thành <body onload="onLoad();"> để hàm onLoad() đượ c thực thi ngay khi plugin được load. Tiếp theo, vì chúng ta sẽ phải *sờ mó* đến các element trong plugin bằng cách dùng id nên tốt nhất nên khai báo một hàm để làm shortcut: Code: // Shortcut for document.getElementById(id) function $(id) { return document.getElementById(id); } Tiện tay tạo luôn một hàm Hiển thị trạng thái Loading .: Code: // Display a Loading indicator function showLoading(id, msg) { $(id).innerHTML = "<img src=\"indicator.gif\" /> " + msg; } Hàm showLoading() nhận id của status bar và hiển thị ảnh indicator.gif kèm với một message được truyền qua tham số msg. Như bạn có thể đoán được, file indicator.gif được đặt cùng chỗ với lookup.gif. Xong các phần linh tinh. Ta chuyển vào trong hàm onLoad() giờ đang rỗng như túi của identical: Để truy cập vào YM plugin SDK, ta cần 1 đối tượng window.external. Để gõ nhanh, ta chọn tên object là y. Code: y = window.external; Ta lần lượt đặt các handler bằng phương thức SetEventHandler để đón bắt các trạng thái và thông điệp liên quan đến plugin: Code: // Set all event handlers here y.SetEventHandler("HTTPRequestCompleted", onHTTPRequestCompleted); y.SetEventHandler("HTTPRequestError", onHTTPRequestError); y.SetEventHandler("SecondaryWindowReady", onSecondaryWindowDeployment); y.SetEventHandler("SecondaryWindowClosed", onSecondaryWindowClosing); Nhìn vào bạn có thể đoán được, hai lệnh đầu để đón bắt các thông điệp liên quan đến request gửi lên server Vdict, 2 lệnh sau liên quan đến việc mở cửa sổ thứ hai (hic, nghe như mở con mắt thứ 3) để hiển thị kết quả tra được :) Việc tiếp theo là viết các hàm sẽ thực hiện khi nhận được các thông điệp trên: Code: function onHTTPRequestCompleted(id, responseText) { // To be done } function onHTTPRequestError(id, errorType) { $('qad_status').innerHTML = "Ặc . Không thể kết n ối tới máy chủ. Đã có lỗi xảy ra!"; } // function to handle the Meaning window's READY event function onSecondaryWindowDeployment() { y.SendMessageToSecondaryWindow(output); } // function to handle the Meaning window's CLOSE event function onSecondaryWindowClosing() { // Do nothing } Trong đoạn code trên, khi request gửi lên server gặp lỗi khó hỉu, nội dung status bar sẽ chuyển thành "Ặc . blah blah blah". Khi cửa sổ thứ 2 được mở ra, giao diện chính của plugin sẽ gửi output tới cửa sổ này. Còn khi cửa sổ thứ 2 bị đóng lại, chẳng có quái j` diễn ra cả. Hàm onHTTPRequestCompleted() sẽ được viết sau, cứ từ từ ko đi đâu mà vội. Giờ báo cho YM biết đồ nghề đã được chuẩn bị xong. Chỉ còn đợi "chiến": Code: y.LocalReady(); Ta edit lại cái button Tra từ để thực hiện việc . tra từ: [HTML]<img src="lookup.gif" onclick="lookup($('what').value);" />[/HTML] Hàm lookup() được viết như sau: Code: // Send a string to Vdict function lookup(textstring) { // Make sure we have a word, not the default value if ( textstring == "Nhập vào đây ." ) { $('qad_status').innerHTML = "Bạn chưa nhập từ cần tra. Hãy thử lại."; } else { var dict = $("which").value; // Indicator showLoading("qad_status", "Đang tra từ ."); // Request var URL = "http://vdict.com/?dictionary=" + dict + "&word=" + encodeURIComponent(textstring); y.SendHTTPRequest("lookup", URL); } } Đoạn code trên sẽ check xem giá trị nhập vào có phải là từ ko, nếu có thì gửi request lên Vdict, ko thì lăn đùng ra báo lỗi. Request được gửi lên nhờ phương thức SendHTTPRequest. Phương thức này nhận 2 tham số: 1 là id, 2 là URL. Đâu đã vào đấy . Chỉ còn đợi server trả về kết quả. Ta làm nốt cái hàm còn đang bỏ trống: onHTTPRequestCompleted(): Code: function onHTTPRequestCompleted(id, responseText) { var match = responseText.match(/<font face=Arial size=2><font size=6 color=#990000>[\s\S]*<\/td><\/tr><\/table>\s*<\/td>/ig); if (match == null) { // Word not found output = "<font face=Arial size=2><font size=6 color=#990000><center><strong>WORD NOT FOUND</strong></center></font>"; $('qad_status').innerHTML = "Từ bạn vừa nhập không tồn tại. Hãy thử lại."; reset(); } else { // Found output = match[0].replace(/<object[\s\S]*object>/ig, ""); $('qad_status').innerHTML = "Trạng thái: Sẵn sàng"; y.SecondaryWindowOpen("meaning.html", ''); reset(); } } Hàm trên sẽ nhận responseText, sau đó *đè* ra và dùng regular expression để tìm kiếm phần nghĩa của từ. Nếu thấy Word Not Found thì kêu ầm lên là Ko có từ ý - mày nhập bố láo, nếu từ đó có nghĩa thì tiếp tục dùng regex để loại bỏ tiết mục Âm thanh đặt trong thẻ object (như đã nói - càng xịn thì càng đợi duyệt lâu --> chi bằng bỏ bớt cái âm thanh đi cho nhẹ người), cuối cùng mở cửa sổ thứ 2 và reset() lại input field. Hàm reset() giản dị kinh hoàng: Code: function reset() { $('what').value = "Nhập vào đây ."; } Những j` còn lại là tạo file meaning.html (cửa sổ thứ 2) và nhồi vào đó ít code xử lý output được gửi đến: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="vi"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Vdict Integration</title> <script type="text/javascript"> // A mandatory function function onLoad() { // Access to the Y! M Plugin SDK using an object named "y" y = window.external; // Set all event handlers here y.SetEventHandler("MainPluginWindowMessage", onMainPluginWindowMessage); function onMainPluginWindowMessage(msg) { $('qad_result').innerHTML = msg; } // Everything is ready now y.LocalReady(); } // Shortcut for document.getElementById(id) function $(id) { return document.getElementById(id); } </script>