How to create Modern Todo GUI Using JavaFX and SceneBuilder
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="679.0" prefWidth="1047.0" stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="todoapp.TodoController">
<top>
<HBox alignment="CENTER_LEFT" prefHeight="52.0" prefWidth="1047.0" styleClass="topsidepanel" BorderPane.alignment="CENTER">
<children>
<Text fill="#e4e4e4" strokeType="OUTSIDE" strokeWidth="0.0" text="Todo App" wrappingWidth="161.13671875">
<font>
<Font name="Calibri Bold" size="23.0" />
</font>
<HBox.margin>
<Insets left="60.0" />
</HBox.margin>
</Text>
</children>
</HBox>
</top>
<left>
<VBox prefHeight="627.0" prefWidth="237.0" styleClass="sidepanel" BorderPane.alignment="CENTER">
<children>
<JFXButton alignment="TOP_LEFT" prefHeight="54.0" prefWidth="237.0" text="Profile" textFill="#e8e8e8">
<font>
<Font name="Calibri" size="17.0" />
</font>
<graphic>
<ImageView fitHeight="43.0" fitWidth="36.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/profile.png" />
</image>
</ImageView>
</graphic>
<VBox.margin>
<Insets top="20.0" />
</VBox.margin>
</JFXButton>
<JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="10.0" prefHeight="54.0" prefWidth="237.0" text="Users" textFill="#e8e8e8">
<font>
<Font name="Calibri" size="17.0" />
</font>
<graphic>
<ImageView fitHeight="43.0" fitWidth="36.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/gruoup.png" />
</image>
</ImageView>
</graphic>
</JFXButton>
<JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="10.0" prefHeight="54.0" prefWidth="237.0" text="Tasks" textFill="#e8e8e8">
<font>
<Font name="Calibri" size="17.0" />
</font>
<graphic>
<ImageView fitHeight="43.0" fitWidth="36.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/taskk.png" />
</image>
</ImageView>
</graphic>
</JFXButton>
<JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="64.0" prefHeight="54.0" prefWidth="237.0" text="Projects" textFill="#e8e8e8">
<font>
<Font name="Calibri" size="17.0" />
</font>
<graphic>
<ImageView fitHeight="43.0" fitWidth="36.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/project.png" />
</image>
</ImageView>
</graphic>
</JFXButton>
<JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="118.0" prefHeight="54.0" prefWidth="237.0" text="Chats" textFill="#e8e8e8">
<font>
<Font name="Calibri" size="17.0" />
</font>
<graphic>
<ImageView fitHeight="43.0" fitWidth="36.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/chat.png" />
</image>
</ImageView>
</graphic>
</JFXButton>
<JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="172.0" prefHeight="54.0" prefWidth="237.0" text="Logs" textFill="#e8e8e8">
<font>
<Font name="Calibri" size="17.0" />
</font>
<graphic>
<ImageView fitHeight="43.0" fitWidth="36.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/log.png" />
</image>
</ImageView>
</graphic>
</JFXButton>
<JFXButton alignment="TOP_LEFT" layoutX="10.0" layoutY="280.0" prefHeight="54.0" prefWidth="237.0" text="Reports" textFill="#e8e8e8">
<font>
<Font name="Calibri" size="17.0" />
</font>
<graphic>
<ImageView fitHeight="43.0" fitWidth="36.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/report.png" />
</image>
</ImageView>
</graphic>
</JFXButton>
</children>
</VBox>
</left>
<center>
<TabPane prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER">
<tabs>
<Tab text="Members">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<HBox prefHeight="55.0" prefWidth="810.0">
<children>
<JFXButton prefHeight="55.0" prefWidth="446.0" text="MEMBERS" />
<JFXButton layoutX="10.0" layoutY="10.0" prefHeight="56.0" prefWidth="106.0" text="ADD" />
<JFXButton layoutX="116.0" layoutY="10.0" prefHeight="56.0" prefWidth="106.0" text="IMPORT" />
<JFXButton layoutX="562.0" layoutY="10.0" prefHeight="56.0" prefWidth="106.0" text="EXPORT" />
<JFXButton layoutX="328.0" layoutY="10.0" prefHeight="56.0" prefWidth="106.0" text="BACKUP" />
</children>
</HBox>
<TableView layoutX="6.0" layoutY="55.0" prefHeight="478.0" prefWidth="799.0">
<columns>
<TableColumn prefWidth="75.0" text="S#No" />
<TableColumn prefWidth="140.0" text="Name" />
<TableColumn prefWidth="150.0" text="CNIC" />
<TableColumn prefWidth="145.0" text="Number" />
<TableColumn prefWidth="180.0" text="E-Mail" />
<TableColumn prefWidth="102.0" text="Status" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</Tab>
<Tab text="Task">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Label layoutX="14.0" layoutY="43.0" prefHeight="90.0" prefWidth="308.0" text="Not assign any task yet now......." />
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</center>
</BorderPane>
Java Main
package todoapp;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* @author IPHONE14
*/
public class TodoApp extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("Todo.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 todoapp;
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;
/**
*
* @author IPHONE14
*/
public class TodoController implements Initializable {
private Label label;
private void handleButtonAction(ActionEvent event) {
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
css
.sidepanel{
-fx-background-color: #034BC1;
}
.topsidepanel{
-fx-background-color: #053FBA;
}
.webp)
Comments
Post a Comment