JavaFX | ListView와 SelectionModel | ListView 만들기
기본적인 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>
태그를 사용하여 표시할 텍스트를 지정한다. 간단한 텍스트 값이라면 이것으로 표시 가능하다.