javaFX - view 컨트롤 (ImageView, ListView, TableView)

ImageView 컨트롤

 

 - 이미지를 보여주는 컨트롤

 

FXML에서 선언

<ImageView fitWidth="폭" fitHeight="높이" preserveRatio="true" />

preserveRatio : 이미지의 가로세로 비율을 유지할지 여부 지정.

false 이면 : fitWidth와 fitHeight 크기에 이미지가 맞춰진다.

true 이면 : ImageView의 크기가 조절된다.



이미지 보여주는 방법

1.

<ImageView preserveRatio="true" />

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

</ImageView>



2.

<ImageView fitWidth="250" fitHeight="175" preserveRatio="true" />

   <image>

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

  </image>

</ImageView>



<Image url="@images/abc.jpg" /> 의 url의 속성은 FXML 파일 위치에서 상대경로로

 "@이미지경로"를 지정해주면 됨.

 

ListVIew 컨트롤

 

 - 항목들을 목록으로 보여주는 컨트롤

 

ListView에 항목을 추가할 때는 : setItems(ObservableList<T> value) 메서드를 사용.

 

ObservableList 구현 객체는 FXCollections.observableArrayList(E... items) 정적 메서드를 생성하면 됨

 

=> listview.setItems(FXCollections.observableList("swing", "JavaFX"));

 

중요

 

getSelectionModel() 메서드로 MultipleSelectionModel 을 얻고 , selectedIndexProperty or

 

selectedItemProperty에 리스너를 설정하면 됩니다. 

 

selectedIndexProperty : 선택된 인덱스.

 

selectedItemProperty : 선택된 항목.

 

 

TableView 컨트롤

<TableView prefHeight="100" prefWidth="250">

    <columns>

        <TableColumn prefWidth="175" text="텍스트1"/>

        <TableColumn prefWidth="175" text="텍스트2"/>

    </columns>

</TableView>

*TableView에 행을 추가하려면 행의 데이터를 가지고 있는 model 객체가 필요합니다.

 

model의 속성 타입은 컬럼 값의 데이터 타입에 따라 

 

javafx.beans.property패키지의 SimpleXXXProperty 를 사용하면 됩니다.

 

package thisisjava;



import javafx.beans.property.SimpleStringProperty;



public class Phone {

private SimpleStringProperty smartPhone;

private SimpleStringProperty image;


public Phone() {

this.smartPhone = new SimpleStringProperty();

this.image = new SimpleStringProperty();

}

public Phone(String smartPhone, String image) {

this.smartPhone = new SimpleStringProperty(smartPhone);

this.image = new SimpleStringProperty(image);

}


public String getSmartPhone() {

return smartPhone.get();

}

public void setSmartPhone(String smartPhone) {

this.smartPhone.set(smartPhone);;

}

public String getImage() {

return image.get();

}

public void setImage(String image) {

this.image.set(image);

}

 

}

 

위처럼 모델 클래스를 작성한 후 모델 속성과 TableColumn을 연결하는 코드를 작성해야 함.

 

TableColumn은 TableView의 getColumns.get(인덱스)로 얻어내고, 첫 번째 인덱스는 0이다.

 

TableColumn의 setCellValueFactory() 메서드는 매개값으로 제공되는 PropertyValueFactory("모델속성명")을 이용해서

 

모델 속성 값을 TableColumn값으로 세팅.

 

 

ex)

TableColumn tcSmartPhone = tableView.getColumns().get(0);

tcSmartPhone.setCellValueFactory( new PropertyValueFactory("smartPhone") );

 

셀(Cell) 내에서 정렬이 필요할 때에는 TableColumn의 setStyle() 메서드로 CSS를 적용하면 된다.

tcSmartPhone.setStyle("0fx-alignment: CENTER;");  

 

행의 데이터를 주기위해 ObservableList에 모델 객체들을 저장하고 ObservableList를 매개값으로 해서 TableView의 setItems()메서드를 호출하여 행들을 추가.

ObservableList phoneList = FXCollections.observableArrayList(

 

       new Phone("스마트폰1", "phone1.jpg"),

 

       new Phone("스마트폰2", "phone2.jpg"),

 

       new Phone("스마트폰3", "phone3.jpg")

);

 

tableView.setItems(phoneList);

 

예제

 

예제)

FXML

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



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

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

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

<?import javafx.geometry.*?>

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

<?import java.lang.*?>

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

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

<?import javafx.collections.*?>



<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="thisisjava.RootController"

prefHeight="180.0" prefWidth="500.0" >

   <children>

      <Label layoutX="11.0" layoutY="9.0" text="리스트뷰" />

      <ListView fx:id="listView" layoutX="10.0" layoutY="30.0" prefHeight="100.0" prefWidth="100.0" />

      <Label layoutX="125.0" layoutY="9.0" text="테이블뷰" />

      <TableView fx:id="tableView" layoutX="120.0" layoutY="30.0" prefHeight="100.0" prefWidth="290.0">

        <columns>

          <TableColumn prefWidth="100.0" text="스마트폰" />

          <TableColumn prefWidth="100.0" text="이미지" />

        </columns>

      </TableView>

      <Label layoutX="425.0" layoutY="9.0" text="이미지뷰" />

      <ImageView fx:id="imageView" fitHeight="100.0" fitWidth="60.0" layoutX="430.0" layoutY="30.0" preserveRatio="true" />

      <Button layoutX="190.0" layoutY="145.0" onAction="#handleBtnOkAction" text="확인" />

      <Button layoutX="260.0" layoutY="145.0" onAction="#handleBtnCancelAction" text="취소" />

   </children>

 

</AnchorPane>





자바1)

package thisisjava;



import javafx.beans.property.SimpleStringProperty;



public class Phone {

private SimpleStringProperty smartPhone;

private SimpleStringProperty image;


public Phone() {

this.smartPhone = new SimpleStringProperty();

this.image = new SimpleStringProperty();

}

public Phone(String smartPhone, String image) {

this.smartPhone = new SimpleStringProperty(smartPhone);

this.image = new SimpleStringProperty(image);

}


public String getSmartPhone() {

return smartPhone.get();

}

public void setSmartPhone(String smartPhone) {

this.smartPhone.set(smartPhone);;

}

public String getImage() {

return image.get();

}

public void setImage(String image) {

this.image.set(image);;

}

 

}


자바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.collections.FXCollections;

import javafx.collections.ObservableList;

import javafx.event.ActionEvent;

import javafx.fxml.FXML;

import javafx.fxml.Initializable;

import javafx.scene.control.ListView;

import javafx.scene.control.TableColumn;

import javafx.scene.control.TableView;

import javafx.scene.control.cell.PropertyValueFactory;

import javafx.scene.image.Image;

import javafx.scene.image.ImageView;



public class RootController implements Initializable {

@FXML private ListView<String> listView;

@FXML private TableView<Phone> tableView;

@FXML private ImageView imageView;


@Override

public void initialize(URL location, ResourceBundle resources) {

listView.setItems(FXCollections.observableArrayList(

"스마트폰1", "스마트폰2", "스마트폰3", "스마트폰4", "스마트폰5", "스마트폰6", "스마트폰7"

));

listView.getSelectionModel().selectedIndexProperty().addListener(new ChangeListener<Number>() {

@Override

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

tableView.getSelectionModel().select(newValue.intValue());

tableView.scrollTo(newValue.intValue());

}

});


ObservableList phoneList = FXCollections.observableArrayList(

    new Phone("갤럭시S1", "phone01.png"),

    new Phone("갤럭시S2", "phone02.png"),

    new Phone("갤럭시S3", "phone03.png"),

    new Phone("갤럭시S4", "phone04.png"),

    new Phone("갤럭시S5", "phone05.png"),

    new Phone("갤럭시S6", "phone06.png"),

    new Phone("갤럭시S7", "phone07.png")

);


TableColumn tcSmartPhone = tableView.getColumns().get(0);

tcSmartPhone.setCellValueFactory(

new PropertyValueFactory("smartPhone")

);

tcSmartPhone.setStyle("-fx-alignment: CENTER;");


TableColumn tcImage = tableView.getColumns().get(1);

tcImage.setCellValueFactory(

new PropertyValueFactory("image")

    );

tcImage.setStyle("-fx-alignment: CENTER;");


tableView.setItems(phoneList);


tableView.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Phone>() {

@Override

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

if(newValue!=null) {

imageView.setImage(new Image(getClass().getResource("images/" + newValue.getImage()).toString()));

}

}

});

}


public void handleBtnOkAction(ActionEvent e) {

String item = listView.getSelectionModel().getSelectedItem();

System.out.println("ListView 스마트폰: " + item);


Phone phone = tableView.getSelectionModel().getSelectedItem();

System.out.println("TableView 스마트폰: " + phone.getSmartPhone());

System.out.println("TableView 이미지: " + phone.getImage());

}


public void handleBtnCancelAction(ActionEvent e) {

Platform.exit();

}

 

}






자바3)

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("뷰 컨트롤 예제");

primaryStage.setScene(scene);

primaryStage.show();

}


public static void main(String[] args) {

launch(args);

}

 

}