How to make a Antivirus App UI/UX by using javafx || Neatbeans





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

<?import com.jfoenix.controls.JFXButton?>
<?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 fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="650.0" prefWidth="1000.0" stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="antivirus.app.design.FXMLDocumentController">
   <children>
      <VBox prefHeight="650.0" prefWidth="217.0" style="-fx-background-color: #1564C0;">
         <children>
            <Pane prefHeight="135.0" prefWidth="238.0">
               <children>
                  <ImageView fitHeight="52.0" fitWidth="39.0" layoutX="26.0" layoutY="35.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/logo.PNG" />
                     </image>
                  </ImageView>
                  <Label layoutX="63.0" layoutY="53.0" prefHeight="16.0" prefWidth="87.0" text="JAVAFX" textFill="#9eabcd">
                     <font>
                        <Font name="Century Gothic Bold" size="13.0" />
                     </font>
                  </Label>
                  <Label layoutX="63.0" layoutY="69.0" prefHeight="16.0" prefWidth="158.0" text="ANTIVIRUS-MALWARE" textFill="#fdfdff">
                     <font>
                        <Font name="Century Gothic Bold" size="13.0" />
                     </font>
                  </Label>
               </children>
            </Pane>
            <JFXButton alignment="TOP_LEFT" nodeOrientation="LEFT_TO_RIGHT" prefHeight="44.0" prefWidth="238.0" style="-fx-background-color: #2E90F1;" text="OVERVIEW" textFill="#f2ecec">
               <graphic>
                  <ImageView fitHeight="48.0" fitWidth="48.0" nodeOrientation="INHERIT" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/overview.PNG" />
                     </image>
                  </ImageView>
               </graphic>
               <font>
                  <Font name="System Bold" size="12.0" />
               </font>
            </JFXButton>
            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="145.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="48.0" prefWidth="238.0" style="-fx-background-color: #1976D3;" text="SCAN" textFill="#f2ecec">
               <graphic>
                  <ImageView fitHeight="48.0" fitWidth="48.0" nodeOrientation="INHERIT" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/scan.PNG" />
                     </image>
                  </ImageView>
               </graphic>
               <font>
                  <Font name="System Bold" size="12.0" />
               </font>
               <VBox.margin>
                  <Insets top="4.0" />
               </VBox.margin>
            </JFXButton>
            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="197.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="48.0" prefWidth="238.0" style="-fx-background-color: #1976D3;" text="HISTORY" textFill="#f2ecec">
               <graphic>
                  <ImageView fitHeight="48.0" fitWidth="48.0" nodeOrientation="INHERIT" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/history.PNG" />
                     </image>
                  </ImageView>
               </graphic>
               <font>
                  <Font name="System Bold" size="12.0" />
               </font>
               <VBox.margin>
                  <Insets top="4.0" />
               </VBox.margin>
            </JFXButton>
            <JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="197.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="48.0" prefWidth="238.0" style="-fx-background-color: #1976D3;" text="SETTINGS" textFill="#f2ecec">
               <graphic>
                  <ImageView fitHeight="48.0" fitWidth="48.0" nodeOrientation="INHERIT" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/settings.PNG" />
                     </image>
                  </ImageView>
               </graphic>
               <font>
                  <Font name="System Bold" size="12.0" />
               </font>
               <VBox.margin>
                  <Insets top="4.0" />
               </VBox.margin>
            </JFXButton>
            <Pane prefHeight="290.0" prefWidth="238.0">
               <children>
                  <Label layoutX="23.0" layoutY="167.0" prefHeight="16.0" prefWidth="158.0" text="Software Version : 1.0.0.0" textFill="#fdfdff">
                     <font>
                        <Font name="Century Gothic Bold" size="10.0" />
                     </font>
                  </Label>
                  <JFXButton alignment="CENTER" contentDisplay="TEXT_ONLY" layoutX="20.0" layoutY="199.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="56.0" prefWidth="172.0" style="-fx-background-color: #25C6DA;" text="ACTIVATE NOW" textFill="#f2ecec">
                     <font>
                        <Font name="System Bold" size="14.0" />
                     </font>
                  </JFXButton>
               </children>
            </Pane>
         </children>
      </VBox>
      <Pane prefHeight="650.0" prefWidth="785.0">
         <children>
            <Pane prefHeight="186.0" prefWidth="784.0" style="-fx-background-color: #2E90F1;">
               <children>
                  <ImageView fitHeight="56.0" fitWidth="62.0" layoutX="37.0" layoutY="26.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/check.PNG" />
                     </image>
                  </ImageView>
                  <Label layoutX="109.0" layoutY="36.0" prefHeight="36.0" prefWidth="316.0" text="PC in a good shape" textFill="#fdfdff">
                     <font>
                        <Font name="Century Gothic" size="28.0" />
                     </font>
                  </Label>
                  <Label layoutX="99.0" layoutY="111.0" prefHeight="36.0" prefWidth="158.0" text="Scanner : ACTIVE" textFill="#fdfdff">
                     <font>
                        <Font name="Century Gothic" size="11.0" />
                     </font>
                  </Label>
                  <Label layoutX="99.0" layoutY="123.0" prefHeight="36.0" prefWidth="158.0" text="Last Scan : 07/08/2020" textFill="#fdfdff">
                     <font>
                        <Font name="Century Gothic" size="11.0" />
                     </font>
                  </Label>
                  <Label layoutX="99.0" layoutY="137.0" prefHeight="36.0" prefWidth="158.0" text="Database : 07/08/2020" textFill="#fdfdff">
                     <font>
                        <Font name="Century Gothic" size="11.0" />
                     </font>
                  </Label>
                  <JFXButton alignment="CENTER" contentDisplay="TEXT_ONLY" layoutX="577.0" layoutY="67.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="56.0" prefWidth="172.0" style="-fx-background-color: #25C6DA;" text="RUN A SCAN" textFill="#f2ecec">
                     <font>
                        <Font name="System Bold" size="14.0" />
                     </font>
                  </JFXButton>
                  <JFXButton contentDisplay="GRAPHIC_ONLY" layoutX="740.0" layoutY="6.0" onMouseClicked="#close" text="Button">
                     <graphic>
                        <ImageView fitHeight="21.0" fitWidth="21.0" onMouseClicked="#close" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../../../img/close.PNG" />
                           </image>
                        </ImageView>
                     </graphic>
                  </JFXButton>
               </children>
            </Pane>
            <Pane layoutX="41.0" layoutY="242.0" prefHeight="180.0" prefWidth="204.0" style="-fx-background-color: #2E90F1;">
               <children>
                  <ImageView fitHeight="52.0" fitWidth="62.0" layoutX="72.0" layoutY="38.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/search.PNG" />
                     </image>
                  </ImageView>
                  <Label layoutX="55.0" layoutY="100.0" prefHeight="36.0" prefWidth="94.0" text="Run a Scan" textFill="#fdfdff">
                     <font>
                        <Font name="Corbel Bold" size="19.0" />
                     </font>
                  </Label>
               </children>
            </Pane>
            <Pane layoutX="290.0" layoutY="242.0" prefHeight="180.0" prefWidth="204.0" style="-fx-background-color: #28B6F6;">
               <children>
                  <ImageView fitHeight="52.0" fitWidth="62.0" layoutX="72.0" layoutY="38.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/history2.PNG" />
                     </image>
                  </ImageView>
                  <Label layoutX="67.0" layoutY="100.0" prefHeight="36.0" prefWidth="71.0" text="History" textFill="#fdfdff">
                     <font>
                        <Font name="Corbel Bold" size="19.0" />
                     </font>
                  </Label>
               </children>
            </Pane>
            <Pane layoutX="539.0" layoutY="242.0" prefHeight="180.0" prefWidth="204.0" style="-fx-background-color: #25C6DA;">
               <children>
                  <ImageView fitHeight="52.0" fitWidth="62.0" layoutX="72.0" layoutY="38.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/update.PNG" />
                     </image>
                  </ImageView>
                  <Label layoutX="55.0" layoutY="100.0" prefHeight="36.0" prefWidth="94.0" text="Run a Scan" textFill="#fdfdff">
                     <font>
                        <Font name="Corbel Bold" size="19.0" />
                     </font>
                  </Label>
               </children>
            </Pane>
            <Pane layoutY="470.0" prefHeight="180.0" prefWidth="784.0" style="-fx-background-color: #F0F4F7;">
               <children>
                  <ImageView fitHeight="134.0" fitWidth="113.0" layoutX="30.0" layoutY="33.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../../img/antii.PNG" />
                     </image>
                  </ImageView>
                  <Label layoutX="163.0" layoutY="44.0" prefHeight="36.0" prefWidth="190.0" text="Why activate the full version?" textFill="#9191a8">
                     <font>
                        <Font name="Century Gothic" size="11.0" />
                     </font>
                  </Label>
                  <Label layoutX="163.0" layoutY="72.0" prefHeight="36.0" prefWidth="316.0" text="1.Remove the marware and protect your privacy." textFill="#9191a8">
                     <font>
                        <Font name="Century Gothic" size="11.0" />
                     </font>
                  </Label>
                  <Label layoutX="163.0" layoutY="87.0" prefHeight="36.0" prefWidth="316.0" text="2.Restore your browser after hijackers." textFill="#9191a8">
                     <font>
                        <Font name="Century Gothic" size="11.0" />
                     </font>
                  </Label>
                  <Label layoutX="163.0" layoutY="102.0" prefHeight="36.0" prefWidth="316.0" text="3.keep your pc safe with ongoing upadates" textFill="#9191a8">
                     <font>
                        <Font name="Century Gothic" size="11.0" />
                     </font>
                  </Label>
                  <JFXButton alignment="CENTER" contentDisplay="TEXT_ONLY" layoutX="586.0" layoutY="77.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="56.0" prefWidth="172.0" style="-fx-background-color: #25C6DA;" text="UPGRADE" textFill="#f2ecec">
                     <font>
                        <Font name="System Bold" size="14.0" />
                     </font>
                  </JFXButton>
               </children>
            </Pane>
         </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