Liferay 6.2: AlloyUI: Node và một số phương thức hay dùng

English version

AlloyUI (AUI) là một công cụ thiết kế giao diện web mạnh mẽ. AUI là một framework được xây dựng dựa trên YUI3 (một thư viện giao diện của Yahoo!) và sử dụng Bootstrap để cung cấp một API đơn giản cho các ứng ụng có khả năng mở rộng cao.

Liferay đã tích hợp sẵn AUI vào trong hệ thống của mình (xem tại đây). Chính vì vậy, việc tìm hiểu và sử dụng tốt AUI là một việc cần thiết khi bạn muốn phát triển các ứng dụng trên framework này.

Trong bài viết này, mình sẽ giới thiệu thành phần cơ bản nhất của AUI. Đó là Node? Vậy Node là gì? Nó hoạt động như thế nào? Hãy cùng thảo luận nhé.

Giới thiệu

Ta hiểu đơn giản như sau: AUI Node là một tập các thao tác mà ta gán cho một DOM(Document Object Model). Ta có thể thực hiện các thao tác đơn giản trên các DOM bằng các công cụ khác, nhưng với những thao tác phức tạp như: tìm nút cha (nút tổ tiên-ancestors), nút anh em (siblings), thay đổi thuộc tính, thay đổi nội dung,... thì sẽ dễ dàng hơn nếu sử dụng AUI Node. 

Sử dụng

Trong phần này, chúng ta sẽ xem xét cách sử dụng AUI Node để tác động để các thẻ (thẻ HTML) trên trang. Trước hết, ta sẽ khai báo một đối tượng Node.

Giả sử, ta có một thẻ HTML như sau:

<input class="sColor" id="sId" name="sName" type="text" />

Thẻ input ở trên là một thẻ HTML cơ bản, rất hay được sử dụng. Vậy, khai báo một đối tượng Node sẽ được thự hiện như thế nào? Hãy xem nhé:

• Theo Id: AUI().one('#sId') hoặc A.one('#sId').
• Theo style: AUI().one('.sColor') hoặc A.one('.sColor').
• Theo thuộc tính: AUI().one('input[name="sName"]'), A.one('input[name="sName"]'), A.one('input[type="text"]').

Rõ ràng là có nhiều cách để khai báo một đối tượng AUI Node. Bạn hãy chọn cách phù hợp nhất nhé. Trong trường hợp có hai hoặc nhiều thẻ cùng thỏa mãn điều kiện thì thẻ có bậc cao nhất (theo DOM) sẽ được chọn.

Một số ví dụ

Ẩn/Hiện một đối tượng

Ví dụ đơn giản nhất là ta sẽ thực hiện ẩn hoặc hiện một đối tượng (một bức ảnh). Ta có một bức ảnh và một nút bấm (button), khi nhấn vào nút này bức ảnh sẽ được hiện ra hoặc ẩn đi.

Hãy xem đoạn code sau:

Như bạn đã thấy trong đoạn code trên, ở dòng 20, mình tạo ra một đối tượng Node tương ứng với thẻ img. Dòng tiếp theo, mình gọi phương thức toggle, nó sẽ thay đổi trạng thái của nút này (tức là trạng thái của thẻ img) từ ẩn sang hiện và ngược lại.

Thay đổi nội dung

Có hai kiểu nội dung đó là value và text. Kiểu value xuất hiện trong các thẻ như thẻ <input/>, <select/>,... Kiểu text xuất hiện trong các thẻ như <span />, <label />,...

Ta sẽ làm một ví dụ với một thẻ <input/> và một thẻ <span />. Mỗi khi ta thay đổi nội dung của thẻ <input/> thì nội dung của thẻ <span /> cũng thay đổi theo. Hãy xem đoạn code dưới đây nhé:

Ở đoạn code trên, bạn có thể thấy rằng, mình sử dụng hai phương thức là val() và text() để truy xuất cũng như thay đổi nội dung của một nút.

Thay đổi giá trị của thuộc tính class

Vì thuộc tính class hay được sử dụng lên AUI Node cung cấp sẵn một số phương thức để chúng ta thao tác. Có thể kể đến các phương thức tác động lên thuộc tính này như: addClass, hasClass, removeClass,...

Ví dụ của mình như sau: có bốn nút (button) với có tên là Red, Blue, Yellow và Reset và một thẻ <input/>.  Khi nhấn vào nút Reset thì màu nền của thẻ <input/> sẽ trở thành màu trắng. Còn nhấn vào ba nút còn lại thì màu nền của thẻ <input/> sẽ chuyển thành màu tương ứng với tên của mỗi nút.

Trong đoạn code trên, mình sử dụng phương thức addClass và removeClass để thêm và xóa các selector tương ứng.

Một số phương thức

Các phương thức *class

• addClass(className): thêm className vào thuộc tính class của nút.
• hasClass(className): kiểm tra xem thuộc tính class có chứa chuỗi className hay không.
• removeClass(className): xóa giá trị className khỏi thuộc tính class của nút.
• replaceClass(oldClassName, newClassName): thay thế giá trị oldClassName bởi newClassName trong thuộc tính class của nút.
• toggleClass(className): xóa hoặc thêm className vào thuộc tính class của nút.

Phương thức show và hide

Phương thức show và hide cho phép chúng ta ẩn hoặc hiển thị một nút. Chúng ta có thể gọi các phương thức này mà không có tham số hoặc tham số show(fadeOut) và hide(fadeIn).

Phương thức attr

Phương thức attr cho phép chúng ta lấy giá trị hoặc thay đổi giá trị của một thuộc tính bất kỳ. Ví dụ:

<input class="sColor" id="sId" name="sName" type="text" />

Ta gọi phương thức attr('type') (với một tham số) sẽ trả về giá trị là text. Còn nếu ta gọi attr('type', 'password') sẽ thay thế giá trị của thuộc tính type từ text thành password.

Kết luận

Bài viết này chỉ mới giới thiệu một vài phương thức hay sử dụng mà thôi. AUI Node còn rất nhiều các phương thức tiện ích khác, hãy tự mình khám phá nhé.

Bạn có thể tải source code tại đây.