Kotlin으로 데스크톱 응용 프로그램을 간단하게 만들다

Kotlin도 VB와 VC처럼 데스크톱 응용 프로그램을 간단하게 만들 수 있다.
요점은 다음과 같다.
  • IntelliJ에 TornadoFX 플러그인 설치
  • IntelliJ에서 SceneBuilder(GUI 작성 도구)를 호출할 수 있음
  • SceneBuilder에서 생성된 FXML 파일은 View 클래스(Form 해당)의 루트 속성과 연결됩니다
  • 사용할 작은 위젯의 fxid를 프로그램의 변수와 연결
  • 이제 구체적인 방법을 설명해 드리겠습니다.

    필요한 물건


    IntelliJ(Commutity Edition OK)
    SceneBuilder

    준비


    SceneBuilder


    http://gluonhq.com/products/scene-builder/
    운영 체제 및 Java 버전의 SceneBuilder를 다운로드하여 설치합니다.
    ※ 나중에 사용하기 때문에 SceneBuilder 파일의 설치 위치를 제어하십시오.

    IntelliJ


    다음 플러그인을 설치합니다.
    TornadoFX(JavaFX, Kotlin 포함)
    프로비저닝
    File → Settings → Languages & Frameworks → JavaFX
    스키마 생성기에 경로 지정
    ※ 방금 저장한 SceneBuilder의 저장 위치를 설정합니다.

    항목 만들기


    이번에는 모두 초기 값의 항목 이름:untitled로 만듭니다.
    TornadoFX → tornadofx-gradle-project 선택
    초기 값으로 항목을 만듭니다.
    ※ 2020년 4월 20일 현재
    이러다가gradle의 버전이 너무 낡아서 구축할 수 없습니다.
      untitled/gradle/wrapper/gradle-wrapper.속성 파일 열기
    첫 줄의gradle-4.4-bin.zip 버전을 변경합니다.
    이 원고를 쓸 때 최신판은 6.3이었지만 오류가 생겨 5.6.4로 바뀌었다.
    TornadoFX 프레임워크를 식별합니다.
      
    MainVew.kt 또는 MyApp.kt 파일을 열면 왼쪽에 TornadoFX 아이콘이 표시됩니다.
    태그 요소의 표시 속성을 수정합니다.

    실행에 성공하지 못하면 [실행] - [구성 편집] 을 선택합니다.에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.

    FXML 파일 만들기


    여기서부터 본 공연이야.
    src/main 폴더 아래에resources 폴더, fxml 폴더를 만들고 fxml 파일을 만듭니다.(우클릭으로 생성)

    자동으로 생성된 fxml 파일은 fx:controller의 지정이 있습니다. 그러나 이것은 필요하지 않기 때문에 줄을 삭제하거나 잠시 모두 삭제하고 SceneBuilder로 다시 만드십시오.
    프로젝트 화면에서 fxml 파일을 두 번 클릭하거나 상하문 메뉴 아래에 있는 열린 방안 생성기에서 방안 생성기를 시작할 수 있습니다.
    SceneBuilder의 사용법은 여기서 사랑을 베는 것입니다.
    계속하기 위해서 모든 fxml 코드를 삭제하고 다음 코드로 fxml 파일을 만듭니다.
    main_view.fxml
    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import javafx.scene.control.Button?>
    <?import javafx.scene.control.TextArea?>
    <?import javafx.scene.layout.AnchorPane?>
    
    <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="243.0" prefWidth="382.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1">
       <children>
          <Button fx:id="sampleButton" layoutX="257.0" layoutY="128.0" mnemonicParsing="false" text="Button" />
          <TextArea fx:id="sampleTextArea" layoutX="21.0" layoutY="19.0" prefHeight="200.0" prefWidth="200.0" />
       </children>
    </AnchorPane>
    
    
    SceneBuilder에서 다음을 볼 수 있습니다.

    AnchorPane에만 Button과 Text Area를 붙였지만 각각'sample Button','sample Text Area'와 같은 fxid를 설치했다.

    MainView.kt 다시 쓰기


    자동으로 생성되는 Mainview 클래스는 다음과 같습니다.
    class MainView : View("Hello TornadoFX") {
        override val root = hbox {
            label(title) {
                addClass(Styles.heading)
            }
        }
    }
    
    다음으로 변경합니다.
    class MainView : View("Hello TornadoFX") {
        override val root: AnchorPane by fxml("/fxml/main_view.fxml")
        private val button: Button by fxid("sampleButton")
        private val textArea: TextArea by fxid("sampleTextArea")
    
        init {
            button.action {
                textArea.text = "Hello TornadoFX by FXML"
            }
        }
    }
    
    보시다시피 보기 클래스의 루트 속성을 FXML 파일과 연결하려면 by fxml을 사용하십시오.
    이 예에서mainuview.fxml 파일의 최고급 용기인 AnchorPane에 따라 루트 속성도 AnchorPane에 설명됩니다.
    그리고 by fxid를 사용하면 사용할 작은 위젯을 전용 변수와 연결합니다.
    이벤트 처리 프로그램은 init 부분에서 정의됩니다.
    위의 예의button.action 방법의 매개 변수는op:()->Unit형의 람다식이기 때문에 길을 잃지 않지만 마우스를 눌렀을 때의 좌표를 찾으려고 할 때 등
    File → Settings → Editor → Appearance 
    "표시 매개 변수 이름 hints"를 선택하면 매개 변수 힌트가 표시됩니다. 매우 유용합니다.

    좋은 웹페이지 즐겨찾기