ui

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

导读： Fresco 用户界面框架

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

---

目录（导读）

• classes
• Slot Details
  • addButton
  • icon
  • info
  • make
  • msg
  • onAction
  • onBeforeOpen
  • width
  • eval
  • addButtonGap
  • aux
  • button
  • content
  • height
  • defs
  • dialog
  • makeInput
  • modified
  • rec
  • save
  • session
  • grid
  • gridModel
  • onMouseDown
  • onNav
  • selRows
  • colWidth
  • cols
  • isVisibleDef
  • item
  • navCols
  • numCols
  • numRows
  • onCell
  • onHeader
  • prefWidth
  • rowHeight
  • sortCompare
  • color
  • onParent
  • outline
  • resize
  • solid
  • def
  • load
  • makeForDef
  • makeForTag
  • onLoad
  • onModify
  • onRO
  • onSave
  • ro
  • addTab
  • onBeforeTab
  • selIndex
  • tabs
  • invoke
  • meta
  • updateView
  • view
  • attestKey
  • key
  • proj
  • user
  • anchorElem
  • asyncMenu
  • closest
  • containedIn
  • encodeUri
  • errTrace
  • fandocParse
  • fandocToElem
  • fandocToHtml
  • fontBlack
  • fontBold
  • fontLight
  • helpButton
  • hsep
  • iconCss
  • iconUri
  • itemToElem
  • makeAbsBox
  • makeCenterBox
  • makeEmptyBox
  • makeSpinnerBox
  • menuSep
  • sanitizeUri
  • tableCellIcons
  • action
  • actions
  • data
  • fireSelect
  • onSelect
  • onUpdate
  • sel
  • update
  • var
  • layoutWithContent

---

概述（中译）

@Js 类 AlertDialog : Dialog

警告对话框通知用户事件，并允许他们采取行动来决定如何进行。

构造函数

字段

方法

插槽详情

这个 addButton(Str key, Str? dis := null, Bool def := false)

向对话框添加一个操作按钮。如果 dis 为 null，则使用 key 作为本地化键查找显示名称。

---

API 正文（英文）

icon

Icon? icon := null

Icon to display in dialog.

---

info

Str info := ""

Optional informational text to display below message.

---

make

new make()

Constructor.

---

msg

Str msg := ""

Primary message text in dialog.

---

onAction

Void onAction(|Str->Bool| f)

Callback when dialog is closed, where key is the button used to dismiss the dialog. Return true to close dialog or false prevent close and keep dialog open.

---

onBeforeOpen

protected virtual override Void onBeforeOpen()

---

width

Str? width := null

Width of content in CSS length, or null for default.

---

AlertSheet

@Js class AlertSheet : Sheet

Alert sheets inform the user of an event and allow them to take action of how to proceed.

Constructors

make	Constructor.

Fields

icon	Icon to display in sheet.
info	Optional informational text to display below message.
msg	Primary message text in sheet.

Methods

addButton	Add an action button to sheet.
onAction	Callback when sheet is closed, where key is the button used to dismiss the sheet.
onBeforeOpen

Slot Details

---

addButton

This addButton(Str key, Str? dis := null, Bool def := false)

Add an action button to sheet. If dis is null, then lookup display name using key as the locale key.

---

icon

Icon? icon := null

Icon to display in sheet.

---

info

Str info := ""

Optional informational text to display below message.

---

make

new make()

Constructor.

---

msg

Str msg := ""

Primary message text in sheet.

---

onAction

Void onAction(|Str->Bool| f)

Callback when sheet is closed, where key is the button used to dismiss the sheet. Return true to close sheet or false prevent close and keep sheet open.

---

onBeforeOpen

protected virtual override Void onBeforeOpen()

---

AsyncContentDialog

@Js class AsyncContentDialog : ContentDialog

AsyncContentDialog extends ContentDialog with async content loading.

Constructors

make	Constructor.

Methods

eval	Open dialog and evalute the given axon expression using UiSession and pass results to callback function.

Slot Details

---

eval

Void eval(UiSession session, Str expr, |ContentDialog,Grid| onComplete)

Open dialog and evalute the given axon expression using UiSession and pass results to callback function.

---

make

new make()

Constructor.

---

ContentDialog

@Js class ContentDialog : Dialog

Content dialogs display content with a standard button bar across the bottom of the dialog.

Constructors

make	Constructor.

Fields

aux	Auxiliary content is displayed below content to the left of the action buttons.
content	Content of dialog
height	Height of content in CSS length, or null for default.
width	Width of content in CSS length, or null for default.

Methods

addButton	Add an action button to dialog.
addButtonGap	Add a button gap to dialog.
button	Get button instance for key.
onAction	Callback when dialog is closed, where key is the button used to dismiss the dialog.
onBeforeOpen

Slot Details

---

addButton

This addButton(Str key, Str? dis := null, Bool def := false)

Add an action button to dialog. If dis is null, then lookup display name using key as the locale key.

---

addButtonGap

This addButtonGap()

Add a button gap to dialog.

---

aux

Elem? aux

Auxiliary content is displayed below content to the left of the action buttons.

---

button

Button button(Str key)

Get button instance for key.

---

content

Elem? content

Content of dialog

---

height

Str? height := null

Height of content in CSS length, or null for default.

---

make

new make()

Constructor.

---

onAction

Void onAction(|Str->Bool| f)

Callback when dialog is closed, where key is the button used to dismiss the dialog. Return true to close dialog or false prevent close and keep dialog open.

---

onBeforeOpen

protected virtual override Void onBeforeOpen()

---

width

Str? width := null

Width of content in CSS length, or null for default.

---

Form

@Js abstract class Form : Box

Form edits a list of ValDefs.

Constructors

make	It-block constructor.

Fields

defs	List of ValDefs to edit.
rec	Original rec instance.
session	UiSession instance.

Methods

dialog	Create a dialog for this form.
makeInput	Make an Input instance for given ValDef.
modified	Has form been modified?
save	Save form and return changes, or throw Err if failed to save.

Slot Details

---

defs

ValDef[] defs

List of ValDefs to edit.

---

dialog

virtual ContentDialog dialog()

Create a dialog for this form.

---

make

new make(|This| f)

It-block constructor.

---

makeInput

protected Input makeInput(ValDef def)

Make an Input instance for given ValDef.

---

modified

abstract Bool modified()

Has form been modified?

---

rec

const Dict rec

Original rec instance.

---

save

abstract Dict save()

Save form and return changes, or throw Err if failed to save.

---

session

const UiSession session

UiSession instance.

---

GridTable

@Js class GridTable : Table

GridTable provides specialized visualization for a Grid

Constructors

make

Methods

grid	Grid for this table.
gridModel	GridTableModel for this table.
onMouseDown	Callback when a table cell is pressed.
onNav	Callback when GridTableModel.navCols column is clicked in a table row.
selRows	Convenience to get selected rows as Dict[].

Slot Details

---

grid

Grid grid()

Grid for this table.

---

gridModel

GridTableModel gridModel()

GridTableModel for this table.

---

make

new make()

---

onMouseDown

virtual Void onMouseDown(TableEvent e)

Callback when a table cell is pressed.

---

onNav

Void onNav(|Str,Dict| f)

Callback when GridTableModel.navCols column is clicked in a table row.

---

selRows

Dict[] selRows()

Convenience to get selected rows as Dict[].

---

GridTableModel

@Js class GridTableModel : TableModel

GridTableModel for GridTable

Constructors

make	Constructor.

Fields

navCols	Columns that display as navigation colums.
session	UiSession

Methods

colWidth
cols	Columns for this table.
grid	Grid this table is modeling.
isVisibleDef
item
numCols
numRows
onCell
onHeader
prefWidth	Get preferred width of column.
rowHeight
sortCompare

Slot Details

---

colWidth

virtual override Int colWidth(Int c)

---

cols

Col[] cols()

Columns for this table. Defaults to all columns in grid.

---

grid

Grid grid()

Grid this table is modeling.

---

isVisibleDef

virtual override Bool isVisibleDef(Int col)

---

item

virtual override Obj item(Int row)

---

make

new make(UiSession session, Grid grid, Str[]? cols := null)

Constructor.

---

navCols

Str[] navCols := Str[,]

Columns that display as navigation colums. A nav column is represnted with an arrow on the right side of the cell. When this arrow is pressed, the GridTable.onNav callback is invoked with the given column name and row.

---

numCols

virtual override Int numCols()

---

numRows

virtual override Int numRows()

---

onCell

virtual override Void onCell(Elem cell, Int c, Int r, TableFlags flags)

---

onHeader

virtual override Void onHeader(Elem header, Int c)

---

prefWidth

virtual Int prefWidth(Col col)

Get preferred width of column.

---

rowHeight

virtual override Int rowHeight()

---

session

const UiSession session

UiSession

---

sortCompare

virtual override Int sortCompare(Int c, Int row1, Int row2)

---

Icon

@Js class Icon : Elem

Icon displays an SVG icon using a <img> node.

Constructors

make	Construct a new Icon instance.

Methods

color	Convenience for make(name, "color", null)
onParent
outline	Convenience for make(name, "outline", color)
resize	Resize icon.
solid	Convenience for make(name, "solid", color)

Slot Details

---

color

static Icon color(Str name)

Convenience for make(name, "color", null)

---

make

new make(Str name, Str style, Str? color)

Construct a new Icon instance.

---

onParent

protected virtual override Void onParent(Elem p)

---

outline

static Icon outline(Str name, Str color := "#333")

Convenience for make(name, "outline", color)

---

resize

This resize(Str size)

Resize icon.

---

solid

static Icon solid(Str name, Str color := "#333")

Convenience for make(name, "solid", color)

---

Input

@Js abstract class Input : Elem

Input is a user interface field to display and input values. See Fantom

Constructors

make	Sub-class constructor

Fields

def	Value type definition
modified	Has this field been modified since last load or save.
ro	Is this field set to readonly or editable.
session	UiSession

Methods

load	Load tag value into field.
makeForDef	Construct input field for given definition and value
makeForTag	Construct the best input to use for the tag name and value.
onLoad	Override callback to load value.
onModify	Callback when field has been modified.
onRO	Override callback when ro is changed.
onSave	Override callback to save value.
save	Save current field input to new tag value.

Slot Details

---

def

const ValDef def

Value type definition

---

load

This load(Obj val)

Load tag value into field.

---

make

new make()

Sub-class constructor

---

makeForDef

static Input makeForDef(UiSession session, ValDef def, Obj val)

Construct input field for given definition and value

---

makeForTag

static Input makeForTag(UiSession session, Str name, Obj val)

Construct the best input to use for the tag name and value.

---

modified

Bool modified := false { protected set }

Has this field been modified since last load or save.

---

onLoad

protected abstract Void onLoad(Obj val)

Override callback to load value.

---

onModify

Void onModify(|Input| f)

Callback when field has been modified.

---

onRO

protected abstract Void onRO()

Override callback when ro is changed.

---

onSave

protected abstract Obj onSave()

Override callback to save value.

---

ro

Bool ro := false

Is this field set to readonly or editable.

---

save

Obj save()

Save current field input to new tag value.

---

session

const UiSession session

UiSession

---

TabBox

@Js class TabBox : CardBox

TabBox extends CardBox to create tab buttons that can be used to display a given card. The tab buttons are not mounted inside this element, so it's the caller's responsibility to parent them in the desired layout.

Fields

selIndex	Index of currently selected tab.

Methods

addTab	Add a new card for tab name.
onBeforeTab	Callback before a tab changes.
tabs	Get tab widget.

Slot Details

---

addTab

This addTab(Str name, Elem card, |ToggleButton|? f := null)

Add a new card for tab name.

---

onBeforeTab

Void onBeforeTab(|TabBox,Int->Bool| f)

Callback before a tab changes. Return true to change the tab, or false to remain on the current tab.

---

selIndex

virtual override Int? selIndex

Index of currently selected tab.

---

tabs

Elem tabs()

Get tab widget.

---

UiAction

@Js class UiAction : Obj

UiAction is the user interface component of an action.

Fields

view	Parent view.

Methods

button	Create a new Button to invoke this action.
invoke	Invoke this action.
meta	Action meta data
updateView

Slot Details

---

button

Button button()

Create a new Button to invoke this action.

---

invoke

Void invoke(Obj? args := null)

Invoke this action.

---

meta

Dict meta()

Action meta data

---

updateView

Void updateView(Str:Obj changes := [:])

---

view

UiView view { private set }

Parent view.

---

UiSession

@Js const class UiSession : Session

UiSession is the top level API for modeling the UI session to a server

Fields

attestKey	Attestation session key used as secondary verification of cookie key
user	User account for authenticated session

Methods

key	Session key
proj	Convenience for space.proj(false)

Slot Details

---

attestKey

virtual const override Str attestKey

Attestation session key used as secondary verification of cookie key

---

key

virtual override Str key()

Session key

---

proj

ProjDef? proj()

Convenience for space.proj(false)

---

user

virtual const override User user

User account for authenticated session

---

UiUtil

@Js class UiUtil : Obj

Fresco utilities

Fields

fontBlack	Inline CSS style for black font weight.
fontBold	Inline CSS style for bold font weight.
fontLight	Inline CSS style for light font weight.

Methods

anchorElem	Make anchor element for user defined URI with security checks
asyncMenu	Create an Menu that displays a Spinner until content is loaded.
closest	Find the closest ancestor of given elem that is of type type, or null if none found.
containedIn	Return true if elem is contained in a parent of type type.
encodeUri	Encode URI with security checks
errTrace	Create a elem to display the given err with trace.
fandocParse	Parse fandoc
fandocToElem	Get HTML for fandoc source an elem
fandocToHtml	Get HTML for fandoc source Str text.
helpButton	Create the standard "help" button to display a help fandoc.
hsep	Create a horizontal separator element with optional padding.
iconCss	Convenience to wrap iconUri inside a url(...) CSS property string.
iconUri	Get SVG icon URI for given style and color.
itemToElem	PimItem to element
makeAbsBox	Create an absolutely positioned Box that defaults left/top to 0px and width/height to 100%
makeCenterBox	Wrap content in an element that centers content both horizontally and vertically in parent.
makeEmptyBox	Create an empty bordered Box.
makeSpinnerBox	Create an empty bordered Box with a Spinner instance.
menuSep	Create a separator element for use in menus.
sanitizeUri	Sanity URI already encoded
tableCellIcons	Configure given table cell node to use given left/right aligned Icons as background images.
tabs	Create a ButtonGroup to function as tab bar.

Slot Details

---

anchorElem

static Elem anchorElem(Uri uri, Str dis)

Make anchor element for user defined URI with security checks

---

asyncMenu

static Menu asyncMenu(Menu? menu := null)

Create an Menu that displays a Spinner until content is loaded.

---

closest

static Elem? closest(Elem elem, Type type)

Find the closest ancestor of given elem that is of type type, or null if none found.

---

containedIn

static Bool containedIn(Elem elem, Type type)

Return true if elem is contained in a parent of type type.

---

encodeUri

static Str encodeUri(Uri uri)

Encode URI with security checks

---

errTrace

static Elem errTrace(Grid err)

Create a elem to display the given err with trace.

---

fandocParse

static Doc fandocParse(Str s)

Parse fandoc

---

fandocToElem

static Elem fandocToElem(Str text)

Get HTML for fandoc source an elem

---

fandocToHtml

static Str fandocToHtml(Str text)

Get HTML for fandoc source Str text.

---

fontBlack

const static Str fontBlack := "font-weight:700"

Inline CSS style for black font weight.

---

fontBold

const static Str fontBold := "font-weight:500"

Inline CSS style for bold font weight.

---

fontLight

const static Str fontLight := "font-weight:300"

Inline CSS style for light font weight.

---

helpButton

static Button helpButton(Str fandoc)

Create the standard "help" button to display a help fandoc.

---

hsep

static Elem hsep(Str padding := "10px 0")

Create a horizontal separator element with optional padding.

---

iconCss

static Str iconCss(Str name, Str style, Str? color)

Convenience to wrap iconUri inside a url(...) CSS property string. See iconUri.

---

iconUri

static Uri iconUri(Str name, Str style, Str? color)

Get SVG icon URI for given style and color. The style value may be any of "color", "solid", or "outline". If color is non-null outline and solid icons will be colorized. The color field has no effect on color style.

---

itemToElem

static Elem itemToElem(PimItem item, Dict opts := Etc.emptyDict())

PimItem to element

---

makeAbsBox

static Box makeAbsBox()

Create an absolutely positioned Box that defaults left/top to 0px and width/height to 100%

---

makeCenterBox

static Elem makeCenterBox(Elem content)

Wrap content in an element that centers content both horizontally and vertically in parent.

---

makeEmptyBox

static Box makeEmptyBox()

Create an empty bordered Box.

---

makeSpinnerBox

static Box makeSpinnerBox()

Create an empty bordered Box with a Spinner instance.

---

menuSep

static Elem menuSep()

Create a separator element for use in menus.

---

sanitizeUri

static Str sanitizeUri(Str uri)

Sanity URI already encoded

---

tableCellIcons

static Void tableCellIcons(Elem cell, Uri[]? left, Uri[]? right, TableFlags flags)

Configure given table cell node to use given left/right aligned Icons as background images.

---

tabs

static ButtonGroup tabs(Str[] names)

Create a ButtonGroup to function as tab bar.

---

UiView

@Js abstract class UiView : Box

UiView is the web browser implementation for a ViewNode. See Fantom.

Constructors

make	Constructor.

Fields

actions	Actions for this view.
session	Session instance.

Methods

action	Lookup an action by name
data	Get grid data for given name, or first grid if name is null.
fireSelect	Fire onSelect callback to indicate selection updated.
onSelect	Callback when sel is updated.
onUpdate	Callback when either new data is available or a var has been modified.
sel	The selected records or empty list if none selected or not applicable.
update	Update view with given state.
var	Return the variable value for the given name, or return null if name not found.

Slot Details

---

action

UiAction? action(Str name, Bool checked := true)

Lookup an action by name

---

actions

UiAction[] actions { private set }

Actions for this view.

---

data

Grid? data(Str? name := null, Bool checked := true)

Get grid data for given name, or first grid if name is null. If data cannot be found and checked is true throws Err, otherwise returns null.

---

fireSelect

protected Void fireSelect()

Fire onSelect callback to indicate selection updated.

---

make

new make()

Constructor.

---

onSelect

Void onSelect(|This| f)

Callback when sel is updated.

---

onUpdate

virtual Void onUpdate()

Callback when either new data is available or a var has been modified. The current data grid is available via the data method.

---

sel

virtual Dict[] sel()

The selected records or empty list if none selected or not applicable.

---

session

const UiSession session

Session instance.

---

update

Void update(Str:Obj changes := [:], Dict opts := Etc.emptyDict())

Update view with given state.

---

var

Obj? var(Str name)

Return the variable value for the given name, or return null if name not found.

---

UiViewBar

@Js class UiViewBar : Box

UiViewBar provides default support for UiView inputs and actions.

Constructors

make	Constructor.

Methods

layoutWithContent	Return a new DOM node that lays out this viewbar with given content.

Slot Details

---

layoutWithContent

Elem layoutWithContent(Elem content)

Return a new DOM node that lays out this viewbar with given content.

---

make

new make(UiView view)

Constructor.