Skip to content
Snippets Groups Projects
Commit 48f2d6b6 authored by Ryan Le's avatar Ryan Le
Browse files

Made the readme less windows-specific

parent 6f70ef6a
No related branches found
No related tags found
No related merge requests found
No preview for this file type
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?> <?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?> <?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?> <?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?> <?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?> <?import javafx.scene.control.MenuItem?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.BorderPane?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.HomeController"> <BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.HomeController">
...@@ -29,9 +31,6 @@ ...@@ -29,9 +31,6 @@
</menus> </menus>
</MenuBar> </MenuBar>
</top> </top>
<center>
<Label fx:id="middle" text="This is the starter text." BorderPane.alignment="CENTER" />
</center>
<left> <left>
<Button mnemonicParsing="false" onAction="#clickLeftButton" text="Left Button" BorderPane.alignment="CENTER" /> <Button mnemonicParsing="false" onAction="#clickLeftButton" text="Left Button" BorderPane.alignment="CENTER" />
</left> </left>
...@@ -41,4 +40,14 @@ ...@@ -41,4 +40,14 @@
<bottom> <bottom>
<Button mnemonicParsing="false" onAction="#switchScreen" text="Switch Screen" BorderPane.alignment="CENTER" /> <Button mnemonicParsing="false" onAction="#switchScreen" text="Switch Screen" BorderPane.alignment="CENTER" />
</bottom> </bottom>
<center>
<AnchorPane prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<Label fx:id="middle" layoutX="263.0" layoutY="34.0" text="This is the starter text." />
<CheckBox fx:id="checkbox1" layoutX="263.0" layoutY="216.0" mnemonicParsing="false" selected="true" text="Item 1" />
<CheckBox fx:id="checkbox2" layoutX="263.0" layoutY="246.0" mnemonicParsing="false" text="Item 2" />
<CheckBox fx:id="checkbox3" layoutX="263.0" layoutY="275.0" mnemonicParsing="false" text="Item 3" />
</children>
</AnchorPane>
</center>
</BorderPane> </BorderPane>
...@@ -9,7 +9,10 @@ ...@@ -9,7 +9,10 @@
<items> <items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children> <children>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="209.0" layoutY="81.0" prefHeight="196.0" prefWidth="598.0" text="This is the second screen!" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> <Label layoutX="235.0" layoutY="50.0" text="The selected items are:" />
<Label layoutX="259.0" layoutY="95.0" text="Label" />
<Label layoutX="259.0" layoutY="140.0" text="Label" />
<Label layoutX="259.0" layoutY="179.0" text="Label" />
</children></AnchorPane> </children></AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children> <children>
......
...@@ -6,14 +6,19 @@ import javafx.scene.Node; ...@@ -6,14 +6,19 @@ import javafx.scene.Node;
import javafx.scene.Parent; import javafx.scene.Parent;
import javafx.scene.Scene; import javafx.scene.Scene;
import javafx.scene.control.Label; import javafx.scene.control.Label;
import javafx.scene.control.CheckBox;
import javafx.stage.Stage; import javafx.stage.Stage;
import java.awt.*;
import java.awt.event.ActionEvent; import java.awt.event.ActionEvent;
import java.io.IOException; import java.io.IOException;
public class HomeController { public class HomeController {
@FXML @FXML private Label middle;
private Label middle; @FXML private CheckBox checkbox1;
@FXML private CheckBox checkbox2;
@FXML private CheckBox checkbox3;
public void clickLeftButton() { public void clickLeftButton() {
middle.setText("The button on the left was clicked."); middle.setText("The button on the left was clicked.");
...@@ -28,9 +33,11 @@ public class HomeController { ...@@ -28,9 +33,11 @@ public class HomeController {
} }
public void switchScreen(javafx.event.ActionEvent event) throws IOException { public void switchScreen(javafx.event.ActionEvent event) throws IOException {
Parent parent = FXMLLoader.load(getClass().getResource("secondScreen.fxml")); FXMLLoader loader = new FXMLLoader();
Scene scene = new Scene(parent); loader.setLocation(getClass().getResource("secondScreen.fxml"));
Parent parent = loader.load();
Scene scene = new Scene(parent);
Stage window = (Stage)((Node)event.getSource()).getScene().getWindow(); Stage window = (Stage)((Node)event.getSource()).getScene().getWindow();
window.setScene(scene); window.setScene(scene);
......
...@@ -20,4 +20,6 @@ public class SecondScreenController { ...@@ -20,4 +20,6 @@ public class SecondScreenController {
window.setScene(scene); window.setScene(scene);
window.show(); window.show();
} }
public void changeLabel()
} }
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?> <?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?> <?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?> <?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?> <?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?> <?import javafx.scene.control.MenuItem?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.BorderPane?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.HomeController"> <BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.HomeController">
...@@ -29,9 +31,6 @@ ...@@ -29,9 +31,6 @@
</menus> </menus>
</MenuBar> </MenuBar>
</top> </top>
<center>
<Label fx:id="middle" text="This is the starter text." BorderPane.alignment="CENTER" />
</center>
<left> <left>
<Button mnemonicParsing="false" onAction="#clickLeftButton" text="Left Button" BorderPane.alignment="CENTER" /> <Button mnemonicParsing="false" onAction="#clickLeftButton" text="Left Button" BorderPane.alignment="CENTER" />
</left> </left>
...@@ -41,4 +40,14 @@ ...@@ -41,4 +40,14 @@
<bottom> <bottom>
<Button mnemonicParsing="false" onAction="#switchScreen" text="Switch Screen" BorderPane.alignment="CENTER" /> <Button mnemonicParsing="false" onAction="#switchScreen" text="Switch Screen" BorderPane.alignment="CENTER" />
</bottom> </bottom>
<center>
<AnchorPane prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<Label fx:id="middle" layoutX="263.0" layoutY="34.0" text="This is the starter text." />
<CheckBox fx:id="checkbox1" layoutX="263.0" layoutY="216.0" mnemonicParsing="false" selected="true" text="Item 1" />
<CheckBox fx:id="checkbox2" layoutX="263.0" layoutY="246.0" mnemonicParsing="false" text="Item 2" />
<CheckBox fx:id="checkbox3" layoutX="263.0" layoutY="275.0" mnemonicParsing="false" text="Item 3" />
</children>
</AnchorPane>
</center>
</BorderPane> </BorderPane>
...@@ -9,7 +9,10 @@ ...@@ -9,7 +9,10 @@
<items> <items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children> <children>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="209.0" layoutY="81.0" prefHeight="196.0" prefWidth="598.0" text="This is the second screen!" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> <Label layoutX="235.0" layoutY="50.0" text="The selected items are:" />
<Label layoutX="259.0" layoutY="95.0" />
<Label layoutX="259.0" layoutY="140.0" />
<Label layoutX="259.0" layoutY="179.0" />
</children></AnchorPane> </children></AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0"> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children> <children>
......
# Installing IntelliJ IDEA # Installing IntelliJ IDEA (macOS/Windows)
While you are not forced to use IntelliJ over Eclipse or any other IDE, it is recommended that you use IntelliJ in conjunction with the SceneBuilder if you plan on following along with this tutorial. While you are not forced to use IntelliJ over Eclipse or any other IDE, it is recommended that you use IntelliJ in conjunction with the SceneBuilder if you plan on following along with this tutorial.
1. Navigate to the [official site](https://www.jetbrains.com/idea/download/#section=windows) for IntelliJ IDEA. 1. Navigate to the [official site](https://www.jetbrains.com/idea/download/#section=windows) for IntelliJ IDEA.
2. Download the **free** community edition. 2. Download the **free** community edition.
3. Wait about 5 seconds the download to start, and then run the executable after it is finished downloading. 3. Wait about 5 seconds the download to start, and then run the executable after it is finished downloading. (For Mac, it will be a `.dmg` file, and for Windows, a `.exe` file.
- If you are installing on macOS, drag the icon into the `Applications` folder after running the `.dmg` file.
4. It is recommended you check all the boxes when asked to configure your installation. 4. It is recommended you check all the boxes when asked to configure your installation.
5. Click `Next`, move to the next screen, and click `Install`. 5. Click `Next`, move to the next screen, and click `Install`.
6. In order to finish the installation, you will have to restart your computer. You might as well do that right now, so save all of your work elsewhere. 6. In order to finish the installation, you will have to restart your computer. You might as well do that right now, so save all of your work elsewhere.
...@@ -12,14 +13,14 @@ While you are not forced to use IntelliJ over Eclipse or any other IDE, it is re ...@@ -12,14 +13,14 @@ While you are not forced to use IntelliJ over Eclipse or any other IDE, it is re
8. If you are installing IntelliJ for the first time, you can choose `Do not import settings` and then click `OK`. 8. If you are installing IntelliJ for the first time, you can choose `Do not import settings` and then click `OK`.
9. Customize your IntelliJ accordingly. 9. Customize your IntelliJ accordingly.
# Installing JavaFX Scene Builder # Installing JavaFX Scene Builder (macOS/Windows)
1. Navigate to the [official site](https://gluonhq.com/products/scene-builder/#download) for the JavaFX Scene Builder. 1. Navigate to the [official site](https://gluonhq.com/products/scene-builder/#download) for the JavaFX Scene Builder.
2. In the middle of the page, click the download button for your respective operating system. 2. In the middle of the page, click the download button for your respective operating system.
3. This will take you to a page labeled 'Thanks.' Your download will begin in about 5 seconds; you can ignore each of the green buttons on the page. 3. This will take you to a page labeled 'Thanks.' Your download will begin in about 5-10 seconds automatically; you can ignore each of the green buttons on the page.
4. Run the Scene Builder installer. - If you are installing on macOS, this will download a `.pkg` file - and then you can just walk through the installation upon clicking on the `.pkg` file.
5. Accept the terms and click `Install`. - Otherwise, if you are on Windows, walk through the executable installer.
6. It will install almost instantly. No need to restart your computer or anything; you can start using the Scene Builder now! 4. It will install almost instantly. No need to restart your computer or anything; you can start using the Scene Builder now!
# Using the JavaFX Scene Builder # Using the JavaFX Scene Builder
...@@ -32,15 +33,16 @@ This tutorial will walk you through creating a basic JavaFX application. The end ...@@ -32,15 +33,16 @@ This tutorial will walk you through creating a basic JavaFX application. The end
3. Create a new JavaFX application. 3. Create a new JavaFX application.
4. Give it a name, and a location. 4. Give it a name, and a location.
5. Now that your project has been created, click on `File` in the upper-left corner of the screen. 5. Now that your project has been created, click on `File` in the upper-left corner of the screen.
6. Go to `Languages & Frameworks`. 6. Click `Settings`, and then `Languages and Frameworks`.
- If you are running IntelliJ IDEA on a Mac, you instead go to `IntelliJ IDEA -> Preferences -> Languages and Frameworks`.
7. Click on `JavaFX`. 7. Click on `JavaFX`.
8. Set the path to `SceneBuilder.exe`. Assuming you installed it to the default location, it *should* be located at `C:\Program Files\SceneBuilder\SceneBuilder.exe`. 8. Set the path to where your `SceneBuilder.exe` (on Windows) or `SceneBuilder.app` (on macOS) is installed at.
9. Click `OK`. 9. Click `OK`.
10. IntelliJ should have generated three files within the `src` directory of your project, within a package called `sample`. 10. IntelliJ should have generated three files within the `src` directory of your project, within a package called `sample`.
11. Rename this `sample` package to `app`. 11. Rename this `sample` package to `app`.
- Make sure all occurrences are renamed to `app`. - Make sure all occurrences are renamed to `app`.
12. Find the file entitled `sample.fxml`, and rename it to `home.fxml`. 12. Find the file entitled `sample.fxml`, and rename it to `home.fxml`.
14. Right click on the file, and click the option that says `Open In SceneBuilder`. 13. Right click on the file, and click the option that says `Open In SceneBuilder`.
- This is the file that holds all of the code for the look of your application. Now that you've opened it up directly, whenever you make changes within the SceneBuilders, those changes will also be reflected with `home.fxml` whenever you click save. - This is the file that holds all of the code for the look of your application. Now that you've opened it up directly, whenever you make changes within the SceneBuilders, those changes will also be reflected with `home.fxml` whenever you click save.
## Building your first application ## Building your first application
...@@ -58,8 +60,10 @@ This tutorial will walk you through creating a basic JavaFX application. The end ...@@ -58,8 +60,10 @@ This tutorial will walk you through creating a basic JavaFX application. The end
3. Add a `MenuBar` to the top of the `BorderPane`. You can do this one of two ways: 3. Add a `MenuBar` to the top of the `BorderPane`. You can do this one of two ways:
- Drag the element right onto the canvas. SceneBuilder will show you the different areas of the `BorderPane` that you can drop it in. - Drag the element right onto the canvas. SceneBuilder will show you the different areas of the `BorderPane` that you can drop it in.
- You can also drag the element into the `Document Hierarchy` located directly below the `Library`. - You can also drag the element into the `Document Hierarchy` located directly below the `Library`.
4. Add a `Label` to the center of the page, and three `Button` elements on the left, right, and bottom of our label. 4. Put an `AnchorPane` in the middle of the page, and then a `Label` anywhere within there.
5. You can double-click on any of these elements and start typing to change their inner text. Alternatively, you can click the element once and change the text from within the `Inspector`. 5. Add three `Button` elements on the left, right, and bottom of our `AnchorPane`.
- When appending containers, you can place elements anywhere within `AnchorPanes`. With other containers, such as the `BorderPane`, you are confined to certain positions within the container. Specifically with the `BorderPane`, we are confined to placing items within the 5 regions of the pane.
7. You can double-click on any of these elements and start typing to change their inner text. Alternatively, you can click the element once and change the text from within the `Inspector`.
### Registering Event Handlers ### Registering Event Handlers
...@@ -78,24 +82,20 @@ Now that we have three buttons for input and a label with starter text in it, le ...@@ -78,24 +82,20 @@ Now that we have three buttons for input and a label with starter text in it, le
4 import javafx.scene.control.Label; 4 import javafx.scene.control.Label;
5 5
6 public class HomeController { 6 public class HomeController {
7 @FXML 7 @FXML private Label middle;
8 private Label middle; 8
9 9 public void clickLeftButton() {
10 public void clickLeftButton() { 10 middle.setText("The button the left was clicked.");
11 middle.setText("The button the left was clicked."); 11 }
12 } 12
13 13 public void clickRightButton() {
14 public void clickRightButton() { 14 middle.setText("The button the right was clicked.");
15 middle.setText("The button the right was clicked."); 15 }
16 } 16
17 17 }
18 public void clickBottomButton() {
19 middle.setText("This is the starter text.");
20 }
21 }
``` ```
On line 8 we are declaring a `Label` object entitled `middle`, and it is annotated by a `@FXML`. This annotation is basically what is telling the controller, "match up this `Label` called `middle` with another `Label` called `middle` in the FXML file." Because they are the same name, and have been annotated accordingly, the code will know that you are referencing a specific element and will be able to use that element. So, these functions will work exactly as intended - once we set up the actual event handlers. On line 7 we are declaring a `Label` object entitled `middle`, and it is annotated by a `@FXML`. This annotation is basically what is telling the controller, "match up this `Label` called `middle` with another `Label` called `middle` in the FXML file." Because they are the same name, and have been annotated accordingly, the code will know that you are referencing a specific element and will be able to use that element. So, these functions will work exactly as intended - once we set up the actual event handlers.
6. Now that you have the stub code pasted in, navigate back to the SceneBuilder. 6. Now that you have the stub code pasted in, navigate back to the SceneBuilder.
7. Click on the left button, and go to the `Code` panel in the `Inspector`. 7. Click on the left button, and go to the `Code` panel in the `Inspector`.
...@@ -122,9 +122,11 @@ Now to link these two screens together... ...@@ -122,9 +122,11 @@ Now to link these two screens together...
``` ```
public void switchScreen(javafx.event.ActionEvent event) throws IOException { public void switchScreen(javafx.event.ActionEvent event) throws IOException {
Parent parent = FXMLLoader.load(getClass().getResource("secondScreen.fxml")); FXMLloader loader = new FXMLLoader();
Scene scene = new Scene(parent); loader.setLocation(getClass().getResource("secondScreen.fxml"));
Parent parent = loader.load();
Scene scene = new Scene(parent);
Stage window = (Stage)((Node)event.getSource()).getScene().getWindow(); Stage window = (Stage)((Node)event.getSource()).getScene().getWindow();
window.setScene(scene); window.setScene(scene);
...@@ -132,8 +134,9 @@ public void switchScreen(javafx.event.ActionEvent event) throws IOException { ...@@ -132,8 +134,9 @@ public void switchScreen(javafx.event.ActionEvent event) throws IOException {
} }
``` ```
- First, the function finds the resource that you are trying to link to: in this case, it is `secondScreen.fxml`. - First, we initialize the FXMLLoader resource.
- Rather than handle the contents of the function within a `try...catch`, we just tell the function to throw an exception in the case it cannot find the file you are trying to link to, because there is not anything to even do if the window can't be opened properly. - Next, we send a file for the loader to locate and (hopefully) run. In our case, it is `secondScreen.fxml`.
- We tell the function to simply throw an `IOException` in the case it can't find the file, as there is nothing more to be done in the case the file cannot be find, perhaps due to a typo.
- It creates a scene using that file, and then we do a lot of casting in order to create a window out of the file to pass a scene into. Then we show the new screen. - It creates a scene using that file, and then we do a lot of casting in order to create a window out of the file to pass a scene into. Then we show the new screen.
6. IntelIiJ is smart enough to see that you've just now tried to use a lot of different things without importing them first. Import all the new classes you just used. 6. IntelIiJ is smart enough to see that you've just now tried to use a lot of different things without importing them first. Import all the new classes you just used.
7. Change out the `Reset` button for a `Switch Screens` button, and point its action to this new `switchScreen` function. 7. Change out the `Reset` button for a `Switch Screens` button, and point its action to this new `switchScreen` function.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment