javaFX 컨트롤 - 버튼 컨트롤

javaFX 컨트롤

 

 - JavaFX 는 다양한 UI 컨트롤을 제공함.

 

 1) 버튼 컨트롤

 

마우스로 클릭할 수 있는 컨트롤, ButtonBase를 상속하는 하위 컨트롤을 말함.

[Button, CheckBox, RadioButton, ToggleButton, Hyperlink] 등이 있음.

 

button : 글자로 구성되어 있지만, ImageView를  매개값으로 setGraphic() 메서드를  호출하면 

아이콘을 넣을 수 있음.

<Button text="text">

   <graphic>

        <ImageView>

             <Image url="@images/abc.gif"/>

       </ImageView>

   </graphic>

</Button>

 

CheckBox, RadioButton, ToggleButton

 

선택과 미선택 두 가지 상태를 가질 수 있음.

selected 속성의 값이 true이면 선택, false이면 미선택임.''

ex)

<CheckBox text="label1" userData="value1"/>

<CheckBox text="label2" userData="value2" selected="true" />

 

RadioButton, ToggleButton

 

ToggleGroup 속성이 있어서 같은 ToggleGroup을 참조할 경우

하나의 그룹으로 묶인다. => 같은 그룹 내에서는 하나의 컨트롤만 선택되는 효과가 있음.

참조할 ToggleGroup 객체는 <fx:define> 태그를 사용하여 <ToggleGroup fx:id="groupName"/>

작성하고 RadioButton의 ToggleGroup속성에서 $groupName으로 참조함.

 

<fx:define>

    <ToggleGroup fx:id="groupName"/>

</fx:define>

<RadioButton text="label1" userData="value1" toggleGroup="$groupName"/>

<RadioButton text="label2" userData="value2" toggleGroup="$groupName" selected="true"/>

 

CheckBox, RadioButton, ToggleButton 컨트롤

 

사용자가 클릭하면 ActionEvent가 발생

=> EventHandler로 처리 가능. onAction 속성을 작성해서 컨트롤러의 이벤트 처리 메서드로 연결 가능.

 

<CheckBox ... onAction="#handleChkAction"/>

 

RadioButton , ToggleButton 그룹 안에서 선택 변경을 감시하고 싶을 때

 

ToggleGroup의 selectedToggle 속성을 아래처럼 작성.

 

 @Override

    public void changed(ObservableValue<? extends Toggle> observable,

                               Toggle oldValue, Toggle newValue) { ... }

  });

 

예제)

FXML

<?xml version="1.0" encoding="UTF-8"?>



<?import java.lang.*?>

<?import javafx.scene.layout.*?>

<?import javafx.geometry.*?>

<?import javafx.scene.control.*?>

<?import javafx.scene.image.*?>



<BorderPane prefHeight="150.0" prefWidth="420.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="thisisjava.RootController">

   <padding>

      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />

   </padding>

   

   <center>

      <HBox alignment="CENTER" prefHeight="100.0" prefWidth="400.0" spacing="10">

         <children>

            <VBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" spacing="20.0">

               <children>

                  <CheckBox fx:id="chk1" onAction="#handleChkAction" text="안경쓰기" />

                  <CheckBox fx:id="chk2" onAction="#handleChkAction" text="모자쓰기" />

               </children>

            </VBox>

            

            <ImageView fx:id="checkImageView" fitWidth="100.0" preserveRatio="true">

               <image><Image url="@images/geek.gif" /></image>

            </ImageView>

            

            <Separator orientation="VERTICAL" prefHeight="100.0" />

            

            <VBox alignment="CENTER_LEFT" prefHeight="100" prefWidth="150" spacing="20.0">

            <!-- <fx:define><ToggleGroup fx:id="group"/></fx:define> -->

            <children>

              <RadioButton fx:id="rad1" text="Bubble차트" userData="BubbleChart">

                      <toggleGroup>

                         <ToggleGroup fx:id="group" />

                      </toggleGroup>

                   </RadioButton>

              <RadioButton fx:id="rad2" selected="true" text="Bar차트" toggleGroup="$group" userData="BarChart" />

              <RadioButton fx:id="rad3" text="Area차트" toggleGroup="$group" userData="AreaChart" />

            </children>

            </VBox>

            

            <ImageView fx:id="radioImageView" fitWidth="100.0" preserveRatio="true">

<image><Image url="@images/BarChart.png" /></image>

            </ImageView>

         </children>

      </HBox>

   </center>

   

   <bottom>

      <Button fx:id="btnExit" onAction="#handleBtnExitAction" BorderPane.alignment="CENTER">

         <graphic>

          <ImageView>

            <image>

                  <Image url="@images/exit.png" />

            </image></ImageView>

         </graphic>

         <BorderPane.margin><Insets top="20.0" /></BorderPane.margin>         

      </Button>

   </bottom>

</BorderPane>




자바1)

package thisisjava;



import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;



public class AppMain extends Application {

@Override

public void start(Stage primaryStage) throws Exception {

Parent root = (Parent)FXMLLoader.load(getClass().getResource("root.fxml"));

Scene scene = new Scene(root);


primaryStage.setTitle("Button컨트롤 예제");

primaryStage.setScene(scene);

primaryStage.show();

}


public static void main(String[] args) {

launch(args);

}

 

}


자바2)

package thisisjava;



import java.net.URL;

import java.util.ResourceBundle;



import javafx.application.Platform;

import javafx.beans.value.ChangeListener;

import javafx.beans.value.ObservableValue;

import javafx.event.ActionEvent;

import javafx.fxml.FXML;

import javafx.fxml.Initializable;

import javafx.scene.control.Button;

import javafx.scene.control.CheckBox;

import javafx.scene.control.Toggle;

import javafx.scene.control.ToggleGroup;

import javafx.scene.image.Image;

import javafx.scene.image.ImageView;

import javafx.scene.layout.BorderPane;



public class RootController implements Initializable {

@FXML private CheckBox chk1;

@FXML private CheckBox chk2;

@FXML private ImageView checkImageView;

@FXML private ToggleGroup group;

@FXML private ImageView radioImageView;

@FXML private Button btnExit;



@Override

public void initialize(URL location, ResourceBundle resources) {

group.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {

@Override

public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {

Image image = new Image(getClass().getResource("images/" + newValue.getUserData().toString() + ".png").toString());

radioImageView.setImage(image);

}

});

}


public void handleChkAction(ActionEvent e) {

if(chk1.isSelected() && chk2.isSelected()) {

checkImageView.setImage(new Image(getClass().getResource("images/geek-glasses-hair.gif").toString()));

} else if(chk1.isSelected()) {

checkImageView.setImage(new Image(getClass().getResource("images/geek-glasses.gif").toString()));

} else if(chk2.isSelected()) {

checkImageView.setImage(new Image(getClass().getResource("images/geek-hair.gif").toString()));

} else {

checkImageView.setImage(new Image(getClass().getResource("images/geek.gif").toString()));

}

}


public void handleBtnExitAction(ActionEvent e) {

Platform.exit();

}

}