Mục tiêu

Lưu ý: Tính năng mẫu bố cục được giới thiệu lần đầu tiên trong SOUI phiên bản 2.8.0.4. Các phiên bản trước đó không hỗ trợ.

Các thành phần như listview trong SOUI đã hỗ trợ tạo các mục danh sách thông qua mẫu định nghĩa. Tuy nhiên, loại mẫu này không phải là thứ đang được đề cập ở đây.

Trong các dự án quy mô lớn, việc lặp lại cấu trúc bố cục thường xuyên xảy ra, chỉ khác biệt ở một vài thuộc tính cụ thể. Trước khi có hỗ trợ mẫu bố cục, với những trường hợp giống hệt nhau, SOUI đã cho phép sử dụng thuộc tính include để tái sử dụng file XML bố cục. Nhưng đối với các trường hợp có cùng cấu trúc nhưng thay đổi một số thuộc tính, cách duy nhất trước đây là sao chép toàn bộ đoạn mã XML — điều này gây tốn kém và khó bảo trì.

Với việc bổ sung tính năng mẫu bố cục, vấn đề này được giải quyết hiệu quả hơn, giúp giảm thiểu mã thừa và tăng tính linh hoạt trong thiết kế giao diện.

Ví dụ minh họa

Chúng ta hãy xem xét ví dụ từ demo đi kèm.

Trước tiên, tạo file values/template.xml. Đồng thời, thêm vào file uidef.xml:

<!-- Khai báo đối tượng template toàn cục -->
<template src="values:template"/>

Mở file template.xml để kiểm tra nội dung:

<?xml version="1.0" encoding="utf-8"?>
<template>
  <g.block>
    <window name="{{name}}" layout="hbox" gravity="center">
      <window size="-1,-1" layout="hbox">
        <text text="name:" colorText="{{color}}" />
        <link.web text="{{text}}" href="{{text}}" />
      </window>
      <img skin="skin_avatar" />
    </window>
  </g.block>
</template>

Trong file này, chúng ta xác định một mẫu tên là g.block, bắt đầu bằng tiền tố g. — đây là ký hiệu cho một mẫu toàn cục. Ngoài ra còn có mẫu cục bộ, được định nghĩa bên trong nút gốc của file bố cục (cùng cấp với root), tương tự như cách khai báo style hoặc skin cục bộ. Mẫu cục bộ chỉ có hiệu lực trong cửa sổ chứa nó. Tên mẫu không bắt buộc phải bắt đầu bằng g..

Xem kỹ mẫu trên, ta thấy ba chuỗi dạng {{xxx}}. Đây là các biến trong mẫu, sẽ được thay thế bằng giá trị thực khi gọi mẫu.

Giờ hãy xem cách gọi mẫu trong file bố cục XML:

<t:g.block size="-1,-1">
   <data name="tpl_soime" color="#ff0000" text="soime.cn!" />
</t:g.block>
<t:g.block size="-2,-1">
   <data name="tpl_soui" color="#0000ff" text="ui520.cn" />
</t:g.block>

SOUI dùng namespace t: để nhận diện rằng đây là lời gọi đến một mẫu. Các thuộc tính được đặt sau thẻ gọi mẫu sẽ ghi đè lên các thuộc tính của nút con đầu tiên trong mẫu. Lưu ý: một mẫu chỉ nên có một nút gốc bố cục duy nhất; nếu có nhiều nút gốc, hệ thống sẽ bỏ qua các nút thừa.

Thẻ <data> bên trong phải tồn tại để truyền dữ liệu tham số. Những giá trị này sẽ tự động thay thế các biến trong mẫu.

Quy trình sử dụng mẫu hoàn tất. Nếu không dùng mẫu, ta phải viết lại toàn bộ đoạn XML hai lần để đạt kết quả tương tự. Việc sử dụng mẫu giúp cấu trúc XML trở nên gọn nhẹ và dễ quản lý hơn.

Kết quả chạy thử

Xem hình ảnh minh họa từ demo để quan sát kết quả hiển thị thực tế.

Tính năng mẫu bố cục trong SOUI đã được triển khai thành công.

Phần mềm Qicheng – Ngày 14 tháng 3 năm 2019