JavaFX | FXML 액션 이벤트 구현 | <fx:script>에서 액션을 구현

그러면 실제로 <fx:script> 태그를 사용한 액션 이벤트의 처리를 만들어 보다. 전에 사용한 프로젝트를 그대로 작성을 변경하는 식으로 해보기로 한다.

FXML 파일 (app.fxml)를 열고, 아래와 같이 소스 코드를 재 작성하자. 그 외에 다른 것 (Java 소스 코드 등)는 일체 변경할 필요가 없다.

<?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.*?>
 
<BorderPane xmlns="http://javafx.com/javafx"
        xmlns:fx="http://javafx.com/fxml">
    <fx:script>
    function doAction(event){
        var str = field1.getText();
        str = "당신은 쓴 글은 '" + str + "' 이것입니다.";
        label1.setText(str);
    }
    </fx:script>
    <stylesheets>
        <URL value="@app.css" />
    </stylesheets>
    <top>
        <Label fx:id="label1" text="This is FXML!" />
    </top>
    <center>
        <TextField fx:id="field1" />
    </center>
    <bottom>
        <Button onAction="doAction(event);" text="Click" />
    </bottom>
</BorderPane>

이제 실행해 보자.

이 예제에는 Button을 클릭하면 TextField에 입력된 텍스트를 추출하여 Label에 간단한 메시지를 표시한다. 아주 간단한 것이지만, 액션 구현의 기본은 알 것이다. 여기에서는 몇 가지 포인트가 있다. 순서대로 정리하여 보겠다.

<?language javascript?>

처음에 이와 같은 태그가 추가되어 있다. 이것은 <fx:script>으로 작성하는 코드가 JavaScript임을 지정하는 것이다. “그럼 다른 언어도 사용할 수 있나?“라고 묻는 다면, 물론 사용할 수 있다.

Groovy나 Clojure 등, Java 가상 머신으로 동작하는 스크립트 언어로 구현된 것이 있으면 이를 지정할 수도 있다. 하지만 Java8에 표준으로 내장되어있는 것은 JavaScript 뿐이므로, 우선은 이것을 사용하는 것을 생각하자.

<fx:script>

<BorderPane> 태그 안에 <fx:script> 태그가 포함되어 있다. FXML에서는 Pane 태그가 루트 태그로 작성된 때문에, <fx:script> 태그는 반드시 그 안에 포함되어 있어야 한다. 이 <fx:script> 태그에는 극히 일반적인 JavaScript 스크립트가 적혀 있다.

주목해 주었으면 것은 여기에서 사용하고있는 객체이다. “label1”, “text1"라는 객체가 이용되고 있지만, 이것들은 모두 다음에 작성된 <Label> 및 <TextField>의 “fx:id” 이름임을 알 수 있습니다.

<fx:script>에 작성된 스크립트 내에서 컨트롤는 fx:id로 지정된 이름의 변수로 액세스 할 수 있도록 되어 있다. 그래서 사용하는 컨트롤에는 반드시 fx:id를 달고 있어야 한다. 이 점만 지킨다면 스크립트 내에서 자유롭게 컨트롤을 사용할 수 있다.

getText과 setText

스크립트 내에는 getText으로 텍스트를 얻고, setText으로 설정하고 있다. 이것으로 이미 본 적이 있는 메소드이다. 그렇다 Java 소스 코드 내에서 컨트롤의 인스턴스를 사용할 때 사용했었다.

스크립트에서 사용되는 컨트롤의 객체도 Java 인스턴스와 전부 동일한 메소드를 가지고 있어, 같은 감각으로 그것들을 호출 할 수 있다. 새롭게 기억 할 필요는 전혀 없다

스크립트 외부 파일에 대해

여기에서는 <fx:script> 태그에 스크립트를 작성했지만 스크립트가 길어지면 다른 파일에 스크립트를 분리하는 것이 좋다. 이러한 경우는 “source"라는 속성을 지정한다. 예를 들면,

<fx:script source="script.js"/>

이런 형태로 작성하면 FXML 파일과 같은 위치에 있는 “script.js"를 로드하여 사용할 수 있게 된다. 실행하는 스크립트가 길어지게 되면 source를 사용하여 다른 파일으로 분리해 보도록 하자.