연구 설문조사: Blockly 사용 경험을 알려주세요

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

새 필드 유형 만들기

새 필드 유형을 만들기 전에 다음 필드 중 하나가 다른 필드 중 하나인지 고려하세요. 메서드 맞춤설정할 수 있습니다. 애플리케이션이 새 값 유형을 만들거나 기존 값 유형에 대한 새 UI를 만들려면 새로운 필드 유형을 만들어야 할 수도 있습니다

새 필드를 만들려면 다음 안내를 따르세요.

생성자를 구현합니다.
JSON 키를 등록하고 fromJson를 구현합니다.
온블록 UI 및 이벤트의 초기화 처리 리스너가 포함되어 있습니다.
이벤트 리스너 처리 (다음 이벤트 리스너에서 UI 폐기 처리 합니다.
값 처리를 구현합니다.
접근성을 위해 필드 값의 텍스트 표현을 추가합니다.
다음과 같은 기능을 추가합니다. <ph type="x-smartling-placeholder">
- 편집기.
- 온블록 디스플레이 업데이트.
- 직렬화.
다음과 같은 필드의 추가적인 측면을 구성합니다. <ph type="x-smartling-placeholder">
- 수정 및 직렬화 가능 속성
- Cursor

이 섹션에서는 지속 가능성의 Field로 이동합니다.

맞춤 입력란의 예는 맞춤 입력란 데모 에서 자세한 내용을 확인하실 수 있습니다.

생성자 구현

필드의 생성자가 필드의 초깃값을 설정합니다. 필요한 경우 로컬 검사기를 사용합니다. 맞춤 필드의 생성자는 볼 수 있습니다. 따라서 커스텀 필드는 생성 중에 소스 블록에 액세스할 수 없습니다.

다음 코드 샘플은 GenericField라는 커스텀 필드를 만듭니다.

class GenericField extends Blockly.Field {
  constructor(value, validator) {
    super(value, validator);

    this.SERIALIZABLE = true;
  }
}

메서드 서명

일반적으로 필드 생성자는 값과 로컬 검사기를 사용합니다. 값은 선택사항이며 값을 전달하지 않거나 클래스에 실패하는 값을 전달하는 경우 슈퍼클래스의 기본값이 사용됩니다. 대상 기본 Field 클래스의 경우 값은 null입니다. 기본 업그레이드를 값인 경우 적절한 값을 전달해야 합니다. 유효성 검사 도구 매개변수는 는 수정 가능한 필드에 존재하며 일반적으로 선택사항으로 표시됩니다. 자세히 알아보기 검사기에 대한 자세한 내용은 문서를 참조하세요.

구조

생성자 내부의 로직은 다음 흐름을 따라야 합니다.

상속된 슈퍼 생성자를 호출합니다 (모든 맞춤 필드는 Blockly.Field 또는 서브클래스 중 하나)를 사용하여 값을 적절하게 초기화할 수 있습니다. 필드에 대한 로컬 검사기를 설정하세요.
필드를 직렬화할 수 있는 경우 생성자에 전달해야 합니다. 수정 가능한 필드는 직렬화 가능해야 하며, 필드는 수정할 수 있습니다. 알 수 없는 경우 기본적으로 이 속성을 true로 설정해야 합니다. 직렬화할 수 없어야 합니다.
선택사항: 추가 맞춤설정 (예: 라벨 필드)을 적용합니다. CSS 클래스를 전달한 다음 텍스트에 적용할 수 있음).

JSON 및 등록

JSON 블록 정의, 필드는 문자열로 설명됩니다 (예: field_number, field_textinput). 이러한 문자열에서 필드 객체로의 지도를 블록으로 유지하고 생성 중에 적절한 객체에 대한 fromJson.

Blockly.fieldRegistry.register를 호출하여 이 맵에 필드 유형을 추가합니다. 필드 클래스를 두 번째 인수로 전달합니다.

Blockly.fieldRegistry.register('field_generic', GenericField);

fromJson 함수도 정의해야 합니다. 구현은 다음을 충족해야 합니다. 우선 임의의 문자열 역참조 표 참고 자료 replaceMessageReferences, 값을 생성자에 전달합니다.

GenericField.fromJson = function(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(
      options['value']);
  return new CustomFields.GenericField(value);
};

초기화 중

필드가 생성되면 기본적으로 값만 포함됩니다. 초기화는 DOM이 빌드되고 모델이 빌드되는 단계 (필드가 이벤트가 바인딩됩니다.

온블록 디스플레이

초기화 중에 필요한 항목을 만들어야 합니다. 블로킹할 수 있습니다.

기본값, 배경, 텍스트

기본 initView 함수는 밝은 색상의 rect 요소와 text 요소 필드에 이 두 가지 및 추가 필드를 포함하고 싶은 경우 나머지 구성요소를 추가하기 전에 슈퍼클래스 initView 함수를 호출합니다. DOM 요소. 입력란에 다음 중 하나만 포함되도록 하려면 createBorderRect_ 함수 또는 createTextElement_ 함수를 사용할 수 있습니다.

DOM 생성 맞춤설정

필드가 일반 텍스트 필드 (예: 텍스트) 입력) DOM 생성이 자동으로 처리됩니다. 그렇지 않으면 initView 함수를 사용하여 렌더링해야 할 수도 있습니다.

예를 들어 드롭다운 입력란에 이미지와 텍스트가 모두 포함될 수 있습니다. initView에는 는 단일 이미지 요소와 단일 텍스트 요소를 만듭니다. 이후 render_ 동안 활성 요소를 표시하고, 열의 유형에 따라 다른 요소는 숨깁니다. 선택할 수 있습니다.

DOM 요소는 다음 중 하나를 사용하여 만들 수 있습니다. Blockly.utils.dom.createSvgElement 메서드 또는 기존 DOM 만들기 사용 메서드를 참조하세요.

필드의 블록 디스플레이 요구사항은 다음과 같습니다.

모든 DOM 요소는 필드의 fieldGroup_의 하위 요소여야 합니다. 필드 자동으로 생성됩니다
모든 DOM 요소는 필드의 보고된 크기 내에 있어야 합니다.

자세한 내용은 렌더링 섹션을 참조하세요.

텍스트 기호 추가

필드의 텍스트에 기호 (예: 각도 필드의 도 기호)를 사용하여 기호 요소 (일반적으로 <tspan>)를 필드의 textElement_에 직접 추가합니다.

입력 이벤트

기본적으로 필드는 도움말 이벤트 및 마우스다운 이벤트( 표시 중 편집자) 다른 종류의 이벤트를 수신 대기하려는 경우 (예: 필드에서 드래그) 필드의 bindEvents_ 함수를 재정의해야 합니다.

bindEvents_() {
  // Call the superclass function to preserve the default behavior as well.
  super.bindEvents_();

  // Then register your own additional event listeners.
  this.mouseDownWrapper_ =
  Blockly.browserEvents.conditionalBind(this.getClickTarget_(), 'mousedown', this,
      function(event) {
        this.originalMouseX_ = event.clientX;
        this.isMouseDown_ = true;
        this.originalValue_ = this.getValue();
        event.stopPropagation();
      }
  );
  this.mouseMoveWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mousemove', this,
      function(event) {
        if (!this.isMouseDown_) {
          return;
        }
        var delta = event.clientX - this.originalMouseX_;
        this.setValue(this.originalValue_ + delta);
      }
  );
  this.mouseUpWrapper_ =
    Blockly.browserEvents.conditionalBind(document, 'mouseup', this,
      function(_event) {
        this.isMouseDown_ = false;
      }
  );
}

이벤트에 결합하려면 일반적으로 Blockly.utils.browserEvents.conditionalBind 드림 함수를 사용하세요. 이 결합 이벤트 메서드는 드래그 진행 중인 드래그 도중에도 핸들러를 실행하려는 경우 Blockly.browserEvents.bind 드림 함수를 사용하세요.

폐기

필드의 bindEvents_ 내에 맞춤 이벤트 리스너를 등록한 경우 dispose 함수 내에서 등록을 취소해야 합니다.

올바르게 초기화했다면 뷰 (모든 DOM 요소를 fieldGroup_에 추가하여) 필드의 DOM이 자동으로 삭제됩니다.

값 처리

→ 필드의 값과 텍스트에 관한 자세한 내용은 필드의 구성 요소 필드를 참고하세요.

검증 순서

검사기가 실행되는 순서를 설명하는 플로우 차트

클래스 검사기 구현

입력란에는 특정 값만 허용해야 합니다. 예를 들어 숫자 필드는 색상 입력란에는 색상만 입력할 수 있습니다. 지역 사회를 통해 검사기를 사용하는 것이 좋습니다. 클래스 로컬 유효성 검사 도구와 동일한 규칙을 따릅니다. 단, 로컬 유효성 검사 도구에서는 를 생성자 따라서 소스 블록을 참조해서는 안 됩니다.

필드의 클래스 검사기를 구현하려면 doClassValidation_를 재정의합니다. 함수를 사용하세요.

doClassValidation_(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

유효한 값 처리

setValue가 있는 필드에 전달된 값이 유효하면 doValueUpdate_ 콜백. 기본적으로 doValueUpdate_ 함수는 다음을 실행합니다.

value_ 속성을 newValue로 설정합니다.
isDirty_를 설정합니다. 속성을 true로 변경합니다.

값을 저장하기만 하고 맞춤 처리를 하지 않으려는 경우 doValueUpdate_를 재정의할 필요가 없습니다.

또는 다음과 같은 작업을 하려는 경우:

newValue의 커스텀 스토리지
newValue에 따라 다른 속성을 변경합니다.
현재 값이 유효한지 여부를 저장합니다.

doValueUpdate_를 재정의해야 합니다.

doValueUpdate_(newValue) {
  super.doValueUpdate_(newValue);
  this.displayValue_ = newValue;
  this.isValueValid_ = true;
}

잘못된 값 처리

setValue가 있는 필드에 전달된 값이 잘못된 경우 doValueInvalid_ 콜백. 기본적으로 doValueInvalid_ 함수는 없습니다. 즉, 기본적으로 잘못된 값은 표시되지 않습니다. 또한 은 필드가 다시 렌더링되지 않음을 의미합니다. isDirty_ 드림 속성이 설정되지 않습니다.

잘못된 값을 표시하려면 doValueInvalid_를 재정의해야 합니다. 대부분의 경우 displayValue_ 속성을 잘못된 값, 설정됨 isDirty_ true로, 재정의합니다. render_ displayValue_을 기반으로 value_

doValueInvalid_(newValue) {
  this.displayValue_ = newValue;
  this.isDirty_ = true;
  this.isValueValid_ = false;
}

여러 부분으로 된 값

필드에 멀티파트 값 (예: 목록, 벡터, 객체)이 포함된 경우 각 부분이 개별 값처럼 처리되기를 원할 수 있습니다.

doClassValidation_(newValue) {
  if (FieldTurtle.PATTERNS.indexOf(newValue.pattern) == -1) {
    newValue.pattern = null;
  }

  if (FieldTurtle.HATS.indexOf(newValue.hat) == -1) {
    newValue.hat = null;
  }

  if (FieldTurtle.NAMES.indexOf(newValue.turtleName) == -1) {
    newValue.turtleName = null;
  }

  if (!newValue.pattern || !newValue.hat || !newValue.turtleName) {
    this.cachedValidatedValue_ = newValue;
    return null;
  }
  return newValue;
}

위의 예에서는 newValue의 각 속성이 개별적으로 검증됩니다. 그런 다음 부분(있는 경우)을 doClassValidation_ 함수 끝에 유효하지 않으면 값이 cacheValidatedValue_ 속성에 캐시되고 null를 반환합니다 (유효하지 않음). 개별적으로 검증된 객체 캐싱 속성을 사용하면 doValueInvalid_ 드림 함수를 사용하여 각 객체를 각각을 다시 검증하는 대신 !this.cacheValidatedValue_.property 검사 속성을 개별적으로 지정할 수 있습니다.

다중 파트 값을 검증하기 위한 이 패턴은 로컬 유효성 검사 도구를 현재로서는 이 패턴을 적용할 방법이 없습니다.

isDirty_

isDirty_는 다음에서 사용되는 플래그입니다. setValue 함수를 사용하여 해당 필드가 있습니다. 필드의 표시 값이 변경되었다면 일반적으로 isDirty_는 true로 설정해야 합니다.

텍스트

→ 필드의 텍스트가 사용되는 위치와 차이점에 대한 정보 자세한 내용은 특정 필드 값에 대한 필드를 참고하세요.

입력란의 텍스트가 입력란 값과 다른 경우 우선 적용 getText 함수 올바른 텍스트를 입력하세요.

getText() {
  let text = this.value_.turtleName + ' wearing a ' + this.value_.hat;
  if (this.value_.hat == 'Stovepipe' || this.value_.hat == 'Propeller') {
    text += ' hat';
  }
  return text;
}

편집기 만들기

showEditor_ 함수를 정의하면 Blockly가 자동으로 수신 대기합니다. 클릭하여 적절한 시간에 showEditor_를 호출합니다. 어떤 HTML이든 DropDownDiv라는 두 개의 특수 div 중 하나를 래핑하여 편집기에서 블록ly의 나머지 UI 위에 떠 있는 WidgetDiv가 포함되어 있습니다.

DropDownDiv 대 WidgetDiv

DropDownDiv는 연결된 상자 안에 있는 편집기를 제공하는 데 사용됩니다. 추가할 수 있습니다. 카메라가 필드 근처에 있으면서 자동으로 위치를 잡습니다. 볼 수 있습니다. 각도 선택 도구와 색상 선택 도구는 DropDownDiv

각도 선택 도구 이미지

WidgetDiv는 다음 용도로 사용됩니다. 상자 내부에 상주하지 않는 편집기를 제공합니다. 숫자 필드는 WidgetDiv는 HTML 텍스트 입력 상자로 필드를 덮습니다. DropDownDiv는 WidgetDiv는 이를 처리하지 않습니다. 요소에는 수동으로 배치해야 합니다 좌표계는 창 왼쪽 상단으로 이동합니다. 텍스트 입력 편집기는 WidgetDiv

텍스트 입력 편집기 이미지

DropDownDiv 샘플 코드

showEditor_() {
  // Create the widget HTML
  this.editor_ = this.dropdownCreate_();
  Blockly.DropDownDiv.getContentDiv().appendChild(this.editor_);

  // Set the dropdown's background colour.
  // This can be used to make it match the colour of the field.
  Blockly.DropDownDiv.setColour('white', 'silver');

  // Show it next to the field. Always pass a dispose function.
  Blockly.DropDownDiv.showPositionedByField(
      this, this.disposeWidget_.bind(this));
}

WidgetDiv 샘플 코드

showEditor_() {
  // Show the div. This automatically closes the dropdown if it is open.
  // Always pass a dispose function.
  Blockly.WidgetDiv.show(
    this, this.sourceBlock_.RTL, this.widgetDispose_.bind(this));

  // Create the widget HTML.
  var widget = this.createWidget_();
  Blockly.WidgetDiv.getDiv().appendChild(widget);
}

삭제

DropDownDiv와 WidgetDiv 모두 위젯 HTML 소멸을 처리합니다. 요소를 지원하지만 보유하고 있는 이벤트 리스너는 수동으로 폐기해야 함 적용할 수 있습니다.

widgetDispose_() {
  for (let i = this.editorListeners_.length, listener;
      listener = this.editorListeners_[i]; i--) {
    Blockly.browserEvents.unbind(listener);
    this.editorListeners_.pop();
  }
}

dispose 함수는 DropDownDiv의 null 컨텍스트에서 호출됩니다. 사용 설정됨 WidgetDiv WidgetDiv 컨텍스트에서 호출됩니다. 두 경우 모두 kubectl apply 명령어를 사용하는 것이 바인드 위의 DropDownDiv에서와 같이 폐기 함수를 전달할 때 함수 호출 및 WidgetDiv 예

→ 편집자 폐기와 관련이 없는 폐기에 대한 정보는 폐기.

온블록 디스플레이 업데이트

render_ 함수는 필드의 블록 위 디스플레이가 일치하도록 업데이트하는 데 사용됩니다. 내부 값입니다.

일반적인 예는 다음과 같습니다.

텍스트 변경 (드롭다운)
색상 (색상) 변경

를 통해 개인정보처리방침을 정의할 수 있습니다.

기본값

기본 render_ 함수는 getDisplayText_ 함수를 사용하세요. getDisplayText_ 함수는 필드의 value_ 속성을 반환합니다. 최대 텍스트를 존중하도록 잘린 후 문자열로 변환합니다. 지정할 수 있습니다.

기본 온블록 디스플레이와 기본 텍스트 동작을 사용하는 경우 render_를 재정의할 필요가 없습니다.

기본 텍스트 동작이 필드에서 작동하지만 필드가 차단되어 있는 경우 디스플레이에 추가 정적 요소가 있으므로 기본 render_를 호출할 수 있습니다. 함수의 값을 업데이트하지만 필드의 크기가 있습니다.

기본 텍스트 동작이 해당 입력란이나 입력란의 온블록 디스플레이에는 추가 동적 요소가 있으므로 이를 맞춤설정하고 render_ 함수를 사용합니다.

렌더링 재정의 여부를 결정하는 방법을 설명하는 플로우 차트

렌더링 맞춤설정

기본 렌더링 동작이 필드에서 작동하지 않는 경우 다음을 수행해야 합니다. 맞춤 렌더링 동작을 정의합니다. 여기에는 사용자설정 설정이나 이미지 요소 변경, 배경 색상 업데이트 등이 포함됩니다.

모든 DOM 속성 변경이 적법하며 다음 두 가지만 기억하면 됩니다.

DOM 생성은 초기화, 더 효율적이기 때문입니다.
항상 size_ 업데이트가 필요합니다. 속성을 사용하여 블록 내 디스플레이의 크기와 일치시킵니다.

render_() {
  switch(this.value_.hat) {
    case 'Stovepipe':
      this.stovepipe_.style.display = '';
      break;
    case 'Crown':
      this.crown_.style.display = '';
      break;
    case 'Mask':
      this.mask_.style.display = '';
      break;
    case 'Propeller':
      this.propeller_.style.display = '';
      break;
    case 'Fedora':
      this.fedora_.style.display = '';
      break;
  }

  switch(this.value_.pattern) {
    case 'Dots':
      this.shellPattern_.setAttribute('fill', 'url(#polkadots)');
      break;
    case 'Stripes':
      this.shellPattern_.setAttribute('fill', 'url(#stripes)');
      break;
    case 'Hexagons':
      this.shellPattern_.setAttribute('fill', 'url(#hexagons)');
      break;
  }

  this.textContent_.nodeValue = this.value_.turtleName;

  this.updateSize_();
}

크기 업데이트 중

필드의 size_ 속성을 업데이트하는 것은 필드를 배치하는 방법을 정해야 합니다. 가장 좋은 방법은 실험을 통해 size_가 되어야 합니다.

updateSize_() {
  const bbox = this.movableGroup_.getBBox();
  let width = bbox.width;
  let height = bbox.height;
  if (this.borderRect_) {
    width += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    height += this.constants_.FIELD_BORDER_RECT_X_PADDING * 2;
    this.borderRect_.setAttribute('width', width);
    this.borderRect_.setAttribute('height', height);
  }
  // Note how both the width and the height can be dynamic.
  this.size_.width = width;
  this.size_.height = height;
}

일치하는 블록 색상

필드의 요소가 블록의 색상과 일치하도록 하려면 applyColour 메서드를 재정의해야 합니다. 다음 작업을 수행하려고 합니다. 블록의 style 속성을 통해 색상에 액세스할 수 있습니다.

applyColour() {
  const sourceBlock = this.sourceBlock_;
  if (sourceBlock.isShadow()) {
    this.arrow_.style.fill = sourceBlock.style.colourSecondary;
  } else {
    this.arrow_.style.fill = sourceBlock.style.colourPrimary;
  }
}

수정 기능 업데이트 중

updateEditable 함수를 사용하여 필드가 표시되는 방식을 변경할 수 있습니다. 수정 가능 여부에 따라 달라집니다. 기본 함수를 사용하면 수정할 수 없는 경우 백그라운드에 마우스 오버 응답 (테두리)이 있거나 없습니다. 온블록 디스플레이는 편집 가능 여부에 따라 크기가 변경되지 않아야 하지만 다른 모든 변경이 허용됩니다.

updateEditable() {
  if (!this.fieldGroup_) {
    // Not initialized yet.
    return;
  }
  super.updateEditable();

  const group = this.getClickTarget_();
  if (!this.isCurrentlyEditable()) {
    group.style.cursor = 'not-allowed';
  } else {
    group.style.cursor = this.CURSOR;
  }
}

직렬화

직렬화는 나중에 작업공간으로 다시 로드할 수 있도록 합니다.

작업공간의 상태에는 항상 필드의 값이 포함되지만 필드의 UI 상태와 같은 다른 상태를 포함할 수 없습니다. 예를 들어 필드는 사용자가 국가를 선택할 수 있는 확대/축소 가능한 지도였습니다. 확대/축소 수준도 직렬화합니다.

필드가 직렬화 가능한 경우 SERIALIZABLE 속성을 true입니다.

Blockly는 필드에 두 가지 직렬화 후크 집합을 제공합니다. 후크 1쌍 다른 한 쌍은 새로운 JSON 직렬화 시스템과 호환되고 다른 쌍은 이전 XML 직렬화 시스템입니다.

`saveState` 및 `loadState`

saveState 및 loadState는 새 JSON에서 작동하는 직렬화 후크입니다. 직렬화 시스템입니다.

경우에 따라서는 기본 유형이 설정값이므로 구현될 것입니다. (1) 필드가 기본 Blockly.Field 클래스, (2) 값이 JSON 직렬화 가능 유형이고 (3) 필요한 경우에만 값을 직렬화하면 기본 구현이 잘 작동합니다.

그렇지 않으면 saveState 함수가 직렬화 가능한 JSON을 반환해야 합니다. 필드 상태를 나타내는 객체/값입니다. 및 loadState 함수는 동일한 JSON 직렬화 가능 객체/값을 수락하고 이를 필드를 확인합니다.

saveState() {
  return {
    'country': this.getValue(),  // Value state
    'zoom': this.getZoomLevel(), // UI state
  };
}

loadState(state) {
  this.setValue(state['country']);
  this.setZoomLevel(state['zoom']);
}

전체 직렬화 및 지원 데이터

saveState는 선택적 매개변수 doFullSerialization도 수신합니다. 이것은 일반적으로 다른 매개변수에 의해 직렬화된 상태를 참조하는 필드에서 사용 직렬화 (예: 데이터 모델 지원) 매개변수는 블록이 역직렬화되면 참조된 상태를 사용할 수 없으므로 필드는 직렬화 자체를 모두 처리해야 합니다. 예를 들어 개별 블록이 직렬화되거나 블록을 복사하여 붙여넣는 경우

이에 대한 두 가지 일반적인 사용 사례는 다음과 같습니다.

개별 블록이 지원 데이터가 저장되는 작업공간에 로드될 때 모델이 존재하지 않는 경우, 필드는 자체 상태의 데이터를 확보하기에 충분한 정보가 있습니다. 새 데이터 모델을 만듭니다
블록을 복사하여 붙여넣으면 필드는 항상 새로운 백업을 만듭니다. 기존 모델을 참조하는 대신 해당 모델을 사용합니다.

이 변수를 사용하는 필드는 기본 제공 변수 필드입니다. 일반적으로 참조하는 변수의 ID(doFullSerialization가 true인 경우) 모든 상태를 직렬화합니다.

saveState(doFullSerialization) {
  const state = {'id': this.variable_.getId()};
  if (doFullSerialization) {
    state['name'] = this.variable_.name;
    state['type'] = this.variable_.type;
  }
  return state;
}

loadState(state) {
  const variable = Blockly.Variables.getOrCreateVariablePackage(
      this.getSourceBlock().workspace,
      state['id'],
      state['name'],   // May not exist.
      state['type']);  // May not exist.
  this.setValue(variable.getId());
}

변수 필드는 이 작업을 수행하여 작업 영역에 로드되는 경우 변수가 존재하지 않는 경우 참조할 새 변수를 만들 수 있습니다.

`toXml` 및 `fromXml`

toXml 및 fromXml는 이전 XML에서 작동하는 직렬화 후크입니다. 직렬화 시스템입니다. 이러한 후크는 꼭 필요한 경우에만 사용하세요 (예: 를 사용해야 함) 그렇지 않으면 saveState 및 loadState입니다.

toXml 함수는 필드를 확인합니다. fromXml 함수는 동일한 XML 노드를 수락하고 필드에 추가합니다

toXml(fieldElement) {
  fieldElement.textContent = this.getValue();
  fieldElement.setAttribute('zoom', this.getZoomLevel());
  return fieldElement;
}

fromXml(fieldElement) {
  this.setValue(fieldElement.textContent);
  this.setZoomLevel(fieldElement.getAttribute('zoom'));
}

수정 및 직렬화 가능한 속성

EDITABLE 속성은 필드에 해당 항목을 나타내는 UI가 있어야 하는지를 결정합니다. 상호작용될 수 있습니다. 기본값은 true입니다.

SERIALIZABLE 속성은 필드를 직렬화해야 하는지 여부를 결정합니다. 그것은 기본값은 false입니다. 이 속성이 true인 경우 직렬화 및 역직렬화 함수( 직렬화).

커서 맞춤설정

CURSOR 속성은 사용자가 마우스를 가져가면 표시되는 커서를 결정합니다. 사용할 수 있습니다. 유효한 CSS 커서 문자열이어야 합니다. 이 옵션은 기본적으로 .blocklyDraggable로 정의되며 그랩 커서입니다.