What are the various JavaFX UI Controls? Explain briefly.
JavaFX UI Controls
- The graphical user interface of every desktop application mainly considers UI elements, layouts and behaviour.
- The UI elements are the one which are actually shown to the user for interaction or information exchange. Layout defines the organization of the UI elements on the screen. Behaviour is the reaction of the UI element when some event is occurred on it.
- However, the package javafx.scene.control provides all the necessary classes for the UI components like Button, Label, etc. Every class represents a specific UI control and defines some methods for their styling.
- The various JavaFX UI Controls are described below
1. JavaFX Label
javafx.scene.control.Label class represents label control. As the name suggests, the label is the component that is used to place any text information on the screen. It is mainly used to describe the purpose of the other components to the user. You can not set a focus on the label using the Tab key.
Package: javafx.scene.control
Constructors:
Label(): creates an empty Label
Label(String text): creates Label with the supplied text
Label(String text, Node graphics): creates Label with the supplied text and graphics
Adding a Node to the scene graph
The following code implements Label into our Application.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class LabelTest extends Application {
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Label my_label=new Label("This is an example of Label");
StackPane root = new StackPane();
Scene scene=new Scene(root,300,300);
root.getChildren().add(my_label);
primaryStage.setScene(scene);
primaryStage.setTitle("Label Class Example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Output:
2. JavaFX TextField
Text Field is basically used to get the input from the user in the form of text. javafx.scene.control.TextField represents TextField. It provides various methods to deal with textfields in JavaFX. TextField can be created by instantiating TextField class.
Lets see an example where the user is shown the two text boxes and prompted to fill its user-id and password.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class TextFieldTest extends Application {
public static void main(String[] args) {
launch(args);
}
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Label user_id=new Label("User ID");
Label password = new Label("Password");
TextField tf1=new TextField();
TextField tf2=new TextField();
Button b = new Button("Submit");
GridPane root = new GridPane();
root.addRow(0, user_id, tf1);
root.addRow(1, password, tf2);
root.addRow(2, b);
Scene scene=new Scene(root,800,200);
primaryStage.setScene(scene);
primaryStage.setTitle("Text Field Example");
primaryStage.show();
}
}
Output:-
3. JavaFX PasswordField
However, typing a password in a text field is not secure for the user. The Application must use a specific component to get the password from the user.
Passwordfield can be created by instantiating javafx.scene.control.PasswordField class. PasswordField class contains a method named as setPromptText() for showing a prompt text to the user in password field. The data written in the passwordfield is retrieved by getText() method.
Example:
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class PasswordFieldTest extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Label user_id=new Label("User ID");
Label password = new Label("Password");
TextField tf=new TextField();
PasswordField pf=new PasswordField();
pf.setPromptText("Enter Password");
Button b = new Button("Submit");
GridPane root = new GridPane();
root.addRow(0, user_id, tf);
root.addRow(1, password, pf);
root.addRow(5, b);
Scene scene=new Scene(root,300,200);
primaryStage.setScene(scene);
primaryStage.setTitle("PasswordField Example");
primaryStage.show();
}
}
Output:
4. JavaFX Button
JavaFX button control is represented by javafx.scene.control.Button class. A button is a component that can control the behaviour of the Application. An event is generated whenever the button gets clicked.
How to create a Button?
Button can be created by instantiating Button class. Use the following line to create button object.
Button btn = new Button("My Button");
Adding a Button to the scene graph
To visualize the button on the screen, we must attach it to the scene object. The following code creates a button and adds it to the scene object.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ButtonTest extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
StackPane root = new StackPane();
Button btn=new Button("This is a button");
Scene scene=new Scene(root,300,300);
root.getChildren().add(btn);
primaryStage.setScene(scene);
primaryStage.setTitle("Button Class Example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Output:
5. JavaFX CheckBox
The Check Box is used to provide more than one choices to the user. It can be used in a scenario where the user is prompted to select more than one option or the user wants to select multiple options. It is different from the radiobutton in the sense that, we can select more than one checkboxes in a scenerio.
Instantiate javafx.scene.control.CheckBox class to implement CheckBox.
Use the following line in the code to create a blank CheckBox.
CheckBox checkbox = new CheckBox();
Use the following line to attach a label with the checkbox.
CheckBox checkbox = new CheckBox("Label Name");
We can change the CheckBox Label at any time by calling an instance method setText("text"). We can make it selected by calling setSelected("true")
The following code implements CheckBox into our application.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class CheckBoxTest extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Label l = new Label("What do you listen: ");
CheckBox c1 = new CheckBox("Radio one");
CheckBox c2 = new CheckBox("Radio Mirchi");
CheckBox c3 = new CheckBox("Red FM");
CheckBox c4 = new CheckBox("FM GOLD");
HBox root = new HBox();
root.getChildren().addAll(l,c1,c2,c3,c4);
root.setSpacing(5);
Scene scene=new Scene(root,800,200);
primaryStage.setScene(scene);
primaryStage.setTitle("CheckBox Example");
primaryStage.show();
}
}
Output:
6. RadioButton
The Radio Button is used to provide various options to the user. The user can only choose one option among all. A radio button is either selected or deselected. It can be used in a scenario of multiple choice questions in the quiz where only one option needs to be chosen by the student.
The following code shows how one radio button is selected from a toggle group.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class RadioButtonTest extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
ToggleGroup group = new ToggleGroup();
RadioButton button1 = new RadioButton("option 1");
RadioButton button2 = new RadioButton("option 2");
RadioButton button3 = new RadioButton("option 3");
RadioButton button4 = new RadioButton("option 4");
button1.setToggleGroup(group);
button2.setToggleGroup(group);
button3.setToggleGroup(group);
button4.setToggleGroup(group);
VBox root=new VBox();
root.setSpacing(10);
root.getChildren().addAll(button1,button2,button3,button4);
Scene scene=new Scene(root,400,300);
primaryStage.setScene(scene);
primaryStage.setTitle("Radio Button Example");
primaryStage.show();
}
}
Output:
7. JavaFX HyperLink
In JavaFx, we can use hyper-links to refer the web pages. It is similar to anchor links in HTML. javafx.scene.control.HyperLink class provides all the necessary methods to deal with JavaFX hyper-links.
The following code implements HyperLink into our application.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class HyperLinkTest extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Hyperlink hp = new Hyperlink("http://www.javatpoint.com");
StackPane root = new StackPane();
hp.setOnAction(e -> System.out.println("Link Clicked"));
root.getChildren().add(hp);
Scene scene=new Scene(root,400,300);
primaryStage.setScene(scene);
primaryStage.setTitle("Hyperlink Example");
primaryStage.show();
}
}
Output:
8. JavaFX Menu
JavaFX provides a Menu class to implement menus. Menu is the main component of a any application. In JavaFX, javafx.scene.control.Menu class provides all the methods to deal with menus. This class needs to be instantiated to create a Menu.
The following sample of code shows the implementation of JavaFX menu.
ManuBar menubar = new MenuBar(); //creating MenuBar
Menu MenuName = new Menu("Menu Name"); //creating Menu
MenuItem MenuItem1 = new MenuItem("Menu Item 1 Name"); //creating Menu Item
MenuName.getItems().add(MenuItem1); //adding Menu Item to the Menu
menubar.getMenus().add(MenuName); //adding Menu to the MenuBar
EXAMPLE:
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class MenuExample extends Application {
public static void main(String[] args) {
launch(args);
}
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
BorderPane root = new BorderPane();
Scene scene = new Scene(root,200,300);
MenuBar menubar = new MenuBar();
Menu FileMenu = new Menu("File");
MenuItem filemenu1=new MenuItem("new");
MenuItem filemenu2=new MenuItem("Save");
MenuItem filemenu3=new MenuItem("Exit");
Menu EditMenu=new Menu("Edit");
MenuItem EditMenu1=new MenuItem("Cut");
MenuItem EditMenu2=new MenuItem("Copy");
MenuItem EditMenu3=new MenuItem("Paste");
EditMenu.getItems().addAll(EditMenu1,EditMenu2,EditMenu3);
root.setTop(menubar);
FileMenu.getItems().addAll(filemenu1,filemenu2,filemenu3);
menubar.getMenus().addAll(FileMenu,EditMenu);
primaryStage.setScene(scene);
primaryStage.show();
}
}
Output:
9. JavaFX Tooltip
JavaFX Tool tip is used to provide hint to the user about any component. It is mainly used to provide hints about the text fields or password fields being used in the application. It can be created by instantiating javafx.scene.control.Tooltip class.
The following code implements Tooltip about a password field to the user.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.PasswordField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ProgressBarTest extends Application {
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
PasswordField pf = new PasswordField();
Tooltip tool=new Tooltip();
StackPane root = new StackPane();
tool.setText("Information");
pf.setTooltip(tool);
root.getChildren().add(pf);
Scene scene = new Scene(root,300,200);
primaryStage.setScene(scene);
primaryStage.setTitle("ToolTip Example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Output:
10. JavaFX FileChooser
JavaFX File chooser enables users to browse the files from the file system. javafx.stage.FileChooser class represents FileChooser. It can be created by instantiating FileChooser class. It contains two main methods.
As we see in the modern day applications, there are two types of dialogues shown to the user, one is for opening the file and the other is for saving the files. In each case, the user needs to browse a location for the file and give the name to the file.
The FileChooser class provides two types of methods,
showOpenDialog()
showSaveDialog()
The following code implements showSaveDialog() method.
Example 1:
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.FileChooser;
import javafx.stage.Stage;
public class FileChooserExample extends Application{
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
FileChooser file = new FileChooser();
file.setTitle("Open File");
file.showOpenDialog(primaryStage);
HBox root = new HBox();
root.setSpacing(20);
Scene scene = new Scene(root,350,100);
primaryStage.setScene(scene);
primaryStage.setTitle("FileChooser Example");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The above code shows the following dialogue box to the user where user is prompted to browse the location of the file which needs to be opened.
Comments
Post a Comment