Page / Views transitions #376
-
|
Hello, I'm trying to build an application that cycles pages with a fixed header. It starts with a user selection screen, then a form to enter a password. I was able to make the transition (screenshots below) from the user list when choosing a user. However when landing on the password input view, I'm unable to focus the password input (I tried with the mouse, tab key. arrow keys).
Here is my current implementation ui.cpp void App(State *s) {
Component view;
string title;
auto screen = ScreenInteractive::Fullscreen();
// User selection screen
MenuOption user_option;
// Password input screen
InputOption password_option;
password_option.password = true;
auto input_password = Input(&s->password, "", password_option);
auto password_component = Container::Vertical({
input_password
});
auto setView = [&]{
switch(s->currentView) {
case UserSelect: {
view = Menu(&s->availableUsers, &s->currentUser, &user_option);
title = "Welcome, select a user";
break;
}
case UserPassword: {
view = Renderer(password_component, [&]{
return hbox({
text("Password "),
separator(),
text(" "),
input_password->Render() });
});
title = "Enter your password";
break;
}
case UserCreate: {
view = NotImplemented("User creation screen");
title = "Create an account";
break;
}
}
};
setView();
user_option.on_enter = [&]{
s->setView(UserPassword);
setView();
};
auto header_renderer = Renderer([&]{
return vbox(
filler(),
paragraphAlignCenter("██╗ ██████╗ ██████╗ ██████╗ "),
paragraphAlignCenter("██║ ██╔═══██╗██╔════╝ ██╔═══██╗"),
paragraphAlignCenter("██║ ██║ ██║██║ ███╗██║ ██║"),
paragraphAlignCenter("██║ ██║ ██║██║ ██║██║ ██║"),
paragraphAlignCenter("███████╗╚██████╔╝╚██████╔╝╚██████╔╝"),
paragraphAlignCenter("╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ "),
paragraphAlignCenter("v0.0.1"),
filler()) | size(HEIGHT, EQUAL, 20);
});
auto view_renderer = Renderer(view, [&] {
return vbox({
hbox({
filler(),
vbox({
paragraph(title),
separator(),
view->Render(),
separator(),
}) | size(WIDTH, EQUAL, 40),
filler()
}),
filler()
});
});
auto component = Container::Vertical({
header_renderer,
view_renderer
});
screen.Loop(component);
}state.hpp #pragma once
#include <vector>
#include <string>
#define USER_GROUP "writers"
using namespace std;
enum Status {
LoginSuccesful,
LoginFailed,
CreateSuccesful,
CreateFailed,
PasswordsDontMatch
};
enum View {
UserSelect,
UserPassword,
UserCreate
};
class State {
public:
View currentView;
int currentUser;
string password;
bool loggedIn;
vector<string> availableUsers;
explicit State();
explicit State(string username);
void setView(View v);
Status createAccount(string username, string password, string confirmation);
Status login(string username, string password);
private:
void fetchUsers();
};Any pointers on how to force focus or maybe handle transitions ? Thank you |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
I think you should use Container::Tab. It forward Render() and OnEvent() toward the component selected. In your example. You are wrapping "view" with the Renderer() function. The problem is that later you make view to point toward a new object. |
Beta Was this translation helpful? Give feedback.
-
|
See also this example: |
Beta Was this translation helpful? Give feedback.
-
|
See also this example: |
Beta Was this translation helpful? Give feedback.
-
auto pages = Container::Tab({
page1,
page2,
page3,
}, &(state->displayed_page));screen.Loop(pages) |
Beta Was this translation helpful? Give feedback.
-
|
Ohhh thanks this is promising, not in front of the code rn, but I'll give it a try soon and mark this as answered. Et merci beaucoup pour ce bijou de librairie :) |
Beta Was this translation helpful? Give feedback.
-
|
@ArthurSonzogni It worked beautifully, many thanks. Putting the new implementation here if it can benefit anyone. void App(State *s) {
Component view;
string title;
auto screen = ScreenInteractive::Fullscreen();
// User selection screen
MenuOption user_option;
// Password input screen
InputOption password_option;
password_option.password = true;
auto input_password = Input(&s->password, "", password_option);
auto password_component = Container::Vertical({
input_password
});
auto user_select = Menu(&s->availableUsers, &s->currentUser, &user_option);
auto password_form = Renderer(password_component, [&]{
return hbox({
text("Password "),
separator(),
text(" "),
input_password->Render() });
});
auto setTitle = [&]{
switch(s->currentView) {
case UserSelect: {
title = "Welcome, select a user";
break;
}
case UserPassword: {
title = "Enter your password";
break;
}
case UserCreate: {
view = NotImplemented("User creation screen");
title = "Create an account";
break;
}
}
};
user_option.on_enter = [&]{
setTitle();
s->setView(UserPassword);
};
auto header_renderer = Renderer([&]{
return vbox(
filler(),
paragraphAlignCenter("██╗ ██████╗ ██████╗ ██████╗ "),
paragraphAlignCenter("██║ ██╔═══██╗██╔════╝ ██╔═══██╗"),
paragraphAlignCenter("██║ ██║ ██║██║ ███╗██║ ██║"),
paragraphAlignCenter("██║ ██║ ██║██║ ██║██║ ██║"),
paragraphAlignCenter("███████╗╚██████╔╝╚██████╔╝╚██████╔╝"),
paragraphAlignCenter("╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ "),
paragraphAlignCenter("v0.0.1"),
filler()) | size(HEIGHT, EQUAL, 20);
});
auto paginator = Container::Tab({
user_select,
password_form
}, &(s->currentView));
auto container = Container::Vertical({
header_renderer,
paginator
});
auto component = Renderer(container, [&] {
return vbox({
header_renderer->Render(),
hbox({
filler(),
vbox({
paragraph(title),
separator(),
paginator->Render(),
separator(),
}) | size(WIDTH, EQUAL, 40),
filler()
}),
filler()
});
});
screen.Loop(component);
cout << s->currentView;
} |
Beta Was this translation helpful? Give feedback.
I think you should use Container::Tab. It forward Render() and OnEvent() toward the component selected.
https://arthursonzogni.github.io/FTXUI/namespaceftxui_1_1Container.html#aea9fe244eeeb420276bcc5760b46953d
In your example. You are wrapping "view" with the Renderer() function. The problem is that later you make view to point toward a new object.
It means the events are still forwarded to the original component.