domkit

原文: https://finproducts.atlassian.net/wiki/spaces/JIDD3/pages/34793554126/FIN+5.3.1+domkit 中文整理基于 FIN 5.3.1

导读： 基于 DOM 的用户界面框架

以下为 API 参考，保留英文以便对照源码；目录已列出（英文标题便于检索）；概述已尽量中译。

目录（导读）

classes
enums
docs
Overview
Slot Details
- addGroup
- expand
- isExpanded
- make
- bottom
- center
- fill
- fromStr
- left
- right
- top
- vals
- enabled
- onAction
- onPopup
- openPopup
- add
- buttons
- inheritEnabled
- onBeforeSelect
- onSelect
- selIndex
- effect
- effectDur
- onAdd
- onRemove
- selItem
- checked
- indeterminate
- wrap
- field
- items
- onElem
- close
- onAfterOpen
- onBeforeOpen
- onClose
- onKeyDown
- onOpen
- open
- title
- down
- up
- cur
- onMount
- onResize
- onUnmount
- bind
- onDrag
- onDragImage
- onEnd
- canDrop
- onDrop
- onLeave
- onOver
- accept
- files
- multi
- reset
- alignCross
- alignLines
- alignMain
- dir
- flex
- onParent
- back
- flip
- front
- isBack
- isFront
- toBack
- toFront
- gaps
- halign
- addRow
- cellStyle
- insertRowBefore
- numRows
- removeAllRows
- removeRow
- rowIndexOf
- target
- uri
- sel
- fitBounds
- isOpen
- max
- min
- onBarColor
- onText
- val
- div
- minSize
- onSashResize
- resizable
- sizes
- onScroll
- clear
- index
- indexes
- isEmpty
- item
- size
- model
- onHeaderPopup
- onSort
- onTableEvent
- rebuild
- refresh
- scrollTo
- showHeader
- sort
- sortCol
- sortDir
- stripeClasses
…（其余标题见英文正文）

API 正文（英文）

enums


Align	Alignment enums: top, left, bottom, right, center, fill
Dir	Direction enums: up, down, left, right

docs

Overview

DomKit is a HTML5 UI toolkit designed for building Web-based user interfaces.

See docDomkit for full documentation.

AccordionBox

@Js class AccordionBox : Box

AccordionBox displays collapsible content panels for presenting information in a limited amount of vertical space, where the header element is used to collapse or expand the child content.

See also: docDomkit

Constructors


make

Methods


addGroup	Add a new group with given header and child nodes.
expand	Set expanded state for given group.
isExpanded	Return `true` if given group is expanded, or `false` if not.

Slot Details

addGroup

This addGroup(Elem header, Elem[] kids, Bool expanded := false)

Add a new group with given header and child nodes. Optionally configure default expansion state with expanded paramter (defaults to collapsed).

expand

Void expand(Int groupIndex, Bool expanded)

Set expanded state for given group.

isExpanded

Bool isExpanded(Int groupIndex)

Return true if given group is expanded, or false if not.

make

new make()

Align

@Js @Serializable { simple=true } enum class Align : Enum

Alignment enums: top, left, bottom, right, center, fill

Enum


top
left
bottom
right
center
fill

Constructors


fromStr	Return the Align instance for the specified name.

Fields


vals	List of Align values indexed by ordinal

Slot Details

bottom

const static Align bottom := ...

center

const static Align center := ...

fill

const static Align fill := ...

fromStr

static new fromStr(Str name, Bool checked := true)

Return the Align instance for the specified name. If not a valid name and checked is false return null, otherwise throw ParseErr.

left

const static Align left := ...

right

const static Align right := ...

top

const static Align top := ...

vals

const static Align[] vals := ...

List of Align values indexed by ordinal

Box

@Js class Box : Elem

Box defaults style to:

display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;

Constructors


make

Slot Details

make

new make()

Button

@Js class Button : Elem

Button is a widget that invokes an action when pressed.

See also: docDomkit, ToggleButton, ListButton

Constructors


make

Fields


enabled

Methods


onAction	Callback when button action is invoked.
onPopup	Callback to create Popup to display when button is pressed.
openPopup	Programmatically open popup, or do nothing if no popup defined.

Slot Details

enabled

virtual override Bool? enabled

make

new make()

onAction

Void onAction(|This| f)

Callback when button action is invoked.

onPopup

Void onPopup(|Button->Popup| f)

Callback to create Popup to display when button is pressed.

openPopup

Void openPopup()

Programmatically open popup, or do nothing if no popup defined.

ButtonGroup

@Js class ButtonGroup : Obj

ButtonGroup groups a set of toggle or radio buttons and handles making sure only one button in group is selected at a time.

See also: docDomkit, ToggleButton, RadioButton

Fields


buttons	Buttons in this group.
enabled	Set enabled state for this button group.
inheritEnabled	If `true`, child buttons will inherit the `enabled` state of this `ButtonGroup`.
selIndex	Index of selected button, or `null` if none selected.

Methods


add	Convenience to add a button to `buttons`.
onBeforeSelect	Callback before a selection changes.
onSelect	Callback when selection in group has changed.

Slot Details

add

This add(Elem button)

Convenience to add a button to buttons.

buttons

Elem[] buttons := Elem[,]

Buttons in this group.

enabled

Bool enabled := true

Set enabled state for this button group.

inheritEnabled

Bool inheritEnabled := true

If true, child buttons will inherit the enabled state of this ButtonGroup. If false buttons can be enabled or disabled independent of group.

onBeforeSelect

Void onBeforeSelect(|ButtonGroup,Int->Bool| f)

Callback before a selection changes. Return true to select the new button (default), or false to keep the currently selected button.

onSelect

Void onSelect(|This| f)

Callback when selection in group has changed.

selIndex

Int? selIndex := null

Index of selected button, or null if none selected.

CardBox

@Js class CardBox : Box

CardBox lays out child elements as a stack of cards, where only one card may be visible at a time.

See also: docDomkit

Constructors


make

Fields


effect	Transition effect to apply when `selIndex` is changed.
effectDur	Duratin for `effect` animation to last.
selIndex	Selected card index, or null if no children.

Methods


onAdd
onRemove
selItem	Selected card instance, or null if no children.

Slot Details

effect

Str? effect := null

Transition effect to apply when selIndex is changed. If null, no effect is applied.

Valid values are:

slideLeft: animate cards sliding in from right-to-left
slideRight: animate cards sliding in from left-to-right

effectDur

Duration effectDur := 350ms

Duratin for effect animation to last.

make

new make()

onAdd

protected virtual override Void onAdd(Elem c)

onRemove

protected virtual override Void onRemove(Elem c)

selIndex

virtual Int? selIndex

Selected card index, or null if no children.

selItem

Elem? selItem()

Selected card instance, or null if no children.

Checkbox

@Js class Checkbox : Elem

Checkbox displays a checkbox that can be toggled on and off.

See also: docDomkit

Constructors


make

Fields


checked	Value of checked.
indeterminate	Get or set indeterminate flag.

Methods


onAction	Callback when state is toggled.
wrap	Wrap this checkbox with content that can also be clicked to toggle checkbox.

Slot Details

checked

Bool checked

Value of checked.

indeterminate

Bool indeterminate

Get or set indeterminate flag.

make

new make()

onAction

Void onAction(|This| f)

Callback when state is toggled.

wrap

Elem wrap(Obj content)

Wrap this checkbox with content that can also be clicked to toggle checkbox.

Combo

@Js class Combo : Elem

Combo combines a TextField and ListButton into a single widget that allows a user to select from a list or manually enter a value.

See also: docDomkit

Constructors


make

Fields


enabled
field	TextField component of Combo.
items	The current list items for Combo.

Methods


onElem	Callback to create an `Elem` representation for a given list item.

Slot Details

enabled

virtual override Bool? enabled

field

TextField field { private set }

TextField component of Combo.

items

Str[] items

The current list items for Combo.

make

new make()

onElem

Void onElem(|Obj->Obj| f)

Callback to create an Elem representation for a given list item. If function does not return an Elem instance, one will be created using toStr of value.

Dialog

@Js class Dialog : Box

Dialog manages a modal window above page content.

See also: docDomkit

Constructors


make

Fields


title	`Str` or `Elem` content displayed in title bar, or `null` to hide title bar.

Methods


close	Close this dialog.
onAfterOpen	Protected sub-class callback invoked directly after dialog is opened.
onBeforeOpen	Protected sub-class callback invoked directly before dialog is opened.
onClose	Callback when popup is closed.
onKeyDown	Callback when a key is pressed while Dialog is open, including events that where dispatched outside the dialog.
onOpen	Callback when dialog is opened.
open	Open this dialog in the current Window.

Slot Details

close

Void close()

Close this dialog. If dialog is already closed this method does nothing.

make

new make()

onAfterOpen

protected virtual Void onAfterOpen()

Protected sub-class callback invoked directly after dialog is opened.

onBeforeOpen

protected virtual Void onBeforeOpen()

Protected sub-class callback invoked directly before dialog is opened.

onClose

Void onClose(|This| f)

Callback when popup is closed.

onKeyDown

protected Void onKeyDown(|Event| f)

Callback when a key is pressed while Dialog is open, including events that where dispatched outside the dialog.

onOpen

Void onOpen(|This| f)

Callback when dialog is opened.

open

Void open()

Open this dialog in the current Window. If dialog is already open this method does nothing.

title

Obj? title := null

Str or Elem content displayed in title bar, or null to hide title bar.

Dir

@Js @Serializable { simple=true } enum class Dir : Enum

Direction enums: up, down, left, right

Enum


up
down
left
right

Constructors


fromStr	Return the Dir instance for the specified name.

Fields


vals	List of Dir values indexed by ordinal

Slot Details

down

const static Dir down := ...

fromStr

static new fromStr(Str name, Bool checked := true)

Return the Dir instance for the specified name. If not a valid name and checked is false return null, otherwise throw ParseErr.

left

const static Dir left := ...

right

const static Dir right := ...

up

const static Dir up := ...

vals

const static Dir[] vals := Dir[Dir.up,Dir.down,Dir.left,Dir.right]

List of Dir values indexed by ordinal

DomListener

@Js class DomListener : Obj

DomListener monitors the DOM and invokes callbacks when modifications occur.

DomListener works by registering a global MutationObserver on the body tag and collects all childList events for his subtree. All mutation events are queued and processed on a reqAnimationFrame. Registered nodes are held with weak references, and will be garbage collected when out of scope.

Methods


cur
onMount	Request callback when target node is mounted into document.
onResize	Request callback when target node size has changed.
onUnmount	Request callback when target node is unmounted from document.

Slot Details

cur

static DomListener cur()

onMount

Void onMount(Elem target, |Elem| f)

Request callback when target node is mounted into document.

onResize

Void onResize(Elem target, |Elem| f)

Request callback when target node size has changed.

onUnmount

Void onUnmount(Elem target, |Elem| f)

Request callback when target node is unmounted from document.

DragTarget

@Js class DragTarget : Obj

DragTarget converts an Elem into a drag target for a drag-and-drop events.

See also: docDomkit

Methods


bind	Convert given Elem into a drag target.
onDrag	Callback to get data payload for drag event.
onDragImage	Callback to customize the drag image for drag event.
onEnd	Callback when the drag event has ended.

Slot Details

bind

static DragTarget bind(Elem elem)

Convert given Elem into a drag target.

onDrag

Void onDrag(|Elem->Obj| f)

Callback to get data payload for drag event.

onDragImage

Void onDragImage(|Obj->Elem| f)

Callback to customize the drag image for drag event.

onEnd

Void onEnd(|Elem| f)

Callback when the drag event has ended.

DropTarget

@Js class DropTarget : Obj

DropTarget converts an Elem into a drop target for drag and drop events. The canDrop callback is used to indicate if data can be dropped on this target. The onDrop callback is invoked when a drop event completes.

See also: docDomkit

Methods


bind	Convert given Elem into a drop target.
canDrop	Callback to indicate if `data` can be dropped on this target.
onDrop	Callback when `data` is dropped on this target.
onLeave	Callback when drag target has left this drop target.
onOver	Callback when drag target is over this drop target, where `pagePos` is the current drag node.

Slot Details

bind

static DropTarget bind(Elem elem)

Convert given Elem into a drop target.

canDrop

Void canDrop(|Obj->Bool| f)

Callback to indicate if data can be dropped on this target.

onDrop

Void onDrop(|Obj| f)

Callback when data is dropped on this target.

onLeave

Void onLeave(|->Void| f)

Callback when drag target has left this drop target.

onOver

Void onOver(|Point| f)

Callback when drag target is over this drop target, where pagePos is the current drag node.

FilePicker

@Js class FilePicker : Elem

FilePicker allows selection of files.

See also: docDomkit

Constructors


make

Fields


accept	Indicate the types of files that the server accepts.
multi	Does this picker allow selecting multiple files?

Methods


files	Get the list of currently selected files.
onSelect	Callback when a file has been selected by this picker.
open	Programmtically open the client file chooser interface.
reset	Reset picker to no selection.

Slot Details

accept

Str? accept

Indicate the types of files that the server accepts. The value must be a comma-separated list of unique content type specifiers:

A file extension starting with a .: (e.g. .jpg, .png, .doc)
A valid MIME type with no extensions
audio/* representing sound files
video/* representing video files
image/* representing image files

files

DomFile[] files()

Get the list of currently selected files.

make

new make()

multi

Bool multi

Does this picker allow selecting multiple files?

onSelect

Void onSelect(|FilePicker| f)

Callback when a file has been selected by this picker.

open

Void open()

Programmtically open the client file chooser interface.

reset

Void reset()

Reset picker to no selection.

FlexBox

@Js class FlexBox : Box

FlexBox lays out child elements based on the CSS Flexbox Layout module, which primarily lays out items along a single axis (the main axis). Alignment can also be specified for the opposite axis (the cross axis).

See also: docDomkit

Constructors


make

Fields


alignCross	Define child alignment along cross axis
alignLines	Define how multiple lines of content are aligned when extra space exists in the cross axis
alignMain	Define child alignment along main axis
dir	Direction of the main axis to layout child items
flex	Convenience to configure the shorthand `flex` values outside of child items, where the list position maps to the index of the child node.
wrap	Define how items are wrapped when content cannot fit in a single line/column

Methods


onAdd
onParent
onRemove

Slot Details

alignCross

Str alignCross := "center"

Define child alignment along cross axis:

"flex-start": items are aligned to top of cross axis
"flex-end": items are aligned to bottom of cross axis
"center": items are centered along cross axis
"baseline": items are aligned so baselines match
"stretch": stretch items to fill container

alignLines

Str alignLines := "stretch"

Define how multiple lines of content are aligned when extra space exists in the cross axis:

"flex-start": lines are packed to top of cross axis
"flex-end": lines are packed to bottom of cross axis
"center": lines are packed along center of cross axis
"space-around": extra space is evenly divided between lines
"space-between": extra space is evenly divided around lines
"stretch": stretch lines to fill container

This value has no effect for single line layouts.

alignMain

Str alignMain := "flex-start"

Define child alignment along main axis:

"flex-start": items are packed toward start of line
"flex-end": items are packed toward end of line
"center": items are centered along the line
"space-between": extra space is evenly distributed between items
"space-around": extra space is evenly distributed around items

dir

Str dir := "row"

Direction of the main axis to layout child items:

"row": layout children left to right
"column": layout childrent top to bottom

flex

Str[] flex := Str[,]

Convenience to configure the shorthand flex values outside of child items, where the list position maps to the index of the child node. Any value here will override the value specified in the child.

make

new make()

onAdd

protected virtual override Void onAdd(Elem c)

onParent

protected virtual override Void onParent(Elem p)

onRemove

protected virtual override Void onRemove(Elem c)

wrap

Str wrap := "nowrap"

Define how items are wrapped when content cannot fit in a single line/column:

"nowrap": do not wrap; items are clipped
"wrap: wrap items onto the next line or column

FlipBox

@Js class FlipBox : Box

FlipBox displays content on a 3D card, and allows transitiong between the front and back using a flipping animation.

Constructors


make

Fields


back	Back card content.
front	Front card content.

Methods


flip	Flip content, and invoke the specified callback when the flip animation has completed.
isBack	Is card showing back content.
isFront	Is card showing front content.
toBack	Show back card content if not already visible.
toFront	Show front card content if not already visible.

Slot Details

back

Elem? back

Back card content.

flip

Void flip(|This|? onComplete := null)

Flip content, and invoke the specified callback when the flip animation has completed.

front

Elem? front

Front card content.

isBack

Bool isBack()

Is card showing back content.

isFront

Bool isFront()

Is card showing front content.

make

new make()

toBack

This toBack()

Show back card content if not already visible.

toFront

This toFront()

Show front card content if not already visible.

FlowBox

@Js class FlowBox : Box

FlowBox lays out its children in a one-directional flow.

See also: docDomkit

Constructors


make

Fields


gaps	Gaps to insert between child elements.
halign	How to align children inside container.

Methods


onAdd
onRemove

Slot Details

gaps

Str[] gaps := Str[,]

Gaps to insert between child elements. If gaps.length is less than the number of children, then gaps will be cycled to apply to all children.

halign

Align halign := Align.left

How to align children inside container. Valid values are left, center, right.

make

new make()

onAdd

protected virtual override Void onAdd(Elem c)

onRemove

protected virtual override Void onRemove(Elem c)

GridBox

@Js class GridBox : Box

GridBox lays its children out in a two dimensional grid.

See also: docDomkit

Constructors


make

Fields


halign	How grid content is aligned horizontally against left-over space.

Methods


addRow	Add a new row to grid.
cellStyle	Set style for cells.
insertRowBefore	Insert row before given index.
numRows	The number of rows in this GridBox.
removeAllRows	Remove all rows of cells for this GridBox.
removeRow	Remove the row of cells at given index.
rowIndexOf	Return the row index that this child exists under, or `null` if child was not found in this GridBox.

Slot Details

addRow

This addRow(Elem?[] cells, Int[] colspan := Int#.emptyList())

Add a new row to grid.

cellStyle

This cellStyle(Obj col, Obj row, Str style)

Set style for cells. Valid values for col and row:

Specific index (0, 1, 2, etc)
Range of indexes (0..4, 7..<8, etc)
"*": apply to all row or columns
"even": apply only to even row or columns indexes
"odd": apply only to odd row or column indexes

halign

Align halign := Align.left

How grid content is aligned horizontally against left-over space. Valid values are left, right, center, or fill.

insertRowBefore

This insertRowBefore(Int index, Elem?[] cells, Int[] colspan := Int#.emptyList())

Insert row before given index.

make

new make()

numRows

Int numRows()

The number of rows in this GridBox.

removeAllRows

This removeAllRows()

Remove all rows of cells for this GridBox.

removeRow

This removeRow(Int index)

Remove the row of cells at given index.

rowIndexOf

Int? rowIndexOf(Elem child)

Return the row index that this child exists under, or null if child was not found in this GridBox.

Label

@Js class Label : Elem

Simple text based element.

See also: docDomkit

Constructors


make

Slot Details

make

new make()

Link

@Js class Link : Elem

Hyperlink anchor element

Constructors


make

Fields


target	The target attribute specifies where to open the linked document.
uri	URI to hyperlink to.

Slot Details

make

new make()

target

Str target

The target attribute specifies where to open the linked document.

uri

Uri uri := `#`

URI to hyperlink to.

ListButton

@Js class ListButton : Button

ListButton allows user selection of an item in a list by showing a listbox popup on button press.

See also: docDomkit, Button, ToggleButton

Constructors


make

Fields


items	The current list items.
sel	Selection for list.

Methods


onElem	Callback to create an `Elem` representation for a given list item.
onSelect	Callback when selected item has changed.

Slot Details

items

Obj[] items := Obj#.emptyList

The current list items.

make

new make()

onElem

Void onElem(|Obj->Obj| f)

Callback to create an Elem representation for a given list item. If function does not return an Elem instance, one will be created using toStr of value.

onSelect

Void onSelect(|This| f)

Callback when selected item has changed.

sel

Selection sel { private set }

Selection for list.

@Js class Menu : Popup

Popup menu

Slot Details

make

new make()

onBeforeOpen

protected virtual override Void onBeforeOpen()

MenuItem

@Js class MenuItem : Elem

MenuItem for a Menu

Constructors


make

Fields


enabled

Methods


onAction	Callback when item is selected.

Slot Details

enabled

virtual override Bool? enabled

make

new make()

onAction

Void onAction(|This| f)

Callback when item is selected.

@Js class Popup : Elem

Popup window which can be closed clicking outside of element.

See also: docDomkit

Constructors


make

Fields


halign	Where to align Popup relative to open(x,y)
isOpen	Return `true` if this popup currently open.

Methods


close	Close this popup.
fitBounds	Fit popup with current window bounds.
onBeforeOpen	Protected sub-class callback invoked directly before popup is visible.
onClose	Callback when popup is closed.
onOpen	Callback when popup is opened.
open	Open this popup in the current Window.

Slot Details

close

Void close()

Close this popup. If popup is already closed this method does nothing.

fitBounds

Void fitBounds()

Fit popup with current window bounds. This may move the origin of where popup is opened, or modify the width or height, or both.

This method is called automatically by open. For content that is asynchronusly loaded after popup is visible, and that may modify the initial size, it is good practice to invoke this method to verify content does not overflow the viewport.

If popup is not open, this method does nothing.

halign

Align halign := Align.left

Where to align Popup relative to open(x,y):

Align.left: align left edge popup to (x,y)
Align.center: center popup with (x,y)
Align.right: align right edge of popup to (x,y)

isOpen

Bool isOpen { private set }

Return true if this popup currently open.

make

new make()

onBeforeOpen

protected virtual Void onBeforeOpen()

Protected sub-class callback invoked directly before popup is visible.

onClose

Void onClose(|This| f)

Callback when popup is closed.

onOpen

Void onOpen(|This| f)

Callback when popup is opened.

open

Void open(Float x, Float y)

Open this popup in the current Window. If popup is already open this method does nothing. This method always invokes fitBounds to verify popup does not overflow viewport.

ProgressBar

@Js class ProgressBar : Elem

ProgressBar visualizes progress of a long running operation

See also: docDomkit

Constructors


make

Fields


max	Max progress value.
min	Min progress value.
val	Current progress value.

Methods


onBarColor	Callback to get progress bar color (as CSS color value) when `val` is modified.
onText	Callback to get progress bar text when `val` is modified.

Slot Details

make

new make(|This|? f := null)

max

Int max := 100

Max progress value.

min

Int min := 0

Min progress value.

onBarColor

Void onBarColor(|ProgressBar->Str| f)

Callback to get progress bar color (as CSS color value) when val is modified.

onText

Void onText(|ProgressBar->Str| f)

Callback to get progress bar text when val is modified.

val

Int val := 0

Current progress value.

RadioButton

@Js class RadioButton : Elem

RadioButton displays a radio button. RadioButtons should be belong to a ButtonGroup, where only one button in the group can be selected at a time.

See also: docDomkit

Constructors


make

Fields


checked	Value of checked.

Methods


onAction	Callback when state is toggled.
wrap	Wrap this checkbox with content that can also be clicked to toggle checkbox.

Slot Details

checked

Bool checked

Value of checked.

make

new make()

onAction

Void onAction(|This| f)

Callback when state is toggled.

wrap

Elem wrap(Obj content)

Wrap this checkbox with content that can also be clicked to toggle checkbox.

SashBox

@Js class SashBox : Box

SashBox lays out children in a single direction allowing both fixed and pertange sizes that can fill the parent container.

See also: docDomkit

Constructors


make

Fields


dir	Direction to layout child elements
minSize	Minimum size a child can be resized to if `resizable` is `true`.
resizable	Allow user to resize sash positions.
sizes	Size to apply to each child, width or height based on `dir`.

Methods


div	Create a new divider element for resizing children.
onAdd
onRemove
onSashResize	Callback when user resizes a sash pane if `resizable` is `true`.

Slot Details

dir

Dir dir := Dir.right

Direction to layout child elements:

Dir.right: layout children left to right
Dir.down: layout childrent top to bottom

div

static Elem div()

Create a new divider element for resizing children. Dividers are required between children when resizable is true.

make

new make()

minSize

Str minSize := "10%"

Minimum size a child can be resized to if resizable is true. Only percentage sizes allowed.

onAdd

protected virtual override Void onAdd(Elem c)

onRemove

protected virtual override Void onRemove(Elem c)

onSashResize

Void onSashResize(|This| f)

Callback when user resizes a sash pane if resizable is true.

resizable

Bool resizable := false

Allow user to resize sash positions. See div.

sizes

Str[] sizes := Str[,]

Size to apply to each child, width or height based on dir. Fixed px and percentage sizes are allowed. Percentage sizes will be subtracted from total fixed size using CSS calc() method.

ScrollBox

@Js class ScrollBox : Box

ScrollBox displays content in a scrollable viewport.

Constructors


make

Methods


onScroll	Callback when box is scrolled.

Slot Details

make

new make()

onScroll

Void onScroll(|This| f)

Callback when box is scrolled.

Selection

@Js abstract class Selection : Obj

Selection manages the selected items and/or indexes

Fields


enabled	Enable or disable selection.
index	Get or set a single index
indexes	Selected zero based indexes
item	Get or set a single item
items	Selected items.
multi	True to enable multiple selection, false for single selection.

Methods


clear	Clear the selection
isEmpty	Is the selection currently empty
size	Number of selected items

Slot Details

clear

Void clear()

Clear the selection

enabled

Bool enabled := true

Enable or disable selection.

index

abstract Int? index

Get or set a single index

indexes

abstract Int[] indexes

Selected zero based indexes

isEmpty

abstract Bool isEmpty()

Is the selection currently empty

item

abstract Obj? item

Get or set a single item

items

abstract Obj[] items

Selected items.

multi

Bool multi := false

True to enable multiple selection, false for single selection.

size

abstract Int size()

Number of selected items

Table

@Js class Table : Elem

Table displays a grid of rows and columns.

See also: docDomkit

Constructors


make	Constructor.

Fields


model	Model for this table.
sel	Selection for table
showHeader	Is the table header visible.
stripeClasses	List of CSS classes applied to rows in sequence, looping as required.

Methods


onAction	Callback when row is double-clicked.
onHeaderPopup	Callback to display header popup.
onSelect	Callback when selection has changed.
onSort	Callback when table is sorted by a column
onTableEvent	Callback when a event occurs inside a table cell.
rebuild	Rebuild table layout.
refresh	Refresh table cell content.
scrollTo	Scroll to the given row and column in table.
sort	Sort a table by the given column index.
sortCol	The column index by which the table is currently sorted, or null if the table is not currently sorted by a column.
sortDir	Return if the table is currently sorting up or down.

Slot Details

make

new make()

Constructor.

model

TableModel model := TableModel.<ctor>()

Model for this table.

onAction

Void onAction(|This| f)

Callback when row is double-clicked.

onHeaderPopup

Void onHeaderPopup(|Table->Popup| f)

Callback to display header popup. When non-null, a button will be placed on the right-hand side of the table header to indicate the popup is available.

onSelect

Void onSelect(|This| f)

Callback when selection has changed.

onSort

Void onSort(|This| f)

Callback when table is sorted by a column

onTableEvent

Void onTableEvent(Str type, |TableEvent| f)

Callback when a event occurs inside a table cell.

rebuild

Void rebuild()

Rebuild table layout.

refresh

Void refresh()

Refresh table cell content.

scrollTo

Void scrollTo(Int? col, Int? row)

Scroll to the given row and column in table. Pass null to maintain the current scroll position for that axis.

sel

Selection sel { private set }

Selection for table

showHeader

Bool showHeader := true

Is the table header visible.

sort

Void sort(Int? col, Dir dir := Dir.up)

Sort a table by the given column index. If col is null, then the table is ordered by its natural order of the table model. Sort order is determined by TableModel.sortCompare. Sorting does not modify the indexing of TableModel, it only changes how the model is viewed. Also see sortCol and sortDir. Table automatically refreshed.

sortCol

Int? sortCol()

The column index by which the table is currently sorted, or null if the table is not currently sorted by a column. See sort.

sortDir

Dir sortDir()

Return if the table is currently sorting up or down. See sort.

stripeClasses

Str[] stripeClasses := Str["even","odd"]

List of CSS classes applied to rows in sequence, looping as required.

TableEvent

@Js class TableEvent : Obj

TableEvents are generated by Table cells.

Fields


cellPos	Mouse position relative to cell.
col	Column index for this event.
pagePos	Mouse position relative to page.
row	Row index for this event.
size	Size of cell for this event.
table
type	Event type.

Methods


toStr

Slot Details

cellPos

const Point cellPos

Mouse position relative to cell.

col

const Int col

Column index for this event.

pagePos

const Point pagePos

Mouse position relative to page.

row

const Int row

Row index for this event.

size

const Size size

Size of cell for this event.

table

Table table { private set }

toStr

virtual override Str toStr()

type

const Str type

Event type.

TableFlags

@Js const class TableFlags : Obj

Table specific flags for eventing

Constructors


make

Fields


defVal	Default value with all flags cleared
focused	Table has focus.
selected	Row is selected.

Methods


toStr

Slot Details

defVal

const static TableFlags defVal := ...

Default value with all flags cleared

focused

const Bool focused

Table has focus.

make

new make(|This| f)

selected

const Bool selected

Row is selected.

toStr

virtual override Str toStr()

TableModel

@Js class TableModel : Obj

TableModel backs the data model for a Table

Methods


colWidth	Return width of given column.
headerHeight	Return height of header.
isVisibleDef	Return default visible/hidden state for column
item	Return item for the given row to be used with selection.
numCols	Number of columns in table.
numRows	Number of rows in table.
onCell	Callback to update the cell content at given location.
onHeader	Callback to update content for column header at given index.
rowHeight	Return height of rows.
sortCompare	Compare two cells when sorting the given col.

Slot Details

colWidth

virtual Int colWidth(Int col)

Return width of given column.

headerHeight

virtual Int headerHeight()

Return height of header.

isVisibleDef

virtual Bool isVisibleDef(Int col)

Return default visible/hidden state for column

item

virtual Obj item(Int row)

Return item for the given row to be used with selection.

numCols

virtual Int numCols()

Number of columns in table.

numRows

virtual Int numRows()

Number of rows in table.

onCell

virtual Void onCell(Elem cell, Int col, Int row, TableFlags flags)

Callback to update the cell content at given location.

onHeader

virtual Void onHeader(Elem header, Int col)

Callback to update content for column header at given index.

rowHeight

virtual Int rowHeight()

Return height of rows.

sortCompare

virtual Int sortCompare(Int col, Int row1, Int row2)

Compare two cells when sorting the given col. Return -1, 0, or 1 according to the same semanatics as Obj.compare. See Table.sort.

TextArea

@Js class TextArea : Elem

Multi-line text input element

See also: docDomkit

Constructors


make

Fields


cols	Preferred width of text area in columns, or `null` for default.
placeholder	Hint that is displayed in the text area before a user enters value that describes the expected input, or `null` for no placeholder text.
ro	Set to `true` to set text area to readonly mode.
rows	Preferred height of text area in rows, or `null` for default.
val	Value of text area.

Methods


onModify	Callback when value is modified by user.

Slot Details

cols

Int? cols

Preferred width of text area in columns, or null for default.

make

new make()

onModify

Void onModify(|This| f)

Callback when value is modified by user.

placeholder

Str? placeholder

Hint that is displayed in the text area before a user enters value that describes the expected input, or null for no placeholder text.

ro

Bool ro

Set to true to set text area to readonly mode.

rows

Int? rows

Preferred height of text area in rows, or null for default.

val

Str val

Value of text area.

TextField

@Js class TextField : Elem

Text field input element.

See also: docDomkit

Constructors


make

Fields


cols	Preferred width of field in columns, or `null` for default.
password	Set to `true` to mask characters inputed into field.
placeholder	Hint that is displayed in the field before a user enters a value that describes the expected input, or `null` for no placeholder text.
ro	Set to `true` to set field to readonly mode.
val	Value of text field.

Methods


onAction	Callback when `enter` key is pressed.
onModify	Callback when value is modified by user.
select	Select given range of text

Slot Details

cols

Int? cols

Preferred width of field in columns, or null for default.

make

new make()

onAction

Void onAction(|This| f)

Callback when enter key is pressed.

onModify

Void onModify(|This| f)

Callback when value is modified by user.

password

Bool password

Set to true to mask characters inputed into field.

placeholder

Str? placeholder

Hint that is displayed in the field before a user enters a value that describes the expected input, or null for no placeholder text.

ro

Bool ro

Set to true to set field to readonly mode.

select

Void select(Int start, Int end)

Select given range of text

val

Str val

Value of text field.

ToggleButton

@Js class ToggleButton : Button

ToggleButton models a boolean state toggled by pressing a button.

Slot Details

elemOff

Obj? elemOff := null

Optional content to display when not selected. If the argument is not an Elem instance, one will be created with text content using toStr.

elemOn

Obj? elemOn := null

Optional content to display when selected. If the argument is not an Elem instance, one will be created with text content using toStr.

make

new make()

selected

Bool selected := false

Toggle selection state.

@Js class Tooltip : Elem

Tooltip displays a small popup when the mouse hovers over the bound node element, and is dismissed when the mouse moves out.

See also: docDomkit

Constructors


make

Fields


delay	Time mouse must be over bound node before opening the Tooltip.

Methods


bind	Bind this tooltip the given node.

Slot Details

bind

Void bind(Elem node)

Bind this tooltip the given node.

delay

Duration? delay := 750ms

Time mouse must be over bound node before opening the Tooltip. If null the Tooltip is displayed immediatly.

make

new make()

Tree

@Js class Tree : Box

Tree visualizes TreeNodes as a series of expandable nodes.

See also: docDomkit

Constructors


make	Constructor.

Fields


roots	Root nodes for this tree.
sel	Selection for tree.

Methods


expand	Set expanded state for given node.
onAction	Callback when a node has been double clicked.
onSelect	Callback when selection changes.
onTreeEvent	Callback when a event occurs inside a tree node.
rebuild	Rebuild tree layout.
refresh	Refresh tree content.
refreshNode	Refresh given node.

Slot Details

expand

Void expand(TreeNode node, Bool expanded)

Set expanded state for given node.

make

new make()

Constructor.

onAction

Void onAction(|Tree,Event| f)

Callback when a node has been double clicked.

onSelect

Void onSelect(|This| f)

Callback when selection changes.

onTreeEvent

Void onTreeEvent(Str type, |TreeEvent| f)

Callback when a event occurs inside a tree node.

rebuild

Void rebuild()

Rebuild tree layout.

refresh

Void refresh()

Refresh tree content.

refreshNode

Void refreshNode(TreeNode node)

Refresh given node.

roots

TreeNode[] roots := TreeNode[,]

Root nodes for this tree.

sel

Selection sel { private set }

Selection for tree. Index based selection is not supported for Tree.

TreeEvent

@Js class TreeEvent : Obj

TreeEvent are generated by TreeNode nodes.

Fields


node	`TreeNode` this event was trigged on.
nodePos	Mouse position relative to node.
pagePos	Mouse position relative to page.
size	Size of node for this event.
tree	Parent `Tree` instance.
type	Event type.

Methods


toStr

Slot Details

node

TreeNode node { private set }

TreeNode this event was trigged on.

nodePos

const Point nodePos

Mouse position relative to node.

pagePos

const Point pagePos

Mouse position relative to page.

size

const Size size

Size of node for this event.

toStr

virtual override Str toStr()

tree

Tree tree { private set }

Parent Tree instance.

type

const Str type

Event type.

TreeFlags

@Js const class TreeFlags : Obj

Tree specific flags for eventing

Constructors


make

Fields


focused	Tree has focus.
selected	Node is selected.

Methods


toStr

Slot Details

focused

const Bool focused

Tree has focus.

make

new make(|This| f)

selected

const Bool selected

Node is selected.

toStr

virtual override Str toStr()

TreeNode

@Js abstract class TreeNode : Obj

TreeNode models a node in a Tree.

See also: docDomkit

Fields


parent	Parent node of this node, or `null` if this node is a root.

Methods


children	Get the children of this node.
hasChildren	Return true if this has or might have children.
isExpanded	Is this node expanded?
onElem	Callback to customize Elem for this node.

Slot Details

children

virtual TreeNode[] children()

Get the children of this node. If no children return an empty list. Default behavior is no children. This method must return the same instances when called.

hasChildren

virtual Bool hasChildren()

Return true if this has or might have children. This is an optimization to display an expansion control without actually loading all the children. The default returns !children.isEmpty.

isExpanded

Bool isExpanded()

Is this node expanded?

onElem

abstract Void onElem(Elem elem, TreeFlags flags)

Callback to customize Elem for this node.

parent

TreeNode? parent { internal set }

Parent node of this node, or null if this node is a root.

WellBox

@Js class WellBox : Box

WellBox displays content in a recessed well.

Constructors


make

Slot Details

make

new make()

domkit ​

目录（导读） ​

API 正文（英文） ​

enums ​

docs ​

Overview ​

AccordionBox ​

Slot Details ​

addGroup ​

expand ​

isExpanded ​

make ​

Align ​

Slot Details ​

bottom ​

center ​

fill ​

fromStr ​

left ​

right ​

top ​

vals ​

Box ​

Slot Details ​

make ​

Button ​

Slot Details ​

enabled ​

make ​

onAction ​

onPopup ​

openPopup ​

ButtonGroup ​

Slot Details ​

add ​

buttons ​

enabled ​

inheritEnabled ​

onBeforeSelect ​

onSelect ​

selIndex ​

CardBox ​

Slot Details ​

effect ​

effectDur ​

make ​

onAdd ​

onRemove ​

selIndex ​

selItem ​

Checkbox ​

Slot Details ​

checked ​

indeterminate ​

make ​

onAction ​

wrap ​

Combo ​

Slot Details ​

enabled ​

field ​

items ​

make ​

onElem ​

Dialog ​

Slot Details ​

close ​

make ​

onAfterOpen ​

onBeforeOpen ​

onClose ​

onKeyDown ​

onOpen ​

open ​

title ​

Dir ​

Slot Details ​

down ​

fromStr ​

left ​

domkit

目录（导读）

API 正文（英文）

enums

docs

Overview

AccordionBox

Slot Details

addGroup

expand

isExpanded

make

Align

Slot Details

bottom

center

fill

fromStr

left

right

top

vals

Box

Slot Details

make

Button

Slot Details

enabled

make

onAction

onPopup

openPopup

ButtonGroup

Slot Details

add

buttons

enabled

inheritEnabled

onBeforeSelect

onSelect

selIndex

CardBox

Slot Details

effect

effectDur

make

onAdd

onRemove

selIndex

selItem

Checkbox

Slot Details

checked

indeterminate

make

onAction

wrap

Combo

Slot Details

enabled

field

items

make

onElem

Dialog

Slot Details

close

make

onAfterOpen

onBeforeOpen

onClose

onKeyDown

onOpen

open

title

Dir

Slot Details

down

fromStr

left