Field 類別
可編輯欄位的抽象類別。
Signature:
export declare abstract class Field<T = any> implements IKeyboardAccessible, IRegistrable, ISerializable, IFocusableNode
實作： IKeyboardAccessible、IRegistrable、ISerializable、IFocusableNode
建構函式
| 建構函式 | 修飾符 | 說明 |
|---|---|---|
| (建構函式)(值、驗證器、設定) | 建構 Field 類別的新例項 |
屬性
| 屬性 | 修飾符 | 類型 | 說明 |
|---|---|---|---|
| borderRect_ | protected |
SVGRectElement | null | 算繪欄位的 SVG 邊框元素。 |
| clickTarget_ | protected |
元素 | 空值 | 點按處理常式繫結的元素。 |
| 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() 有副作用，因此這會做為子類別的墊片，在設定/取得大小時調整欄位邊界，而不觸發不必要的轉譯或其他副作用。請注意，如果覆寫其中一個，子類別必須覆寫 get 和 set；實作方式可能只會直接呼叫至 super，但必須符合 JS 規格。 |
| SKIP_SETUP |
|
專屬符號 | 這個值用於指出欄位建構函式應 *不* 設定欄位值或執行 configure_ 時，應允許子類別執行此操作。 |
| sourceBlock_ | protected |
區塊 | 空值 | 這個欄位所屬的區塊。一開始為空值，然後在初始化時設定。 |
| textContent_ | protected |
文字 | 空值 | 已算繪的欄位文字內容元素。 |
| 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 引數物件建構其 Field 子類別。 如果子類別未覆寫此方法，則嘗試在 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 |
開發人員掛鉤，用於覆寫這個欄位傳回的文字。如果這個欄位值的文字表示法不只是其值的字串轉換，則請覆寫。傳回空值，以便轉換為字串。 |
| getText() | 取得此欄位的文字。覆寫 getText_，提供不同於將值轉換為字串的行為。 | |
| getTextContent() | protected |
取得文字內容。 |
| getTextElement() | protected |
取得文字元素。 |
| getTooltip() | 傳回這個欄位的工具提示文字。 | |
| getValidator() | 取得可編輯欄位的驗證函式，如果未設定則為空值。 | |
| getValue() | 取得欄位的目前值。 | |
| initModel() | 在將欄位安裝到區塊後，初始化欄位的模型。預設為無操作。 | |
| initView() | protected |
為這個欄位建立區塊 UI。 |
| isClickable() | 檢查這個欄位是否定義了 showEditor_ 函式。 | |
| isClickableInFlyout(autoClosingFlyout) | 檢查區塊在彈出式視窗中時，欄位是否可供點選。預設情況下，在永遠開啟的彈出式視窗 (例如簡易工具箱) 中，使用者可以點選欄位，但在自動關閉的彈出式視窗 (例如類別工具箱) 中，則無法點選欄位。子類別可以覆寫此函式來變更此行為。請注意，isClickable 也必須傳回 true，這項設定才會生效。 |
|
| isCurrentlyEditable() | 確認這個欄位目前是否可供編輯。部分欄位永遠無法編輯 (例如文字標籤)。其他欄位可能可編輯，但可能位於不可編輯的區塊中，或目前已停用。 | |
| isEnabled() | 確認在來源區塊可供編輯時，是否可以使用編輯器變更這個欄位的值。 | |
| isSerializable() | 確認 XML 轉譯器是否應序列化這個欄位。處理回溯相容性和不一致狀態的邏輯。 | |
| isVisible() | 取得這個可編輯欄位是否可見。 | |
| loadLegacyState(callingClass, state) | 使用舊版 XML 鉤子 (如果應使用舊版 XML 鉤子) 載入指定狀態。傳回 true 表示已處理載入作業，否則傳回 false。 | |
| loadState(state) | 根據指定的狀態值，設定欄位的狀態。只能由序列化系統呼叫。 | |
| onLocationChange(_) | 通知欄位已變更位置。 | |
| onMouseDown_(e) | protected |
處理欄位上的 pointerdown 事件。 |
| 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 狀態的字串版本 (如果應使用 XML 狀態)。否則會傳回空值，表示該欄位應使用其自身的序列化。 |
| saveState(_doFullSerialization) | 將這個欄位的值儲存為可序列化為 JSON 的內容。只能由序列化系統呼叫。 | |
| setEnabled(enabled) | 設定在來源區塊可編輯時，是否可以使用編輯器變更這個欄位的值。 | |
| setSourceBlock(block) | 將這個欄位附加到區塊。 | |
| setTooltip(newTip) | 設定這個欄位的工具提示。 | |
| setValidator(handler) | 為可編輯欄位設定新的驗證函式，或清除先前設定的驗證器。 驗證函式會接收新的欄位值，並傳回經過驗證的值。經過驗證的值可以是輸入值、輸入值的修改版本，或是空值 (表示終止變更)。 如果函式不會傳回任何內容 (或傳回未定義的值)，系統會將新值視為有效。這麼做是為了讓欄位使用已驗證的函式，做為欄位層級變更事件通知。 |
|
| setValue(newValue, fireChangeEvent) | 用於變更欄位值。處理驗證和事件。子類別應覆寫 doClassValidation_ 和 doValueUpdate_，而非覆寫這個方法。 | |
| showEditor_(_e) | protected |
開發人員鉤子，用於建立欄位的編輯器。根據預設，這項作業不會執行，必須覆寫才能建立編輯器。 |
| toXml(fieldElement) | 將這個欄位的值序列化為 XML。只能由 Blockly.Xml 呼叫。 | |
| updateEditable() | 新增或移除 UI，指出這個欄位是否可編輯。 | |
| updateSize_(margin) | protected |
根據文字更新欄位大小。 |