blockly > 필드

필드 클래스

수정 가능한 필드의 추상 클래스입니다.

서명:

export declare abstract class Field<T = any> implements IKeyboardAccessible, IRegistrable, ISerializable, IFocusableNode 

구현: IKeyboardAccessible, IRegistrable, ISerializable, IFocusableNode

생성자

생성자 수정자 설명
(생성자)(값, 검사기, 구성) Field 클래스의 새 인스턴스를 생성합니다.

속성

속성 수정자 유형 설명
borderRect_ protected SVGRectElement | null 렌더링된 필드의 SVG 테두리 요소입니다.
clickTarget_ protected 요소 | null 클릭 핸들러가 바인딩된 요소입니다.
constants_ protected ConstantProvider | null 소스 블록의 렌더러와 연결된 상수입니다.
DEFAULT_VALUE T | null

**필드**에 설정된 기본값을 덮어쓰려면 프로토타입을 직접 업데이트합니다.

예: FieldImage.prototype.DEFAULT_VALUE = null;

EDITABLE 부울 수정 가능한 입력란에는 일반적으로 수정 가능임을 나타내는 UI가 표시됩니다. 또한 직렬화 도구에 의해 저장됩니다.
enabled_ protected 부울 수정 가능한 블록의 편집기를 사용하여 필드 값을 변경할 수 있나요?
fieldGroup_ protected SVGGElement | null 렌더링된 필드의 SVG 그룹 요소입니다.
isDirty_ protected 부울 이 블록을 다시 렌더링해야 하나요?
maxDisplayLength 숫자 말줄임표를 추가하기 전에 표시할 텍스트의 최대 문자 수입니다.
이름? 문자열 (선택사항) 필드의 이름입니다. 각 블록 내에서 고유합니다. 정적 라벨은 일반적으로 이름이 지정되지 않습니다.
NBSP

static

readonly

(선언되지 않음) 줄바꿈 없는 공백
SERIALIZABLE 부울 직렬화 가능한 필드는 직렬라이저에 의해 저장되고 직렬화 불가능한 필드는 저장되지 않습니다. 수정 가능한 필드는 직렬화 가능해야 합니다. SERIALIZABLE이 이전 버전과 호환되도록 기본적으로는 그렇지 않습니다.
size_ protected 크기 이 필드의 크기를 가져옵니다. getSize() 및 updateSize()에는 부작용이 있으므로 원치 않는 렌더링이나 기타 부작용을 트리거하지 않고 크기를 설정/가져올 때 필드 경계를 조정하려는 서브클래스의 shim 역할을 합니다. 서브클래스는 get 또는 set 중 하나라도 재정의된 경우 *둘 다* 재정의해야 합니다. 구현은 super를 통해 직접 호출할 수도 있지만 JS 사양에 따라 존재해야 합니다.
SKIP_SETUP

static

readonly

고유한 기호 필드의 생성자가 필드의 값을 설정하거나 configure_를 실행해서는 *안 되는* 경우를 알리고 서브클래스가 대신 이를 실행하도록 허용하는 데 사용되는 값입니다.
sourceBlock_ protected 차단 | null 이 필드가 연결된 블록입니다. null로 시작하여 init에서 설정합니다.
textContent_ protected 텍스트 | null 렌더링된 필드의 텍스트 콘텐츠 요소입니다.
textElement_ protected SVGTextElement | null 렌더링된 필드의 SVG 텍스트 요소입니다.
validator_ protected FieldValidator<T> | null 사용자가 수정 가능한 입력란을 수정할 때 호출되는 유효성 검사 함수입니다.
value_ protected T | null
visible_ protected 부울 필드가 표시되나요, 아니면 블록이 접혀 있어 숨겨져 있나요?

메서드

메서드 수정자 설명
applyColour()

블록의 색상/스타일과 일치하도록 필드를 업데이트합니다.

필드의 색상이 블록의 색상에 따라 달라지는 경우 추상적이지 않은 서브클래스는 이를 구현할 수 있습니다. 상위 블록 또는 렌더러가 변경될 때와 같이 관련 시점에 자동으로 호출됩니다.

자세한 내용은 필드 문서를 참고하고 예시는 FieldDropdown을 참고하세요.

bindEvents_() protected 이벤트를 필드에 바인딩합니다. 맞춤 입력 처리가 필요한 경우 서브클래스에서 재정의할 수 있습니다.
canBeFocused() IFocusableNode.canBeFocused를 참고하세요.
configure_(config) protected 필드에 전달된 구성 맵을 처리합니다.
createBorderRect_() protected 필드 테두리 직사각형 요소를 만듭니다. 서브클래스에서 재정의해서는 안 됩니다. 대신 initView 내에서 함수의 결과를 수정하거나 호출할 별도의 함수를 만듭니다.
createTextElement_() protected 필드 텍스트 요소를 만듭니다. 서브클래스에서 재정의해서는 안 됩니다. 대신 initView 내에서 함수의 결과를 수정하거나 호출할 별도의 함수를 만듭니다.
dispose() 이 수정 가능한 입력란에 속한 모든 DOM 객체와 이벤트를 삭제합니다.
doClassValidation_(newValue) protected

필드 값의 변경사항을 설정하기 전에 유효성을 검사합니다. 서브클래스 구현의 예는 **FieldDropdown** 을 참고하세요.

**참고:** 유효성 검사는 T, null, undefined 중 하나의 옵션을 반환합니다. **필드**의 구현은 undefined를 반환하지 않지만, 새 값이 T와 호환되는 경우 서브클래스가 undefined를 반환하는 것은 유효합니다.

doClassValidation_(newValue) protected
doValueInvalid_(_invalidValue, _fireChangeEvent) protected 잘못된 값이 입력되었음을 필드에 알리는 데 사용됩니다. 서브클래스에서 재정의할 수 있습니다. FieldTextInput을 참고하세요. 기본적으로 무작위 작업입니다.
doValueUpdate_(newValue) protected 필드의 값을 업데이트하는 데 사용됩니다. 서브클래스에서 재정의하여 값을 맞춤 저장하거나 외부 항목을 업데이트할 수 있습니다.
forceRerender() 이 필드가 설치된 블록을 강제로 다시 렌더링합니다. 그러면 이 필드가 다시 렌더링되고 크기 변경사항이 조정됩니다. 크기가 이미 기록되었으므로 동일한 블록의 다른 필드는 다시 렌더링되지 않습니다.
fromJson(_options) static

서브클래스는 이 메서드를 재구현하여 JSON 인수 객체에서 필드 서브클래스를 구성해야 합니다.

서브클래스가 이 메서드를 재정의하지 않은 경우 FieldRegistry에 필드 서브클래스를 등록하려고 하면 오류가 발생합니다.

fromXml(fieldElement) 지정된 XML 요소를 기반으로 필드 값을 설정합니다. Blockly.Xml에서만 호출해야 합니다.
getAbsoluteXY_() protected 이 필드의 왼쪽 상단의 절대 좌표를 반환합니다. 원점 (0,0)은 페이지 본문의 왼쪽 상단입니다.
getBorderRect() protected 테두리 직사각형 요소를 가져옵니다.
getClickTarget_() protected 클릭 핸들러를 바인딩할 요소입니다. 명시적으로 설정하지 않으면 필드의 SVG 루트가 기본값입니다. 수정 가능한 입력란에서 이 요소를 클릭하면 편집기가 열립니다.
getConstants() 렌더러 상수 제공자를 가져옵니다.
getDisplayText_() protected 블록에 표시할 텍스트를 이 필드에서 가져옵니다. 생략 부호 및 기타 형식 때문에 getText와 다를 수 있습니다.
getFlipRtl() RTL에서 필드를 뒤집을지 여부를 반환합니다.
getFocusableElement() IFocusableNode.getFocusableElement를 참고하세요.
getFocusableTree() IFocusableNode.getFocusableTree를 참고하세요.
getSize()

필드의 높이와 너비를 반환합니다.

*일반적으로* render_가 호출되는 유일한 위치여야 합니다.

getSourceBlock() 이 필드가 연결된 블록을 가져옵니다.
getSvgRoot() 수정 가능한 이 필드의 그룹 요소를 가져옵니다. 크기를 측정하고 위치를 지정하는 데 사용됩니다.
getText_() protected 이 필드의 반환된 텍스트를 재정의하는 개발자 후크입니다. 이 필드의 값에 대한 텍스트 표현이 값의 문자열 변환이 아닌 경우 재정의합니다. null을 반환하여 문자열 변환을 사용합니다.
getText() 이 필드의 텍스트를 가져옵니다. getText_를 재정의하여 값을 문자열로 전송하는 것과 다른 동작을 제공합니다.
getTextContent() protected 텍스트 콘텐츠를 가져옵니다.
getTextElement() protected 텍스트 요소를 가져옵니다.
getTooltip() 이 필드의 도움말 텍스트를 반환합니다.
getValidator() 수정 가능한 필드의 유효성 검사 함수를 가져오거나 설정되지 않은 경우 null을 가져옵니다.
getValue() 필드의 현재 값을 가져옵니다.
initModel() 필드의 모델이 블록에 설치된 후 초기화합니다. 기본적으로 무작위 작업입니다.
initView() protected 이 필드의 블록 UI를 만듭니다.
isClickable() 이 필드가 showEditor_ 함수를 정의하는지 확인합니다.
isClickableInFlyout(autoClosingFlyout) 블록이 플라이아웃에 있는 동안 필드를 클릭할 수 있어야 하는지 확인합니다. 기본적으로 필드는 간단한 도구 상자와 같이 항상 열려 있는 플라이아웃에서는 클릭할 수 있지만 카테고리 도구 상자와 같이 자동 닫힘 플라이아웃에서는 클릭할 수 없습니다. 서브클래스는 이 함수를 재정의하여 이 동작을 변경할 수 있습니다. 이 작업이 효과를 발휘하려면 isClickable도 true를 반환해야 합니다.
isCurrentlyEditable() 이 필드를 현재 수정할 수 있는지 확인합니다. 일부 필드는 수정할 수 없습니다 (예: 텍스트 라벨). 다른 필드는 수정 가능할 수 있지만 수정할 수 없는 블록에 있거나 현재 사용 중지되어 있을 수 있습니다.
isEnabled() 소스 블록을 수정할 수 있는 경우 편집기를 사용하여 이 필드의 값을 변경할 수 있는지 확인합니다.
isSerializable() 이 필드를 XML 렌더러에서 직렬화해야 하는지 확인합니다. 이전 버전과의 호환성과 일치하지 않는 상태에 관한 로직을 처리합니다.
isVisible() 수정 가능한 이 필드가 표시되는지 여부를 가져옵니다.
loadLegacyState(callingClass, state) 이전 XML 후크를 사용하여 지정된 상태를 로드합니다(사용해야 하는 경우). 로드가 처리되었음을 나타내는 true를 반환하고 그렇지 않은 경우에는 false를 반환합니다.
loadState(state) 지정된 상태 값을 기반으로 필드의 상태를 설정합니다. 직렬화 시스템에서만 호출해야 합니다.
onLocationChange(_) 필드에 위치가 변경되었음을 알립니다.
onMouseDown_(e) protected 필드에서 포인터다운 이벤트를 처리합니다.
onNodeBlur() IFocusableNode.onNodeBlur를 참고하세요.
onNodeFocus() IFocusableNode.onNodeFocus를 참고하세요.
onShortcut(_shortcut) 지정된 단축키를 처리합니다.
positionBorderRect_() protected 크기를 변경한 후 필드의 테두리 직사각형을 배치합니다.
positionTextElement_(xOffset, contentWidth) protected 크기를 변경한 후 필드의 텍스트 요소를 배치합니다. 이렇게 하면 LTR 및 RTL 위치 지정이 모두 처리됩니다.
referencesVariables() 이 필드가 Blockly 변수를 참조하는지 여부입니다. 이 속성이 true인 경우 직렬화 및 역직렬화 중에 다르게 처리해야 할 수 있습니다. 서브클래스는 이를 재정의할 수 있습니다.
refreshVariableName() 이 필드가 변수를 참조하는 경우 이 필드에서 참조하는 변수 이름을 새로고침합니다.
render_() protected

getSize()에서 DOM 요소를 이동/크기 조절하고 새 크기를 가져오는 데 사용됩니다.

블록의 크기/모양에 영향을 미치는 모든 렌더링은 여기에서 실행해야 하며 getSize()로 트리거해야 합니다.

repositionForWindowResize()

창 크기 조절 중에 WidgetDiv의 위치를 변경하는 개발자 후크입니다. 창 크기가 조절될 때 자체적으로 재위치해야 하는 WidgetDiv가 필드에 있는 경우 이 후크를 정의해야 합니다. 예를 들어 텍스트 입력 필드는 입력 WidgetDiv가 창 크기 조절 이벤트에서 자체적으로 재위치할 수 있도록 이 후크를 정의합니다. 이는 모달 입력이 사용 중지된 경우 특히 중요합니다. Android 기기에서는 소프트 키보드가 열릴 때 창 크기 조절 이벤트가 실행되기 때문입니다.

WidgetDiv가 재위치 지정 대신 숨겨지도록 하려면 false를 반환합니다. 이것이 기본 동작입니다.

DropdownDiv는 자체 배치 로직을 이미 처리하므로 필드에 DropdownDiv만 있는 경우 이 함수를 재정의할 필요가 없습니다.

saveLegacyState(callingClass) protected XML 상태의 문자열화된 버전을 반환합니다(사용해야 하는 경우). 그렇지 않으면 null을 반환하여 필드가 자체 직렬화를 사용해야 함을 알립니다.
saveState(_doFullSerialization) 이 필드 값을 JSON으로 직렬화할 수 있는 것으로 저장합니다. 직렬화 시스템에서만 호출해야 합니다.
setEnabled(enabled) 소스 블록을 수정할 수 있는 경우 편집기를 사용하여 이 필드의 값을 변경할 수 있는지 여부를 설정합니다.
setSourceBlock(block) 이 필드를 블록에 연결합니다.
setTooltip(newTip) 이 필드의 도움말을 설정합니다.
setValidator(handler)

수정 가능한 필드에 새 유효성 검사 함수를 설정하거나 이전에 설정된 검사기를 삭제합니다.

검사기 함수는 새 필드 값을 가져와 검사된 값을 반환합니다. 유효성 검사된 값은 입력 값, 입력 값의 수정된 버전 또는 변경을 중단하기 위한 null일 수 있습니다.

함수가 아무것도 반환하지 않거나 정의되지 않은 값을 반환하면 새 값이 유효한 것으로 간주됩니다. 이는 확인된 함수를 필드 수준 변경 이벤트 알림으로 사용하는 필드를 허용하기 위함입니다.

setValue(newValue, fireChangeEvent) 필드 값을 변경하는 데 사용됩니다. 유효성 검사 및 이벤트를 처리합니다. 서브클래스는 이 메서드 대신 doClassValidation_ 및 doValueUpdate_를 재정의해야 합니다.
showEditor_(_e) protected 필드의 편집기를 만드는 개발자 후크입니다. 기본적으로 이 메서드는 아무것도 실행하지 않으며 편집기를 만들려면 재정의해야 합니다.
toXml(fieldElement) 이 필드의 값을 XML로 직렬화합니다. Blockly.Xml에서만 호출해야 합니다.
updateEditable() 이 필드의 수정 가능 여부를 나타내는 UI를 추가하거나 삭제합니다.
updateSize_(margin) protected 텍스트를 기반으로 필드 크기를 업데이트합니다.