필드 클래스
수정 가능한 필드의 추상 클래스입니다.
서명:
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 | **필드**에 설정된 기본값을 덮어쓰려면 프로토타입을 직접 업데이트합니다. 예: |
|
EDITABLE | 부울 | 수정 가능한 입력란에는 일반적으로 수정 가능임을 나타내는 UI가 표시됩니다. 또한 직렬화 도구에 의해 저장됩니다. | |
enabled_ | protected |
부울 | 수정 가능한 블록의 편집기를 사용하여 필드 값을 변경할 수 있나요? |
fieldGroup_ | protected |
SVGGElement | null | 렌더링된 필드의 SVG 그룹 요소입니다. |
isDirty_ | protected |
부울 | 이 블록을 다시 렌더링해야 하나요? |
maxDisplayLength | 숫자 | 말줄임표를 추가하기 전에 표시할 텍스트의 최대 문자 수입니다. | |
이름? | 문자열 | (선택사항) 필드의 이름입니다. 각 블록 내에서 고유합니다. 정적 라벨은 일반적으로 이름이 지정되지 않습니다. | |
NBSP |
|
(선언되지 않음) | 줄바꿈 없는 공백 |
SERIALIZABLE | 부울 | 직렬화 가능한 필드는 직렬라이저에 의해 저장되고 직렬화 불가능한 필드는 저장되지 않습니다. 수정 가능한 필드는 직렬화 가능해야 합니다. SERIALIZABLE이 이전 버전과 호환되도록 기본적으로는 그렇지 않습니다. | |
size_ | protected |
크기 | 이 필드의 크기를 가져옵니다. getSize() 및 updateSize()에는 부작용이 있으므로 원치 않는 렌더링이나 기타 부작용을 트리거하지 않고 크기를 설정/가져올 때 필드 경계를 조정하려는 서브클래스의 shim 역할을 합니다. 서브클래스는 get 또는 set 중 하나라도 재정의된 경우 *둘 다* 재정의해야 합니다. 구현은 super를 통해 직접 호출할 수도 있지만 JS 사양에 따라 존재해야 합니다. |
SKIP_SETUP |
|
고유한 기호 | 필드의 생성자가 필드의 값을 설정하거나 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** 을 참고하세요. **참고:** 유효성 검사는 |
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 |
텍스트를 기반으로 필드 크기를 업데이트합니다. |