JavaFX UI Design SignIn -SignUp Example

 

main java

package charity_ui;

import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;

/**

 *

 * @author Administrator

 */

public class Charity_Ui extends Application {

    

    @Override

    public void start(Stage stage) throws Exception {

        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        

        Scene scene = new Scene(root);

        

        stage.setScene(scene);

        stage.show();

    }

    /**

     * @param args the command line arguments

     */

    public static void main(String[] args) {

        launch(args);

    }

    

}

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>

<?import com.jfoenix.controls.JFXRadioButton?>

<?import javafx.scene.control.PasswordField?>

<?import javafx.scene.control.TextField?>

<?import javafx.scene.image.Image?>

<?import javafx.scene.image.ImageView?>

<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.text.Font?>

<?import javafx.scene.text.Text?>

<AnchorPane id="AnchorPane" prefHeight="672.0" prefWidth="984.0" style="-fx-background-color: #871725;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.141" fx:controller="charity_ui.FXMLDocumentController">

   <children>

      <AnchorPane layoutX="500.0" prefHeight="672.0" prefWidth="485.0" styleClass="sidepane" stylesheets="@style.css">

         <children>

            <Text fill="#fff6f6" layoutX="81.0" layoutY="160.0" strokeType="OUTSIDE" strokeWidth="0.0" text="FULL NAME">

               <font>

                  <Font name="System Bold" size="14.0" />

               </font>

            </Text>

            <TextField fx:id="name" layoutX="81.0" layoutY="174.0" prefHeight="46.0" prefWidth="301.0">

               <font>

                  <Font size="14.0" />

               </font>

            </TextField>

            <Text fill="#fff6f6" layoutX="81.0" layoutY="248.0" strokeType="OUTSIDE" strokeWidth="0.0" text="PASSWORD">

               <font>

                  <Font name="System Bold" size="14.0" />

               </font>

            </Text>

            <Text fill="#fff6f6" layoutX="81.0" layoutY="330.0" strokeType="OUTSIDE" strokeWidth="0.0" text="E-MAIL">

               <font>

                  <Font name="System Bold" size="14.0" />

               </font>

            </Text>

            <TextField fx:id="email" layoutX="81.0" layoutY="344.0" prefHeight="46.0" prefWidth="301.0">

               <font>

                  <Font size="14.0" />

               </font>

            </TextField>

            <PasswordField fx:id="password" layoutX="81.0" layoutY="260.0" prefHeight="46.0" prefWidth="301.0" />

            <JFXRadioButton fx:id="terms" layoutX="67.0" layoutY="407.0" prefHeight="17.0" prefWidth="173.0" text="Agree all terms and conditions" textFill="#f8f8f8" />

            <JFXButton layoutX="87.0" layoutY="454.0" onMouseClicked="#btn_signup" prefHeight="46.0" prefWidth="142.0" styleClass="btn" text="SIGNUP" textFill="#fffefe" />

            <JFXButton layoutX="243.0" layoutY="454.0" onMouseClicked="#login" prefHeight="46.0" prefWidth="142.0" styleClass="btn" text="AREADY A MEMBER" textFill="#fffefe" />

         </children>

      </AnchorPane>

      <Text fill="#fff6f6" layoutX="200.0" layoutY="279.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Charity">

         <font>

            <Font name="System Bold" size="31.0" />

         </font>

      </Text>

      <Text fill="#fff6f6" layoutX="129.0" layoutY="308.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Charitable organization">

         <font>

            <Font size="24.0" />

         </font>

      </Text>

      <ImageView fitHeight="98.0" fitWidth="105.0" layoutX="203.0" layoutY="329.0" pickOnBounds="true" preserveRatio="true">

         <image>

            <Image url="@../img/icons8-charity-50.png" />

         </image>

      </ImageView>

   </children>

</AnchorPane>

CONTROLLER

/*

 * To change this license header, choose License Headers in Project Properties.

 * To change this template file, choose Tools | Templates

 * and open the template in the editor.

 */

package charity_ui;

import com.jfoenix.controls.JFXRadioButton;

import java.net.URL;

import java.util.ResourceBundle;

import javafx.event.ActionEvent;

import javafx.fxml.FXML;

import javafx.fxml.Initializable;

import javafx.scene.control.Label;

import javafx.scene.control.PasswordField;

import javafx.scene.control.TextField;

import javafx.scene.input.MouseEvent;

/**

 *

 * @author Administrator

 */

public class FXMLDocumentController implements Initializable {

    

    private Label label;

    @FXML

    private TextField name;

    @FXML

    private TextField email;

    @FXML

    private PasswordField password;

    @FXML

    private JFXRadioButton terms;

    

    private void handleButtonAction(ActionEvent event) {

       

    }

    

    @Override

    public void initialize(URL url, ResourceBundle rb) {

        // TODO

    }    

    @FXML

    private void btn_signup(MouseEvent event) {

    }

    @FXML

    private void login(MouseEvent event) {

    }

    

}

CSS

.sidepane{

    -fx-background-color: #423f36;

}

.btn{

    -fx-background-color: #871725;

}