javafx-tutorial.java

javafx-tutorial.java

/**
|------------------------------------
|1. Introductiona and Installation
|------------------------------------
*/

1. A lot of people use NetBeans with JavaFX. 

2. You will need Java 7 for this. You will need JDK 7 or later. 

3. javafx download

4. Also install JavaFX Scene Builder

5. Final thing you will need is Eclispe > Help > market place > 
search for : javafx, 
ef(x)clipse, you need to install this plugin for eclipse as well  


6. File > new > other > javafx > javafx project 

7. If you don't have marketplace in eclispe, you can use "Install Software"
add the download site here. and install it that way. 
Seach for javafx eclipse plugin download. Copy and paste the url 


/**
|------------------------------------
|2. Hello World
|------------------------------------
*/

1.  File > new > other > javafx > javafx project .

2. Creaet a Hello World Project

3. Early .fx file is obsolete, it's not used anymore. 
There are two ways you can create user interface in JAVAFX ,one is by 
hand coding. Second way is using the scene builder. 

4. Let's create a little application by hand. 

5. Create App class. 
public class App extends Application

6. import javafx application

7. add unimplemented methods

8. In main call launch

launch(args);

9. start is where we create user interface

10. Rename if it is not called primarystage
	public void start(Stage primaryStage) throws Exception {

11. Now we have to create a thing called scene here. 
-javafx renders scene and scene is a thing that contains a load of 
different nodes. 
-Nodes are like different UI widgets. 

12. So, create a scene here. 
-Scene's job is to render nodes. 

13. 		Group root = new Group();
		Scene scene = new Scene(root, 400, ); //width and height

14. Import javafx.scene.Group

15. Now we can use the primary stage. 

16. Stage is going to render scene and it's going to have only one 
node in it. 

17. Complete code 
package application;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class App extends Application{
	public static void main(String[] args) {
		launch(args);
	}

	@Override
	public void start(Stage primaryStage) throws Exception {
		
		Group root = new Group();
		Scene scene = new Scene(root, 600, 400);
		
		primaryStage.setScene(scene);
		primaryStage.setTitle("Hello World");
		primaryStage.show();
		
	}
}


18. Run the code 

19. That's our first JAVAFX application. 

20. Next will be very exiting. :; 


/**
|------------------------------------
|3. Introducing scene builder
|------------------------------------
*/
1. Rt click the project > copy > Rt click on the 
white space on the left> Paste

2. Close other projects 

3. create a package called "main"
-copy and paste the "App" into the main package

4. crate another package called fxml, that will contain design interface

5. Rt click fxml package > new > other > javafx> new fxml document
Name: Main
-Capital M, because these fxml should begin with capital letter. 
-This specifies the design of our user interface 

6. Open your SceneBuider application. 

7. Search anchor pane> it's a container that allows you to layout controls
by anchoring them to the edges of the anchor pane. 

8. Click on "Hierarchy" you should see "AnchorPane" added there now. 

9. Search for Image View and drag it onto the "Anchor Pane". 
- You can see in the hierarchy that it is indented.

10. In eclispe click on the package fxml > rt click > create another package 
called fxml.images. 
-this will create sub package called images
-drag an image into that folder fxml.images
-rt click and refresh the directory

11. Go back to Scene builder
-select imageview
- on the right side
- properties > browse the image 
- preview> show preview in window


12. Very very important step
a. file > save > Main.fxml 
-save this file in fxml directory of eclipse projec folder. 


13. Tell our applicaiton to use Main.xml file 

GO to app class

- Remove Group root = new Group();
-get fxml file, load it 
- Parent root = FXMLLoader.load(getClass().getResource("/fxml/Main.fxml"));
- import 
- run

14. Click on ImageView>  find layout and put these values in 


15. Make sure that you provide relative path in Main.fxml
 <Image url="@images/ganesh.jpg" />
 
 /**
|------------------------------------
|4. Buttons and Events
|------------------------------------
*/
1. Copy the folder from previous tutorial and give it a name of 
"An Interactive Program"

2. Close other project folders. You should still be able to run
App.java class. Run and test. 

3. Open the fxml file from the scene builder. 

4. Let's use different layout here. 
-Drag "Border Pane"container on top of "Anchor Pane"
-Exapnd it so that it takes up all the space here. 
-With border pane selected, go to layout on the right. 
-Click on the anchor constraints so that when we resize the window,
the border pane will resize with it. Do the same with Image View. 

5. Under "Controls" select "Button" , drag and drop it on top of
border pane. You can see different locations will be displayed. 
-Select the bottom > Alignment > Bottom center
-Bottom margin: 20

6. Drag and drop a label in the center position. 

7. Select the label > properties> 
- Remove "Text" from the label
- Also change text of Button from "Button" to "Click Me"

8. Rt click the project > refersh 

9. Open App.java and hit run. 

10. Remove this line from App.java
	primaryStage.setResizable(true);

11. Run it and try to re-size it, it resize beautifully because we 
used "Borde Layout". 

12. Create a new class in main package called "MainController"
-So we will create a controller class which will get information from the
user interface and then tell the interface what to do. 
- this class should implement Initializable interface
public class MainController implements Initializable{
	
}
-import and implement necessary methods

13. Add a method that will run when we click the button 
-add "javafx.event"
public void showGreeting(ActionEvent event)
{
	System.out.println("Hello world!");
}

-save it . 

14. Go back to scene builder, we have a class called MainController.
- Select the "AnchorPane" because this is the root node. On the inspector pane 
- click on "Code" 
- set the controller class here , type "main.MainController"
- you need to provide the name of the package as well, main is the name of the 
  package in this case. 
- Hit Enter
- Click the button 
- Code> On Action > 
  Type the name of your function "showGreeting"
 -Hit enter to make it accept that
 -Save the .fxml file and reload

 15. Click the button now. 
 -The console will display "Hello World!" message. 

 16. Next Step, change text on the label .
- Go to MainController.java and create a property called greetingLabel 
- auto-wiring label 
@FXML
private Label greetingLabel;
-import javafx.scene.control.Label

17. Go to JavaFx Builder, select the label, Code> fx:id
- pase the value of greetingLabel
- save and refresh in eclispe
- check if it exist in Main.fxml 
- check it regularly 

18. Go back to the MainController
-You can print the value of greetingLabel
System.out.println(greetingLabel);
-Run the project, you should get something like this:
Label[id=greetingLabel, styleClass=label]''

20. Finally add this line at the end of the showGreeting() method
greetingLabel.setText("Hello World!");

21. Run and see the data in your application now. 

22. You can re-size it and check too. 


 /**
|------------------------------------
|5. JavaFX Stylesheets
|------------------------------------
*/
1. Create a copy of the previous project and give it a new name of
"Introducing Style Sheets".

2. Create a new folder called styles using the following syntax
fxml.styles

3. .fxml files are used to create user interface for your application. 
In the same way we can do css for html if we are doing web programming. 
In javafx we can style these .fxml contents using css stylesheet just 
like we do it for html. 

4. Create a new file called main.css in fxml.styles
-file not class

5. Style two controls that are in your application. 

6. In scene builder open the .fxml file 

7. To style a widget in in javafx, we need to target it with an id or a 
class just like in html. 
- Make sure both of the controls have id on them. 
- Click on the label > Code > fx:id
you can see that the lable already has an id of greetingLabel
- we can use that to target it in the stylesheet
- clickMeButton let's give button this id

8. Go to main.css which is inside fxml.styles package
- Hit control space inside this block to get a list of possible options
#clickMeButton
{
		-fx-font-size: 2em;
}

- type font-size: 0.0em;
em unit specifies means current font size
2 em means twice 

9. Go to App.java
- After the scene cration 
scene.getStylesheets().add("/fxml/styles/main.css");

10. Run the application, now the button font should be made bigger. 

11. Style the label in main.css

#greetingLabel
{
	-fx-font-size: 2.0em;
	-fx-border-color: gray;
	-fx-border-width: 1px;
	-fx-border-radius: 4px;	
	-fx-effect: 
}

12. Type javafx css reference in google

13. In Scene Builder > Preview> Scene Style Sheets > Add a stylesheet > 
Browse where your style sheet is located. 

14. You cannot do too much css styling in Scene Builder. 

15. You can do 3d graphics in JAVAFX. 



 /**
|------------------------------------
|6. JavaFX Switching to Java 8 
|------------------------------------
*/
1. Upgrading to Java 8. 
-If you have been using JDK 7, JAVA 7 and you want to upgrade to JAVA 8. 
- Install JDK 8 first. 
- Install Eclipse Kepler or upwards of Eclipse version. 
- Java8 support for Eclipse. 
  provide path to your jdk 8
- Add > Standard VM > JRE home: ___



2. Create Menus project by copying the old one. 
- Rt click the project and go to properties > Java Build Path. 
- Select Java 8
- Also go to Java compiler and change compiler compliance level to 1.8
- Run

 /**
|------------------------------------
|7. JavaFX Switching to Java 8 
|------------------------------------
*/

1. Create a notepad application in JavaFx

2. In the last tutorial we copied and remaed it to Menus. 

3. Open the .fxml file from Menus app. Delete the button, label. 
- Add "TextArea" 
- Add "Menu Bar", keep it at the top before "TextArea"
- Delete "Menu Edit" and "Menu Help"
- Select "MenuItem Close" , go to properties, set accelerator, 
  an accelerator is a key combination you press to invoke menu items 
  even when the menu is not visible. 
- Accelearator: CTR+X
  Modifier: CONTROL_DOWN
  Main Key: x
- Mnemonic Parsing: Yes
  Text: E_xit
- Select the "Menu File" itself and 
  Text: _File
  Mnemonic Parsing: Yes
- In theory that means we can hit alt+f and that will open the file menu 
  and alt+x will close it. 

4. Refresh the project. 
- Check your Main.fxml file 
- Go to yoru MainController.java
  Remember MainController.java is used for everything that's in Anchor Pane. 
- Get rid of showGreeting() and the label property. 

5. Create doExit() method
  public void doExit()
  {
  	Platform.exit();
  }
- import 

6. Finally go back to the Scene Builder, select the MenuItem E_xit and
 under Code> 
  On Action 
   #doExit
- Save

7. Referesh > Run 

8. File > Exit 

9. Try acceleartor
Hold down ctr+x, 
alt+x does nothing. 
- f is not underlined 
- not working at the mnemonics




 /**
|--------------------------------------------------------------------------
|#8 Youtube. Getting Started with JavaFX Scene Builder by Angela from Java
|--------------------------------------------------------------------------
*/

1. File > New 

2. Insert an AnchorPane

3. Layout
   Pref Width: 800
   Pref Height: 600

4. Select "Split Pane (Horizontal)" and insert it on top of
   AnchorPane.
   -Select the Split Pane > Modify > Fit to Parent. 

5. Make the left one 25%, Insert "Split Pane (Veritcal Flow)"
   on the right side.
  - Modify > Fit to parent. 

6. Save as "IssueTrackingLite.fxml" inside the src directory. 
  - Refresh

7. For the second panel (horiz) on the right at the bottom, 
   set fx: id, which is under Code

8. Start populating with some components

9. Select "Tree View" layout and insert it in on the left 25% area, 
   Modify > Fit to Parent

10. Insert a table "TableView" , drag it and drop it on top right (horiz). 
   Modify > Fit to Parent. 

11. Provide some names
   TreeView; fx:id : tree
   TableView: table

12. Bottom right block now. 
   Hyperlink, Label, Hyperlink, 
- Change text of the above components
- Label : /, id is not required for this one because we will not have any 
  control for this one. 
- First Hyerlink text: PROJECT, and fx:id: project
  Second Hyerlink text: ID, and fx:id: bugId
- Select these three components, Arrange > Wrap in > HBox
- HBox fx:id :  labels

13. Grab the TextField  and insert it next to the label. 
- fx:id : synopsis
- Properties tab > Prompt Text: SYNOPSIS

14. Group text field and the labels together. 
- Arrange > Wrap in > HBox
fx:id: titleLine

14. Add label and the text area. 

For TextArea
- fx:id : descriptionValue
- Text: don't display anything

For Lable
- Text: DESCRIPTION
No need to provide id


15. Preview > Show Preview in Window

16. Resize
- It's not working properly. 

17. Let's talk about alignment. 

18. Use tool to help you to populate with the sample data. 
View > Show Sample Data

19. Resizing
a. TextArea grow in all direction as we change the window.
- Layout: click to make red on all directions. 

b. TextField 
- I want to always grow horizontally 
- Layout > HBox Constraints > Hgrow: Always

c. For the HBox : titleLine
- Anchor constraints will be to the left and to the right (red )

d. For HBox: labels
- I don't want them to disappear when you shrink them. 
- Min Width: USE_PREF_SIZE
- Hit enter

20. Now let's make some space at the top. 
-Select the first display panel "SplitPane" and move it down 
a little bit. 
-Import an image

21. Place three  Buttons on the right hand side. 
newIssue
saveIssue
deleteIssue

22. Put all three boxes in an HBOX. 
- Put more spacing between the buttons. 
- Layout > Spacing: 15 
- This HBox grows top and to the right. 

23. Now, let's associate events. 
- Click on the New button, Code> On Action: #newIssueFired
- Click on teh Save button, Code > On Action L #saveIssueFired
- Click on teh Delete button, Code > On Action L #deleteIssueFired

24. Add a label in between logo and button. 
fx:id: messageBar
- Remoe the text. 

25. Add stylesheet information
- Go to AnchorPane:
- Properties> Stylesheets > + 
> select the text area > 


 /**
|--------------------------------------------------------------------------
|#9 Add JavaFx to an existing Project
|--------------------------------------------------------------------------
*/

1. Rt click on the project folder > Properties > Java Build Path >
Add Library > JavaFX SDK

Added notes for chapter 1, 2, and 3.

Added notes for chapter 4.

Added notes for chapter 5,6, 7 , and tutorial note from Angela.

Add JavaFX to an existing Project.