I am new to the gluon application. I have used JavaFX and I am building a mobile application. The Login Page worked on its on and now I am trying to configure it to go to the main menu when the button is clicked. I am unsure how to set this up and if you need the init method to be adjusted.
I have tried adding another addViewFactory but that does not work. I tried to create a button with an action but the code fails to load after
This is the main file the application creates
public class AlexDemo extends MobileApplication {
@Override
public void init() {
addViewFactory(HOME_VIEW, LoginPage::new);
}
@Override
public void postInit(Scene scene) {
Swatch.BLUE.assignTo(scene);
((Stage) scene.getWindow()).getIcons().add(new Image(AlexDemo.class.getResourceAsStream("/icon.png")));
}
}
This is the Login Page
public class LoginPage extends View {
private Parent root;
private LoginPage(BorderPane root) {
super(root);
Scene scene = new Scene(root, 500, 800);
//For the label displaying "Sign In" to prompt the user
VBox login = new VBox();
Label statement = new Label("Sign In");
statement.setFont(Font.font("Verdana", FontWeight.BOLD, 13));
//HBox for the email the user wants to sign in with
HBox firstUserPrompt = new HBox();
Label email = new Label("Username/\nEmail: ");
email.setFont(Font.font("Verdana", 13));
firstUserPrompt.setAlignment(Pos.CENTER);
TextField userPrompt = new TextField();
firstUserPrompt.getChildren().addAll(email, userPrompt);
//HBox for the password the user wants to sign in with
HBox secondUserPrompt = new HBox();
Label password = new Label("Password: ");
password.setFont(Font.font("Verdana", 13));
secondUserPrompt.setAlignment(Pos.CENTER);
TextField userPrompt2 = new TextField();
secondUserPrompt.getChildren().addAll(password, userPrompt2);
//Sign in Button if the account exists
Button signIn = new Button("Sign In");
signIn.setMaxSize(150, 200);
signIn.setFont(Font.font("Verdana", 13));
/* signIn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
MainMenu main = new MainMenu(root, stage);
scene.setRoot(main);
primaryStage.setTitle("Main Menu");
primaryStage.setWidth(500);
primaryStage.setHeight(800);
});*/
//*** ADD SPACING BETWEEN SIGN IN AND SIGN UP ***
//If user does not have an account
VBox newAccount = new VBox();
Label noAccount = new Label("Don't have an account? Sign up here: ");
noAccount.setFont(Font.font("Verdana", FontWeight.BOLD, 13));
Button signUp = new Button("Create Account");
signUp.setMaxSize(150, 200);
signUp.setFont(Font.font("Verdana", 13));
newAccount.setSpacing(15);
newAccount.setAlignment(Pos.TOP_CENTER);
newAccount.setMargin(statement, new Insets(55, 25, 55, 25));
newAccount.getChildren().addAll(noAccount, signUp);
root.setBottom(newAccount);
//makes everything set vertically following one after another
setCenter(login);
login.setSpacing(15);
login.setAlignment(Pos.TOP_CENTER);
login.setMargin(statement, new Insets(55, 25, 55, 25));
login.setPadding(new Insets(0, 20, 10, 20));
login.getChildren().addAll(statement, firstUserPrompt, secondUserPrompt, signIn, newAccount);
}
public LoginPage() {
this(new BorderPane());
}
@Override
protected void updateAppBar(AppBar appBar) {
appBar.setTitleText("Book App");
appBar.setSpacing(115);
}
}
This is the main menu for now. Have more code here not shown which sets up the main menu
public class MainMenu extends View{
private final Parent prevPage;
private final Stage stage;
public MainMenu(Parent LoginPage, Stage stage){
this.prevPage = LoginPage;
this.stage = stage;
Label statement = new Label("Sign In");
}
}
When the button is clicked on the login page it should send me to the main menu page
For starters I'd suggest you have a look at the Gluon Mobile docs, to see how views work.
Also you should check the many different samples, that in many cases contain several views, so you can see how to switch from one view to another.
And you should try to use the Gluon plugin for your IDE, that will create an initial project for you with 2 views.
Now about your issues:
I have tried adding another addViewFactory but that does not work
That is the way you should use to add as many views as needed.
@Override
public void init() {
addViewFactory(HOME_VIEW, LoginPage::new);
addViewFactory("MainView", MainView::new);
...
}
About how you create your views, this is unnecessary:
public class LoginPage extends View {
private Parent root;
private LoginPage(BorderPane root) {
super(root);
Scene scene = new Scene(root, 500, 800);
VBox login = new VBox();
...
root.setBottom(newAccount);
setCenter(login);
...
VBox newAccount = new VBox();
...
root.setBottom(newAccount);
}
public LoginPage() {
this(new BorderPane());
}
}
For starters, View extends from BorderPane, and Gluon Mobile manages the views to get added to the scene, so you shouldn't need a Scene.
Your code above can be simplified to:
public class LoginPage extends View {
public LoginPage() {
VBox login = new VBox();
...
setCenter(login);
...
VBox newAccount = new VBox();
...
setBottom(newAccount);
}
}
About the MainMenu view, it can be simplified as well to:
public class MainMenu extends View {
public MainMenu() {
Label statement = new Label("Sign In");
setCenter(statement);
}
}
About switching views, for instance to switch from the home view to the MainMenu, you can simply do:
Button signIn = new Button("Sign In");
signIn.setOnAction(e ->
MobileApplication.getInstance().switchView("MainView"));
Or if you log out from main menu, you can go back to the home view:
Button logOut = new Button("Log Out");
logOut.setOnAction(e ->
MobileApplication.getInstance().goHome());