트리뷰는 나무와 브랜치(가지) 관계처럼 뻗어나가는 관계의 뷰를 말한다.

 

하나의 나무 기둥에서 출발하지만 결국 수많은 가지를 뻗는 나무의 속성과 같기 때문에 Tree View 라고 한다.

 

TreeView 클래스를 사용하려면 TreeItem 과 함께 사용해야 한다.

 

이전의 뷰들에 비하면 조금 복잡하지만 관계도를 나타낸다는 부분에서 더 많은 정보를 담고 있다. 이를테면 이런 트리뷰는 웹페이지에서 카테고리를 나눌때 사용하는 방식이다. 쇼핑몰에서 흔히 봤을 것이다.

 

*식품

 - 축산물

 - 농산물

 - 가공품

 - HMR 가정간편식

 

이런 것이 트리뷰다.

 

JavaFX의 트리뷰는 root에서 출발한다. root가 거슬리면 나중에 보이지 않게 설정할 수 있다.

 

코드가 길어보이지만 중요한 부분만 놓고 보면 그렇게 어렵지 않다.

package com;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    Stage window;
    Scene scene;
    Button button;
    TreeView<String> treeView;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("Learning JavaFX");
        button = new Button("전송하기");

        TreeItem<String> root, branch1, branch2;

        //Root
        root = new TreeItem<>("ROOT");
        root.setExpanded(true);

        //Branch1
        branch1 = makeBranch("English Name", root);
        makeBranch("Jone", branch1);
        makeBranch("Lin", branch1);
        makeBranch("Smith", branch1);
        makeBranch("Jane", branch1);
        makeBranch("James", branch1);

        //Branch2
        branch2 = makeBranch("조선시대", root);
        makeBranch("세종대왕", branch2);
        makeBranch("이순신", branch2);
        makeBranch("정약용", branch2);
        makeBranch("허준", branch2);
        makeBranch("유성룡", branch2);

        //Tree
        treeView = new TreeView<>(root);
        treeView.setShowRoot(true);
        treeView.getSelectionModel().selectedItemProperty()
                .addListener((v, oldValue, newValue) -> {
                    if(newValue != null)
                        System.out.println(newValue.getValue());
                });

        VBox layout = new VBox(20);
        layout.setPadding(new Insets(10,10,10,10));
        layout.getChildren().add(treeView);
        layout.getChildren().add(button);

        scene = new Scene(layout, 300, 300);
        window.setScene(scene);
        window.show();
    }

    public TreeItem<String> makeBranch(String title, TreeItem<String> parent) {
        TreeItem<String> item = new TreeItem<>(title);
        item.setExpanded(true);
        parent.getChildren().add(item);
        return item;
    }
}

 

아래 내용을 보면 TreeView 에 TreeItem 을 부착하는 방식으로 사용한다.

 

TreeItem 은 root , branch1, branch2 로 만드는데 root 가 parent 부모이고 branch1, 2 가 child 이다.

 

클래스 프로그래밍을 하다보면 부모 자식 자매(sibling) 라는 용어가 종종 나온다. 상속에 대한 내용일 수도 있고 계층에 대한 구조일 수도 있다. 어쨋든 TreeView 라는 것은 하나의 뿌리 root 에서 가지 branch 가 뻗어나가는 것이다.

 

용어의 개념을 정립하면 이 코드의 내용을 좀 더 입체적으로 볼 수 있다.

 

setExpanded 를 true로 하면 그 다음의 branch를 사용할 수 있다.

 

하위 브랜치를 만드는 일은 반복적이므로 서브루틴(메서드)를 만들어서 사용한다. 이름과 접목할 브랜치만 알고 있으면 될 것이다. (매개변수)

 

 

아래 코드에서 이어진다. TreeView 에 TreeItem 인 root를 왜 넣는지 짐작할 수 있다.

 

TreeView에 root를 넣으면 자연스럽게 그 아래 branch 들은 딸려온다.

 

TreeView에서도 마찬가지로 액션리스너를 람다로 구현할 수 있다. 내용을 콘솔에 표시한다.

 

makeBranch 함수는 브랜치가 만들어지는 과정이다.

 

TreeItem 을 하나 만들고 parent 인 root 가 getChildren 으로 자녀 클래스로 확보하여 item 을 더한다.

 

JAVAFX의 각 컴포넌트는 다르지만 메서드는 일관성이 있으니까 자주 보면 금방 익숙해진다.

 

 

 

 

공유하기

facebook twitter kakaoTalk kakaostory naver band