Viết pl
lugin cho Yahoo! Messenger 8
o
Như
N tất cả m người đã biết (ai ko b thì giờ b
mọi ã biết biết), Yahoo!
Messenger 8 có một tính năng rất thú vị - đó là h trợ plugin
M h ú hỗ n.
Với
V khả năng này, về lý thuyết YM c thể được sử dụng để làm
g có
rất
r nhiều việ khác ngoà việc chat. X thời tiế chơi game
ệc ài Xem ết, e,
xem
x bản đồ,... Impossibl is nothing
le g
Bài
B này đượ viết ra co như hướn dẫn bước đầu cho nh
ợc oi ng c hững
ai
a quan tâm và muốn v plugin c YM.
m viết cho
Điều kiện để theo đư tut bao g
n ược gồm 4 "chút"
":
1. Chút k năng lập trình
kỹ t
2. Chút h biết về HTML và Ja
hiểu H avascript
3. Chút k nhẫn
kiên
4. Quan t
trọng nhất, chút thời gian
c n.
Giờ hãy b tay vào phần chính:
bắt p
1. Đồ dù cần chuẩ bị
ùng ẩn
Để bắt ta vào viết plugin cho YM bạn cần c
ay M, có:
1. YM bả mới nhất - 8.bao_nhiê
ản êu_đấy. Hãy coi như bạn cài nó vào thư mục C:\
y n \Program
Files\Yah
hoo!\Messen
nger
2. YM Pllugin SDK bản mới nhất - 1.1 . Dow về tại http
b t wn p://developer
r.yahoo.com mục
m,
Messengger.
2. Những điều cần biết về plugi của YM
g b in
Plugin củ YM thực chất là 1 thư mục. Thư m đó chứa code viết b
ủa ư mục a bằng Javascr hoặc C++
ript +.
Plugin có thể làm rất nhiều việc v tất cả nhữ hàm phụ vụ cho các việc đó đều có thể đượ tra
ó t và ững ục ợc
cứu trong SDK đã do về.
g own
Về cơ bả có 2 loại plugin cho Y Tab và C
ản p YM: Conversation Loại Tab hiển thị ngay tại giao diện
n. y
chính của chương trìn giống nh plugin Y! 360, Y! An
a nh, hư ! nswer... Loại Conversatio hiển thị tr
i on rong
cửa sổ ch 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 c có
hat, ư n i chỉ
1 user tro khi Conv
ong versation hỗ trợ tối đa 2 user.
ỗ
Giờ hãy n về thư mục plugin củ YM: Thư mục của ch
nói m ủa ư húng ta sẽ ba gồm thư m con
ao mục
MANIFE chứa file plugin.pr
EST roperties. Fi này sẽ ch mọi thôn tin về plug như tác g
ile hứa ng gin giả,
mục đích đường dẫn tới file mã nguồn... Cùn cấp với fi MANIFE có thể là mã nguồn của
h, n ng file EST à
plugin, tu vậy mã ng
uy guồn hoàn to có thể đặt trên một s
oàn server nào đó - chỉ cần sửa đường dẫ
ó ẫn
trong plu
ugin.properti cho thích hợp.
ies h
3. Ý tưởn về plugin
ng n
Plugin củ chúng ta sẽ là một *từ điển bỏ túi cho YM, h trợ tra cứ Anh - Việt và Việt - A
ủa s ừ i* hỗ ứu t Anh.
Nghĩa củ từ sẽ được "chôm" từ Vdict.com. Giao diện đạ loại sẽ như sau:
ủa c ại ư
Khi nhập từ vào ô Từ cần tra và c
p ừ chọn loại từ điển xong, t bấm nút T từ. Status bar - tạm g là
ta Tra s gọi
thế - sẽ c
chuyển từ "T
Trạng thái: Sẵ sàng" san "Đang tra từ..." chẳng hạn. Khi có nghĩa của t
ẵn ng a g ó từ,
kết quả sẽ được hiển thị trong cử sổ khác.
ửa
CHÚ Ý: P
Plugin sau đây do identical v
y viết, tuy chưa submit cho Y
Yahoo! nhưng ko có nghĩa là ko submit. M
à Mong
mọi người tôn trọng bản quyền và ko "submit hộ" dưới danh ng
i n o ghĩa tác giả. C
Cảm ơn.
4. Thực hiện plugin
n
4.1. Tạo thư mục và file cần thiết
Bạn hãy vào thư mục C:\Program Files\Yahoo!\Messenger\Plugin\Test, sau đó tạo thư mục
MANIFEST với file plugin.properties bên trong. Nhớ là thư mục này nằm TRONG thư mục
Test.
Giờ hãy mở file plugin.properties và thêm vào các giá trị tương tự như sau:
Description=Integrate Vdict into Yahoo! Messenger. Looking up Vietnamese and English words
within seconds. Unikey or Vietkey is not needed, as ViettypingPlus is also integrated.
Id={79F8BB14-7F12-48d6-826F-22AFF465303C}
Version=1.0.0
Author=Quang Anh Do
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 protected]
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.
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:
Vdict Integration
Từ cần tra
Loại từ điển
Từ điển Anh - Việt
Từ điển Việt - Anh
Trạng thái: Sẵn sàng
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:
function onLoad() {
// Blah blah blah
}
Hãy nhớ, onLoad() là hàm PHẢI có trong mọi plugin cho YM.
Bạn cần sửa thẻ thành để 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:
// 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...:
// Display a Loading indicator
function showLoading(id, msg) {
$(id).innerHTML = " " + 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.
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:
// 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:
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":
y.LocalReady();
Ta edit lại cái button Tra từ để thực hiện việc... tra từ:
[HTML][/HTML]
Hàm lookup() được viết như sau:
// 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():
var match = responseText.match(/[\s\S]*\s*/ig);
if (match == null) {
// Word not found
output = "WORD NOT
FOUND";
$('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(//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:
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:
Vdict Integration
// 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);
}
Powered by Vietnamese English
French Online Dictionary
Code đơn giản có lẽ ko cần giải thích
4.2.3. Thưởng thức tác phẩm nghệ thuật
Save tất cả các file lại. Ra giao diện chính của YM. Bấm Actions > Load Test plugin > Ok, sir.
Vậy là xong.
Phù. Mỏi hết cả tay.
4.2.4. Những thứ có thể bổ sung vào plugin
Một tính năng khác... Như tự động kích hoạt bộ gõ tiếng Việt khi chọn từ điển Việt - Anh và tự
tắt đi khi chuyển qua Anh - Việt. Trong code đính kèm bài viết này tớ đã xử lý như vậy.
4.3. Xong plugin ta làm gì???
Có 2 hướng: Submit lên bọn Yahoo! hoặc Tự mình dùng - cây nhà lá vườn.
Với plugin có nội dung okie thì ko sao, việc submit lên khá dễ - vào gallery.yahoo.com, fill in 1
cái form dài gần chết, submit và rung đùi ngồi đợi. Khoảng 1 tuần là có reply. Accept hoặc
reject. Nếu trong plugin.properties có sờ đến Sendim, ActiveX,... thì xác định là phải chờ các bố
trên ý test lâu hơn.
Với plugin có nội dung nhạy cảm, hay ko muốn share, thì đơn giản là mọi người tự dùng lấy. Cái
ấy có một nhược điểm chết người: Đó là mỗi lần login vào YM lại phải Actions > Load Test
Plugin > Ok, sir.
Có 1 cách để xử lý hạn chế ấy, đó là cài 1 plugin trời ơi đất hỡi nào đấy của YM vào, ví dụ
Yahoo! Weather, sau đó browse đến thư mục C:\Documents and Settings\All Users\Application
Data\Yahoo\{một_cái_mã_củ_chuối_j`_đấy_dẫn_đến_plugin_vừa_cài}\, cóp đè plugin TEST
của ta vào. Ko được phép thay đổi 1 tik tak gì trong file plugin.properties, vì đơn giản là nếu
change thì plugin sẽ ko làm việc.
Cuối cùng ta bấm nút Plugins của YM và Start cái plugin "hồn của ta, da của nó" lên. XONG!
Copyright by webtailieu.net