Recently, I’ve been having a lot of people come to me saying they want to learn programming, most of the time I just refer them to HTML, Python or C++. Well yes, they are the same languages I started out with and they help you understand the basics faster and help you get your hands dirty easily. But then I realized after a month or two there’s usually this excuse of I’m finding it difficult to build User interfaces and I got frustrated by Python GUI so I’m done. Lol, I feel like “So quick?” being frustrated is one thing, but giving up so easily is another thing entirely.
Well this brought me to deciding to start a tutorial series, but this time on building GUI with JavaFx and CSS.
Before I start the programming aspect, A little explanation as regards what JavaFx and CSS are.
**JavaFx:**
> JavaFx is a software development platform for creating desktop and rich internet applications that can run across a wide variety of devices. JavaFx was created as a replacement for the Java Swing as a standard GUI Library for Java SE.
In simple terms, JavaFx is a more friendly GUI library created to replace Java Swing library.
**CSS:**
>Cascading style sheet is a style sheet language for describing what markup language elements should look like and be displayed.
Basically, it is used to choose, what color, font, transparency, e.t.c for any element in an interface.
In this tutorial we’ll be looking at a few basics required to making programming with JavaFx and CSS look a little bit easier.
### Content:
- Software Requirement
- Basic Hello window
- Background Design: Colors, Image.
#### Software Requirement
For this tutorial series, we’ll be making use of `IntelliJ IDEA Community`, now this is because it has an inbuilt scene builder, where we can easily drag and drop items into the window we are building and also resize these components easily. There are other software we can use, but will require us downloading a scene builder separately which could be a waste of time.
Before downloading IntelliJ IDEA or any other Java Compiler, you must have first installed JDK - Java development kit, any version from 8 and above will do, check JDK download page [Here](https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html) and select any of your choice and You can download IntelliJ IDEA Community [Here](https://www.jetbrains.com/idea/download/download-thanks.html?platform=windows&code=IIC) also.
After downloading, Install the software and we are ready to go.
#### Basic Hello window
The basic hello window is the sample window created by JavaFx when a new project is created by the developer, this window contains nothing at all . This is not really our focus today but I’ll do my best to explain how it all works before we continue.
**How do we create a new application?**
The steps are easy so you should have a problem with them, jus follow the directives and screenshots are provided beneath every step to show you a sample of what you should see.
Step 1: Click on the File menu, go to New, and click Project under New.
You can see all the sections I went through highlighted In bule.
Step 2: Select JavaFx and Click Next.
Step 3: Name the Application you want to build and click finish.
We are all set up for coding now, but before we begin making any changes and viewing our Hello window, I would like to explain what all the sections in the InTelliJ are and are used for.
The Image below shows a layout of the home screen, different sections are marked with red and have been numbered to make explanation understandable.
Section 1: This area is the Title pane, it shows the name of the software and the current project we are working on.
Section 2: This is the file menu where all settings, options and tasks can be organized in the system.
Section 3: This section shows the path to the current file being worked on.
Section 4: This section shows us the current files in the project we are working on, files can easily be removed from or added to the project in this section.
Section 5: Here we can switch through tabs to view open files. In the screenshot, three files are open and can be accessed and worked upon by just clicking on the respective tab.
Section 6: This section provides run menu command shortcuts. Contains a few button for commands found in the run menu.
Section 7: This is the view pane where editing and coding is carried out.
Section 8: This section switches between code view and the scene builder.
**To the code**
From the main.java, we have the code below;
```
package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 300, 275));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
```
The first line of code there shows the name of the package which the main file is currently, if the main file was moved to another package, the new package name will appear there automatically.
The 2nd to 6th line of code are the required imports for the program to work. These imports are from different internal libraries of the JavaFx library.
Line 9 loads the fxml file where we can drag and drop items on from the scene builder into the application window.
Line 10 is the title of our application which says “hello world”, so when we run the application, the title bar will have “hello world” displayed.
Lines 11 and 12, Set the size of the scene and also shows the scene.
Now to see the sample screen, right click inside the code and click run main, or click on the play button in the run tools.
This screen will appear.
As you can see the title says “Hello World”, this is the sample screen provided by IntelliJ IDEA for Java Fx Applications, you can now either delete this screen or build on it.
For this tutorial we will be building on this screen and also adding css to make the screen look better. Now go back to the main file and remove the size given by the system, this will make the system work by the size of our design in the scene builder.
#### Adding CSS to the Application
- Step 1: Right click in the file segment, select new and click on file.
- Step 2: Name the file style.css
- Step 3: Open the .fxml file, it will display the scene builder, drag and drop an Anchor pane on the scene as seen below.
You can increase the size of the pane to your satisfaction.
Step 4: Scroll down the properties area of the scene builder, you will find stylesheets.. Click on the add button and select the style.css file.
If you follow the steps in the image above, the style sheet will appear as seen below.
This way, we have successfully added css to the application.
#### Background Design:
To add a design to any component on the screen, we have to declare it in the style sheet. For example since we will be doing designs on the background in this tutorial, our style sheet code will look like this.
```
.root{
//add all styles here
}
```
The root in the code tells the system that this style is to be applied to the component whose style is set to root alone. All the designs have to be entered into the braces or the system will return errors.
Since we have added a style to our style sheet, we can now add the style to a component in the scene builder.
Click on the anchor pane, go to properties, click on the arrow beneath the style class and select root.
- Colors: To add a color to the background, we simply add `-fx-background-color:` followed by the name of the color or its code, for example black or color code #000000. This will make the code area look like this.
```
.root{
-fx-background-color: #00000;
}
```
Remember every line of code here ends with a semi colon ‘;’.
Now if we run the main file again, our application will appear with a black interface as seen below.
- Image: To add image to the background of your application, go to the style sheet, erase the background color code and add this:
```
-fx-background-image: url(“path to the image, or the name of the image”);
```
Note: The path of the image is used if the image is outside the source file of the application, else the name of the image is used.
In this example, I’ll be using a file in the source of the application. Copy the Image you want to make sue of as the background image into the source file of the application. The code will become `-fx-background-image: url("ad.png");`
If we run the main file now, we will have:
This is because we have not set the size of the image.
Now input this beneath the Image code;
`-fx-background-size:cover` This will resize the Image to fill the Screen.
This brings us to the end of this tutorial.
#### If you liked the tutorial, kindly follow and drop any questions you have in comments.
hiveblocks