IV: Xây Dựng Extension Chuyển Mã Tiếng Việt
1.4 Cài đặt và sử dụng
Biên dịch chương trình, để có thể sử dụng XPCOM Transvn ta tạo file cài đặt, chép hai file Transvn.dll và file transcom.xpt vào trong thư mục “Mozilla Firefox\components\”. Khởi động lại Mozilla Firefox, khi đó Firefox sẽ tựđăng ký XPCOM vào trong hệ thống Firefox.
Chú ý, để có thể sử dụng hàm thư viện BKTrans-là một dạng COM Win32 do đó cần phải đăng ký sử dụng Window, khi đó XPCOM Transvn mới có thể sử dụng được.
2. Cấu trúc file Transvn.xpi
Cấu trúc của Extension Transvn.xpi có thể tương tự như său: Transvn.xpi
install.rdf file cài đặt
chrome.manifest bản kê khai các file sử dụng
\content lưu những file giao diện của extension \skin mô tả những giao diện của extension \locale mô tả ngôn ngữ của extension.
Tạo file cài đặt install.rdf:
<?xml version="1.0" encoding="UTF-8"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>transvn@thienthanbattu.org</em:id> <em:name>Trans Vietnamese</em:name> <em:version>1.0</em:version>
<em:creator>Vũ Thanh Bình</em:creator>
<em:aboutURL>chrome://transvn/content/about.xul</em:aboutURL> <em:type>2</em:type> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox --> <em:minVersion>1.5</em:minVersion> <em:maxVersion>2.0.0.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>
- transvn@thienthanbattu.org - ID sẽđăng ký trong Mozilla Firefox - Trans Vietnamese – tên của Extension
- <em:type>2</em:type> - type là 2 cho biết đây là một extension bình thường. - {ec8030f7-c20a-464f-9b0e-13a3a9e97384} – ID của Mozilla Firefox đăng ký
trong window.
Tạo file chrome.manifest:
content transvn content/
locale transvn en-US locale/en-US/ skin transvn classic/1.0 skin/
overlay chrome://browser/content/browser.xul chrome://transvn/content/firefoxOverlay.xul
style chrome://global/content/customizeToolbar.xul chrome://transvn/skin/overlay.css
content transvn content/ - Khai báo thư mục chứa nội dung của extension.
locale transvn en-US locale/en-US/ - Khai báo extension sử dụng các khai báo ngôn ngữ
tiếng Anh trong thư mục locale/en-US.
skin transvn classic/1.0 skin/ - khai báo những kiểu giao diện của extension trong thư mục
“skin/”
overlay chrome://browser/content/browser.xul chrome://transvn/content/firefoxOverlay.xul
khai báo extension sẽ sử dụng một overlay với trình duyệt firefox tại file browser.xul.
style chrome://global/content/customizeToolbar.xul chrome://transvn/skin/overlay.css Khai báo
style mà extension sử dụng.
3. Tạo thành phần giao diện của extension trên Firefox
Trên giao diện chính của trình duyệt, extension Trans Vietnamese cung cấp một kiểu thao tác cho người dùng sử dụng tác vụ chuyển đổi mã để hiển thị trang web tiếng việt theo ý muốn.
Có ba loại thành phần giao diện có thể thực hiện thao tác này, được khai báo trong XUL Overlay của Firefox :
1. Sử dụng tác vụ của extension Trans Vietnamese trên hệ thống menu chính của firefox:
2. Sử dụng tác cụ của extension Trans Vietnamese trên popup menu, khi click vào chuột phải.
3. Sử dụng tác vụ của extension Trans Vietnamese trên thanh công cụ của Mozilla Firefox.
Đăng ký trong firefoxOverlay.xul:
<overlay id="transvn-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/> //sử dụng file Javascipt này cho firefoxOverlay.xul
Thêm vào menu tool tác vụ của Extension Transvn Vietname:
<menupopup id="menu_ToolsPopup">
<menuitem id="transvn-hello" label="&transvn.label;"
oncommand="transvn.onMenuItemCommand(event);"/> </menupopup>
Khai báo này sẽ thêm vào một menu item với id là “transvn-hello” vào Tool menu có id là “menu_ToolsPopup”.
Menu item “Transvn-hello” khai báo một thuộc tính với giá trị là “&transvn.label”. Giá trị của “&transvn.label” được khai báo trong file tranvns.dtd nằm trong khai báo ngôn thành phần ngôn ngữ cửa extension:
<!DOCTYPE overlay SYSTEM "chrome://transvn/locale/transvn.dtd">
Khi người sử dụng nhấn vào menu->Tools->Trans Vietnamese sẽ phát sinh một sự kiện oncommand được đưa vào hàm "transvn.onMenuItemCommand(event);" xử lý. Hàm này
được khai báo trong một file JavaScript:
<script src="overlay.js"/> //sử dụng file Javascipt này cho firefoxOverlay.xul
Thêm tác vụ Trans Vietnamese vào trong menu popup:
Thêm vào menu popup với id là “contentAreaContextMenu” một menu item với id là “context-transvn” được chèn vào đầu tiên của menu popup. Hàm sử lý sự kiện tương tự
như menu tool bar “transvn.onMenuItemCommand(event)”: <popup id="contentAreaContextMenu">
<menuitem id="context-transvn" label="&transvnContext.label;" accesskey="&transvnContext.accesskey;"
insertafter="context-stop"
oncommand="transvn.onMenuItemCommand(event)"/> </popup>
Thêm tác vụ vào thanh menu toolbar: <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="transvn-toolbar-button" label="&transvnToolbar.label;" tooltiptext="&transvnToolbar.tooltip;" oncommand="transvn.onToolbarButtonCommand()" class="toolbarbutton-1 chromeclass-toolbar-additional"/> </toolbarpalette>
Thêm một button với id là “transvn-toolbar-button” vào thanh toolbar với id là “BrowserToolbarPalette” có sử dụng kiểu dáng là “toolbarbutton-1 chromeclass-toolbar- additional” được khai báo trong file overlay.css:
<?xml-stylesheet href="chrome://transvn/skin/overlay.css" type="text/css"?>
Hàm xử lý sự kiện cũng tương tự như hàm xử lý sự kiện đối với menu tool.