126 lines
5.9 KiB
Plaintext
126 lines
5.9 KiB
Plaintext
USING: help gadgets gadgets-buttons gadgets-panes styles shells
|
|
freetype ;
|
|
|
|
ARTICLE: "ui-glossary" "UI glossary"
|
|
{ $table
|
|
{ "color specifier"
|
|
{ "an array of four elements, all numbers between 0 and 1:"
|
|
{ $list
|
|
"red"
|
|
"green"
|
|
"blue"
|
|
"alpha - 0 is completely transparent, 1 is completely opaque"
|
|
}
|
|
}
|
|
}
|
|
{ "dimension" "a pair of integers denoting pixel size on screen" }
|
|
{ "font specifier"
|
|
{ "an array of three elements:"
|
|
{ $list
|
|
{ "font family - one of " { $snippet "serif" } ", " { $snippet "sans-serif" } " or " { $snippet "monospace" } }
|
|
{ "font style - one of " { $link plain } ", " { $link bold } ", " { $link italic } " or " { $link bold-italic } }
|
|
"font size in points"
|
|
}
|
|
}
|
|
}
|
|
{ "gadget" { "a graphical element which responds to user input. Gadgets are tuples which (directly or indirectly) delegate to " { $link gadget } " instances." } }
|
|
{ "label specifier" { "a string, " { $link f } " or a gadget. See " { $link >label } " and " { $link "gadgets-buttons" } } }
|
|
{ "point" "a pair of integers denoting a pixel location on screen" }
|
|
} ;
|
|
|
|
ARTICLE: "building-ui" "Building user interfaces"
|
|
"A gadget is a graphical element which responds to user input. Gadgets are implemented as tuples which (directly or indirectly) delegate to instances of " { $link gadget } ", which in turn delegates to " { $link rect } "."
|
|
{ $subsection gadget }
|
|
"Gadgets are arranged in a hierarchy, and all visible gadgets except for instances of " { $link world } " are contained in a parent gadget, stored in the " { $link gadget-parent } " slot."
|
|
{ $subsection "ui-geometry" }
|
|
{ $subsection "ui-layouts" }
|
|
{ $subsection "gadgets" }
|
|
{ $subsection "models" }
|
|
{ $subsection "ui-windows" } ;
|
|
|
|
ARTICLE: "ui-geometry" "Gadget geometry"
|
|
"Instances of " { $link gadget } " (and thus all gadgets) delegate to rectangles which specify the gadget's bounding box:"
|
|
{ $subsection rect }
|
|
"Rectangles can be taken apart:"
|
|
{ $subsection rect-loc }
|
|
{ $subsection rect-dim }
|
|
{ $subsection rect-bounds }
|
|
{ $subsection rect-extent }
|
|
"New rectangles can be created:"
|
|
{ $subsection <zero-rect> }
|
|
{ $subsection <rect> }
|
|
{ $subsection <extent-rect> }
|
|
"More utility words for working with rectangles:"
|
|
{ $subsection offset-rect }
|
|
{ $subsection rect-intersect }
|
|
{ $subsection intersects? }
|
|
"A gadget's bounding box is always relative to its parent:"
|
|
{ $subsection gadget-parent }
|
|
"Word for converting from a child gadget's co-ordinate system to a parent's:"
|
|
{ $subsection relative-loc }
|
|
{ $subsection screen-loc }
|
|
"Hit testing:"
|
|
{ $subsection pick-up }
|
|
{ $subsection children-on } ;
|
|
|
|
ARTICLE: "ui-windows" "Top-level windows"
|
|
"Opening a top-level window:"
|
|
{ $subsection open-window }
|
|
"Finding top-level windows:"
|
|
{ $subsection find-window }
|
|
"Top-level windows are stored in a global variable:"
|
|
{ $subsection windows }
|
|
"When a gadget is displayed in a top-level window, or added to a parent which is already showing in a top-level window, a generic word is called allowing the gadget to perform initialization tasks:"
|
|
{ $subsection graft* }
|
|
"When the gadget is removed from a parent shown in a top-level window, or when the top-level window is closed, a corresponding generic word is called to clean up:"
|
|
{ $subsection ungraft* }
|
|
"The root of the gadget hierarchy in a window is a special gadget which is rarely operated on directly, but it is helpful to know it exists:"
|
|
{ $subsection world }
|
|
"Opening a new top-level window is not the only way to display gadgets to the user. It is also possible to embed gadgets directly in the " { $link "ui-listener" } "; see " { $link gadget. } "." ;
|
|
|
|
ARTICLE: "ui-backend" "Developing UI backends"
|
|
"None of the words documented in this section should be called directly by user code. They are only of interest when developing new UI backends."
|
|
{ $subsection "ui-backend-init" }
|
|
{ $subsection "ui-backend-windows" }
|
|
"UI backends may implement the " { $link "clipboard-protocol" } "." ;
|
|
|
|
ARTICLE: "ui-backend-init" "UI initialization and the event loop"
|
|
"An UI backend is required to define a word to start the UI:"
|
|
{ $subsection ui }
|
|
"This word should contain backend initialization, together with some boilerplate:"
|
|
{ $code
|
|
"IN: shells"
|
|
""
|
|
": ui"
|
|
" ["
|
|
" ... backend-specific initialization ..."
|
|
" start-ui"
|
|
" ... more backend-specific initialization ..."
|
|
" ... start event loop here ..."
|
|
" ] with-freetype ;"
|
|
}
|
|
"Two important constituents of the above word:"
|
|
{ $subsection start-ui }
|
|
{ $subsection with-freetype }
|
|
"The " { $link ui } " word must not return until the event loop has stopped and the UI has been shut down."
|
|
$terpri
|
|
"The event loop must not block. Instead, it should poll for pending events, then call " { $link ui-step } ", which performs pending layout, runs timers and sleeps for 10 milliseconds, or until a Factor thread wakes up." ;
|
|
|
|
ARTICLE: "ui-backend-windows" "UI backend window management"
|
|
"The high-level " { $link open-window } " word eventually calls a low-level word which you must implement:"
|
|
{ $subsection open-window* }
|
|
"This word should create a native window, store some kind of handle in the " { $link world-handle } " slot, then call two words:"
|
|
{ $subsection register-window }
|
|
{ $subsection start-world }
|
|
"The following words must also be implemented:"
|
|
{ $subsection set-title }
|
|
{ $subsection raise-window }
|
|
"When a world needs to be redrawn, the UI will call a word automatically:"
|
|
{ $subsection draw-world }
|
|
"This word can also be called directly if the UI backend is notified by the window system that window contents have been invalidated. Before and after drawing, two words are called, which the UI backend must implement:"
|
|
{ $subsection select-gl-context }
|
|
{ $subsection flush-gl-context }
|
|
"If the user clicks the window's close box, you must call the following two words in sequence:"
|
|
{ $subsection stop-world }
|
|
{ $subsection unregister-window } ;
|