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::ScreenInteractive définit une boucle principale qui rend un composant.
Un ftxui::Component est un pointeur partagé vers un ftxui::ComponentBase. Ce dernier définit :
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,
bool* checked,
StringRef placeholder,
InputOption options = {});
int* selected_,
int* selected_,
RadioboxOption options = {});
template <typename T>
Ref<int> value,
ConstRef<int> min = 0,
ConstRef<int> max = 100,
ConstRef<int> increment = 5);
Ref<float> value,
ConstRef<float> min = 0.f,
ConstRef<float> max = 100.f,
ConstRef<float> increment = 5.f);
Ref<long> value,
ConstRef<long> min = 0L,
ConstRef<long> max = 100L,
ConstRef<long> increment = 5L);
Ref<bool> show = false);
std::function<void()> on_enter,
std::function<void()> on_leave);
std::function<void(bool)> on_change);
std::function<void()> on_leave);
}
#endif
static CheckboxOption Simple()
Option pour une case à cocher standard.
static ButtonOption Simple()
Crée une ButtonOption, inversée lorsqu'elle est sélectionnée.
static MenuOption Vertical()
Options standard pour un menu vertical. Cela peut être utile pour implémenter une liste d'éléments sé...
Component Horizontal(Components children)
Une liste de composants, dessinés un par un horizontalement et navigués horizontalement en utilisant ...
Component Maybe(Component, const bool *show)
Décore un composant |child|. Il est affiché uniquement lorsque |show| est vrai.
Component ResizableSplitTop(Component main, Component back, int *main_size)
Une séparation verticale entre deux composants, configurable à l'aide de la souris.
Component Menu(MenuOption options)
Une liste de texte. L'élément sélectionné est mis en évidence.
Component MenuEntry(MenuEntryOption options)
Une entrée de menu spécifique. Elles peuvent être placées dans un Container::Vertical pour former un ...
Component Toggle(ConstStringListRef entries, int *selected)
Une liste horizontale d'éléments. L'utilisateur peut naviguer à travers eux.
Component Radiobox(RadioboxOption options)
Une liste d'éléments, où un seul peut être sélectionné.
Component Button(ButtonOption options)
Dessine un bouton. Exécute une fonction lors d'un clic.
Component Modal(Component main, Component modal, const bool *show_modal)
Component Renderer(Component child, std::function< Element()>)
Renvoie un nouveau composant, 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 Vertical(Components children)
Une liste de composants, dessinés un par un verticalement et navigués verticalement en utilisant les ...
Component Input(InputOption options={})
Une zone de saisie pour éditer du texte.
Component ResizableSplitRight(Component main, Component back, int *main_size)
Une séparation horizontale entre deux composants, configurable à l'aide de la souris.
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 ResizableSplitBottom(Component main, Component back, int *main_size)
Une séparation verticale entre deux composants, configurable à l'aide de la souris.
Component Checkbox(CheckboxOption options)
Dessine un élément à cocher.
Component ResizableSplitLeft(Component main, Component back, int *main_size)
Une séparation horizontale entre deux composants, configurable à l'aide de 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...
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 Window(WindowOptions option)
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 = ScreenInteractive::TerminalOutput();
auto renderer = Renderer([] {
return text("My interface");
});
auto component = CatchEvent(renderer, [&](Event event) {
if (event == Event::Character('q')) {
return true;
}
return false;
});
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::ScreenInteractive::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::ScreenInteractive::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.