El módulo ftxui::component define la lógica que produce componentes interactivos que responden a los eventos del usuario (teclado, ratón, etc.).
La sección Example proporciona una colección de ejemplos.
Un ftxui::App define un bucle principal que renderiza un componente.
Un ftxui::Component es un puntero compartido a un ftxui::ComponentBase. Este último define:
ftxui::ComponentBase::Render(): Cómo renderizar la interfaz.ftxui::ComponentBase::OnEvent(): Cómo reaccionar a los eventos.ftxui::ComponentBase::Add(): Construir una relación padre/hijo entre dos componentes. El árbol de componentes se utiliza para definir cómo navegar usando el teclado.
ftxui::Element se utilizan para renderizar un solo fotograma.
ftxui::Component se utilizan para renderizar interfaces de usuario dinámicas, produciendo múltiples fotogramas y actualizando su estado en los eventos.
Galería de múltiples componentes. (demo)
Todos los componentes predefinidos están disponibles en "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())
Dibuja un botón. Ejecuta una función cuando se hace clic.
Component ResizableSplitTop(Component main, Component back, int *main_size)
Una división vertical entre dos componentes, configurable usando el ratón.
Component Horizontal(Components children, int *selector)
Una lista de componentes, dibujados uno a uno horizontalmente y navegados horizontalmente usando las ...
Component Toggle(ConstStringListRef entries, int *selected)
Una lista horizontal de elementos. El usuario puede navegar a través de ellos.
FTXUI_EXPORT(COMPONENT) ComponentDecorator Maybe(std Component Modal(Component main, Component modal, const bool *show_modal)
Component Renderer(Component child, std::function< Element()>)
Devuelve un nuevo Component, similar a |child|, pero usando |render| como el evento Component::Render...
Component Hoverable(Component component, bool *hover)
Envuelve un componente. Permite saber si el ratón lo está "hovering".
Component Checkbox(ConstStringRef label, bool *checked, CheckboxOption options=CheckboxOption::Simple())
Dibuja un elemento marcable.
Component Window(WindowOptions option)
Una ventana arrastrable y redimensionable. Para usar varias, deben apilarse usando el componente Cont...
Component Vertical(Components children)
Una lista de componentes, dibujados uno a uno verticalmente y navegados verticalmente usando las tecl...
Component Maybe(Component child, std::function< bool()> show)
Decora un componente |child|. Se muestra solo cuando |show| devuelve verdadero.
Component ResizableSplitRight(Component main, Component back, int *main_size)
Una división horizontal entre dos componentes, configurable usando el ratón.
Component Input(StringRef content, InputOption options={})
Una caja de entrada para editar texto.
Component Dropdown(ConstStringListRef entries, int *selected)
Un menú desplegable.
Component Stacked(Components children)
Una lista de componentes que se apilan uno encima del otro. Los eventos se propagan al primer compone...
Component Radiobox(ConstStringListRef entries, int *selected_, RadioboxOption options={})
Una lista de elementos, donde solo uno puede ser seleccionado.
Component ResizableSplitBottom(Component main, Component back, int *main_size)
Una división vertical entre dos componentes, configurable usando el ratón.
Component Menu(ConstStringListRef entries, int *selected_, MenuOption options=MenuOption::Vertical())
Una lista de texto. El elemento enfocado está seleccionado.
Component ResizableSplitLeft(Component main, Component back, int *main_size)
Una división horizontal entre dos componentes, configurable usando el ratón.
Component Tab(Components children, int *selector)
Una lista de componentes, donde solo uno se dibuja e interactúa a la vez. El |selector| da el índice ...
Component MenuEntry(ConstStringRef label, MenuEntryOption options={})
Una entrada de menú específica. Se pueden colocar en un Container::Vertical para formar un menú.
El espacio de nombres ftxui::Container:: de FTXUI.
El espacio de nombres ftxui:: de 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)
Una división entre dos componentes.
Component operator|(Component component, ComponentDecorator decorator)
Component Collapsible(ConstStringRef label, Component child, Ref< bool > show=false)
Un componente plegable. Muestra una casilla de verificación con una flecha. Una vez activado,...
Component Slider(SliderOption< T > options)
Un control deslizante en cualquier dirección.
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
Ejemplo:
Producido por: ftxui::Input() de "ftxui/component/component.hpp"
Entrada filtrada
Se pueden filtrar los caracteres recibidos por el componente de entrada, usando 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
Define un objeto de menú. Contiene una lista de entradas, una de ellas seleccionada.
Ejemplo:
Producido por: ftxui::Menu() de "ftxui/component/component.hpp"
Toggle
Un tipo especial de menú. Las entradas se muestran horizontalmente.
Ejemplo:
Producido por: ftxui::Toggle() de "ftxui/component/component.hpp"
CheckBox
Este componente define una casilla de verificación. Es una sola entrada que puede activarse/desactivarse.
Ejemplo:
Producido por: ftxui::Checkbox() de "ftxui/component/component.hpp"
RadioBox
Un componente de radiobotón. Es una lista de entradas, donde una puede activarse.
Ejemplo:
Producido por: ftxui::Radiobox() de "ftxui/component/component.hpp"
Dropdown
Un menú desplegable es un componente que, al abrirse, muestra una lista de elementos para que el usuario seleccione.
Ejemplo:
Producido por: ftxui::Dropdown() de "ftxui/component/component.hpp"
Slider
Representa un objeto deslizador que consiste en un rango con intervalos intermedios categorizados. Puede ser creado por ftxui::Slider().
Ejemplo:
Producido por: ftxui::Slider() de "ftxui/component/component.hpp"
Renderer
Producido por: ftxui::Renderer() de ftxui/component/component.hpp. Este componente decora otro utilizando una función diferente para renderizar una interfaz.
Ejemplo:
auto inner = [...]
auto renderer = Renderer(inner, [&] {
return inner->Render() | border
});
ftxui::Renderer también soporta el patrón de decorador de componentes:
auto component = [...]
component = component
| Renderer([](Element e) { return e | border))
| Renderer(bold)
Como una forma abreviada, también puedes componer un componente con un decorador de elemento:
auto component = [...]
component = component | border | bold;
CatchEvent
Producido por: ftxui::CatchEvent() de ftxui/component/component.hpp. Este componente decora a otros, capturando eventos antes del componente subyacente.
Ejemplos:
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);
ftxui::CatchEvent también se puede usar como un decorador:
component = component
| CatchEvent(handler_1)
| CatchEvent(handler_2)
| CatchEvent(handler_3)
;
Collapsible
Útil para elementos visuales cuya visibilidad puede ser activada o desactivada por el usuario. Esencialmente, es la combinación de los componentes ftxui::Checkbox() y ftxui::Maybe().
auto collapsible = Collapsible("Show more", inner_element);
Maybe
Producido por: ftxui::Maybe() de ftxui/component/component.hpp. Este componente puede ser utilizado para mostrar/ocultar cualquier otro componente mediante un booleano o un predicado.
Ejemplo con un booleano:
bool show = true;
auto component = Renderer([]{ return "Hello World!"; });
auto maybe_component = Maybe(component, &show)
Ejemplo con un predicado:
auto component = Renderer([]{ return "Hello World!"; });
auto maybe_component = Maybe(component, [&] { return time > 10; })
Como de costumbre, ftxui::Maybe también se puede usar como un decorador:
component = component
| Maybe(&a_boolean)
| Maybe([&] { return time > 10; })
;
Container
Horizontal
Producido por: ftxui::Container::Horizontal() de "ftxui/component/component.hpp". Muestra una lista de componentes horizontalmente y gestiona la navegación con teclado/ratón.
Vertical
Producido por: ftxui::Container::Vertical() de "ftxui/component/component.hpp". Muestra una lista de componentes verticalmente y gestiona la navegación con teclado/ratón.
Tab
Producido por: ftxui::Container::Tab() de "ftxui/component/component.hpp". Toma una lista de componentes y muestra solo uno de ellos. Esto es útil para implementar una barra de pestañas.
Vertical:
Horizontal:
ResizableSplit
Define una separación horizontal o vertical entre dos componentes hijos. La posición de la división es variable y controlable con el ratón. Hay cuatro posibles divisiones:
Ejemplo:
Forzar un nuevo renderizado de fotogramas.
Normalmente, ftxui::App::Loop() es responsable de dibujar un nuevo cuadro cada vez que se ha procesado un nuevo grupo de eventos (por ejemplo, teclado, mouse, redimensionamiento de ventana, etc.). Sin embargo, es posible que desee reaccionar a eventos arbitrarios que son desconocidos para FTXUI. Para lograr esto, debe publicar eventos usando ftxui::App::PostEvent (esto es seguro para subprocesos) mediante un hilo. Deberá publicar el evento ftxui::Event::Custom.
Ejemplo:
screen->PostEvent(Event::Custom);
Si no necesitas procesar un nuevo evento, puedes usar:
screen->RequestAnimationFrame();
en su lugar.