Help about focusable object cycling

[lmarzull]

Hello All,

I'm currently trying to make an application for RPG.
I'm just at the beginning and trying to understand how things are working, but I could not achieve cycling about element of a simple window.

I've start from file: 'examples/component/focus_cursor.cpp', and my app was working but as soon as I try to make a change, things does not work properly.

The only thing I want for now, is just a window with a title ('(1) Infos', and 3 focusable object 'Race', 'Training package' and 'Realm'.
This windows should be on the left upper corner and the height and width is just according to its content.
And I want a status bar on the bottom of the screen.

Currently all is fine, except that pressing TAB, CTRL-TAB, DownArrow and UpArrow does not change the focus between the 3 elements.

Here is the code for the "root window":

using namespace ftxui;

  // Just showing status of the database connection
  status_renderer_ = Renderer([&] {
    std::string icon = connection_icon(model_.is_connected());
    std::string db_name = model_.connected_to();
    auto style = model_.is_connected() ? color(Color::Green) : color(Color::Red);
    return hbox({
             text(icon + " ") | style | bold,
             text(db_name) | bold,
           });
  });

  main_renderer_ = Renderer([&] {
    return vbox({
        hbox({
          static_info_window_.get_component()->Render(),
          filler()}),
        filler(),
        status_renderer_->Render()
    });
  });

  empty_ = ftxui::CatchEvent(
      main_renderer_,
      [&](ftxui::Event event) {
        if (event == ftxui::Event::Escape) {
          screen_.Exit();
          return true;
        }
        return false;
      });
}

And here the code for the window containing the 3 labels:

ftxui::Component make_line(std::string label)
{
  return ftxui::Renderer([=](bool focused) {
        if(focused)
          return ftxui::hbox({ftxui::text("> " + label)});
        return ftxui::text("  " + label);
      });
}


//------------------------------------------------------------------------------
static_info_window::static_info_window(int shortcut, model& m)
  : model_(m)
{
  std::ostringstream oss;
  oss << '(' << shortcut << ") Infos";
  title_ = ftxui::text(oss.str());

  infos_ = ftxui::Container::Vertical({
        make_line("Race"),
        make_line("Training package"),
        make_line("Realm")
      });
}


//------------------------------------------------------------------------------
ftxui::Component
static_info_window::get_component()
{
  return ftxui::Renderer([&]{return ftxui::window(title_, infos_->Render());});
}

And the main loop call:

screen_.Loop(empty_);

What do I do wrong ? Why I'm not able to go through my 3 "lines" ?
Thank you very much

[ArthurSonzogni]

Hi @lmarzull,

It looks like you are using the Renderer function improperly. Maybe you should directly create new ComponentBase object directly and override the OnRender function instead? That's more boilerplate, but it won't hide you any details.

---

The Renderer exist in two versions:

auto inner = [...]
 
auto renderer = Renderer(inner, [&] {
  return inner->Render() | border
});

and

auto renderer = Renderer([&]{ 
  return text("hello");
})

The first create a new Component, adds inner as a child, and defers all the behavior to the childs, except for OnRender that is using the specified function.

The Component Tree looks like:

┌────────┐
│renderer│
└┬───────┘
┌▽────┐   
│inner│   
└─────┘   
    

The second version doesn't. It create a new Component and doesn't know about inner.

---

I think you should use the first version, because you are trying to customize the inner component. Otherwise, you will fail to properly plug the events in the Component Tree. Your tree is broken. It looks like this currently:

┌──────┐         ┌───────────────────────────────────┐     ┌───────────────────────────────────┐                 
│empty_│         │static_info_window::get_component()│     │infos_                             │                 
└┬─────┘         └───────────────────────────────────┘     └┬──┬──────────────────────────────┬┘                 
┌▽─────────────┐              ┌─────────────────────────────▽┐┌▽────────────────────────────┐┌▽─────────────────┐
│main_renderer_│              │make_line("Race")             ││make_line("Training package")││make_line("Realm")│
└──────────────┘              └──────────────────────────────┘└─────────────────────────────┘└──────────────────┘

but I think you wanted something like:

┌──────┐                                                              
│empty_│                                                              
└┬─────┘                                                              
┌▽─────────────┐                                                      
│main_renderer_│                                                      
└┬─────────────┘                                                      
┌▽──────────────────────────────────┐                                 
│static_info_window::get_component()│                                 
└┬──────────────────────────────────┘                                 
┌▽──────────────────────────────────────────────────┐                 
│infos_                                             │                 
└┬──────────────────┬──────────────────────────────┬┘                 
┌▽────────────────┐┌▽────────────────────────────┐┌▽─────────────────┐
│make_line("Race")││make_line("Training package")││make_line("Realm")│
└─────────────────┘└─────────────────────────────┘└──────────────────┘

[lmarzull]

Ok, I see.

Great and really nice answer. It helps a lot.
It work a little bit better now ;-)

Thank you very much