Le module ftxui::component définit la logique qui produit des composants interactifs qui répondent aux événements utilisateur (clavier, souris, etc.).
La section Example fournit une collection d'exemples.
Un ftxui::App définit une boucle principale qui rend un composant.
Un ftxui::Component est un pointeur partagé vers un ftxui::ComponentBase. Ce dernier définit :
ftxui::ComponentBase::Render(): Comment rendre l'interface.ftxui::ComponentBase::OnEvent(): Comment réagir aux événements.ftxui::ComponentBase::Add(): Construit une relation parent/enfant entre deux composants. L'arbre des composants est utilisé pour définir comment naviguer à l'aide du clavier.
Les ftxui::Element sont utilisés pour rendre une seule trame.
Les ftxui::Component sont utilisés pour rendre une interface utilisateur dynamique, produisant plusieurs trames et mettant à jour son état sur les événements.
Galerie de plusieurs composants. (démo)
Tous les composants prédéfinis sont disponibles dans "ftxui/dom/component.hpp"
#ifndef FTXUI_COMPONENT_HPP
#define FTXUI_COMPONENT_HPP
#include <functional>
#include <memory>
#include <utility>
struct ButtonOption;
struct CheckboxOption;
struct Event;
struct InputOption;
struct MenuOption;
struct RadioboxOption;
struct MenuEntryOption;
template <class T, class... Args>
std::shared_ptr<T>
Make(Args&&... args) {
return std::make_shared<T>(std::forward<Args>(args)...);
}
}
std::function<void()> on_click,
ButtonOption options = ButtonOption::Simple());
bool* checked,
CheckboxOption options = CheckboxOption::Simple());
StringRef placeholder,
InputOption options = {});
int* selected_,
MenuOption options = MenuOption::Vertical());
int* selected_,
RadioboxOption options = {});
template <typename T>
Slider(SliderOption<uint16_t>);
Slider(SliderOption<uint32_t>);
Slider(SliderOption<uint64_t>);
ConstRef<int> min = 0,
ConstRef<int> max = 100,
ConstRef<int> increment = 5);
ConstRef<float> min = 0.f,
ConstRef<float> max = 100.f,
ConstRef<float> increment = 5.f);
ConstRef<long> min = 0L,
ConstRef<long> max = 100L,
ConstRef<long> increment = 5L);
std::function<void()> on_enter,
std::function<void()> on_leave);
std::function<void(bool)> on_change);
std::function<void()> on_leave);
}
#endif
#define FTXUI_EXPORT(component)
Component Button(ConstStringRef label, std::function< void()> on_click, ButtonOption options=ButtonOption::Simple())
Dessine un bouton. Exécute une fonction lorsqu'il est cliqué.
Component ResizableSplitTop(Component main, Component back, int *main_size)
Une division verticale entre deux composants, configurable en utilisant la souris.
Component Horizontal(Components children, int *selector)
Une liste de composants, dessinés un par un horizontalement et navigués horizontalement en utilisant ...
Component Toggle(ConstStringListRef entries, int *selected)
Une liste horizontale d'éléments. L'utilisateur peut naviguer à travers eux.
FTXUI_EXPORT(COMPONENT) ComponentDecorator Maybe(std Component Modal(Component main, Component modal, const bool *show_modal)
Component Renderer(Component child, std::function< Element()>)
Retourne un nouveau Component, similaire à |child|, mais utilisant |render| comme événement Component...
Component Hoverable(Component component, bool *hover)
Encapsule un composant. Donne la possibilité de savoir s'il est survolé par la souris.
Component Checkbox(ConstStringRef label, bool *checked, CheckboxOption options=CheckboxOption::Simple())
Dessine un élément cochable.
Component Vertical(Components children)
Une liste de composants, dessinés un par un verticalement et navigués verticalement en utilisant les ...
Component Maybe(Component child, std::function< bool()> show)
Décore un composant |child|. Il est affiché uniquement lorsque |show| retourne vrai.
Component ResizableSplitRight(Component main, Component back, int *main_size)
Une division horizontale entre deux composants, configurable en utilisant la souris.
Component Input(StringRef content, InputOption options={})
Une boîte de saisie pour éditer du texte.
Component Dropdown(ConstStringListRef entries, int *selected)
Un menu déroulant.
Component Stacked(Components children)
Une liste de composants à empiler les uns sur les autres. Les événements sont propagés au premier com...
Component Radiobox(ConstStringListRef entries, int *selected_, RadioboxOption options={})
Une liste d'éléments, où un seul peut être sélectionné.
Component ResizableSplitBottom(Component main, Component back, int *main_size)
Une division verticale entre deux composants, configurable en utilisant la souris.
Component Menu(ConstStringListRef entries, int *selected_, MenuOption options=MenuOption::Vertical())
Une liste de texte. L'élément focalisé est sélectionné.
Component ResizableSplitLeft(Component main, Component back, int *main_size)
Une division horizontale entre deux composants, configurable en utilisant la souris.
Component Tab(Components children, int *selector)
Une liste de composants, où un seul est dessiné et interagit avec à la fois. Le |selector| donne l'in...
Component MenuEntry(ConstStringRef label, MenuEntryOption options={})
Une entrée de menu spécifique. Elles peuvent être placées dans un Container::Vertical pour former un ...
L'espace de noms FTXUI ftxui::Container::
L'espace de noms FTXUI ftxui::
std::shared_ptr< T > Make(Args &&... args)
std::shared_ptr< Node > Element
std::function< Element(Element)> ElementDecorator
std::vector< Component > Components
Component ResizableSplit(ResizableSplitOption options)
Une séparation entre deux composants.
Component operator|(Component component, ComponentDecorator decorator)
Component Collapsible(ConstStringRef label, Component child, Ref< bool > show=false)
Un composant repliable. Il affiche une case à cocher avec une flèche. Une fois activé,...
Component Slider(SliderOption< T > options)
Un curseur dans n'importe quelle direction.
Component & operator|=(Component &component, ComponentDecorator decorator)
std::function< Component(Component)> ComponentDecorator
std::shared_ptr< ComponentBase > Component
Component CatchEvent(Component child, std::function< bool(Event)>)
Input
Exemple:
Produit par : ftxui::Input() de "ftxui/component/component.hpp"
Saisie filtrée
On peut filtrer les caractères reçus par le composant de saisie, en utilisant ftxui::CatchEvent.
std::string phone_number;
Component input = Input(&phone_number, "phone number");
input |= CatchEvent([&](Event event) {
return event.is_character() && !std::isdigit(event.character()[0]);
});
input |= CatchEvent([&](Event event) {
return event.is_character() && phone_number.size() >= 10;
});
Menu
Définit un objet menu. Il contient une liste d'entrées, dont une est sélectionnée.
Exemple:
Produit par : ftxui::Menu() de "ftxui/component/component.hpp"
Bascule
Un type de menu spécial. Les entrées sont affichées horizontalement.
Exemple:
Produit par : ftxui::Toggle() de "ftxui/component/component.hpp"
Case à cocher
Ce composant définit une case à cocher. C'est une seule entrée qui peut être activée/désactivée.
Exemple:
Produit par : ftxui::Checkbox() de "ftxui/component/component.hpp"
Bouton radio
Un composant bouton radio. C'est une liste d'entrées, où une seule peut être activée.
Exemple:
Produit par : ftxui::Radiobox() de "ftxui/component/component.hpp"
Menu déroulant
Un menu déroulant est un composant qui, lorsqu'il est ouvert, affiche une liste d'éléments parmi lesquels l'utilisateur peut choisir.
Exemple:
Produit par : ftxui::Dropdown() de "ftxui/component/component.hpp"
Curseur
Représente un objet curseur composé d'une plage avec des intervalles intermédiaires binés. Il peut être créé par ftxui::Slider().
Exemple:
Produit par : ftxui::Slider() de "ftxui/component/component.hpp"
Rendu
Produit par : ftxui::Renderer() de ftxui/component/component.hpp. Ce composant décore un autre en utilisant une fonction différente pour rendre une interface.
Exemple:
auto inner = [...]
auto renderer = Renderer(inner, [&] {
return inner->Render() | border
});
ftxui::Renderer supporte également le modèle de décorateur de composant :
auto component = [...]
component = component
| Renderer([](Element e) { return e | border))
| Renderer(bold)
Comme raccourci, vous pouvez également composer un composant avec un décorateur d'élément :
auto component = [...]
component = component | border | bold;
Intercepter un événement
Produit par : ftxui::CatchEvent() de ftxui/component/component.hpp. Ce composant décore d'autres composants, interceptant les événements avant le composant sous-jacent.
Exemples:
auto screen = App::TerminalOutput();
auto renderer = Renderer([] {
return text("My interface");
});
auto component = CatchEvent(renderer, [&](Event event) {
if (event == Event::Character('q')) {
screen.ExitLoopClosure()();
return true;
}
return false;
});
screen.Loop(component);
Le ftxui::CatchEvent peut également être utilisé comme décorateur :
component = component
| CatchEvent(handler_1)
| CatchEvent(handler_2)
| CatchEvent(handler_3)
;
Rétractable
Utile pour les éléments visuels dont la visibilité peut être activée ou désactivée par l'utilisateur. Essentiellement, c'est la combinaison des composants ftxui::Checkbox() et ftxui::Maybe().
auto collapsible = Collapsible("Show more", inner_element);
Peut-être
Produit par : ftxui::Maybe() de ftxui/component/component.hpp. Ce composant peut être utilisé pour afficher/masquer tout autre composant via un booléen ou un prédicat.
Exemple avec un booléen :
bool show = true;
auto component = Renderer([]{ return "Hello World!"; });
auto maybe_component = Maybe(component, &show)
Exemple avec un prédicat :
auto component = Renderer([]{ return "Hello World!"; });
auto maybe_component = Maybe(component, [&] { return time > 10; })
Comme d'habitude, ftxui::Maybe peut également être utilisé comme décorateur :
component = component
| Maybe(&a_boolean)
| Maybe([&] { return time > 10; })
;
Conteneur
Horizontal
Produit par : ftxui::Container::Horizontal() de "ftxui/component/component.hpp". Il affiche une liste de composants horizontalement et gère la navigation au clavier/souris.
Vertical
Produit par : ftxui::Container::Vertical() de "ftxui/component/component.hpp". Il affiche une liste de composants verticalement et gère la navigation au clavier/souris.
Onglet
Produit par : ftxui::Container::Tab() de "ftxui/component/component.hpp". Il prend une liste de composants et n'en affiche qu'un seul. C'est utile pour implémenter une barre d'onglets.
Vertical :
Horizontal :
Séparateur redimensionnable
Il définit une séparation horizontale ou verticale entre deux composants enfants. La position du séparateur est variable et contrôlable à l'aide de la souris. Il existe quatre séparateurs possibles :
Exemple:
Forcer un nouveau rendu de trame.
Généralement, ftxui::App::Loop() est responsable de dessiner une nouvelle trame chaque fois qu'un nouveau groupe d'événements (par exemple clavier, souris, redimensionnement de fenêtre, etc.) a été traité. Cependant, vous pourriez vouloir réagir à des événements arbitraires inconnus de FTXUI. Pour ce faire, vous devez poster des événements à l'aide de ftxui::App::PostEvent (ceci est thread-safe) via un thread. Vous devrez poster l'événement ftxui::Event::Custom.
Exemple:
screen->PostEvent(Event::Custom);
Si vous n'avez pas besoin de traiter un nouvel événement, vous pouvez utiliser :
screen->RequestAnimationFrame();
à la place.