Javafx ui sample Demo





FXMLDocument.fxml



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


<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTextField?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="1050.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="cro.ui.FXMLDocumentController">
   <children>
      <VBox prefHeight="600.0" prefWidth="153.0" styleClass="pane_1" stylesheets="@style.css">
         <children>
            <JFXButton prefHeight="73.0" prefWidth="157.0" text="UI" textFill="#f5f5f5">
               <font>
                  <Font name="Consolas Bold" size="35.0" />
               </font>
               <VBox.margin>
                  <Insets top="50.0" />
               </VBox.margin>
            </JFXButton>
            <JFXButton alignment="BOTTOM_CENTER" contentDisplay="TOP" layoutX="10.0" layoutY="70.0" prefHeight="73.0" prefWidth="157.0" styleClass="button_1" stylesheets="@style.css" text="Dashboard" textFill="#f5f5f5">
               <font>
                  <Font name="Consolas Bold" size="14.0" />
               </font>
               <graphic>
                  <ImageView fitHeight="62.0" fitWidth="65.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../img/Futures_64px.png" />
                     </image>
                  </ImageView>
               </graphic>
               <VBox.margin>
                  <Insets top="30.0" />
               </VBox.margin>
            </JFXButton>
            <JFXButton alignment="BOTTOM_CENTER" contentDisplay="TOP" layoutX="10.0" layoutY="163.0" prefHeight="73.0" prefWidth="157.0" styleClass="button_1" stylesheets="@style.css" text="Study Courses" textFill="#f5f5f5">
               <font>
                  <Font name="Consolas Bold" size="14.0" />
               </font>
               <graphic>
                  <ImageView fitHeight="62.0" fitWidth="65.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../img/List_50px.png" />
                     </image>
                  </ImageView>
               </graphic>
               <VBox.margin>
                  <Insets top="30.0" />
               </VBox.margin>
            </JFXButton>
            <JFXButton alignment="BOTTOM_CENTER" contentDisplay="TOP" layoutX="10.0" layoutY="256.0" prefHeight="73.0" prefWidth="157.0" styleClass="button_1" stylesheets="@style.css" text="Admin Panel" textFill="#f5f5f5">
               <font>
                  <Font name="Consolas Bold" size="14.0" />
               </font>
               <graphic>
                  <ImageView fitHeight="62.0" fitWidth="65.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../img/Repeat_50px.png" />
                     </image>
                  </ImageView>
               </graphic>
               <VBox.margin>
                  <Insets top="30.0" />
               </VBox.margin>
            </JFXButton>
         </children>
      </VBox>
      <Pane fx:id="root" prefHeight="600.0" prefWidth="895.0" style="-fx-background-color: #FEFAE8;">
         <children>
            <Label layoutX="352.0" layoutY="79.0" prefHeight="39.0" prefWidth="222.0" text="What do you hear?">
               <font>
                  <Font name="Calibri Bold" size="27.0" />
               </font>
            </Label>
            <JFXButton alignment="BOTTOM_CENTER" contentDisplay="GRAPHIC_ONLY" layoutX="425.0" layoutY="119.0" onMouseClicked="#ctrl_playmusic" prefHeight="65.0" prefWidth="70.0" styleClass="button_1" stylesheets="@style.css" text="Study Courses" textFill="#f5f5f5">
               <font>
                  <Font name="Consolas Bold" size="14.0" />
               </font>
               <graphic>
                  <ImageView fitHeight="62.0" fitWidth="65.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../img/Circled%20Play_64px_1.png" />
                     </image>
                  </ImageView>
               </graphic>
            </JFXButton>
            <ImageView fitHeight="378.0" fitWidth="589.0" layoutX="448.0" layoutY="198.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../../img/back.PNG" />
               </image>
            </ImageView>
            <JFXTextField focusColor="WHITE" layoutX="116.0" layoutY="210.0" maxWidth="243.0" minWidth="199.0" prefHeight="46.0" prefWidth="243.0" promptText="Mother" stylesheets="@style.css" unFocusColor="#f8f8f8">
               <font>
                  <Font name="Arial" size="21.0" />
               </font>
            </JFXTextField>
            <JFXTextField focusColor="WHITE" layoutX="366.0" layoutY="210.0" maxWidth="243.0" minWidth="199.0" prefHeight="46.0" prefWidth="243.0" promptText="Borther" stylesheets="@style.css" unFocusColor="#f8f8f8">
               <font>
                  <Font name="Arial" size="21.0" />
               </font>
            </JFXTextField>
            <JFXTextField focusColor="WHITE" layoutX="116.0" layoutY="277.0" maxWidth="243.0" minWidth="199.0" prefHeight="46.0" prefWidth="243.0" promptText="Sister" stylesheets="@style.css" unFocusColor="#f8f8f8">
               <font>
                  <Font name="Arial" size="21.0" />
               </font>
            </JFXTextField>
            <JFXTextField focusColor="WHITE" layoutX="366.0" layoutY="277.0" maxWidth="243.0" minWidth="199.0" prefHeight="46.0" prefWidth="243.0" promptText="Father" stylesheets="@style.css" unFocusColor="#f8f8f8">
               <font>
                  <Font name="Arial" size="21.0" />
               </font>
            </JFXTextField>
            <JFXButton alignment="BOTTOM_CENTER" contentDisplay="GRAPHIC_ONLY" layoutX="806.0" layoutY="7.0" onAction="#ctrl_close" onMouseClicked="#ctrl_playmusic" prefHeight="65.0" prefWidth="70.0" styleClass="button_1" stylesheets="@style.css" text="Study Courses" textFill="#f5f5f5">
               <font>
                  <Font name="Consolas Bold" size="14.0" />
               </font>
               <graphic>
                  <ImageView fitHeight="62.0" fitWidth="65.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../img/Cancel_64px_1.png" />
                     </image>
                  </ImageView>
               </graphic>
            </JFXButton>
         </children>
      </Pane>
   </children>
</HBox>

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