Java Netbeans UI Design || PayRoll Dashboard

 



Code

View

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


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

<?import javafx.geometry.Insets?>

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

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

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

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

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

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

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

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

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

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

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


<BorderPane fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="736.0" prefWidth="1254.0" stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxa_dashboardpayroll.FXMLPayrollController">

   <left>

      <VBox prefHeight="736.0" prefWidth="289.0" styleClass="sidepanel" stylesheets="@style.css" BorderPane.alignment="CENTER">

         <children>

            <HBox alignment="CENTER" prefHeight="150.0" prefWidth="289.0">

               <children>

                  <Text fill="#f2f2f2" strokeType="OUTSIDE" strokeWidth="0.0" text="PayRoll" wrappingWidth="125.13671875">

                     <font>

                        <Font name="Century Gothic Bold" size="34.0" />

                     </font>

                  </Text>

               </children>

            </HBox>

            <JFXButton alignment="TOP_LEFT" prefHeight="54.0" prefWidth="289.0" text="Primary Settings" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="54.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-settings-50.png" />

                     </image>

                  </ImageView>

               </graphic>

            </JFXButton>

            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="160.0" prefHeight="54.0" prefWidth="289.0" text="Employee" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="42.0" fitWidth="38.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-user-50.png" />

                     </image>

                  </ImageView>

               </graphic>

            </JFXButton>

            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="215.0" prefHeight="54.0" prefWidth="289.0" text="Bonus" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="43.0" fitWidth="43.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-gift-50.png" />

                     </image>

                  </ImageView>

               </graphic>

            </JFXButton>

            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="270.0" prefHeight="54.0" prefWidth="289.0" text="Pay" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="54.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-dollar-coin-50.png" />

                     </image>

                  </ImageView>

               </graphic>

            </JFXButton>

            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="325.0" prefHeight="54.0" prefWidth="289.0" text="Attendence" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="54.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-graph-report-50.png" />

                     </image>

                  </ImageView>

               </graphic>

            </JFXButton>

            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="380.0" prefHeight="54.0" prefWidth="289.0" text="Deductations" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="54.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-dollar-coin-50.png" />

                     </image>

                  </ImageView>

               </graphic>

            </JFXButton>

            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="435.0" prefHeight="54.0" prefWidth="289.0" text="Reprts" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="54.0" fitWidth="45.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-documentation-50.png" />

                     </image>

                  </ImageView>

               </graphic>

            </JFXButton>

            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="490.0" prefHeight="54.0" prefWidth="289.0" text="Lougout" textFill="#f5f4f4">

               <font>

                  <Font name="Century Gothic" size="15.0" />

               </font>

               <graphic>

                  <ImageView fitHeight="40.0" fitWidth="47.0" pickOnBounds="true" preserveRatio="true">

                     <image>

                        <Image url="@../image/icons8-user-50.png" />

                     </image>

                  </ImageView>

               </graphic>

               <VBox.margin>

                  <Insets top="145.0" />

               </VBox.margin>

            </JFXButton>

         </children>

      </VBox>

   </left>

   <center>

      <Pane prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">

         <children>

            <Pane layoutY="89.0" prefHeight="124.0" prefWidth="947.0" styleClass="topcenter">

               <children>

                  <Text fill="#eeeeee" layoutX="33.0" layoutY="39.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Dashboard/Employee" wrappingWidth="210.13671875">

                     <font>

                        <Font name="Century Gothic" size="15.0" />

                     </font>

                  </Text>

                  <Text fill="#eeeeee" layoutX="33.0" layoutY="69.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Search Employee Records" wrappingWidth="265.13671875">

                     <font>

                        <Font name="Century Gothic" size="20.0" />

                     </font>

                  </Text>

                  <TextField layoutX="307.0" layoutY="40.0" prefHeight="42.0" prefWidth="307.0" promptText="Name/CNIC :" />

                  <JFXButton layoutX="632.0" layoutY="42.0" prefHeight="40.0" prefWidth="108.0" styleClass="btn" text="Search" textFill="#f5f4f4">

                     <font>

                        <Font size="17.0" />

                     </font>

                  </JFXButton>

               </children>

            </Pane>

            <Text fill="#837d7d" layoutX="22.0" layoutY="39.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Material Ui Java" wrappingWidth="212.13671875">

               <font>

                  <Font name="Century Gothic" size="25.0" />

               </font>

            </Text>

            <Text fill="#837d7d" layoutX="22.0" layoutY="63.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Dashboard" wrappingWidth="212.13671875">

               <font>

                  <Font name="Century Gothic" size="17.0" />

               </font>

            </Text>

            <TableView layoutX="14.0" layoutY="235.0" prefHeight="364.0" prefWidth="935.0">

              <columns>

                <TableColumn prefWidth="75.0" text="S#No" />

                <TableColumn prefWidth="248.0" text="Name" />

                  <TableColumn prefWidth="248.0" text="CNIC" />

                  <TableColumn prefWidth="256.0" text="Designation" />

                  <TableColumn prefWidth="106.0" text="Status" />

              </columns>

            </TableView>

         </children>

      </Pane>

   </center>

</BorderPane>



LoaderClass


package javafxa_dashboardpayroll;


import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;


/**

 *

 * @author Administrator

 */

public class JavaFXA_DashboardPayroll extends Application {

    

    @Override

    public void start(Stage stage) throws Exception {

        Parent root = FXMLLoader.load(getClass().getResource("FXMLPayroll.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);

    }

    

}



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 javafxa_dashboardpayroll;

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.layout.BorderPane;

/**
 *
 * @author Administrator
 */
public class FXMLPayrollController implements Initializable {
    

    
    private void handleButtonAction(ActionEvent event) {
     
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
    
}



css

.sidepanel{
    -fx-background-color: #36265A;
}

.topcenter{
    -fx-background-color: #7B55E2;
}
.btn{
    border: 2px solid white;
}



Comments

Post a Comment

Popular posts from this blog

JavaFX UI /UX Dashboard

Image
//FXML <?xml version="1.0" encoding="UTF-8"?> <?import com.jfoenix.controls.JFXButton?> <?import com.jfoenix.controls.JFXTextField?> <?import java.lang.String?> <?import javafx.scene.control.Label?> <?import javafx.scene.control.ProgressBar?> <?import javafx.scene.image.Image?> <?import javafx.scene.image.ImageView?> <?import javafx.scene.layout.AnchorPane?> <?import javafx.scene.layout.HBox?> <?import javafx.scene.layout.Pane?> <?import javafx.scene.layout.VBox?> <?import javafx.scene.text.Font?> <HBox fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="827.0" prefWidth="1320.0" styleClass="root" stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ui_...
Read more

JavaFX code for responsive layout

Image
  This code creates a responsive layout using a BorderPane as the root layout, with an HBox in the top region containing two buttons. The spacing between the buttons adjusts based on the width of the scene using a listener on the scene’s width property bu ttons adjusts based on the width of the scene using a listener on the scene’s width property import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.scene.layout.HBox; import javafx.stage.Stage; public class ResponsiveLayoutExample extends Application { @Override public void start(Stage primaryStage) { // Create a border pane as the root layout BorderPane root = new BorderPane(); // Create an HBox for the top of the border pane HBox topBox = new HBox(); topBox.setPadding(new Insets(10, 10, 10, 10)); topBox.setSpacing(10); // Create two...
Read more