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

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

커스텀 필드 업그레이드

2019년 7월 (버전 2.20190722) 더욱 코드화된 필드 API가 추가되었습니다. 용도는 다음과 같습니다. 가능한 한 이전 버전과 호환되어야 합니다. 즉, 기존에 맞춤 필드를 설정하는 것이 좋습니다. 맞춤 필드를 업그레이드해야 하는지 판단하기 전에 다음 내용을 확인하세요. 위험 영역 섹션을 살펴보고 필드를 철저하게 테스트하세요.

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;

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

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() {
  // ...
}

마우스 처리를 위해 showEditor_ 함수를 재정의하는 것이 좋습니다. onMouseDown_ 함수보다는 클릭수를 늘려 입력값을 제스처 시스템을 통해 전달됩니다.

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

setValue

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

text_

절대로 앱의 text_ 속성에 액세스하거나 업데이트하지 않는 것이 좋습니다. 직접 입력합니다. 대신 getText 함수 사용자가 읽을 수 있는 입력란 텍스트 및 setValue 함수 필드의 저장된 값을 업데이트합니다.

필드의 값과 텍스트에 대한 자세한 내용은 다음을 참고하세요. 필드 분석.

업그레이드 지원 받기

제공해야 할 사항

지원을 요청할 때는 다음과 같이 구체적으로 질문하는 것이 가장 좋습니다.

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

'이 입력란 업그레이드 관련 지원'은 사용하지 않는 것이 좋습니다.

권장: '필드 텍스트가 제대로 업데이트되지 않습니다.'

또한 고객을 지원하는 사람들에게 리소스를 제공해야 합니다. 이러한 파일은 다른 사람들이 사용하기 쉬워야 합니다.

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

코드 이미지
불완전한 코드입니다.

권장:

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

게시 위치

차단된 개발자에게 업그레이드에 관한 질문 게시 포럼에서 확인할 수 있습니다.

블록 코어에 문제가 있는 것으로 확신하는 경우 문제를 게시해 주세요 블루베리 파이를 만듭니다. 문제를 게시하기로 결정했다면 다음 항목을 모두 작성해 주세요. 정보를 요청할 수 없습니다.