diff --git a/tutorials/Getting_Started/main.md b/tutorials/Getting_Started/main.md index c06e8a3f0a..b4766784af 100644 --- a/tutorials/Getting_Started/main.md +++ b/tutorials/Getting_Started/main.md @@ -2,7 +2,7 @@ ## What is covered -In this tutorial we will see how to create and deploy simple desktop UI application +In this tutorial we will see how to create simple desktop UI application using Compose UI framework. ## Prerequisites @@ -96,6 +96,8 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) { } ``` +## Running the project + Open `build.gradle.kts` as a project in IDEA. ![New project](screen1.png) diff --git a/tutorials/Mouse_Events/main.md b/tutorials/Mouse_Events/main.md new file mode 100644 index 0000000000..b113a2ad5b --- /dev/null +++ b/tutorials/Mouse_Events/main.md @@ -0,0 +1,135 @@ +# Getting Started with Compose for Desktop + +## What is covered + +In this tutorial we will see how to install mouse events listeners on components +in Compose for Desktop. + +## Mouse event listeners + +### Click listeners + +Click listeners are available in both Compose on Android and Compose for Desktop, +so code like that will work on both platforms: + +```kotlin +import androidx.compose.desktop.Window +import androidx.compose.foundation.Text +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.* +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.IntSize +import androidx.compose.ui.unit.sp + +fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) { + var count = 0 + Box(alignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) { + var text = remember { mutableStateOf("Click me!") } + Text( + text = text.value, + fontSize = 50.sp, + modifier = Modifier + .clickable( + onClick = { + text.value = "Click! ${count++}" + }, + onDoubleClick = { + text.value = "Double click! ${count++}" + }, + onLongClick = { + text.value = "Long click! ${count++}" + } + ) + .align(Alignment.Center) + ) + } +} +``` + +![Application running](mouse_click.gif) + +### Mouse move listeners + +As typically mouse or other positional pointers are available on a desktop platforms only, +following code will only work with Compose for Desktop. +Let's create a text, and install pointer move filter on it, changing the background +color per mouse pointer position: +```kotlin +import androidx.compose.desktop.Window +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.input.pointer.pointerMoveFilter +import androidx.compose.ui.unit.IntSize + +fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) { + var color = remember { mutableStateOf(Color(0, 0, 0)) } + Box( + modifier = Modifier + .wrapContentSize(Alignment.Center) + .fillMaxSize() + .background(color = color.value) + .pointerMoveFilter( + onMove = { + color.value = Color(it.x.toInt() % 256, it.y.toInt() % 256, 0) + false + } + ) + ) +} +``` + +![Application running](mouse_move.gif) + +### Mouse enter listeners + +Compose for Desktop also supports pointer enter and exit handlers, like this: +```kotlin +import androidx.compose.desktop.Window +import androidx.compose.foundation.Text +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.input.pointer.pointerMoveFilter +import androidx.compose.ui.text.font.FontStyle +import androidx.compose.ui.unit.IntSize +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + +fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) { + Column(verticalArrangement = Arrangement.spacedBy(10.dp)) { + repeat(10) { index -> + var active = remember { mutableStateOf(false) } + Text( + modifier = Modifier + .fillMaxWidth() + .background(color = if (active.value) Color.Green else Color.White) + .pointerMoveFilter( + onEnter = { + active.value = true + false + }, + onExit = { + active.value = false + false + } + ), + fontSize = 30.sp, + fontStyle = if (active.value) FontStyle.Italic else FontStyle.Normal, + text = "Item $index" + ) + } + } +} +``` +![Application running](mouse_enter.gif) \ No newline at end of file diff --git a/tutorials/Mouse_Events/mouse_click.gif b/tutorials/Mouse_Events/mouse_click.gif new file mode 100644 index 0000000000..7fcfe7ccac Binary files /dev/null and b/tutorials/Mouse_Events/mouse_click.gif differ diff --git a/tutorials/Mouse_Events/mouse_enter.gif b/tutorials/Mouse_Events/mouse_enter.gif new file mode 100644 index 0000000000..f0f1e17228 Binary files /dev/null and b/tutorials/Mouse_Events/mouse_enter.gif differ diff --git a/tutorials/Mouse_Events/mouse_move.gif b/tutorials/Mouse_Events/mouse_move.gif new file mode 100644 index 0000000000..7ba17915e9 Binary files /dev/null and b/tutorials/Mouse_Events/mouse_move.gif differ