Ce programme va nous permet de récupérer et afficher le nom et le prix d’une pizza sélectionnée à l’aide de l’un des boutons radio.
Dans cet exercice vous allez apprendre comment récupérer le texte d’un RadioButton JavaFX qui est activé, travailler avec les labels et fichier FXML pour la conception graphique de votre interface utilisateur.
FXML c’est quoi ?
FXML : C’est un langage au format XML qui fournit un ensemble des éléments nécessaires pour d’écrire une interface utilisateur pour une application JavaFX. Il permet la séparation entre la partie logique et la partie graphique d’une application JavaFX.
Pour réaliser ce programme vous avez besoin de créer 4 fichiers:
- Un fichier FXML
- Un fichier CSS
- Une classe controller
- Une classe de lancement principale
Voici une image qui illustre la structure de notre projet avec Netbeans IDE.
On va commencer par créer notre interface utilisateur en utilisant un fichier FXML. Ce fichier va nous permet de décrire notre interface utilisateur. Voici le code source de ce fichier que vous pouvez copier et coller dans votre fichier FXML .
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0"
stylesheets="@style.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="btnradio.FXMLMainController">
<children>
<HBox alignment="CENTER" layoutY="200.0" prefHeight="100.0" prefWidth="600.0" styleClass="hb">
<children>
<RadioButton fx:id="rbsmall" contentDisplay="CENTER" mnemonicParsing="false" onAction="#getPizza" styleClass="rb" text="Small">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</RadioButton>
<RadioButton fx:id="rbmed" contentDisplay="CENTER" mnemonicParsing="false" onAction="#getPizza" styleClass="rb" text="Medium">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</RadioButton>
<RadioButton fx:id="rblarge" contentDisplay="CENTER" mnemonicParsing="false" onAction="#getPizza" styleClass="rb" text="Large">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</RadioButton>
<RadioButton fx:id="rbextra" contentDisplay="CENTER" mnemonicParsing="false" onAction="#getPizza" styleClass="rb" text="Extra Large">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</RadioButton>
</children>
</HBox>
<Label layoutX="162.0" layoutY="84.0" styleClass="label_content" text="Name" />
<Label fx:id="name" layoutX="286.0" layoutY="84.0" prefHeight="54.0" prefWidth="228.0" styleClass="name_price" text="name" />
<Label layoutX="162.0" layoutY="147.0" styleClass="label_content" text="Price" />
<Label fx:id="price" layoutX="286.0" layoutY="151.0" prefHeight="45.0" prefWidth="228.0" styleClass="name_price" text="price" />
<Label alignment="CENTER" layoutX="174.0" layoutY="14.0" prefHeight="2.0" prefWidth="277.0" styleClass="pizza_label" text="Exercice Pizza" textFill="#ffc300" />
</children>
</AnchorPane>
La classe FXMLMainController c’est la classe qui va se charger de gérer tous les logiques applicatives de notre programme. Pour accéder à un élément d’un fichier FXML depuis une classe Contrôleur il faut définir un fx:id pour cet élément dans le fichier FXML.
package btnradio;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
public class FXMLMainController implements Initializable {
@FXML
private RadioButton rbsmall;
@FXML
private RadioButton rbmed;
@FXML
private RadioButton rblarge;
@FXML
private RadioButton rbextra;
@FXML
private Label price;
@FXML
private Label name;
int price_pizza = 0;
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
ToggleGroup group = new ToggleGroup();
rbsmall.setToggleGroup(group);
rbsmall.setSelected(true);
rbmed.setToggleGroup(group);
rblarge.setToggleGroup(group);
rbextra.setToggleGroup(group);
}
@FXML
private void getPizza(ActionEvent event) {
if (rbsmall.isSelected()) {
name.setText(rbsmall.getText());
price_pizza = 500;
} else if (rbmed.isSelected()) {
name.setText(rbmed.getText());
price_pizza = 600;
} else if (rblarge.isSelected()) {
name.setText(rblarge.getText());
price_pizza = 700;
} else if (rbextra.isSelected()) {
name.setText(rbextra.getText());
price_pizza = 800;
}
price.setText(Integer.toString(price_pizza) + " €");
}
}
La classe Main représente le point d’entre notre application. C’est la classe de lancement principale de notre programme.
package btnradio;
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 stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLMain.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Et en fin le fichier CSS. c’est le fichier qui gère le style de nos labels et nos RadioButton javaFX.
.rb{
-fx-background-color:#FFC300;
-fx-font-weight: bold;
-fx-font-size:18;
}
.pizza_label{
-fx-background-color:#FFFFFF;
-fx-font-weight: bold;
-fx-font-size:36;
}
.label_content{
-fx-background-color:#FFFFFF;
-fx-font-weight: bold;
-fx-font-size:24;
}
.name_price{
-fx-background-color:#FFFFFF;
-fx-font-weight: italic;
-fx-font-size:18;
}
Vous pouvez regarde ce tutoriel RadioButton JavaFX si vous êtes entrain de travailler avec les boutons radio pour la première fois.