amass/FTXUI
1
0
Fork 0
mirror of https://github.com/ArthurSonzogni/FTXUI.git synced 2024-11-22 18:59:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

mainpage.md - Document 'refreshing / invalidating the screen to cause… (#147)

Browse Source 
Add a section explaining the use for ScreenInteractive::PostEvent.

Co-authored-by: ArthurSonzogni <sonzogniarthur@gmail.com>
This commit is contained in:
cmorganBE 2021-07-12 17:15:44 -04:00 committed by GitHub
parent fe290e7fed
commit cd828bf94d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
doc/mainpage.md
View File

@ -96,40 +96,26 @@ make
./main ./main
~~~ ~~~
## Using NXXM
**.nxxm/deps**
~~~json
{
"ArthurSonzogni/FTXUI": {}
}
~~~
Build:
~~~
nxxm . -t clang-cxx17
~~~
# List of modules. # List of modules.
The project is split into 3 modules: The project is split into 3 modules:
1. **ftxui/screen** defines a ftxui::Screen, this is a grid of ftxui::Pixel. 1. **ftxui/screen** defines a `ftxui::Screen`, this is a grid of `ftxui::Pixel`.
2. **ftxui/dom** is the main module. It defines a hierarchical set of ftxui::Element. 2. **ftxui/dom** is the main module. It defines a hierarchical set of
An element draws something on the ftxui::Screen. It is responsive to the size of `ftxui::Element`. An element draws something on the `ftxui::Screen`. It is
its container. responsive to the size of its container.
3. **ftxui/component** The part is only needed if you need to respond to the User 3. **ftxui/component** The part is only needed if you need to respond to the
input. It defines a set of ftxui::Component. The use can navigates using the User input. It defines a set of `ftxui::Component`. The use can navigates
arrow keys and interact with widgets like checkbox/inputbox/... You can make you using the arrow keys and interact with widgets like checkbox/inputbox/... You
own components. can make you own components.
# screen # screen
It defines a ftxui::Screen. This is a grid of ftxui::Pixel. A Pixel represent a It defines a `ftxui::Screen`. This is a grid of `ftxui::Pixel`. A Pixel
unicode character and its associated style (bold, colors, etc...). represent a Unicode character and its associated style (bold, colors, etc...).
The screen can be printed as a string using ftxui::Screen::ToString(). The screen can be printed as a string using `ftxui::Screen::ToString()`.
~~~cpp ~~~cpp
#include <ftxui/screen/screen.hpp> #include <ftxui/screen/screen.hpp>
@ -151,8 +137,8 @@ The screen can be printed as a string using ftxui::Screen::ToString().
# dom # dom
This module defines a hierachical set of Element. An element manages layout and can be responsive to the terminal dimensions. This module defines a hierarchical set of Element. An element manages layout and
can be responsive to the terminal dimensions.
**Example:** **Example:**
```cpp ```cpp
@ -198,7 +184,7 @@ border(text(L"The element"))
## window ## window
A ftxui::window is a ftxui::border, but with some text on top of the border. A `ftxui::window` is a `ftxui::border`, but with some text on top of the border.
Add a border around an element Add a border around an element
~~~cpp ~~~cpp
window(L"The window", text(L"The element")) window(L"The window", text(L"The element"))
@ -290,7 +276,7 @@ On most terminal the following colors are supported:
Example: Example:
```cpp ```cpp
text(L"Blue foreground") | color(Color::Blue); text(L"Blue foreground") | color(Color::Blue);
text(L"Blue backgrond") | bgcolor(Color::Blue); text(L"Blue background") | bgcolor(Color::Blue);
text(L"Black on white") | color(Color::Black) | bgcolor(Color::White); text(L"Black on white") | color(Color::Black) | bgcolor(Color::White);
``` ```
@ -355,8 +341,8 @@ They are used to compose all the elements together. Each
children are put side by side. If the container is flexible, the extra space children are put side by side. If the container is flexible, the extra space
available will be shared among the remaining flexible children. available will be shared among the remaining flexible children.
flex(element) can be used to make a non-flexible element flexible. filler() is a `flex(element)` can be used to make a non-flexible element flexible. `filler()`
flexible empty element. You can use it align children on one side of the is a flexible empty element. You can use it align children on one side of the
container. container.
An horizontal flow layout is implemented by: An horizontal flow layout is implemented by:
@ -395,13 +381,13 @@ An horizontal flow layout is implemented by:
The `ftxui/component` directory defines the logic to get produce The `ftxui/component` directory defines the logic to get produce
interactive component responding to user's events (keyboard, mouse, etc...) interactive component responding to user's events (keyboard, mouse, etc...)
A ftxui::ScreenInteractive defines a main loop to render a component. A `ftxui::ScreenInteractive` defines a main loop to render a component.
A ftxui::Component is a shared pointer to a ftxui::ComponentBase. The later A `ftxui::Component` is a shared pointer to a `ftxui::ComponentBase`. The later
defines defines
- ftxui::ComponentBase::Render(): How to render the interface. - `ftxui::ComponentBase::Render()`: How to render the interface.
- ftxui::ComponentBase::OnEvent(): How to react to events. - `ftxui::ComponentBase::OnEvent()`: How to react to events.
- ftxui::ComponentBase::Add(): Give a parent/child relation ship in between - `ftxui::ComponentBase::Add()`: Give a parent/child relation ship in between
two component. This defines a tree a components, which help properly define two component. This defines a tree a components, which help properly define
how keyboard navigation works. how keyboard navigation works.
@ -415,7 +401,7 @@ its keyboard. They handle keyboard navigation, including component focus.
## Input ## Input
Produced by: ftxui::Input() from "ftxui/component/component.hpp" Produced by: `ftxui::Input()` from "ftxui/component/component.hpp"
@htmlonly @htmlonly
<script id="asciicast-223719" src="https://asciinema.org/a/223719.js" async></script> <script id="asciicast-223719" src="https://asciinema.org/a/223719.js" async></script>
@ -423,7 +409,7 @@ Produced by: ftxui::Input() from "ftxui/component/component.hpp"
## Menu ## Menu
Produced by: ftxui::Menu() from "ftxui/component/component.hpp" Produced by: `ftxui::Menu()` from "ftxui/component/component.hpp"
@htmlonly @htmlonly
<script id="asciicast-223720" src="https://asciinema.org/a/223720.js" async></script> <script id="asciicast-223720" src="https://asciinema.org/a/223720.js" async></script>
@ -431,7 +417,7 @@ Produced by: ftxui::Menu() from "ftxui/component/component.hpp"
## Toggle. ## Toggle.
Produced by: ftxui::Toggle() from "ftxui/component/component.hpp" Produced by: `ftxui::Toggle()` from "ftxui/component/component.hpp"
@htmlonly @htmlonly
<script id="asciicast-223722" src="https://asciinema.org/a/223722.js" async></script> <script id="asciicast-223722" src="https://asciinema.org/a/223722.js" async></script>
@ -439,7 +425,7 @@ Produced by: ftxui::Toggle() from "ftxui/component/component.hpp"
## CheckBox ## CheckBox
Produced by: ftxui::Checkbox() from "ftxui/component/component.hpp" Produced by: `ftxui::Checkbox()` from "ftxui/component/component.hpp"
@htmlonly @htmlonly
<script id="asciicast-223724" src="https://asciinema.org/a/223724.js" async></script> <script id="asciicast-223724" src="https://asciinema.org/a/223724.js" async></script>
@ -447,7 +433,7 @@ Produced by: ftxui::Checkbox() from "ftxui/component/component.hpp"
## RadioBox ## RadioBox
Produced by: ftxui::Radiobox() from "ftxui/component/component.hpp" Produced by: `ftxui::Radiobox()` from "ftxui/component/component.hpp"
@htmlonly @htmlonly
<script id="asciicast-223725" src="https://asciinema.org/a/223725.js" async></script> <script id="asciicast-223725" src="https://asciinema.org/a/223725.js" async></script>
@ -455,48 +441,63 @@ Produced by: ftxui::Radiobox() from "ftxui/component/component.hpp"
## Renderer ## Renderer
Produced by: ftxui::Renderer() from \ref "ftxui/component/component.hpp". This Produced by: `ftxui::Renderer()` from \ref "ftxui/component/component.hpp". This
component decorate another one by using a different function to render an component decorate another one by using a different function to render an
interface. interface.
## CatchEvent ## CatchEvent
Produced by: ftxui::CatchEvent() from \ref "ftxui/component/component.hpp". This Produced by: `ftxui::CatchEvent()` from \ref "ftxui/component/component.hpp".
component decorate another one and catch the events before the underlying This component decorate another one and catch the events before the underlying
component. component.
## Container::Horizontal ## Container::Horizontal
Produced by: ftxui::Container::Horizontal() from Produced by: `ftxui::Container::Horizontal()` from
"ftxui/component/component.hpp". It displays a list of components horizontally "ftxui/component/component.hpp". It displays a list of components horizontally
and handle keyboard/mouse navigation. and handle keyboard/mouse navigation.
## Container::Vertial ## Container::Vertial
Produced by: ftxui::Container::Vertical() from Produced by: `ftxui::Container::Vertical()` from
"ftxui/component/component.hpp". It displays a list of components vertically "ftxui/component/component.hpp". It displays a list of components vertically
and handles keyboard/mouse navigation. and handles keyboard/mouse navigation.
## Container::Tab ## Container::Tab
Produced by: ftxui::Container::Tab() from Produced by: `ftxui::Container::Tab()` from
"ftxui/component/component.hpp". It take a list of component and display only "ftxui/component/component.hpp". It take a list of component and display only
one of them. This is useful for implementing a tab bar. one of them. This is useful for implementing a tab bar.
## ResizableSplit::{Left, Right, Top, Bottom} ## ResizableSplit::{Left, Right, Top, Bottom}
Produced by: Produced by:
- ftxui::ResizableSplitLeft() - `ftxui::ResizableSplitLeft()`
- ftxui::ResizableSplitRight() - `ftxui::ResizableSplitRight()`
- ftxui::ResizableSplitTop() - `ftxui::ResizableSplitTop()`
- ftxui::ResizableSplitBottom() - `ftxui::ResizableSplitBottom()`
from "ftxui/component/component.hpp" from "ftxui/component/component.hpp"
It defines an horizontal or vertical separation in between two chilren It defines an horizontal or vertical separation in between two children
component. The position of the split is variable and controlable using the component. The position of the split is variable and controllable using the
mouse. mouse.
@htmlonly @htmlonly
<script id="asciicast-tprMH2EdkUoMb7D2YxgMGgpzx" src="https://asciinema.org/a/tprMH2EdkUoMb7D2YxgMGgpzx.js" async></script> <script id="asciicast-tprMH2EdkUoMb7D2YxgMGgpzx" src="https://asciinema.org/a/tprMH2EdkUoMb7D2YxgMGgpzx.js" async></script>
@endhtmlonly @endhtmlonly
## Force a frame redraw.
Whenever a new group of events have been processed: keyboard, mouse, window
resize, etc..., the `ftxui::ScreenInteractive::Loop()` is responsible for
drawing a new frame.
You might want to react to arbitrary events that are unknown to FTXUI. This can
be achieve by posting events via `PostEvent`, via a thread. You can post the
event`Event::Custom`.
```cpp
screen->PostEvent(ftxui::Event::Custom);
```
`ftxui::ScreenInteractive::PostEvent` is thread safe.