Tìm hiểu về extension Opera: button, badge và popup

Quản Trị Mạng - Qua một số bài viết trước, chúng ta đã tìm hiểu về những đặc điểm cơ bản về Opera extension, và lần này chúng ta sẽ tiếp tục với với quá trình tạo, quản lý nút chức năng, cũng như một số thành phần có liên quan. Về mặt kỹ thuật, tất cả những thành phần của toolbar đều phải được định nghĩa, khởi tạo và xác định trong quá trình xử lý background. Chúng không thể được khởi tạo hoặc cố định trực tiếp khi chèn script hoặc quá trình cửa sổ popup hiển thị. Các nút chức năng, badge và popup đều được điều khiển qua hàm opera.contexts.toolbar.

>>> Tìm hiểu về file config.xml trong extension Opera

Mỗi extension chỉ cho phép đặt 1 button trên thanh toolbar Opera, cụ thể là ở phía bên phải của ô tìm kiếm, bao gồm 1 icon với kích thước 18 x 18 pixel, thông tin tooltip (sẽ hiển thị khi người dùng di chuột qua), status badge và b. Phần mã chính để tạo button này sẽ được đặt trong phần script element của trang index.html. Trong bài thử nghiệm này thì chúng ta sẽ cho chạy đoạn mã khi event load được bắt đầu.

1. Tạo button:

Bước đầu tiên là khởi tạo thuộc tính của button, được thực hiện trong đối tượng ToolbarUIItemProperties. Ví dụ:

Sau khi khởi tạo thuộc tính trong ToolbarUIItemProperties, việc tiếp theo cần làm là tạo chức năng thực sự với cú pháp createItem:

var theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

Có 5 thuộc tính chúng ta có thể truyền tới ToolbarUIItemProperties, bao gồm:

• disabled: điều này sẽ được xác định nếu tình trạng của button là enable. Ở chế độ mặc định thì nó là true (disabled) và có thể chấp nhận giá trị boolean. Chúng ta có thể tắt bỏ tình trạng này bằng lệnh:

• title: thuộc tính title này sẽ thiết lập thông tin tooltip để hiển thị khi người dùng di chuột qua:

• icon: đây là thuộc tính chính dùng để thiết lập icon được sử dụng cho button. Nếu áp dụng kích thước lớn hơn 18 x 18 pixel thì hệ thống sẽ tự thay đổi để vừa với kích cỡ chuẩn:

• onclick: cho phép function thực thi khi người dùng nhấn vào button và event load được khởi động:

• onremove: tương tự như trên, nhưng thuộc tính này lại cho phép function được thực hiện khi xóa bỏ button khỏi ToolbarContext và event remote bắt đầu:

Để gán button vào toolbar, chúng ta sẽ phải dùng tới method addItem với cú pháp chung như sau:

Các bạn có thể cho chạy thử với ví dụ button tại đây hoặc tải qua MediaFire.

2. Tạo popup:

Và khi đã có button, bước tiếp theo của chúng ta tại đây sẽ là tạo popup – được xảy ra khi người dùng nhấn vào nút chức năng nào đó. Cụ thể, đây là 1 dạng cửa sổ overlay với kích thước chiều cao và rộng nhất định được xác định trước, người dùng có thể trỏ tới 1 trang web hoặc gói phần mềm, ứng dụng với extension để hiển thị bên trong cửa sổ popup.

Để tạo cửa sổ popup, chúng ta cần phải khởi tạo thuộc tính của đối tượng Popup trong object ToolbarUIItemProperties:

Lưu ý rằng ở chế độ mặc định, kích thước width và height của cửa sổ popup là 300 x 300. Để thay đổi, các bạn cần phải xác định rõ ràng thông số width, height như ví dụ trên.

Để kết nối tới phần nội dung của cửa sổ popup, các bạn phải dùng tới thuộc tính href:

Bên cạnh đó, chúng ta còn có thể truy cập tới trang web được lưu trữ trên local qua địa chỉ:

Những trang web này có thể chỉ là trang HTML bình thường. Lưu ý rằng nếu các bạn thay đổi thuộc tính href khi popup mờ thì sau đó cửa sổ popup sẽ đóng lại. Về mặt kỹ thuật thì kích thước của cửa sổ popup sẽ được xác định bằng đơn vị pixel qua thuộc tính width và height:

• Width: theButton.popup.width = 300;
• Height: theButton.popup.height = 300;

Và sau đó, cửa sổ popup sẽ được khởi tạo cùng với button khi hệ thống gọi phương thức createItem. Các bạn có thể thử nghiệm với ví dụ popup mẫu tại đây hoặc download qua MediaFire.

3. Tạo badge:

Khái niệm badge ở đây có thể được hiểu là 1 lớp nội dung hiển thị đè lên trên biểu tượng bằng 1 đoạn text nào đó. Chúng thường được dùng để hiển thị số lượt đếm của một số thành phần nào đó, chẳng hạn như số email đã hoặc chưa đọc. Để tạo badge, chúng ta cần phải khởi tạo thuộc tính của đối tượng Badge bên trong object ToolbarUIItemProperties:

1 badge điển hình sẽ có 4 thuộc tính có thể tùy biến được. Và để hiển thị badge các bạn phải sử dụng thuộc tính display. Các giá trị đúng là block và none, còn giá trị mặc định là none. Và 1 badge sẽ được thiết lập chế độ hiển thị theo cú pháp dưới:

Bên cạnh đó, thuộc tính textContent sẽ được áp dụng để hiển thị label, và tất nhiên badge sẽ giới hạn ký tự text hiển thị ở phía bên ngoài:

Cuối cùng, thuộc tính color và backgroundColor sẽ thiết lập màu text và màu nền của badge. Hỗ trợ chế độ hexadecimal, RGBA và tên mã màu theo chuẩn:

Các bạn có thể thử nghiệm extension về button với badge tại đây hoặc qua MediaFire. Chúc các bạn thành công!