ftxui / component

Table of Contents

• Input
  • Entrada filtrada
• Menu
• Toggle 
• CheckBox
• RadioBox
• Dropdown
• Slider
• Renderer
• CatchEvent
• Collapsible
• Maybe
• Container
  • Horizontal
  • Vertical
  • Tab
• ResizableSplit
• Forzar un nuevo renderizado de fotogramas.

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::ScreenInteractive 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"

// Copyright 2021 Arthur Sonzogni. Todos los derechos reservados.
// El uso de este código fuente se rige por la licencia MIT que se puede encontrar en
// el archivo LICENSE.
#ifndef FTXUI_COMPONENT_HPP
#define FTXUI_COMPONENT_HPP
 
#include <functional>  // for function
#include <memory>      // for make_shared, shared_ptr
#include <utility>     // for forward
 
#include <ftxui/util/warn_windows_macro.hpp>
#include "ftxui/component/component_base.hpp"  // for Component, Components
#include "ftxui/component/component_options.hpp"  // for ButtonOption, CheckboxOption, MenuOption
#include "ftxui/dom/elements.hpp"  // for Element
#include "ftxui/util/ref.hpp"  // for ConstRef, Ref, ConstStringRef, ConstStringListRef, StringRef
 
namespace ftxui {
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)...);
}
 
// Operador de tubería para decorar componentes.
using ComponentDecorator = std::function<Component(Component)>;
using ElementDecorator = std::function<Element(Element)>;
Component operator|(Component component, ComponentDecorator decorator);
Component operator|(Component component, ElementDecorator decorator);
Component& operator|=(Component& component, ComponentDecorator decorator);
Component& operator|=(Component& component, ElementDecorator decorator);
 
namespace Container {
Component Vertical(Components children);
Component Vertical(Components children, int* selector);
Component Horizontal(Components children);
Component Horizontal(Components children, int* selector);
Component Tab(Components children, int* selector);
Component Stacked(Components children);
}  // namespace Container
 
Component Button(ButtonOption options);
Component Button(ConstStringRef label,
                 std::function<void()> on_click,
                 ButtonOption options = ButtonOption::Simple());
 
Component Checkbox(CheckboxOption options);
Component Checkbox(ConstStringRef label,
                   bool* checked,
                   CheckboxOption options = CheckboxOption::Simple());
 
Component Input(InputOption options = {});
Component Input(StringRef content, InputOption options = {});
Component Input(StringRef content,
                StringRef placeholder,
                InputOption options = {});
 
Component Menu(MenuOption options);
Component Menu(ConstStringListRef entries,
               int* selected_,
               MenuOption options = MenuOption::Vertical());
Component MenuEntry(MenuEntryOption options);
Component MenuEntry(ConstStringRef label, MenuEntryOption options = {});
 
Component Radiobox(RadioboxOption options);
Component Radiobox(ConstStringListRef entries,
                   int* selected_,
                   RadioboxOption options = {});
 
Component Dropdown(ConstStringListRef entries, int* selected);
Component Dropdown(DropdownOption options);
 
Component Toggle(ConstStringListRef entries, int* selected);
 
// Constructor de deslizador general:
template <typename T>
Component Slider(SliderOption<T> options);
 
// Abreviatura sin el constructor `SliderOption`:
Component Slider(ConstStringRef label,
                 Ref<int> value,
                 ConstRef<int> min = 0,
                 ConstRef<int> max = 100,
                 ConstRef<int> increment = 5);
Component Slider(ConstStringRef label,
                 Ref<float> value,
                 ConstRef<float> min = 0.f,
                 ConstRef<float> max = 100.f,
                 ConstRef<float> increment = 5.f);
Component Slider(ConstStringRef label,
                 Ref<long> value,
                 ConstRef<long> min = 0L,
                 ConstRef<long> max = 100L,
                 ConstRef<long> increment = 5L);
 
Component ResizableSplit(ResizableSplitOption options);
Component ResizableSplitLeft(Component main, Component back, int* main_size);
Component ResizableSplitRight(Component main, Component back, int* main_size);
Component ResizableSplitTop(Component main, Component back, int* main_size);
Component ResizableSplitBottom(Component main, Component back, int* main_size);
 
Component Renderer(Component child, std::function<Element()>);
Component Renderer(std::function<Element()>);
Component Renderer(std::function<Element(bool /* focused */)>);
ComponentDecorator Renderer(ElementDecorator);
 
Component CatchEvent(Component child, std::function<bool(Event)>);
ComponentDecorator CatchEvent(std::function<bool(Event)> on_event);
 
Component Maybe(Component, const bool* show);
Component Maybe(Component, std::function<bool()>);
ComponentDecorator Maybe(const bool* show);
ComponentDecorator Maybe(std::function<bool()>);
 
Component Modal(Component main, Component modal, const bool* show_modal);
ComponentDecorator Modal(Component modal, const bool* show_modal);
 
Component Collapsible(ConstStringRef label,
                      Component child,
                      Ref<bool> show = false);
 
Component Hoverable(Component component, bool* hover);
Component Hoverable(Component component,
                    std::function<void()> on_enter,
                    std::function<void()> on_leave);
Component Hoverable(Component component,  //
                    std::function<void(bool)> on_change);
ComponentDecorator Hoverable(bool* hover);
ComponentDecorator Hoverable(std::function<void()> on_enter,
                             std::function<void()> on_leave);
ComponentDecorator Hoverable(std::function<void(bool)> on_change);
 
Component Window(WindowOptions option);
 
}  // namespace ftxui
 
#endif /* end of include guard: FTXUI_COMPONENT_HPP */

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");
 
// Filter out non-digit characters.
input |= CatchEvent([&](Event event) {
  return event.is_character() && !std::isdigit(event.character()[0]);
});
 
// Filter out characters past the 10th one.
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 = ScreenInteractive::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:

• ftxui::ResizableSplitLeft()
• ftxui::ResizableSplitRight()
• ftxui::ResizableSplitTop()
• ftxui::ResizableSplitBottom() de "ftxui/component/component.hpp"

Ejemplo:

Forzar un nuevo renderizado de fotogramas.

Normalmente, ftxui::ScreenInteractive::Loop() es responsable de dibujar un nuevo fotograma cada vez que se ha procesado un nuevo grupo de eventos (p. ej., teclado, ratón, cambio de tamaño de ventana, etc.). Sin embargo, es posible que desees reaccionar a eventos arbitrarios que FTXUI desconoce. Para lograr esto, debes publicar eventos usando ftxui::ScreenInteractive::PostEvent (esto es seguro para hilos) a través de un hilo. Tendrás que 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.