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
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 86 additions and 50 deletions
HelloWorld/out/production/HelloWorld/app/HomeController.class
+ 0
− 0
View file @ 48f2d6b6
No preview for this file type
HelloWorld/out/production/HelloWorld/app/home.fxml
+ 12
− 3
View file @ 48f2d6b6
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.layout.AnchorPane?>
<?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">
......@@ -29,9 +31,6 @@
</menus>
</MenuBar>
</top>
<center>
<Label fx:id="middle" text="This is the starter text." BorderPane.alignment="CENTER" />
</center>
<left>
<Button mnemonicParsing="false" onAction="#clickLeftButton" text="Left Button" BorderPane.alignment="CENTER" />
</left>
......@@ -41,4 +40,14 @@
<bottom>
<Button mnemonicParsing="false" onAction="#switchScreen" text="Switch Screen" BorderPane.alignment="CENTER" />
</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>
HelloWorld/out/production/HelloWorld/app/secondScreen.fxml
+ 6
− 3
View file @ 48f2d6b6
......@@ -9,7 +9,10 @@
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<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>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
......
HelloWorld/src/app/HomeController.java
+ 11
− 4
View file @ 48f2d6b6
......@@ -6,14 +6,19 @@ import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.CheckBox;
import javafx.stage.Stage;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.io.IOException;
public class HomeController {
@FXML
private Label middle;
@FXML private Label middle;
@FXML private CheckBox checkbox1;
@FXML private CheckBox checkbox2;
@FXML private CheckBox checkbox3;
public void clickLeftButton() {
middle.setText("The button on the left was clicked.");
......@@ -28,9 +33,11 @@ public class HomeController {
}
public void switchScreen(javafx.event.ActionEvent event) throws IOException {
Parent parent = FXMLLoader.load(getClass().getResource("secondScreen.fxml"));
Scene scene = new Scene(parent);
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("secondScreen.fxml"));
Parent parent = loader.load();
Scene scene = new Scene(parent);
Stage window = (Stage)((Node)event.getSource()).getScene().getWindow();
window.setScene(scene);
......
HelloWorld/src/app/SecondScreenController.java
+ 2
− 0
View file @ 48f2d6b6
......@@ -20,4 +20,6 @@ public class SecondScreenController {
window.setScene(scene);
window.show();
}
public void changeLabel()
}
HelloWorld/src/app/home.fxml
+ 12
− 3
View file @ 48f2d6b6
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.layout.AnchorPane?>
<?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">
......@@ -29,9 +31,6 @@
</menus>
</MenuBar>
</top>
<center>
<Label fx:id="middle" text="This is the starter text." BorderPane.alignment="CENTER" />
</center>
<left>
<Button mnemonicParsing="false" onAction="#clickLeftButton" text="Left Button" BorderPane.alignment="CENTER" />
</left>
......@@ -41,4 +40,14 @@
<bottom>
<Button mnemonicParsing="false" onAction="#switchScreen" text="Switch Screen" BorderPane.alignment="CENTER" />
</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>
HelloWorld/src/app/secondScreen.fxml
+ 6
− 3
View file @ 48f2d6b6
......@@ -9,7 +9,10 @@
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<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>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
......
README.md
+ 37
− 34
View file @ 48f2d6b6
# 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.
1. Navigate to the [official site](https://www.jetbrains.com/idea/download/#section=windows) for IntelliJ IDEA.
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.
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.
......@@ -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`.
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.
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.
4. Run the Scene Builder installer.
5. Accept the terms and click `Install`.
6. It will install almost instantly. No need to restart your computer or anything; you can start using the Scene Builder now!
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.
- 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.
- Otherwise, if you are on Windows, walk through the executable installer.
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
......@@ -32,15 +33,16 @@ This tutorial will walk you through creating a basic JavaFX application. The end
3. Create a new JavaFX application.
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.
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`.
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`.
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`.
- Make sure all occurrences are renamed to `app`.
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.
## Building your first application
......@@ -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:
- 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`.
4. Add a `Label` to the center of the page, and three `Button` elements on the left, right, and bottom of our label.
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`.
4. Put an `AnchorPane` in the middle of the page, and then a `Label` anywhere within there.
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
......@@ -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;
5
6 public class HomeController {
7 @FXML
8 private Label middle;
9
10 public void clickLeftButton() {
11 middle.setText("The button the left was clicked.");
12 }
13
14 public void clickRightButton() {
15 middle.setText("The button the right was clicked.");
16 }
17
18 public void clickBottomButton() {
19 middle.setText("This is the starter text.");
20 }
21 }
7 @FXML private Label middle;
8
9 public void clickLeftButton() {
10 middle.setText("The button the left was clicked.");
11 }
12
13 public void clickRightButton() {
14 middle.setText("The button the right was clicked.");
15 }
16
17 }
```
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.
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...
```
public void switchScreen(javafx.event.ActionEvent event) throws IOException {
Parent parent = FXMLLoader.load(getClass().getResource("secondScreen.fxml"));
Scene scene = new Scene(parent);
FXMLloader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("secondScreen.fxml"));
Parent parent = loader.load();
Scene scene = new Scene(parent);
Stage window = (Stage)((Node)event.getSource()).getScene().getWindow();
window.setScene(scene);
......@@ -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`.
- 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.
- First, we initialize the FXMLLoader resource.
- 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.
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.
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment