JavaFX | ListView와 SelectionModel | ListView 만들기

Tags:

기본적인 GUI 컨트롤의 사용법은 이미 설명했지만, JavaFX는 더 복잡한 컨트롤도 포함되어 있다. 특히 중요한 것이 “데이터를 처리하는 컨트롤"이다. 미리 준비한 데이터를 바탕으로 필요한 정보를 표시하고 조작하는 것이다.

그 대표라고도 말할 수 있는 것이 “리스트"이다. 여러 항목을 세로 스크롤 리스트로 표시 나열하는 GUI이다. JavaFX에는 이것을 “ListView"라는 컨트롤로 제공하고 있다.

우선 FXML를 이용하여 ListView를 만들어 보자. ListView는 <ListView>라는 태그를 사용하여 만든다. 이것 자체는 매우 간단하지만, 이것만으로는 빈 목록이 되어 버린다. 이 안에 표시 할 내용을 작성해 해주지 않으면 안된다.

<ListView>
    <items>
        <FXCollections fx:factory = "데이터 유형">
            ...... 데이터의 내용 ......
        </FXCollections>
    </items>
</ListView>

데이터의 내용까지 FXML으로 쓰면 이런 식이 될 것이다. ListView의 데이터는 <items>라는 태그로 제공한다. 이 가운데 <FXCollection>라는 태그를 추가한다. 여기에 구체적인 데이터의 내용을 작성하면 된다. 일반적으로 여기에 fx:factory라는 속성을 제공하고 데이터의 종류(FXCollection에 저장하는 클래스)를 지정한다.

이것은 다양하게 설정할 수 있지만, 우선은 “observableArrayList"라는 클래스를 지정해 둔다. 이것은 개체를 모은 ArrayList의 서브 클래스이다. 이 중에 예를 들어 <String> 태그를 사용하여 텍스트를 작성하면 String 데이터의 ArrayList가 생기고, 그것이 표시 항목으로 설정된다.

실제 사용 예를 들면, 아래 코드는 여러 텍스트 항목을 표시하는 샘플이다.

<?xml version="1.0" encoding="UTF-8"?>
 
<?language javascript?>
<?import java.lang.*?>
<?import java.net.URL ?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.FXCollections?>
<BorderPane xmlns="http://javafx.com/javafx"
    xmlns:fx="http://javafx.com/fxml"
    fx:controller="com.tuyano.libro.AppController">
    <stylesheets>
        <URL value="@app.css" />
    </stylesheets>
    <top>
        <Label fx:id="label1" text="This is FXML!" />
    </top>
    <center>
        <ListView fx:id="list1">
            <items>
                <FXCollections fx:factory="observableArrayList">
                    <String fx:value="Windows" />
                    <String fx:value="Mac OS" />
                    <String fx:value="Linux" />
                </FXCollections>
            </items>
        </ListView>
    </center>
    <bottom>
        <Button text="Click" fx:id="btn1" />
    </bottom>
</BorderPane>

<ListView>의 <items> 태그에 다음과 같은 형태로 데이터를 준비하고 있다.

<FXCollections fx:factory="observableArrayList">

그리고 이 가운데에 <String> 태그를 사용하여 표시할 텍스트를 지정한다. 간단한 텍스트 값이라면 이것으로 표시 가능하다.