Updates V2 API docs (#3060)

* Updated overview docs

* Updated toc

* Updated docs more
This commit is contained in:
Tig
2023-12-17 21:52:59 -07:00
committed by GitHub
parent 7f759b573b
commit 49ec9b7342
8 changed files with 346 additions and 415 deletions

View File

@@ -1,30 +1,30 @@
# Configuration Management
Terminal.Gui provides configuration and theme management for Terminal.Gui applications via the [`ConfigurationManager`](~/api/Terminal.Gui.
Terminal.Gui provides persistent configuration settings via the [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) class.
1) **Settings**. Settings are applied to the [`Application`](~/api/Terminal.Gui.Application.yml) class. Settings are accessed via the `Settings` property of the [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) class.
2) **Themes**. Themes are a named collection of settings impacting how applications look. The default theme is named "Default". The built-in configuration stored within the Terminal.Gui library defines two additional themes: "Dark", and "Light". Additional themes can be defined in the configuration files.
3) **AppSettings**. AppSettings allow applicaitons to use the [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) to store and retrieve application-specific settings.
1) **Settings**. Settings are applied to the [`Application`](~/api/Terminal.Gui.Application.yml) class. Settings are accessed via the `Settings` property of [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml).
2) **Themes**. Themes are a named collection of settings impacting how applications look. The default theme is named "Default". Two other built-in themes are provided: "Dark", and "Light". Additional themes can be defined in the configuration files.
3) **AppSettings**. Applications can use the [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) to store and retrieve application-specific settings.
The The [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) will look for configuration files in the `.tui` folder in the user's home directory (e.g. `C:/Users/username/.tui` or `/usr/username/.tui`), the folder where the Terminal.Gui application was launched from (e.g. `./.tui`), or as a resource within the Terminal.Gui application's main assembly.
The [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) will look for configuration files in the `.tui` folder in the user's home directory (e.g. `C:/Users/username/.tui` or `/usr/username/.tui`), the folder where the Terminal.Gui application was launched from (e.g. `./.tui`), or as a resource within the Terminal.Gui application's main assembly.
Settings that will apply to all applications (global settings) reside in files named config.json. Settings that will apply to a specific Terminal.Gui application reside in files named appname.config.json, where appname is the assembly name of the application (e.g. `UICatalog.config.json`).
Settings that will apply to all applications (global settings) reside in files named `config.json`. Settings that will apply to a specific Terminal.Gui application reside in files named `appname.config.json`, where *appname* is the assembly name of the application (e.g. `UICatalog.config.json`).
Settings are applied using the following precedence (higher precedence settings overwrite lower precedence settings):
1. App specific settings found in the users's home directory (`~/.tui/appname.config.json`). -- Highest precedence.
1. App-specific settings in the users's home directory (`~/.tui/appname.config.json`). -- Highest precedence.
2. App specific settings found in the directory the app was launched from (`./.tui/appname.config.json`).
2. App-specific settings in the directory the app was launched from (`./.tui/appname.config.json`).
3. App settings in app resources (`Resources/config.json`).
4. Global settings found in the the user's home directory (`~/.tui/config.json`).
4. Global settings in the the user's home directory (`~/.tui/config.json`).
5. Global settings found in the directory the app was launched from (`./.tui/config.json`).
5. Global settings in the directory the app was launched from (`./.tui/config.json`).
6. Default settings defined in the Terminal.Gui assembly -- Lowest precedence.
6. Default settings in the Terminal.Gui assembly -- Lowest precedence.
The `UI Catalog` application provides an example of how to use the [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) class to load and save configuration files. The `Configuration Editor` scenario provides an editor that allows users to edit the configuration files. UI Catalog also uses a file system watcher to detect changes to the configuration files to tell [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) to reaload them; allowing users to change settings without having to restart the application.
The `UI Catalog` application provides an example of how to use the [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) class to load and save configuration files. The `Configuration Editor` scenario provides an editor that allows users to edit the configuration files. UI Catalog also uses a file system watcher to detect changes to the configuration files to tell [`ConfigurationManager`](~/api/Terminal.Gui.ConfigurationManager.yml) to reload them; allowing users to change settings without having to restart the application.
# What Can Be Configured
@@ -32,20 +32,20 @@ The `UI Catalog` application provides an example of how to use the [`Configurati
(Note, this list may not be complete; search the source code for `SerializableConfigurationProperty` to find all settings that can be configured.)
* [Application.QuitKey](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_QuitKey)
* [Application.AlternateForwardKey](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_AlternateForwardKey)
* [Application.AlternateBackwardKey](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_AlternateBackwardKey)
* [Application.UseSystemConsole](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_UseSystemConsole)
* [Application.IsMouseDisabled](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_IsMouseDisabled)
* [Application.EnableConsoleScrolling](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_EnableConsoleScrolling)
* [Application.QuitKey](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_QuitKey)
* [Application.AlternateForwardKey](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_AlternateForwardKey)
* [Application.AlternateBackwardKey](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_AlternateBackwardKey)
* [Application.UseSystemConsole](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_UseSystemConsole)
* [Application.IsMouseDisabled](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_IsMouseDisabled)
* [Application.EnableConsoleScrolling](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_EnableConsoleScrolling)
## Glyphs
Defines the standard set of glyphs used for standard views (e.g. the default indicator for [Button](~/api/Terminal.Gui.Button.yml)) and line drawing (e.g. [LineCanvas](~/api/Terminal.Gui.LineCanvas.yml)).
The standard set of glyphs used for standard views (e.g. the default indicator for [Button](~/api/Terminal.Gui.Button.yml)) and line drawing (e.g. [LineCanvas](~/api/Terminal.Gui.LineCanvas.yml)) can be configured.
The value can be either a decimal number or a string. The string may be:
- A unicode char (e.g. "☑")
- A Unicode char (e.g. "☑")
- A hex value in U+ format (e.g. "U+2611")
- A hex value in UTF-16 format (e.g. "\\u2611")
@@ -60,11 +60,9 @@ The value can be either a decimal number or a string. The string may be:
## Themes
A Theme is a named collection of settings that impact the visual style of Terminal.Gui applications. The default theme is named "Default". The built-in configuration stored within the Terminal.Gui library defines two more themes: "Dark", and "Light". Additional themes can be defined in the configuration files.
A Theme is a named collection of settings that impact the visual style of Terminal.Gui applications. The default theme is named "Default". The built-in configuration within the Terminal.Gui library defines two more themes: "Dark", and "Light". Additional themes can be defined in the configuration files. The JSON property `Theme` defines the name of the theme that will be used. If the theme is not found, the default theme will be used.
The Json property `Theme` defines the name of the theme that will be used. If the theme is not found, the default theme will be used.
Themes support defining ColorSchemes as well as various default settings for Views. Both the default color schemes and user defined color schemes can be configured. See [ColorSchemes](~/api/Terminal.Gui.Colors.yml) for more information.
Themes support defining ColorSchemes as well as various default settings for Views. Both the default color schemes and user-defined color schemes can be configured. See [ColorSchemes](~/api/Terminal.Gui.Colors.yml) for more information.
# Example Configuration File
@@ -123,6 +121,12 @@ Themes support defining ColorSchemes as well as various default settings for Vie
}
```
# Key Bindings
Key bindings are defined in the `KeyBindings` property of the configuration file. The value is an array of objects, each object defining a key binding. The key binding object has the following properties:
- `Key`: The key to bind to. The format is a string describing the key (e.g. "q", "Q, "Ctrl-Q"). Function keys are specified as "F1", "F2", etc.
# Configuration File Schema
Settings are defined in JSON format, according to the schema found here:

65
docfx/docs/drawing.md Normal file
View File

@@ -0,0 +1,65 @@
# Drawing (Text and Color)
Terminal.Gui supports color on all platforms, including Windows, Mac, and Linux. The default colors are 24-bit RGB colors, but the library will gracefully degrade to 16-colors if the terminal does not support 24-bit color, and black and white if the terminal does not support 16-colors.
## Cell
The `Cell` class represents a single cell on the screen. It contains a character and an attribute. The character is of type `Rune` and the attribute is of type `Attribute`.
Normally `Cell` is not exposed directly to the developer. Instead, the `ConsoleDriver` classes manage the `Cell` array that represents the screen.
To draw a `Cell` to the screen, first use `View.Move` to specify the row and column coordinates and then use the `View.AddRune` method to draw a single glyph. To draw a string, use `View.AddStr`.
## Unicode
Terminal.Gui supports the full range of Unicode/wide characters. This includes emoji, CJK characters, and other wide characters. For Unicode characters that require more than one cell, `AddRune` and the `ConsoleDriver` automatically manage the cells. Extension methods to `Rune` are provided to determine if a `Rune` is a wide character and to get the width of a `Rune`.
See the Character Map sample app in the [UI Catalog](https://gui-cs.github.io/Terminal.GuiV2Docs/docs/overview.html#ui-catalog) for examples of Unicode characters.
## Attribute
The `Attribute` class represents the formatting attributes of a `Cell`. It exposes properties for the foreground and background colors. The foreground and background colors are of type `Color`. In the future, it will expose properties for bold, underline, and other formatting attributes.
## Color
The `Color` class represents a color. It provides automatic mapping between the legacy 4-bit (16-color) system and 24-bit colors. It contains properties for the red, green, and blue components of the color. The red, green, and blue components are of type `byte`. The `Color` class also contains a static property for each of the 16 ANSI colors.
## Color Schemes
Terminal.Gui supports named collection of colors called `ColorScheme`s. Three built-in color schemes are provided: "Default", "Dark", and "Light". Additional color schemes can be defined via [Configuration Manager]().
Color schemes support defining colors for various states of a view. The following states are supported:
* Normal - The color of normal text.
* HotNormal - The color of text indicating a [Hotkey]().
* Focus - The color of text that indicates the view has focus.
* HotFocus - The color of text indicating a hot key, when the view has focus.
* Disabled - The state of a view when it is disabled.
## Text Formatting
Terminal.Gui supports text formatting using the [TextFormatter]() class. The `TextFormatter` class provides methods for formatting text using the following formatting options:
* Horizontal Alignment - Left, Center, Right
* Vertical Alignment - Top, Middle, Bottom
* Word Wrap - Enabled or Disabled
* Formatting Hot Keys
## Glyphs
Terminal.Gui supports rendering glyphs using the `Glyph` class. The `Glyph` class represents a single glyph. It contains a character and an attribute. The character is of type `Rune` and the attribute is of type `Attribute`. A set of static properties are provided for the standard glyphs used for standard views (e.g. the default indicator for [Button](~/api/Terminal.Gui.Button.yml)) and line drawing (e.g. [LineCanvas](~/api/Terminal.Gui.LineCanvas.yml)).
## Line Drawing
Terminal.Gui supports drawing lines and shapes using box-drawing glyphs. The `LineCanvas` class provides *auto join*, a smart TUI drawing system that automatically selects the correct line/box drawing glyphs for intersections making drawing complex shapes easy. See [Line Canvas](https://gui-cs.github.io/Terminal.GuiV2Docs/docs/overview.html#line-canvas) for details. The `Snake` and `Line Drawing` Scenarios in the [UI Catalog](https://gui-cs.github.io/Terminal.GuiV2Docs/docs/overview.html#ui-catalog) sample app are both examples of the power of the `LineCanvas`.
## Thickness
Describes the thickness of a frame around a rectangle. The thickness is specified for each side of the rectangle using a `Thickness` object. The `Thickness` object contains properties for the left, top, right, and bottom thickness. The `Frame` class uses `Thickness` to support drawing the frame around a view. The `View` class contains three `Frame`-dervied properties:
* `Margin` - The space between the view and its peers (other views at the same level in the view hierarchy).
* `Border` - The space between the view and its Padding. This is where the frame, title, and other "Adornments" are drawn.
* `Padding` - The space between the view and its content. This is where the text, images, and other content is drawn. The inner rectangle of `Padding` is the `Bounds` of a view.
See [View](~/api/Terminal.Gui.View.yml) for details.

View File

@@ -1,6 +1,17 @@
# Terminal.Gui v2 Overview
A toolkit for building rich console apps for .NET, .NET Core, and Mono that works on Windows, the Mac, and Linux/Unix.
A toolkit for building rich Terminal User Interface (TUI) apps with .NET that run on Windows, the Mac, and Linux/Unix.
## Features
* **[Cross Platform](drivers.md)** - Windows, Mac, and Linux. Terminal drivers for Curses, Windows, and the .NET Console mean apps will work well on both color and monochrome terminals. Apps also work over SSH.
* **[Templates](getting-started.md)** - The `dotnet new` command can be used to create a new Terminal.Gui app.
* **[Keyboard](keyboard.md) and [Mouse](mouse.md) Input** - The library handles all the details of input processing and provides a simple event-based API for applications to consume.
* **[Extensible Widgets](https://gui-cs.github.io/Terminal.GuiV2Docs/api/Terminal.Gui.View.html)** - All visible UI elements are subclasses of the `View` class, and these in turn can contain an arbitrary number of sub-views. Dozens of [Built-in Views](views.md) are provided.
* **[Flexible Layout](layout.md)** - *Computed Layout* makes it easy to lay out controls relative to each other and enables dynamic terminal UIs. *Absolute Layout* allows for precise control over the position and size of controls.
* **[Clipboard support](https://gui-cs.github.io/Terminal.GuiV2Docs/api/Terminal.Gui.Clipboard.html)** - Cut, Copy, and Paste is provided through the [`Clipboard`] class.
* **Advanced App Features** - The [Mainloop](https://gui-cs.github.io/Terminal.GuiV2Docs/api/Terminal.Gui.MainLoop.html) supports processing events, idle handlers, and timers. Most classes are safe for threading.
* **[Reactive Extensions](https://github.com/dotnet/reactive)** - Use reactive extensions and benefit from increased code readability, and the ability to apply the MVVM pattern and [ReactiveUI](https://www.reactiveui.net/) data bindings. See the [source code](https://github.com/gui-cs/Terminal.GuiV2Docs/tree/master/ReactiveExample) of a sample app.
## Conceptual Documentation
@@ -12,131 +23,78 @@
* [TableView Deep Dive](tableview.md)
* [TreeView Deep Dive](treeview.md)
## Features
* **Cross Platform** - Windows, Mac, and Linux. Terminal drivers for Curses, [Windows Console](https://github.com/gui-cs/Terminal.GuiV2Docs/issues/27), and the .NET Console mean apps will work well on both color and monochrome terminals.
* **Keyboard and Mouse Input** - Both keyboard and mouse input are supported, including support for drag & drop.
* **[Flexible Layout](https://gui-cs.github.io/Terminal.GuiV2Docs/docs/overview.html#layout)** - Supports both *Absolute layout* and an innovative *Computed Layout* system. *Computed Layout* makes it easy to lay out controls relative to each other and enables dynamic terminal UIs.
* **Clipboard support** - Cut, Copy, and Paste of text provided through the [`Clipboard`](https://gui-cs.github.io/Terminal.GuiV2Docs/api/Terminal.Gui.Clipboard.html) class.
* **[Arbitrary Views](https://gui-cs.github.io/Terminal.GuiV2Docs/api/Terminal.Gui.View.html)** - All visible UI elements are subclasses of the `View` class, and these in turn can contain an arbitrary number of sub-views.
* **Advanced App Features** - The [Mainloop](https://gui-cs.github.io/Terminal.GuiV2Docs/api/Terminal.Gui.MainLoop.html) supports processing events, idle handlers, timers, and monitoring file
descriptors. Most classes are safe for threading.
* **Reactive Extensions** - Use [reactive extensions](https://github.com/dotnet/reactive) and benefit from increased code readability, and the ability to apply the MVVM pattern and [ReactiveUI](https://www.reactiveui.net/) data bindings. See the [source code](https://github.com/gui-cs/Terminal.GuiV2Docs/tree/master/ReactiveExample) of a sample app in order to learn how to achieve this.
`Terminal.Gui` is a library intended to create console-based
applications using C#. The framework has been designed to make it
easy to write applications that will work on monochrome terminals, as
well as modern color terminals with mouse support.
This library works across Windows, Linux and MacOS.
This library provides a text-based toolkit as works in a way similar
to graphic toolkits. There are many controls that can be used to
create your applications and it is event based, meaning that you
create the user interface, hook up various events and then let the
a processing loop run your application, and your code is invoked via
one or more callbacks.
The simplest application looks like this:
```csharp
using Terminal.Gui;
class Demo {
static int Main ()
{
Application.Init ();
var n = MessageBox.Query (50, 7,
"Question", "Do you like console apps?", "Yes", "No");
Application.Shutdown ();
return n;
}
}
Application.Init ();
var n = MessageBox.Query (50, 5, "Question", "Do you like TUI apps?", "Yes", "No");
Application.Shutdown ();
return n;
```
This example shows a prompt and returns an integer value depending on
which value was selected by the user (Yes, No, or if they use chose
not to make a decision and instead pressed the ESC key).
This example shows a prompt and returns an integer value depending on which value was selected by the user.
More interesting user interfaces can be created by composing some of
the various views that are included. In the following sections, you
will see how applications are put together.
More interesting user interfaces can be created by composing some of the various `View` classes that are included.
In the example above, you can see that we have initialized the runtime by calling
[Applicaton.Init](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_Init_Terminal_Gui_ConsoleDriver_) method in the Application class - this sets up the environment, initializes the color
schemes available for your application and clears the screen to start your application.
In the example above, [Applicaton.Init](~/api/Terminal.Gui.Application.yml#Terminal_Gui_Application_Init_Terminal_Gui_ConsoleDriver_) sets up the environment, initializes the color schemes, and clears the screen to start the application.
The [Application](~/api/Terminal.Gui.Application.yml) class, additionally creates an instance of the [Toplevel](~/api/Terminal.Gui.Toplevel.yml) class that is ready to be consumed,
this instance is available in the `Application.Top` property, and can be used like this:
The [Application](~/api/Terminal.Gui.Application.yml) class additionally creates an instance of the [Toplevel](~/api/Terminal.Gui.Toplevel.yml) View available in the `Application.Top` property, and can be used like this:
```csharp
using Terminal.Gui;
Application.Init ();
var label = new Label ("Hello World") {
X = Pos.Center (),
Y = Pos.Center (),
Height = 1,
};
Application.Top.Add (label);
Application.Run ();
Application.Shutdown ();
```
This example includes a menu bar at the top of the screen and a button that shows a message box when clicked:
```csharp
using Terminal.Gui;
class Demo {
static int Main ()
{
Application.Init ();
Application.Init ();
var menu = new MenuBar (new MenuBarItem [] {
new MenuBarItem ("_File", new MenuItem [] {
new MenuItem ("_Quit", "", () => {
Application.RequestStop ();
})
}),
});
var label = new Label ("Hello World") {
X = Pos.Center (),
Y = Pos.Center (),
Height = 1,
};
Application.Top.Add (label);
Application.Run ();
Application.Shutdown ();
}
}
```
var button = new Button ("_Hello") {
X = 0,
Y = Pos.Bottom (menu),
Width = Dim.Fill (),
Height = Dim.Fill () - 1
};
button.Clicked += () => {
MessageBox.Query (50, 5, "Hi", "Hello World! This is a message box", "Ok");
};
Typically, you will want your application to have more than a label, you might
want a menu, and a region for your application to live in, the following code
does this:
```csharp
using Terminal.Gui;
class Demo {
static int Main ()
{
Application.Init ();
var menu = new MenuBar (new MenuBarItem [] {
new MenuBarItem ("_File", new MenuItem [] {
new MenuItem ("_Quit", "", () => {
Application.RequestStop ();
})
}),
});
var win = new Window ("Hello") {
X = 0,
Y = 1,
Width = Dim.Fill (),
Height = Dim.Fill () - 1
};
// Add both menu and win in a single call
Application.Top.Add (menu, win);
Application.Run ();
Application.Shutdown ();
}
}
// Add both menu and win in a single call
Application.Top.Add (menu, button);
Application.Run ();
Application.Shutdown ();
```
## Views
All visible elements on a Terminal.Gui application are implemented as
All visible elements in a Terminal.Gui application are implemented as
[Views](~/api/Terminal.Gui.View.yml). Views are self-contained objects that take care of displaying themselves, can receive keyboard and mouse input and participate in the focus mechanism.
See the full list of [Views provided by the Terminal.Gui library here](views.md).
Every view can contain an arbitrary number of children views. These are called
the Subviews. You can add a view to an existing view, by calling the
[Add](~/api/Terminal.Gui.View.yml#Terminal_Gui_View_Add_Terminal_Gui_View_) method, for example, to add a couple of buttons to a UI, you can do this:
Every view can contain an arbitrary number of child views, called `SubViews`. Call the
[View.Add](~/api/Terminal.Gui.View.yml#Terminal_Gui_View_Add_Terminal_Gui_View_) method to add a couple of buttons to a UI:
```csharp
void SetupMyView (View myView)
@@ -164,182 +122,20 @@ View.
## Layout
Terminal.Gui supports two different layout systems, absolute and computed \
(controlled by the [LayoutStyle](~/api/Terminal.Gui.LayoutStyle.yml)
property on the view.
Terminal.Gui v2 supports the following View layout systems (controlled by the [View.LayoutStyle](~/api/Terminal.Gui.LayoutStyle.yml)):
The absolute system is used when you want the view to be positioned exactly in
one location and want to manually control where the view is. This is done
by invoking your View constructor with an argument of type [Rect](~/api/Terminal.Gui.Rect.yml). When you do this, to change the position of the View, you can change the `Frame` property on the View.
* **Absolute** - Used to have the View positioned exactly in a location, with a fixed size. Absolute layout is accomplished by constructing a View with an argument of type [Rect](~/api/Terminal.Gui.Rect.yml) or directly changing the `Frame` property on the View.
* **Computed** - The Computed Layout system provides automatic aligning of Views with other Views, automatic centering, and automatic sizing. To use Computed layout set the
`X`, `Y`, `Width` and `Height` properties after the object has been created. Views laid out using the Computed Layout system can be resized with the mouse or keyboard, enabling tiled window managers and dynamic terminal UIs.
* **Overlapped** - New in V2 (But not yet) - Overlapped layout enables views to be positioned on top of each other. Overlapped Views are movable and sizable with both the keyboard and the mouse.
The computed layout system offers a few additional capabilities, like automatic
centering, expanding of dimensions and a handful of other features. To use
this you construct your object without an initial `Frame`, but set the
`X`, `Y`, `Width` and `Height` properties after the object has been created.
See the full [Layout documentation here](layout.md).
Examples:
## Modal Views
```csharp
Views can either be Modal or Non-modal. Modal views take over all user input until the user closes the View. Examples of Modal Views are Toplevel, Dialog, and Wizard. Non-modal views can be used to create a new experience in your application, one where you would have a new top-level menu for example. Setting the `Modal` property on a View to `true` makes it modal.
// Dynamically computed
var label = new Label ("Hello") {
X = 1,
Y = Pos.Center (),
Width = Dim.Fill (),
Height = 1
};
// Absolute position using the provided rectangle
var label2 = new Label (new Rect (1, 2, 20, 1), "World")
```
The computed layout system does not take integers, instead the `X` and `Y` properties are of type [Pos](~/api/Terminal.Gui.Pos.yml) and the `Width` and `Height` properties are of type [Dim](~/api/Terminal.Gui.Dim.yml) both which can be created implicitly from integer values.
### The `Pos` Type
The `Pos` type on `X` and `Y` offers a few options:
* Absolute position, by passing an integer
* Percentage of the parent's view size - `Pos.Percent(n)`
* Anchored from the end of the dimension - `AnchorEnd(int margin=0)`
* Centered, using `Center()`
* Reference the Left (X), Top (Y), Bottom, Right positions of another view
The `Pos` values can be added or subtracted, like this:
```csharp
// Set the X coordinate to 10 characters left from the center
view.X = Pos.Center () - 10;
view.Y = Pos.Percent (20);
anotherView.X = AnchorEnd (10);
anotherView.Width = 9;
myView.X = Pos.X (view);
myView.Y = Pos.Bottom (anotherView);
```
### The `Dim` Type
The `Dim` type is used for the `Width` and `Height` properties on the View and offers
the following options:
* Absolute size, by passing an integer
* Percentage of the parent's view size - `Dim.Percent(n)`
* Fill to the end - `Dim.Fill ()`
* Reference the Width or Height of another view
Like, `Pos`, objects of type `Dim` can be added an subtracted, like this:
```csharp
// Set the Width to be 10 characters less than filling
// the remaining portion of the screen
view.Width = Dim.Fill () - 10;
view.Height = Dim.Percent(20) - 1;
anotherView.Height = Dim.Height (view)+1
```
## TopLevels, Windows and Dialogs.
Among the many kinds of views, you typically will create a [Toplevel](~/api/Terminal.Gui.Toplevel.yml) view (or any of its subclasses), like [Window](~/api/Terminal.Gui.Window.yml) or [Dialog](~/api/Terminal.Gui.Dialog.yml) which is special kind of views that can be executed modally - that is, the view can take over all input and returns
only when the user chooses to complete their work there.
The following sections cover the differences.
### TopLevel Views
[Toplevel](~/api/Terminal.Gui.Toplevel.yml) views have no visible user interface elements and occupy an arbitrary portion of the screen.
You would use a toplevel Modal view for example to launch an entire new experience in your application, one where you would have a new top-level menu for example. You
typically would add a Menu and a Window to your Toplevel, it would look like this:
```csharp
using Terminal.Gui;
class Demo {
static void Edit (string filename)
{
var top = new Toplevel () {
X = 0,
Y = 0,
Width = Dim.Fill (),
Height = Dim.Fill ()
};
var menu = new MenuBar (new MenuBarItem [] {
new MenuBarItem ("_File", new MenuItem [] {
new MenuItem ("_Close", "", () => {
Application.RequestStop ();
})
}),
});
// nest a window for the editor
var win = new Window (filename) {
X = 0,
Y = 1,
Width = Dim.Fill (),
Height = Dim.Fill () - 1
};
var editor = new TextView () {
X = 0,
Y = 0,
Width = Dim.Fill (),
Height = Dim.Fill ()
};
editor.Text = System.IO.File.ReadAllText (filename);
win.Add (editor);
// Add both menu and win in a single call
top.Add (win, menu);
Application.Run (top);
Application.Shutdown ();
}
}
```
### Window Views
[Window](~/api/Terminal.Gui.Window.yml) views extend the Toplevel view by providing a frame and a title around the toplevel - and can be moved on the screen with the mouse (caveat: code is currently disabled)
From a user interface perspective, you might have more than one Window on the screen at a given time.
### Dialogs
[Dialog](~/api/Terminal.Gui.Dialog.yml) are [Window](~/api/Terminal.Gui.Window.yml) objects that happen to be centered in the middle of the screen.
Dialogs are instances of a Window that are centered in the screen, and are intended
to be used modally - that is, they run, and they are expected to return a result
before resuming execution of your application.
Dialogs are a subclass of `Window` and additionally expose the
[`AddButton`](https://migueldeicaza.github.io/gui.cs/api/Terminal.Gui.Dialog.yml#Terminal_Gui_Dialog_AddButton_Terminal_Gui_Button_) API which manages the layout
of any button passed to it, ensuring that the buttons are at the bottom of the dialog.
Example:
```csharp
bool okpressed = false;
var ok = new Button("Ok");
var cancel = new Button("Cancel");
var dialog = new Dialog ("Quit", 60, 7, ok, cancel);
```
Which will show something like this:
```
+- Quit -----------------------------------------------+
| |
| |
| [ Ok ] [ Cancel ] |
+------------------------------------------------------+
```
### Running Modally
To run your Dialog, Window or Toplevel modally, you will invoke the `Application.Run`
method on the toplevel. It is up to your code and event handlers to invoke the `Application.RequestStop()` method to terminate the modal execution.
To run any View (but especially Dialogs, Windows, or Toplevels) modally, invoke the `Application.Run` method on a Toplevel. Use the `Application.RequestStop()` method to terminate the modal execution.
```csharp
bool okpressed = false;
@@ -363,17 +159,63 @@ if (okpressed)
Console.WriteLine ("The user entered: " + entry.Text);
```
There is no return value from running modally, so your code will need to have a mechanism
of indicating the reason that the execution of the modal dialog was completed, in the
case above, the `okpressed` value is set to true if the user pressed or selected the Ok button.
There is no return value from running modally, so the modal view must have a mechanism to indicate the reason the modal was closed. In the case above, the `okpressed` value is set to true if the user pressed or selected the `Ok` button.
## Windows
[Window](~/api/Terminal.Gui.Window.yml) is a view used in `Overlapped` layouts, providing a frame and a title - and can be moved and sized with the keyboard or mouse.
## Dialogs
[Dialogs](~/api/Terminal.Gui.Dialog.yml) are Modal [Windows](~/api/Terminal.Gui.Window.yml) that are centered in the middle of the screen and are intended to be used modally - that is, they run, and they are expected to return a result before resuming execution of the application.
Dialogs expose an API for adding buttons and managing the layout such that buttons are at the bottom of the dialog (e.g. [`AddButton`](https://migueldeicaza.github.io/gui.cs/api/Terminal.Gui.Dialog.yml#Terminal_Gui_Dialog_AddButton_Terminal_Gui_Button_)).
Example:
```csharp
bool okpressed = false;
var ok = new Button("Ok");
var cancel = new Button("Cancel");
var dialog = new Dialog ("Quit", ok, cancel) { Text = "Are you sure you want to quit?" };
```
Which will show something like this:
```
+- Quit -----------------------------------------------+
| Are you sure you want to quit? |
| |
| [ Ok ] [ Cancel ] |
+------------------------------------------------------+
```
## Wizards
[Wizards](~/api/Terminal.Gui.Wizard.yml) are Dialogs that let users step through a series of steps to complete a task.
```
╔╡Gandolf - The last step╞════════════════════════════════════╗
║ The wizard is complete! ║
║☐ Enable Final Final Step ║
║ Press the Finish ║
║ button to continue. ║
║ ║
║ Pressing ESC will ║
║ cancel the wizard. ║
║ ║
║ ║
║─────────────────────────────────────────────────────────────║
║⟦ Back ⟧ ⟦► Finish ◄⟧║
╚═════════════════════════════════════════════════════════════╝
```
## Input Handling
Every view has a focused view, and if that view has nested views, one of those is
Every view has a focused view, and if that view has nested SubViews, one of those is
the focused view. This is called the focus chain, and at any given time, only one
View has the focus.
View has the [Focus]().
The library binds the key Tab to focus the next logical view, and the Shift-Tab combination to focus the previous logical view.
The library provides a default focus mechanism that can be used to navigate the focus chain. The default focus mechanism is based on the Tab key, and the Shift-Tab key combination
Keyboard processing details are available on the [Keyboard Event Processing](keyboard.md) document.
@@ -382,8 +224,7 @@ Keyboard processing details are available on the [Keyboard Event Processing](key
All views have been configured with a color scheme that will work both in color
terminals as well as the more limited black and white terminals.
The various styles are captured in the [Colors](~/api/Terminal.Gui.Colors.yml) class which defined color schemes for
the toplevel, the normal views, the menu bar, popup dialog boxes and error dialog boxes, that you can use like this:
The various styles are captured in the [Colors](~/api/Terminal.Gui.Colors.yml) class which defines color schemes for Toplevel, the normal views (Base), the menu bar, dialog boxes, and error UI::
* `Colors.Toplevel`
* `Colors.Base`
@@ -398,6 +239,8 @@ var w = new Window ("Hello");
w.ColorScheme = Colors.Error
```
ColorSchemes can be configured with the [Configuration and Theme Manager](config.md).
The [ColorScheme](~/api/Terminal.Gui.ColorScheme.yml) represents
four values, the color used for Normal text, the color used for normal text when
a view is focused an the colors for the hot-keys both in focused and unfocused modes.
@@ -414,9 +257,11 @@ var label = new Label (...);
label.TextColor = myColor
```
Learn more about colors in the [Drawing](drawing.md) overview.
## MainLoop, Threads and Input Handling
Detailed description of the mainloop is described on the [Event Processing and the Application Main Loop](~/docs/mainloop.md) document.
The Main Loop, threading, and timers are described on the [Event Processing and the Application Main Loop](~/docs/mainloop.md) document.
## Cross-Platform Drivers

View File

@@ -1,4 +1,4 @@
# Keyboard Event Processing
# Keyboard Events
## Tenets for Terminal.Gui Key Bindings (Unless you know better ones...)
@@ -16,21 +16,26 @@ Tenets higher in the list have precedence over tenets lower in the list.
*Terminal.Gui* provides the following APIs for handling keyboard input:
### **[Key](~/api/Terminal.Gui.Key.yml)**
The `Key` class provides a platform-independent abstraction for common keyboard operations. It is used for processing keyboard input and raising keyboard events. This class provides a high-level abstraction with helper methods and properties for common keyboard operations. Use this class instead of the low-level `KeyCode` enum when possible.
See [Key](~/api/Terminal.Gui.Key.yml) for more details.
### **[Key Bindings](~/api/Terminal.Gui.KeyBindings.yml)**
The default key for activating a button is `Space`. You can change this using the
`ClearKeybinding` and `AddKeybinding` methods:
The default key for activating a button is `Space`. You can change this using
`Keybindings.Clear` and `Keybinding.Add` methods:
```csharp
var btn = new Button ("Press Me");
btn.ClearKeybinding (Command.Accept);
btn.AddKeyBinding (Key.B, Command.Accept);
btn.Keybinding.Remove (Command.Accept);
btn.KeyBinding.Add (Key.B, Command.Accept);
```
The [Command](~/api/Terminal.Gui.Command.yml) enum lists generic operations that are implemented by views. For example `Command.Accept` in a `Button` results in the `Clicked` event
firing while in `TableView` it is bound to `CellActivated`. Not all commands
are implemented by all views (e.g. you cannot scroll in a `Button`). Use the `GetSupportedCommands()`
method to determine which commands are implemented by a `View`.
are implemented by all views (e.g. you cannot scroll in a `Button`). Use the `GetSupportedCommands()` method to determine which commands are implemented by a `View`.
### **[HotKey](~/api/Terminal.Gui.View.yml#Terminal_Gui_View_HotKey)**

73
docfx/docs/layout.md Normal file
View File

@@ -0,0 +1,73 @@
# Layout
Terminal.Gui v2 supports the following View layout systems (controlled by the [View.LayoutStyle](~/api/Terminal.Gui.LayoutStyle.yml)):
* **Absolute** - Used to have the View positioned exactly in a location, with a fixed size. Absolute layout is accomplished by constructing a View with an argument of type [Rect](~/api/Terminal.Gui.Rect.yml) or directly changing the `Frame` property on the View.
* **Computed** - The Computed Layout system provides automatic aligning of Views with other Views, automatic centering, and automatic sizing. To use Computed layout set the
`X`, `Y`, `Width` and `Height` properties after the object has been created. Views laid out using the Computed Layout system can be resized with the mouse or keyboard, enabling tiled window managers and dynamic terminal UIs.
* **Overlapped** - New in V2 (But not yet) - Overlapped layout enables views to be positioned on top of each other. Overlapped Views are movable and sizable with both the keyboard and the mouse.
Examples:
```csharp
// Absolute layout using a provided rectangle
var label1 = new Label (new Rect (1, 1, 20, 1), "Hello")
// Computed Layout
var label2 = new Label ("Hello") {
X = Pos.Right (label2),
Y = Pos.Center (),
Width = Dim.Fill (),
Height = 1
};
```
When using *Computed Layout* the `X` and `Y` properties are of type [Pos](~/api/Terminal.Gui.Pos.yml) and the `Width` and `Height` properties are of type [Dim](~/api/Terminal.Gui.Dim.yml) both of which can be created implicitly from integer values.
## The `Pos` Type
The `Pos` type on `X` and `Y` offers a few options:
* Absolute position, by passing an integer
* Percentage of the parent's view size - `Pos.Percent(n)`
* Anchored from the end of the dimension - `AnchorEnd(int margin=0)`
* Centered, using `Center()`
* Reference the Left (X), Top (Y), Bottom, Right positions of another view
The `Pos` values can be added or subtracted, like this:
```csharp
// Set the X coordinate to 10 characters left from the center
view.X = Pos.Center () - 10;
view.Y = Pos.Percent (20);
anotherView.X = AnchorEnd (10);
anotherView.Width = 9;
myView.X = Pos.X (view);
myView.Y = Pos.Bottom (anotherView);
```
## The `Dim` Type
The `Dim` type is used for the `Width` and `Height` properties on the View and offers
the following options:
* Absolute size, by passing an integer
* Percentage of the parent's view size - `Dim.Percent(n)`
* Fill to the end - `Dim.Fill ()`
* Reference the Width or Height of another view
Like, `Pos`, objects of type `Dim` can be added an subtracted, like this:
```csharp
// Set the Width to be 10 characters less than filling
// the remaining portion of the screen
view.Width = Dim.Fill () - 10;
view.Height = Dim.Percent(20) - 1;
anotherView.Height = Dim.Height (view)+1
```

View File

@@ -2,64 +2,44 @@
_See also [Cross-platform Driver Model](drivers.md)_
The method `Application.Run` that we covered before will wait for
events from either the keyboard or mouse and route those events to the
proper view.
The method `Application.Run` will wait for events from either the keyboard or mouse and route those events to the proper view.
The job of waiting for events and dispatching them in the
`Application` is implemented by an instance of the
[`MainLoop`]()
class.
The job of waiting for events and dispatching them in the `Application` is implemented by an instance of the Main Loop.
Mainloops are a common idiom in many user interface toolkits so many
of the concepts will be familiar to you if you have used other
toolkits before.
Main loops are a common idiom in many user interface toolkits so many of the concepts will be familiar to you if you have used other toolkits before.
This class provides the following capabilities:
* Keyboard and mouse processing
* .NET Async support
* Timers processing
* Invoking of UI code from a background thread
* Idle processing handlers
* Possibility of integration with other mainloops.
* On Unix systems, it can monitor file descriptors for readability or writability.
* Invoking UI code from a background thread
The `MainLoop` property in the the
[`Application`](~/api/Terminal.Gui.Application.yml)
The `MainLoop` property in the the [`Application`](~/api/Terminal.Gui.Application.yml)
provides access to these functions.
When your code invokes `Application.Run (Toplevel)`, the application
will prepare the current
[`Toplevel`](~/api/Terminal.Gui.Toplevel.yml) instance by
redrawing the screen appropriately and then calling the mainloop to
run.
When `Application.Run (Toplevel)` is called, the application will prepare the current
[`Toplevel`](~/api/Terminal.Gui.Toplevel.yml) instance by redrawing the screen appropriately and then starting the main loop.
You can configure the Mainloop before calling Application.Run, or you
can configure the MainLoop in response to events during the execution.
Configure the Mainloop before calling Application.Run, or configure the MainLoop in response to events during the execution.
The keyboard inputs is dispatched by the application class to the
current TopLevel window this is covered in more detail in the
Keyboard input is dispatched by the Application class to the
current TopLevel window. This is covered in more detail in the
[Keyboard Event Processing](keyboard.md) document.
Async Execution
---------------
On startup, the `Application` class configured the .NET Asynchronous
machinery to allow you to use the `await` keyword to run tasks in the
On startup, the `Application` class configures the .NET Asynchronous
machinery to allow the use of the `await` keyword to run tasks in the
background and have the execution of those tasks resume on the context
of the main thread running the main loop.
Once you invoke `Application.Main` the async machinery will be ready
to use, and you can merely call methods using `await` from your main
thread, and the awaited code will resume execution on the main
thread.
Timers Processing
-----------------
You can register timers to be executed at specified intervals by
calling the [`AddTimeout`]() method, like this:
Timers can be set to be executed at specified intervals by calling the [`AddTimeout`]() method, like this:
```csharp
void UpdateTimer ()
@@ -70,8 +50,7 @@ void UpdateTimer ()
var token = Application.MainLoop.AddTimeout (TimeSpan.FromSeconds (20), UpdateTimer);
```
The return value from AddTimeout is a token value that you can use if
you desire to cancel the timer before it runs:
The return value from AddTimeout is a token value that can be used to cancel the timer:
```csharup
Application.MainLoop.RemoveTimeout (token);
@@ -80,82 +59,44 @@ Application.MainLoop.RemoveTimeout (token);
Idle Handlers
-------------
You can register code to be executed when the application is idling
and there are no events to process by calling the
[`AddIdle`]()
method. This method takes as a parameter a function that will be
invoked when the application is idling.
Idle functions should return `true` if they should be invoked again,
[`AddIdle`]() registers a function to be executed when the application is idling and there are no events to process. Idle functions should return `true` if they should be invoked again,
and `false` if the idle invocations should stop.
Like the timer APIs, the return value is a token that can be used to
cancel the scheduled idle function from being executed.
Like the timer APIs, the return value is a token that can be used to cancel the scheduled idle function from being executed.
Threading
---------
Like other UI toolkits, Terminal.Gui is generally not thread safe.
You should avoid calling methods in the UI classes from a background
thread as there is no guarantee that they will not corrupt the state
of the UI application.
Like most UI toolkits, Terminal.Gui should be assumed to not be thread-safe. Avoid calling methods in the UI classes from a background thread as there is no guarantee they will not corrupt the state of the UI application.
Generally, as there is not much state, you will get lucky, but the
application will not behave properly.
Instead, use C# async APIs (e.g. `await` and `System.Threading.Tasks.Task`). Only invoke
APIs in Terminal.Gui from the main thread by using the `Application.Invoke`
method to pass an `Action` that will be queued for execution on the main thread at an appropriate time.
You will be served better off by using C# async machinery and the
various APIs in the `System.Threading.Tasks.Task` APIs. But if you
absolutely must work with threads on your own you should only invoke
APIs in Terminal.Gui from the main thread.
For example, the following shows how to properly update a label from a background thread:
To make this simple, you can use the `Application.MainLoop.Invoke`
method and pass an `Action`. This action will be queued for execution
on the main thread at an appropriate time and will run your code
there.
For example, the following shows how to properly update a label from a
background thread:
```
```cs
void BackgroundThreadUpdateProgress ()
{
Application.MainLoop.Invoke (() => {
Application.Invoke (() => {
progress.Text = $"Progress: {bytesDownloaded/totalBytes}";
});
}
```
Integration With Other Main Loop Drivers
Low-Level Application APIs
----------------------------------------
It is possible to run the main loop in a way that it does not take
over control of your application, but rather in a cooperative way.
To do this, you must use the lower-level APIs in `Application`: the
`Begin` method to prepare a toplevel for execution, followed by calls
to `MainLoop.EventsPending` to determine whether the events must be
processed, and in that case, calling `RunLoop` method and finally
completing the process by calling `End`.
It is possible to run the main loop in a cooperative way: Use the lower-level APIs in `Application`: the `Begin` method to prepare a toplevel for execution, followed by calls
to `MainLoop.EventsPending` to determine whether the events must be processed, and in that case, calling `RunLoop` method and finally completing the process by calling `End`.
The method `Run` is implemented like this:
```
```cs
void Run (Toplevel top)
{
var runToken = Begin (view);
RunLoop (runToken);
End (runToken);
}
```
Unix File Descriptor Monitoring
-------------------------------
On Unix, it is possible to monitor file descriptors for input being
available, or for the file descriptor being available for data to be
written without blocking the application.
To do this, you on Unix, you can cast the `MainLoop` instance to a
[`UnixMainLoop`]()
and use the `AddWatch` method to register an interest on a particular
condition.
```

View File

@@ -8,12 +8,16 @@
href: views.md
- name: Configuration
href: config.md
- name: Drawing (Text and Color)
href: drawing.md
- name: Cross-platform Driver Model
href: drivers.md
- name: Event Processing and the Application Main Loop
href: mainloop.md
- name: Keyboard Event Processing
href: keyboard.md
- name: Abosolute, Computed, and Overlapped Layout
href: layout.md
- name: Event Processing and the Application Main Loop
href: mainloop.md
- name: TableView Deep Dive
href: tableview.md
- name: TreeView Deep Dive