Standard controls

This chapter is short: it gives you an idea of all the controls and tools that exist in x4js, and what they are for.

The exact properties and methods of each one are in the API reference.

Containers

Control	Description
`Box`, `HBox`, `VBox`	Generic, horizontal and vertical container.
`HSplitBox`, `VSplitBox`	Panels side by side or stacked, resizable by the user.
`StackBox`	Stack of pages, only one of which is visible.
`AssistBox`	Stack of pages walked through in order, for a wizard.
`GridBox`	Grid of rows and columns.
`MasonryBox`	Masonry layout.
`Tabs`	Pages reached through tabs.
`Panel`	Container with a title.
`ScrollView`	Scrolling area.
`Flex`, `Space`	Empty elements: one takes the remaining space, the other has a fixed size.

Control	Description
`Label`	Text, with an optional icon.
`SimpleText`	Text only.
`Icon`	Icon (SVG, CSS variable or image).
`Image`	Image, which can also accept a dropped file.
`Link`	Link.
`Tag`	Short tag, with an optional icon.
`Progress`	Progress bar.
`Gauge`	Needle gauge.
`Rating`	Rating (stars…).
`TickLine`	Mini chart of a series of values, as bars or as a line.
`Chart`	Simple chart: lines, areas, bars, pie, donut.
`Canvas`	Free drawing area.
`SvgComponent`	SVG component, the base of drawn controls.
`Video`	Video player.
`Breadcrumbs`	Breadcrumb trail.

Control	Description
`Button`	Button, with text and/or icon, and an optional menu.
`BtnGroup`	Group of buttons, with predefined ones (`ok`, `cancel`…).
`Input`	Native input field: text, number, date, time, file…
`TextEdit`	Input field with its label.
`TextArea`	Multi-line input.
`Checkbox`, `Radio`, `Switch`	Check box, radio button, switch.
`Slider`	Slider.
`Select`	Native choice list.
`Combobox`	Drop-down list over a known list.
`AutoComplete`	Field with suggestions fetched on demand.
`ColorInput`, `ColorPicker`	Color input and color choice.
`Calendar`	Calendar. Also available as a popup.
`FileDrop`	File drop zone.
`Keyboard`	Virtual keyboard.

Control	Description
`Listbox`	Simple list, with optional columns.
`Treeview`	Tree list.
`Gridview`	Tabular display of a `DataStore`.
`Spreadsheet`	Spreadsheet-like table, editable in place.
`PropertyGrid`	Property editor.

Control	Description
`Popup`	Base of everything displayed above the page.
`Dialog`	Base of dialog boxes.
`MessageBox`, `InputBox`, `PromptBox`	Message, input of a value, input with the editor of your choice.
`ProgressionBox`	Follow-up of a long operation, with texts and errors.
`Menu`	Context or drop-down menu.
`Notification`	Notification to the user.

Tooltips are obtained with the tooltip property, common to all components, after a call to initTooltips( ) at startup.

Tool	Description
`Application`	Singleton that defines the application.
`State`	Observable state of the application.
`DataModel`, `DataStore`, `DataView`	Records, storage, and filtered or sorted views.
`Store`	Cell storage, for `Spreadsheet`.
`Router`	Routing by address.
`_tr`, `addTranslation`…	Translation system.
`Color`, `Rect`, `Point`, `Size`	Colors and geometry.
`dragManager`	Drag and drop.
`Stylesheet`, `ComputedStyle`	Reading and changing styles.
`SvgBuilder`	Building SVG drawings.
`X4PDFBuilder`	PDF generation.

On top of this come many convenient functions to handle dates, strings or the DOM. Have a look at core_tools in the sources to get an idea.

The MonacoEditor code editor is provided separately, through the x4js/monaco import, so that applications that do not use it stay light.