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

Update README and tutorial.

Browse Source
This commit is contained in:
ArthurSonzogni 2019-01-27 16:56:37 +01:00
parent 65adb42124
commit cfdb18928d
2 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -1,9 +1,12 @@
# FTXUI
![Demo image](./examples/component/homescreen.gif)
Functional Terminal (X) User interface
**Functional Terminal (X) User interface**
A simple C++ library for terminal based user interface.
## Demo:
![Demo image](./examples/component/homescreen.gif)
## Feature
* Functional style.
* Simple and elegant syntax (in my opinion).
@ -70,7 +73,7 @@ int main(int argc, const char *argv[])
text(L"middle") | flex,
text(L"right")
),
auto screen = Screen::TerminalOutput(document);
auto screen = Screen::Create(Dimension::Full, Dimension::Fit(document));
Render(screen, document.get());
std::cout << screen.ToString();

56
tutorial.md
View File

@ -15,8 +15,8 @@
* [Toggle.](#toggle)
## Introduction
I highly recommand to not take too long on the tutorial, instead you should try
to understand the /example/*.
I **highly** recommand not to take too much time reading the tutorial. Instead,
you should try to read the examples (in ./example/).
## DOM
All the dom element are declared in one header:
@ -30,10 +30,14 @@ It declares the following set of elements:
// --- Widget ---
Element text(std::wstring text);
Element separator();
Element separator(Pixel);
Element gauge(float ratio);
Element border(Element);
Decorator borderWith(Pixel);
Element window(Element title, Element content);
Element spinner(int charset_index, size_t image_index);
Elements paragraph(std::wstring text); // Use inside hflow(). Split by space.
Element graph(GraphFunction);
// -- Decorator ---
Element bold(Element);
@ -48,16 +52,22 @@ Element bgcolor(Color, Element);
// --- Layout ---
// Horizontal, Vertical or stacked set of elements.
Element vbox(Elements);
Element hbox(Elements);
Element vbox(Elements);
Element dbox(Elements);
Element hflow(Elements);
// -- Flexibility ---
// Define how to share the remaining space when not all of it is used inside a
// container.
Element filler();
Element flex(Element);
Decorator size(size_t width, size_t height);
Element notflex(Element);
// -- Size override;
enum Direction { WIDTH, HEIGHT };
enum Constraint { LESS_THAN, EQUAL, GREATER_THAN };
Decorator size(Direction, Constraint, int value);
// --- Frame ---
// A frame is a scrollable area. The internal area is potentially larger than
@ -86,16 +96,17 @@ Element dim(Element);
Element inverted(Element);
Element underlined(Element);
Element blink(Element);
Element color(Color, Element);
Element bgcolor(Color, Element);
Decorator color(Color);
Decorator bgcolor(Color);
~~~
### Layout
These layout are similar to the HTML flexbox:
* vbox (Vertical-box)
* hbox (Horizontal-box)
* dbox (Depth-box)
are containers. They are used to compose all the elements together. Each
* dbox (Z-axis-box)
They are used to compose all the elements together. Each
children are put side by side. If the container is flexible, the extra space
available will be shared among the remaining flexible children.
@ -103,6 +114,9 @@ flex(element) can be used to make a non-flexible element flexible. filler() is a
flexible empty element. You can use it align children on one side of the
container.
An horizontal flow layout is implemented by:
* hflow (Horizontal flow)
#### Examples
~~~cpp
hbox(
@ -134,7 +148,7 @@ container.
#### text
The most simple widget. It display a text.
The most simple widget. It displays a text.
~~~cpp
text(L"I am a piece of text");
~~~
@ -143,7 +157,7 @@ I am a piece of text.
~~~
#### border
Add a border arround an element
Add a border around an element
~~~cpp
border(text(L"The element"))
~~~
@ -193,6 +207,9 @@ border(gauge(0.5))
└────────────────────────────────────────────────────────────────────────────┘
~~~
### graph
[![asciicast](https://asciinema.org/a/223726.svg)](https://asciinema.org/a/223726)
### Decorator
Terminal supports displaying text using differet style: bold, dim, underlined,
@ -210,10 +227,21 @@ text(L"This text is bold")) | bold | underlined
## Components.
dom element are stateless.
Element are stateless object. On the other side, components are used when an
internal state is needed. Components are used to interact with the user with
its keyboard. They handle keyboard navigation, including component focus.
### Input
TODO(arthursonzogni): Add Video
[![asciicast](https://asciinema.org/a/223719.svg)](https://asciinema.org/a/223719)
### Menu
TODO(arthursonzogni): Add Video
[![asciicast](https://asciinema.org/a/223720.svg)](https://asciinema.org/a/223720)
### Toggle.
TODO(arthursonzogni): Add video
[![asciicast](https://asciinema.org/a/223722.svg)](https://asciinema.org/a/223722)
### CheckBox
[![asciicast](https://asciinema.org/a/223724.svg)](https://asciinema.org/a/223724)
### RadioBox
[![asciicast](https://asciinema.org/a/223725.svg)](https://asciinema.org/a/223725)