Giao diện

Giao diện là một cách tuỳ chỉnh giao diện của tính năng Chặn. Bạn có thể tuỳ chỉnh màu của khối, màu của 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à trao quyền cho các 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 đối với 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 sắc, 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ó một số thuộc tính: giao diện cơ sở để mở rộng, đối tượng kiểu cho các 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 không phải tiếng Mỹ của colour. Tất cả thuộc tính màu có thể được xác định theo giá trị màu sắc hoặc giá trị hex.

Kiểu khối

Một kiểu khối được tạo thành từ bốn 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à một khối bóng.
• colourTertiary (không bắt buộc) – Màu đường viền hoặc màu đánh dấu của khối.
• hat (không bắt buộc) – Thêm một mũ vào một 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'
}

Một giao diện sẽ bao gồm liên kết giữa tên kiểu khối với đối tượng 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 được quy tắc chặn nào thuộc một danh mục nhất định.

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

Một giao diện sẽ bao gồm liên kết 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 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 Flyout
• flyoutForegroundColour: Màu văn bản nhãn Flyout
• flyoutOpacity: Độ mờ Flyout
• scrollbarColour: Màu của 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ị trong chế độ di chuyển bằng bàn phím
• cursorColour: Màu của con trỏ hiển thị trong chế độ di chuyển 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 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 nhưng thành phần đó chưa có trong danh sách này và không thể thay đổi bằng CSS, vui lòng gửi vấn đề để cung cấp 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
}

Bắt đầu đội mũ

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

Nếu bạn đặt startHats: true trực tiếp trong một đối tượng giao diện, một chiếc mũ sẽ được thêm vào tất cả các khối không có kết nối trước đó hoặc kết nối đầu ra nào. Nếu muốn kiểm soát chính xác hơn khối nào nhận được mũ, bạn có thể sử dụng thuộc tính block style (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 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 một giao diện có sẵn và đặt tất cả các giá trị bằng một đối tượng duy nhất. Một giao diện có tên và là đối tượng 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 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
});

Dưới đây là ví dụ về cách sử dụng defineTheme.

Thêm tên kiểu

Lúc này, khi đã tạo xong một giao diện, chúng ta cần thêm tên của 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ẽ xác đị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 chặn tuỳ chỉnh của chúng tôi. 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 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 linh hoạt mà không phải tự thay đổi định nghĩa khối.

Chủ đề 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 trong 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ể tìm 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 bạn không cung cấp giao diện nào, thì theo mặc định, giao diện đó sẽ là Giao diện cổ điển.

Giao diện động

Nếu muốn linh động thay đổi giao diện (ví dụ: trong trường hợp cho phép người dùng chọn một 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 chặn kiểu

Blockly cung cấp một tập lệnh sẽ sử dụng bản đồ các giá trị sắc độ hoặc thập lục phân, đồng thời tính toán màu thứ cấp và màu thứ ba cho các màu đó. Bạn có thể tìm thấy tập lệnh này trong thư mục tập lệnh/chủ đề.

Chủ đề tích hợp

Blockly cung cấp một số chủ đề về khả năng hỗ trợ tiếp cận, cụ thể là một số loại khiếm khuyết về thị giác màu sắc:

• Độ tương phản cao
• Mù màu xanh dương/Mù màu xanh dương
• Mù màu xanh dương

Chúng tôi cũng:

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