Skip to content

Commit 7469cbf

Browse files
author
Rajeev Kumar Singh
committed
CSS Demo App
1 parent 21a2cea commit 7469cbf

File tree

7 files changed

+180
-18
lines changed

7 files changed

+180
-18
lines changed

‎JavaFXCSSDemoApp/Readme.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
JavaFX CSS Demo Example

‎JavaFXCSSDemoApp/src/sample/CSSDemoApplication.java

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package sample;
2+
3+
import javafx.application.Application;
4+
import javafx.fxml.FXMLLoader;
5+
import javafx.scene.Parent;
6+
import javafx.scene.Scene;
7+
import javafx.stage.Stage;
8+
9+
10+
public class CSSDemoApplication extends Application {
11+
12+
@Override
13+
public void start(Stage primaryStage) throws Exception {
14+
Parent root = FXMLLoader.load(getClass().getResource("css_demo.fxml"));
15+
Scene scene = new Scene(root, 800, 500);
16+
scene.getStylesheets().add(getClass().getResource("demo.css").toExternalForm());
17+
primaryStage.setScene(scene);
18+
primaryStage.show();
19+
}
20+
21+
public static void main(String[] args) {
22+
launch(args);
23+
}
24+
}

‎JavaFXCSSDemoApp/src/sample/css_demo.fxml

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<?import javafx.scene.layout.BorderPane?>
2+
<?import javafx.scene.layout.HBox?>
3+
<?import javafx.scene.layout.VBox?>
4+
<?import javafx.scene.control.Label?>
5+
<?import javafx.scene.control.Button?>
6+
<?import javafx.scene.image.ImageView?>
7+
<?import javafx.scene.image.Image?>
8+
<BorderPane>
9+
<top>
10+
<BorderPane styleClass="header-section">
11+
<left>
12+
<Label id="header-text" text="Application Header"></Label>
13+
</left>
14+
<right>
15+
<Button id="account" text="Account">
16+
<graphic>
17+
<ImageView fitHeight="24" fitWidth="24" pickOnBounds="true" preserveRatio="true">
18+
<image>
19+
<Image url="@javafx_account_example.png" />
20+
</image>
21+
</ImageView>
22+
</graphic>
23+
</Button>
24+
</right>
25+
</BorderPane>
26+
</top>
27+
<left>
28+
<VBox styleClass="sidebar-section">
29+
<children>
30+
<Label text="Sidebar Item1"></Label>
31+
<Label text="Sidebar Item2"></Label>
32+
<Label text="Sidebar Item3"></Label>
33+
<Label text="Sidebar Item4"></Label>
34+
</children>
35+
</VBox>
36+
</left>
37+
<center>
38+
<VBox styleClass="content-section">
39+
<children>
40+
<Label id="content-header" text="Content header"></Label>
41+
<Label id="content">
42+
<text>
43+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
44+
</text>
45+
</Label>
46+
</children>
47+
</VBox>
48+
</center>
49+
<bottom>
50+
<HBox id="footer-section">
51+
<children>
52+
<Label text="Copyright 2017 CalliCoder"></Label>
53+
</children>
54+
</HBox>
55+
</bottom>
56+
</BorderPane>

‎JavaFXCSSDemoApp/src/sample/demo.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.root {
2+
-fx-font-size: 14px;
3+
-fx-font-family: sans-serif;
4+
}
5+
6+
.header-section {
7+
-fx-padding: 10px;
8+
-fx-font-size: 20px;
9+
-fx-background-color: teal;
10+
}
11+
12+
.header-section Label {
13+
-fx-text-fill: #ffffff;
14+
-fx-padding: 10px;
15+
}
16+
17+
.header-section #account {
18+
-fx-background-color: transparent;
19+
-fx-text-fill: #ffffff;
20+
-fx-font-size: 16px;
21+
-fx-cursor: hand;
22+
}
23+
24+
.sidebar-section {
25+
-fx-min-width: 200px;
26+
-fx-pref-width: 200px;
27+
-fx-max-width: 200px;
28+
-fx-border-width: 1;
29+
-fx-border-color: transparent #E8E8E8 transparent transparent;
30+
}
31+
32+
.sidebar-section Label {
33+
-fx-font-size: 18px;
34+
-fx-padding: 10 15 10 15;
35+
-fx-border-width: 1;
36+
-fx-border-color: transparent transparent #E8E8E8 transparent;
37+
-fx-min-width: 200px;
38+
-fx-pref-width: 200px;
39+
-fx-max-width: 200px;
40+
}
41+
42+
.content-section {
43+
-fx-padding: 10 20 10 20;
44+
-fx-wrap-text: true;
45+
46+
}
47+
48+
.content-section #content-header {
49+
-fx-font-size: 18px;
50+
-fx-padding: 0 0 10 0;
51+
-fx-font-weight: 700;
52+
}
53+
54+
.content-section #content {
55+
-fx-wrap-text: true;
56+
-fx-font-size: 16px;
57+
}
58+
59+
#footer-section {
60+
-fx-alignment: center;
61+
-fx-padding: 10 10 10 10;
62+
-fx-border-width: 1;
63+
-fx-border-color: #E8E8E8 transparent transparent transparent;
64+
}

‎JavaFXCSSDemoApp/src/sample/javafx_account_example.png

252 Bytes
Loading

‎RegistrationFormFXML/src/javafx/example/RegistrationFormController.java

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,25 @@ public class RegistrationFormController {
2222
private Button submitButton;
2323

2424
@FXML
25-
public void handleSubmitButtonAction(ActionEvent event) {
25+
protected void handleSubmitButtonAction(ActionEvent event) {
2626
Window owner = submitButton.getScene().getWindow();
2727
if(nameField.getText().isEmpty()) {
28-
AlertHelper.showAlert(Alert.AlertType.ERROR, owner, "Form Error!", "Please enter your name");
28+
AlertHelper.showAlert(Alert.AlertType.ERROR, owner, "Form Error!",
29+
"Please enter your name");
2930
return;
3031
}
3132
if(emailField.getText().isEmpty()) {
32-
AlertHelper.showAlert(Alert.AlertType.ERROR, owner, "Form Error!", "Please enter your email id");
33+
AlertHelper.showAlert(Alert.AlertType.ERROR, owner, "Form Error!",
34+
"Please enter your email id");
3335
return;
3436
}
3537
if(passwordField.getText().isEmpty()) {
36-
AlertHelper.showAlert(Alert.AlertType.ERROR, owner, "Form Error!", "Please enter a password");
38+
AlertHelper.showAlert(Alert.AlertType.ERROR, owner, "Form Error!",
39+
"Please enter a password");
3740
return;
3841
}
3942

40-
AlertHelper.showAlert(Alert.AlertType.CONFIRMATION, owner, "Registration Successful!", "Welcome " + nameField.getText());
43+
AlertHelper.showAlert(Alert.AlertType.CONFIRMATION, owner, "Registration Successful!",
44+
"Welcome " + nameField.getText());
4145
}
4246
}

‎RegistrationFormFXML/src/javafx/example/registration_form.fxml

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,22 @@
88
<?import javafx.scene.control.PasswordField?>
99
<?import javafx.scene.control.Button?>
1010
<GridPane fx:controller="javafx.example.RegistrationFormController"
11-
xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
11+
xmlns:fx="http://javafx.com/fxml" alignment="center"
12+
hgap="10" vgap="10">
1213
<padding><Insets top="40" right="40" bottom="40" left="40"/></padding>
1314
<columnConstraints>
14-
<ColumnConstraints minWidth="100" prefWidth="100" maxWidth="Infinity" halignment="RIGHT"></ColumnConstraints>
15-
<ColumnConstraints minWidth="200" prefWidth="200" maxWidth="Infinity" hgrow="ALWAYS"></ColumnConstraints>
15+
<ColumnConstraints minWidth="100" prefWidth="100"
16+
maxWidth="Infinity" halignment="RIGHT">
17+
</ColumnConstraints>
18+
<ColumnConstraints minWidth="200" prefWidth="200"
19+
maxWidth="Infinity" hgrow="ALWAYS">
20+
</ColumnConstraints>
1621
</columnConstraints>
1722

1823
<!-- Add Header Label -->
19-
<Label text="Registration Form" GridPane.columnIndex="0" GridPane.rowIndex="0"
20-
GridPane.columnSpan="2" GridPane.rowSpan="1"
21-
GridPane.halignment="CENTER" >
24+
<Label text="Registration Form" GridPane.columnIndex="0"
25+
GridPane.rowIndex="0" GridPane.columnSpan="2"
26+
GridPane.rowSpan="1" GridPane.halignment="CENTER" >
2227
<font>
2328
<Font name="Arial" size="24" ></Font>
2429
</font>
@@ -30,23 +35,31 @@
3035

3136

3237
<!-- Add Name Label -->
33-
<Label text="Full Name : " GridPane.columnIndex="0" GridPane.rowIndex="1" ></Label>
38+
<Label text="Full Name : " GridPane.columnIndex="0"
39+
GridPane.rowIndex="1" >
40+
</Label>
3441
<!-- Add Name Text Field -->
35-
<TextField fx:id="nameField"
36-
prefHeight="40" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
42+
<TextField fx:id="nameField" prefHeight="40"
43+
GridPane.columnIndex="1" GridPane.rowIndex="1"/>
3744

3845

3946
<!-- Add Email Label -->
40-
<Label text="Email ID : " GridPane.columnIndex="0" GridPane.rowIndex="2" ></Label>
47+
<Label text="Email ID : " GridPane.columnIndex="0"
48+
GridPane.rowIndex="2" >
49+
</Label>
4150
<!-- Add Email Text Field -->
42-
<TextField fx:id="emailField" prefHeight="40" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
51+
<TextField fx:id="emailField" prefHeight="40"
52+
GridPane.columnIndex="1" GridPane.rowIndex="2"/>
4353

4454

4555

4656
<!-- Add Password Label -->
47-
<Label text="Password : " GridPane.columnIndex="0" GridPane.rowIndex="3" ></Label>
57+
<Label text="Password : " GridPane.columnIndex="0"
58+
GridPane.rowIndex="3" >
59+
</Label>
4860
<!-- Add Password Field -->
49-
<PasswordField fx:id="passwordField" prefHeight="40" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
61+
<PasswordField fx:id="passwordField" prefHeight="40"
62+
GridPane.columnIndex="1" GridPane.rowIndex="3"/>
5063

5164

5265
<!-- Add Submit Button -->

0 commit comments

Comments
 (0)