Giao diện

Giao diện là một cách để tuỳ chỉnh giao diện của Blockly. Bạn có thể tuỳ chỉnh màu khối, màu danh mục và một số thành phần nhất định thông qua lớp Themes. Nếu bạn muốn tuỳ chỉnh các thành phần bổ sung, chúng tôi sẽ cung cấp tên giao diện dưới dạng một lớp trên div chèn. Điều này cho phép người dùng thay đổi giao diện của mọi thành phần không được hỗ trợ thông qua CSS. Mục tiêu chính của chúng tôi khi tạo giao diện là giúp nhà phát triển tạo ra trải nghiệm Blockly dễ tiếp cận hơn.

Lưu ý: Nếu chỉ muốn kiểm soát màu chính của một khối thay vì kiểm soát chi tiết hơn về giao diện, bạn có thể đặt màu trong định nghĩa khối thay vì tạo giao diện. Nếu bạn muốn thay đổi hình dạng của một khối thay vì màu của khối, hãy tìm hiểu thêm về trình kết xuất.

Thuộc tính giao diện

Giao diện là một đối tượng có nhiều thuộc tính: giao diện cơ sở cần mở rộng, đối tượng kiểu cho khối, danh mục, thành phần và phông chữ, cũng như việc có sử dụng mũ cho khối bắt đầu hay không.

Lưu ý quan trọng: Mã trong Blockly sử dụng cách viết colour không theo chuẩn Hoa Kỳ. Bạn có thể xác định tất cả thuộc tính màu bằng giá trị màu hoặc giá trị hex.

Kiểu khối

Kiểu khối bao gồm 4 trường:

• colourPrimary (bắt buộc) – Màu nền của khối.
• colourSecondary (không bắt buộc) – Màu nền nếu khối là khối bóng đổ.
• colourTertiary (không bắt buộc) – Đường viền hoặc màu làm nổi bật của khối.
• hat (không bắt buộc) – Thêm mũ vào khối, nếu giá trị được đặt thành cap. Tìm hiểu thêm về mũ.

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Giao diện sẽ bao gồm một mục ánh xạ tên kiểu khối đến đối tượng tạo kiểu khối:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Kiểu danh mục

Kiểu danh mục chỉ chứa một thuộc tính màu.

• Màu sắc (bắt buộc) – Màu sắc của danh mục trong hộp công cụ. Thông thường, các màu này phải giống với colourPrimary trên phần lớn các khối trong danh mục. Điều này giúp người dùng dễ dàng biết những khối nào thuộc một danh mục nhất định.

const mathCategory = {
   'colour':'290'
}

Giao diện sẽ bao gồm một mối liên kết giữa tên danh mục với đối tượng kiểu danh mục:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Kiểu thành phần

Một giao diện có thể đặt màu hoặc giá trị của các thành phần dưới đây:

• workspaceBackgroundColour: Màu nền của không gian làm việc
• toolboxBackgroundColour: Màu nền của hộp công cụ
• toolboxForegroundColour: Màu văn bản của danh mục Hộp công cụ
• flyoutBackgroundColour: Màu nền của cửa sổ bật lên
• flyoutForegroundColour: Màu văn bản của nhãn bật lên
• flyoutOpacity: Độ mờ của trình đơn bật lên
• scrollbarColour: Màu thanh cuộn
• scrollbarOpacity: Độ mờ của thanh cuộn
• insertionMarkerColour: Màu của điểm đánh dấu chèn (Không chấp nhận tên màu)
• insertionMarkerOpacity: Độ mờ của điểm đánh dấu chèn
• markerColour: Màu của điểm đánh dấu hiển thị ở chế độ điều hướng bằng bàn phím
• cursorColour: Màu của con trỏ hiển thị ở chế độ điều hướng bằng bàn phím

Bạn có thể thay đổi hầu hết các thành phần khác bằng cách sử dụng tên giao diện trong CSS. Tuy nhiên, nếu có một thành phần bạn muốn thay đổi chưa nằm trong danh sách này và không thể thay đổi bằng CSS, vui lòng gửi vấn đề kèm thêm thông tin.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Kiểu phông chữ

Kiểu phông chữ là một đối tượng chứa bộ phông chữ, độ đậm và kích thước của phông chữ.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Mũ Start

Mẹo: Hãy tìm hiểu thêm về các trường hợp sử dụng mũ khởi động trên trang về mô hình khối của chúng tôi.

Nếu bạn thiết lập startHats: true trực tiếp trong một đối tượng giao diện, thì mũ sẽ được thêm vào tất cả các khối mà không có kết nối trước đó hoặc đầu ra. Nếu muốn có nhiều quyền kiểm soát hơn đối với chính xác các khối lệnh có mũ, bạn có thể sử dụng thuộc tính kiểu khối.

Giao diện tuỳ chỉnh

Để thêm giao diện vào ứng dụng Blockly, bạn cần làm như sau:

1. Tạo một giao diện
2. Thêm tên kiểu
3. Đặt giao diện của bạn trên một không gian làm việc

Tạo một giao diện

Bạn có thể tạo giao diện bằng hàm khởi tạo hoặc defineTheme. Việc sử dụng defineTheme giúp bạn dễ dàng mở rộng giao diện hiện có và đặt tất cả giá trị bằng một đối tượng duy nhất. Giao diện có tên và là một đối tượng có các kiểu khối, kiểu danh mục và các thuộc tính khác như đã thảo luận ở trên.

Một giao diện cũng có thể có giao diện cơ sở, giao diện này sẽ cung cấp giá trị mặc định cho mọi giá trị không được chỉ định trong giao diện tuỳ chỉnh.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

Sau đây là một ví dụ về cách sử dụng defineTheme.

Thêm tên kiểu

Giờ đây, khi đã tạo một giao diện, chúng ta cần thêm tên của các kiểu vào định nghĩa khối và danh mục.

Danh mục

Cách bạn xác định hộp công cụ sẽ quyết định cách bạn cần thêm tên kiểu. Hãy xem trang hộp công cụ để biết thêm thông tin.

Chặn bóng

Cách bạn xác định khối sẽ xác định cách bạn cần thêm tên kiểu. Bạn có thể tìm hiểu thêm về định nghĩa khối trên trang khối tuỳ chỉnh. Bạn sẽ chỉ định một trong các kiểu khối mà bạn đã xác định trong thuộc tính blockStyles của giao diện cho khối của mình.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Đặt giao diện

Bạn cũng cần cho Blockly biết nên sử dụng giao diện nào. Bằng cách xác định một số giao diện sử dụng cùng một kiểu khối và tên danh mục, bạn có thể cho phép người dùng chọn giao diện phù hợp nhất với họ và thay đổi giao diện đó một cách linh động mà không cần phải thay đổi chính định nghĩa khối.

Giao diện ban đầu

Cách tốt nhất để đặt giao diện ban đầu là đưa options.theme vào lệnh gọi chèn. Bạn có thể cung cấp giao diện ở định dạng JSON hoặc JavaScript.

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

Bạn có thể xem thêm thông tin về các tuỳ chọn trên trang cấu hình của chúng tôi. Nếu không có giao diện nào được cung cấp, thì giao diện đó sẽ mặc định là Giao diện cổ điển.

Giao diện động

Nếu muốn thay đổi giao diện một cách linh động (ví dụ: trong trường hợp cho phép người dùng chọn giao diện trong trình đơn thả xuống), bạn có thể gọi yourWorkspace.setTheme(theme).

Tạo tập lệnh kiểu khối

Blockly cung cấp một tập lệnh sẽ lấy bản đồ các màu hoặc giá trị hex, rồi tính toán màu cấp hai và màu thứ ba cho các màu đó. Bạn có thể tìm thấy tập lệnh trong thư mục scripts/themes (tập lệnh/giao diện).

Chủ đề tích hợp

Blockly cung cấp một số giao diện hỗ trợ tiếp cận, cụ thể là một số loại khiếm thị màu:

• Độ tương phản cao
• Mù màu xanh lục/mù màu đỏ
• Tritanopia

Chúng tôi cũng có:

• Giao diện cổ điển
• Hiện đại
• Chế độ tối