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

커스텀 필드 업그레이드

2019년 7월 (버전 2.20190722)에 더 체계화된 필드 API가 추가되었습니다. 가능한 한 하위 호환되도록 설계되었습니다. 즉, 2019년 7월 이전에 맞춤 필드를 만든 경우 계속 작동할 가능성이 높습니다. 커스텀 필드를 업그레이드해야 하는지 결정하기 전에 위험 영역 섹션을 읽고 필드를 철저히 테스트해야 합니다.

2019년 7월 이전에는 필드 간 표준화가 부족했기 때문에 개발자가 해야 할 수 있는 모든 변경사항을 다루기가 어렵습니다. 이 문서에서는 발생할 수 있는 모든 변경사항을 다루려고 노력하지만, 관심 있는 내용이 이 문서에 포함되어 있지 않다면 업그레이드 지원 받기 섹션을 참고하세요.

위험 지역

위험 영역은 API가 변경되어 필드가 손상될 수 있는 것으로 알려진 위치입니다.

Blockly.Field.register

필드는 더 이상 Blockly.Field.register();을 통해 등록되지 않습니다. 이제 등록을 처리하는 fieldRegistry 네임스페이스가 있습니다.

Blockly.Field.register('my_field_name', myFieldClass);

위의 내용이 아래와 같이 변합니다.

Blockly.fieldRegistry.register('my_field_name', myFieldClass);

setText

setText 함수는 더 이상 Blockly 코어에 의해 호출되지 않으므로 setText 함수에 논리가 포함되어 있는 경우 값 처리 함수 모음, getText 함수, 렌더링 함수(setText 함수가 정확히 무엇을 하는지에 따라 다름)로 이동해야 합니다.

CustomFields.UpgradeField.prototype.setText = function(newText) {
  // Do validation.
  if (typeof newText != 'string' || newText === this.text_) {
    return;
  }

  // Fire event.
  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
    Blockly.events.fire(new Blockly.Events.BlockChange(
        this.sourceBlock_, 'field', this.name, this.text_, newText
    ));
  }

  // Update text value.
  this.text_ = 'prefix' + newText;

  // Rerender.
  this.size_.width = 0;
};

위의 내용이 아래와 같이 변합니다.

CustomFields.UpgradeField.prototype.doClassValidation_ = function(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

CustomFields.UpgradeField.prototype.getText = function() {
  return  'prefix' + this.value_;
}

Blockly는 다음을 자동으로 처리합니다.

새 값이 이전 값과 다른지 확인합니다.
값을 업데이트합니다.
변경 이벤트 발생
필드를 다시 렌더링합니다.

다음 사항을 처리해야 합니다.

값 유효성 검사 (doClassValidation_)
필드 텍스트 (getText)
필드 UI

추천 업그레이드

권장 업그레이드는 필드 API가 변경된 위치입니다. 변경하지 않더라도 필드는 계속 작동할 가능성이 높습니다.

SERIALIZABLE

EDITABLE 및 SERIALIZABLE 속성에 대한 자세한 내용은 수정 가능하고 직렬화 가능한 속성을 참고하세요.

CustomFields.UpgradeField.prototype.SERIALIZABLE = true;

아래 경고는 무시해도 되지만 SERIALIZABLE 속성을 정의하여 해결할 수 있습니다.

Detected an editable field that was not serializable. Please define
SERIALIZABLE property as true on all editable custom fields. Proceeding
with serialization.

위의 경고는 Blockly가 EDITABLE 속성이 true이므로 필드를 직렬화하려는 것으로 생각하지만 SERIALIZABLE 속성을 정의할 때까지는 확신할 수 없음을 의미합니다. 이 값을 그대로 두면 모든 것이 제대로 작동하고 필드가 직렬화되지만 콘솔 경고가 표시됩니다.

size_.width

this.size_.width = 0;

위의 내용이 아래와 같이 변합니다.

this.isDirty_ = true;

아래 경고는 무시해도 되지만 size_.width 속성 대신 isDirty_ 속성을 설정하여 해결할 수 있습니다.

Deprecated use of setting size_.width to 0 to rerender a field. Set
field.isDirty_ to true instead.

위의 경고는 Blockly가 필드를 다시 렌더링하는 데 이전 메서드를 사용하고 있음을 감지했으며 새 메서드를 사용하도록 요청하고 있음을 의미합니다.

isDirty_ 속성에 대한 자세한 내용은 isDirty_를 참고하세요.

init

init 함수는 하위 클래스에서 중복 코드를 줄이기 위해 템플릿 함수로 만들어졌습니다.

CustomFields.UpgradeField.prototype.init = function() {
  if (this.fieldGroup_) {
    // Already initialized once.
    return;
  }

  // Call superclass.
  CustomFields.UpgradeField.superClass_.init.call(this);

  // Create DOM elements.
  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);

  // Bind events.
  this.mouseOverWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);

  // Render.
  this.setValue(this.getValue());
};

위의 내용이 아래와 같이 변합니다.

CustomFields.UpgradeField.prototype.initView = function() {
  CustomFields.UpgradeField.superClass_.initView.call(this);

  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);
};

CustomFields.UpgradeField.prototype.bindEvents_ = function() {
  CustomFields.UpgradeField.superClass_.bindEvents_.call(this);

  this.mouseOverWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);
};

즉, 이제 Blockly에서 다음을 자동으로 처리합니다.

필드가 이미 초기화되었는지 확인합니다.
fieldGroup_ 생성
필드를 렌더링합니다.
툴팁 바인딩 및 편집기 이벤트 표시

다음 사항을 처리해야 합니다.

추가 DOM 요소 (initView)를 추가합니다.
추가 이벤트 바인딩 (bindEvents_) 추가
이벤트 바인딩 (dispose) 처리

onMouseDown_

CustomFields.UpgradeField.prototype.onMouseDown_ = function(e) {
  // ...
};

위의 내용이 아래와 같이 변합니다.

CustomFields.UpgradeField.prototype.showEditor_ = function() {
  // ...
}

onMouseDown_ 함수가 아닌 showEditor_ 함수를 재정의하여 마우스 클릭을 처리하는 것이 좋습니다. 이렇게 하면 입력이 동작 시스템을 통과할 수 있습니다.

편집자에 대한 자세한 내용은 편집자를 참고하세요.

setValue

이제 setValue 함수는 하위 클래스에서 중복 코드를 줄이는 템플릿 함수입니다. setValue 함수에 로직이 포함되어 있다면 값 처리에 설명된 값 처리 경로에 맞게 리팩터링하는 것이 좋습니다.

text_

필드의 text_ 속성에 직접 액세스하거나 업데이트하지 않는 것이 좋습니다. 대신 getText 함수를 사용하여 필드의 사람이 읽을 수 있는 텍스트에 액세스하고 setValue 함수를 사용하여 필드의 저장된 값을 업데이트합니다.

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

업그레이드 지원 받기

제공해야 할 항목

지원 요청 시에는 구체적인 질문을 하는 것이 좋습니다.

권장하지 않음: '이 입력란에 어떤 문제가 있나요?'

'이 필드를 업그레이드해 줘'도 권장되지 않습니다.

권장: '필드 텍스트가 올바르게 업데이트되지 않습니다.'

또한 지원을 제공하는 사람들에게 리소스를 제공해야 합니다. 이러한 파일은 다른 사용자가 쉽게 사용할 수 있어야 합니다.

다음은 권장하지 않습니다.

코드 이미지
코드가 불완전합니다.

권장:

텍스트 형식의 필드 코드를 완료합니다.
잘못된 필드 동작의 GIF 이미지
잘못된 필드 동작을 재현하는 단계
업그레이드할 Blockly 버전입니다.

게시 위치

Blockly 개발자 포럼에 업그레이드 관련 질문을 게시하세요.

문제가 Blockly 핵심과 관련이 있다고 확신하는 경우 Blockly GitHub에 문제를 게시할 수도 있습니다. 문제를 게시하기로 결정한 경우 요청된 정보를 모두 작성하세요.

커스텀 필드 업그레이드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

위험 지역

Blockly.Field.register

setText

추천 업그레이드

SERIALIZABLE

size_.width

init

onMouseDown_

setValue

text_

업그레이드 지원 받기

제공해야 할 항목

게시 위치

커스텀 필드 업그레이드