Swing에서 Jetpack Compose 데스크탑까지 #1

최근 JetBrainsannounced는 Jetpack Compose for Desktop의 프리뷰 버전입니다. Jetpack Compose는 Android UI의 차세대 혁신 제품이고 저는 항상 데스크탑에 대한 열정을 가지고 있었기 때문에 Compose for Desktop의 모양과 느낌을 알아야 한다고 느꼈습니다. 새로운 것을 배우는 가장 좋은 방법은 그것을 사용하고 가지고 노는 것입니다. 따라서 Java Swing 사용자 인터페이스를 Compose Desktop으로 변환하기로 결정했습니다.

내 여정을 따라와.

내가 변형할 앱은 아주 오래되었습니다. TKDupeFinder라고 합니다. 유일한 목적은 중복 파일을 찾는 것입니다. 사용자가 기본 디렉토리에 들어가면 앱은 모든 하위 폴더를 탐색하고 동일한 MD5 해시가 있는 파일을 검색합니다. 목록에 표시됩니다. 그런 다음 사용자는 이러한 파일을 열고 중복 파일을 삭제할 수 있습니다. 10년 이상 동안 이 앱은 내 하드 드라이브 깊숙이 파묻혀 있었습니다. 며칠 전에 repo on GitHub을 만들고 소스를 푸시했습니다. 여기서 변형이 일어날 것입니다.

첫 번째 단계는 소스 코드를 Kotlin 지원으로 만드는 것입니다. 원래 앱은 NetBeans를 사용하고 Maven을 활용하여 Java로 작성되었습니다. 아직 NetBeans용 Kotlin 플러그인이 있지만 더 이상 적극적으로 개발되지 않는 것 같습니다. 그래서 프로젝트를 IntelliJ로 옮기기로 결정했습니다. 저도 Gradle로 바꿨습니다. Kotlin을 Maven과 함께 쉽게 사용할 수 있지만 현재 데스크톱용 Jetpack Compose 초기 미리보기 문서는 Gradle에 중점을 둡니다. Swing 애플리케이션을 시작하는 Kotlinmain() 함수를 작성해 보겠습니다.

package com.thomaskuenneth.tkdupefinder

import javax.swing.SwingUtilities
import javax.swing.UIManager
import javax.swing.UnsupportedLookAndFeelException

fun main() {
    SwingUtilities.invokeLater {
        try {
            UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName())
        } catch (thr: ClassNotFoundException) {
            System.err.println(thr.localizedMessage)
        } catch (thr: InstantiationException) {
            System.err.println(thr.localizedMessage)
        } catch (thr: IllegalAccessException) {
            System.err.println(thr.localizedMessage)
        } catch (thr: UnsupportedLookAndFeelException) {
            System.err.println(thr.localizedMessage)
        }
        TKDupeFinderGUI().isVisible = true
    }
}

나쁘지는 않지만 우리가 더 추구하고 싶은 것은 아닙니다. 우리는 UI를 합성하고 싶습니다. 맞습니까? 이 와이어프레임을 살펴보십시오.



따라서 버튼, 레이블, 목록 및 텍스트 필드가 필요합니다. 다음은 연결 방법입니다.

package com.thomaskuenneth.tkdupefinder

import androidx.compose.desktop.Window
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.LastBaseline
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp

fun main() = Window(title = "TKDupeFinder", size = IntSize(600, 400)) {
    MaterialTheme {
        Column() {
            FirstRow()
            SecondRow()
            ThirdRow()
        }
    }
}

@Composable
fun FirstRow() {
    val name = remember { mutableStateOf(TextFieldValue("")) }
    Row(
            modifier = Modifier.fillMaxWidth()
                    .padding(8.dp),
    ) {
        TextField(
                value = name.value,
                placeholder = {
                    Text("Base directory")
                },
                modifier = Modifier.alignBy(LastBaseline)
                        .weight(1.0f),
                onValueChange = {
                    name.value = it
                },
        )
        MySpacer()
        Button(
                onClick = {},
                modifier = Modifier.alignByBaseline(),
        ) {
            Text("Find")
        }
    }
}

@Composable
fun SecondRow() {
    Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
                    .padding(8.dp),
    ) {
        Button(onClick = {}) {
            Text("\u140A")
        }
        MySpacer()
        Button(onClick = {}) {
            Text("\u1405")
        }
        MySpacer()
        Text(text = "1 of 42")
    }
}

@Composable
fun MySpacer() {
    Spacer(modifier = Modifier.width(8.dp))
}

@Composable
fun ThirdRow() {
    val scrollState = rememberScrollState()
    ScrollableColumn(
            scrollState = scrollState,
            modifier = Modifier.fillMaxSize().padding(8.dp),
    ) {
        Text("1")
        Text("2")
        Text("3")
    }
}

macOS에서는 다음과 같이 표시됩니다.



이제 이것은 매우 대략적인 컷일뿐입니다. 그러나 우리는 그것에 노력할 것입니다. 계속 지켜봐주십시오.