Tài liệu Viết plugin cho Yahoo! Messenger 8 ppt

Những Plugin củ Plugin có cứu trong Về cơ bả chính của cửa sổ ch 1 user tro Giờ hãy n MANIFE mục đích plugin, tu trong plu n để theo đư kỹ năng lập t hiểu biết về H kiên nhẫn trọng nhất,

Điều kiện

1 Chút k

2 Chút h

3 Chút k

4 Quan t

Giờ hãy b

1 Đồ dù

Để bắt ta

1 YM bả

Files\Yah

2 YM Pl

Messeng

2 Những

Plugin củ

Plugin có

cứu trong

Về cơ bả

chính của

cửa sổ ch

1 user tro

Giờ hãy n

MANIFE

mục đích

plugin, tu

trong plu

n để theo đư

kỹ năng lập t

hiểu biết về H

kiên nhẫn

trọng nhất, c

bắt tay vào p

ùng cần chuẩ

ay vào viết p

ản mới nhất

hoo!\Messen

lugin SDK b

ger

g điều cần b

ủa YM thực

ó thể làm rất

g SDK đã do

ản có 2 loại p

a chương trìn

hat, ví dụ như

ong khi Conv

nói về thư m

EST chứa fi

h, đường dẫn

uy vậy mã ng

ugin.properti

Viết pl

N M V r x

B a

ược tut bao g

trình HTML và Ja chút thời gian phần chính:

ẩn bị

lugin cho YM

- 8.bao_nhiê nger

bản mới nhất

biết về plugi

chất là 1 thư

t nhiều việc v own về

plugin cho Y

nh, giống nh

ư Y! Emote versation hỗ mục plugin củ

le plugin.pr

n tới file mã guồn hoàn to ies cho thích

lugin cho Như tất cả m Messenger 8 Với khả năng rất nhiều việ xem bản đồ,

Bài này đượ

ai quan tâm

gồm 4 "chút"

avascript

n

M, bạn cần c êu_đấy Hãy

t - 1.1 Dow

in của YM

ư mục Thư m

và tất cả nhữ

YM: Tab và C

hư plugin Y!

(hay cái tên

ỗ trợ tối đa 2

ủa YM: Thư

roperties Fi

nguồn Cùn oàn có thể đ

h hợp

o Yahoo!

mọi người đã

8 có một tính

g này, về lý

ệc khác ngoà Impossibl

ợc viết ra co

m và muốn v

":

có:

y coi như bạn

wn về tại http

mục đó chứa ững hàm phụ

Conversation

! 360, Y! An

n nào đại loại user

ư mục của ch ile này sẽ ch

ng cấp với fi

ặt trên một s

Messeng

ã biết (ai ko b

h năng rất thú thuyết YM c

ài việc chat X

le is nothing

oi như hướn viết plugin c

n cài nó vào

p://developer

a code viết b

ục vụ cho cá

n Loại Tab nswer Loại

i thế - tớ ko

húng ta sẽ ba hứa mọi thôn file MANIFE server nào đó

er 8 biết thì giờ b

ú vị - đó là h

có thể được Xem thời tiế

g

ng dẫn bước cho YM

thư mục C:\

r.yahoo.com

bằng Javascr

c việc đó đề

hiển thị ngay

i Conversatio nhớ rõ lắm)

ao gồm thư m

ng tin về plug EST có thể là

ó - chỉ cần s

biết), Yahoo

hỗ trợ plugin

sử dụng để

ết, chơi game

c đầu cho nh

\Program

m, mục

ript hoặc C++

u có thể đượ

y tại giao di

on hiển thị tr Loại Tab c

mục con gin như tác g

à mã nguồn

ửa đường dẫ

!

n làm

e,

hững

+

ợc tra

ện rong chỉ có

giả, của

ẫn

3 Ý tưởn

Plugin củ

Nghĩa củ

Khi nhập

thế - sẽ c

kết quả s

CHÚ Ý: P

mọi người

4 Thực

ng về plugin

ủa chúng ta s

ủa từ sẽ được

p từ vào ô Từ

chuyển từ "T

ẽ được hiển

Plugin sau đây

i tôn trọng bản

hiện plugin

n

sẽ là một *từ

c "chôm" từ

ừ cần tra và c Trạng thái: Sẵ thị trong cử

y do identical v

n quyền và ko

n

ừ điển bỏ túi Vdict.com

chọn loại từ

ẵn sàng" san

ửa sổ khác

viết, tuy chưa

o "submit hộ"

i* cho YM, h Giao diện đạ

điển xong, t

ng "Đang tra

submit cho Y dưới danh ng

hỗ trợ tra cứ

ại loại sẽ như

ta bấm nút T

a từ " chẳng

Yahoo! nhưng ghĩa tác giả C

ứu Anh - Việt

ư sau:

Tra từ Status

g hạn Khi có

ko có nghĩa là Cảm ơn.

t và Việt - A

s bar - tạm g

ó nghĩa của t

à ko submit M

Anh

gọi là

từ,

Mong

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=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

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:

<!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:

<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:

// 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 = "<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

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]<img src="lookup.gif" onclick="lookup($('what').value);" />[/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(/<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:

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:

<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>

</head>

<body onload="onLoad();">

<div id="qad_result"></div>

<center>Powered by <a href="http://vdict.com" target="_blank"><strong>Vietnamese English French Online Dictionary</strong></a></center>

</body>

</html>

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!