Giao diện

Lưu ý: Mặc dù vẫn được hỗ trợ, nhưng cách ưu tiên để tạo kiểu cho các ứng dụng Blockly là dùng CSS.

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 thông qua lớp Themes. Nếu bạn muốn tuỳ chỉnh các thành phần khác, chúng tôi sẽ cung cấp tên giao diện dưới dạng một lớp trên div tiêm. Đ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 các nhà phát triển tạo ra những trải nghiệm dễ tiếp cận hơn với Blockly.

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

Lưu ý quan trọng: Mã trong Blockly sử dụng cách viết colour theo kiểu Anh (không phải kiểu Mỹ). Bạn có thể xác định tất cả các thuộc tính màu bằng giá trị sắc độ hoặc giá trị thập lục phân.

Kiểu khối

Một 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) – Màu đườ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 một khối, nếu giá trị được đặt thành cap. Tìm hiểu thêm về hat.

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

Giao diện sẽ bao gồm một mối liên kết giữa tên kiểu khối và đố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ỉ giữ 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, những 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 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 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 sắc 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 danh mục hộp công cụ
• flyoutBackgroundColour: Màu nền của bảng chọn
• flyoutForegroundColour: Màu văn bản của nhãn bật lên
• flyoutOpacity: Độ mờ của bảng chọ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 dấu chèn
• markerColour: Màu của điểm đánh dấu xuất hiện ở chế độ điều hướng bằng bàn phím
• cursorColour: Màu của con trỏ xuất hiện ở 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 mà bạn muốn thay đổi nhưng chưa có trong danh sách này và không thể thay đổi bằng CSS, vui lòng báo cáo vấn đề kèm theo thông tin chi tiết hơn.

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

Kiểu phông chữ

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

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

Mũ ngôi sao

Lưu ý: Tìm hiểu thêm về các trường hợp sử dụng mũ bắt đầu trên trang thiết kế ứng dụng 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 mũ sẽ được thêm vào tất cả các khối không có kết nối đầu vào hoặc đầu ra trước đó. Nếu muốn kiểm soát chặt chẽ hơn đối với những khối nào sẽ 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 một 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 cho một không gian làm việc

Tạo một giao diện

Bạn có thể tạo một giao diện bằng hàm khởi tạo hoặc bằng cách sử dụng 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. Giao diện có tên và là một đố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 sẽ cung cấp các 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

Để sử dụng một trong các kiểu danh mục được xác định trong categoryStyles của giao diện, hãy thêm kiểu đó vào định nghĩa danh mục:

JSON

{
 "kind": "category",
 "name": "Logic",
 "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

Chặn bóng

Để sử dụng một trong các kiểu khối được xác định trong blockStyles của giao diện, hãy thêm kiểu đó vào định nghĩa khối:

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Đặt giao diện

Bạn cũng cần cho Blockly biết giao diện nào cần sử dụng. 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 một giao diện ban đầu là thêm lựa chọn cấu hình theme vào lệnh gọi đến Blockly.inject. Bạn có thể cung cấp giao diện ở định dạng JSON hoặc JavaScript.

JSON

Blockly.inject('blocklyDiv', {
  theme: {
     "blockStyles" : {
        "list_blocks": {
           "colourPrimary": "#4a148c",
           "colourSecondary":"#AD7BE9",
           "colourTertiary":"#CDB6E9"
        }
     },
     "categoryStyles" : {
        "list_category": {
           "colour": "#4a148c"
        }
     },
     "componentStyles" : {
        "workspaceBackgroundColour": "#1e1e1e"
     }
  },
  ...
});

JavaScript

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

Nếu bạn không cung cấp giao diện, thì giao diện mặc định sẽ 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 hoạt (ví dụ: trong trường hợp cho phép người dùng chọn giao diện trong một 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 đồ sắc độ hoặc giá trị thập lục phân và tính toán màu sắc thứ cấp và màu sắc bậc ba cho các giá trị đó. Bạn có thể tìm thấy tập lệnh này trong thư mục scripts/themes.

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 hội chứng mù màu:

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

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

• Chủ đề cổ điển
• Hiện đại
• Chế độ tối