From 12188983bcdcbb222529bb1d4181c242ff09fd45 Mon Sep 17 00:00:00 2001 From: Nikolay Igotti Date: Thu, 26 Nov 2020 12:57:38 +0300 Subject: [PATCH] Update tutorials. --- tutorials/Keyboard/README.md | 2 +- tutorials/Mouse_Events/README.md | 72 +++++++++---------- tutorials/Scrollbars/README.md | 23 +++--- tutorials/Swing_Integration/README.md | 5 +- .../Tray_Notifications_MenuBar/README.md | 33 +++++---- tutorials/Window_API/README.md | 39 +++++----- 6 files changed, 81 insertions(+), 93 deletions(-) diff --git a/tutorials/Keyboard/README.md b/tutorials/Keyboard/README.md index 8e50a849ba..f8b24f887b 100644 --- a/tutorials/Keyboard/README.md +++ b/tutorials/Keyboard/README.md @@ -35,10 +35,10 @@ The most common use case is to define keyboard handlers for active controls like ``` kotlin import androidx.compose.desktop.Window -import androidx.compose.foundation.Text import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material.Text import androidx.compose.material.MaterialTheme import androidx.compose.material.TextField import androidx.compose.runtime.mutableStateOf diff --git a/tutorials/Mouse_Events/README.md b/tutorials/Mouse_Events/README.md index cc31ed55f7..1a9262fa9e 100644 --- a/tutorials/Mouse_Events/README.md +++ b/tutorials/Mouse_Events/README.md @@ -14,9 +14,9 @@ so code like this 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.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment @@ -25,25 +25,25 @@ 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 count = remember { mutableStateOf(0) } + Box(contentAlignment = 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) + text = text.value, + fontSize = 50.sp, + modifier = Modifier + .clickable( + onClick = { + text.value = "Click! ${count.value++}" + }, + onDoubleClick = { + text.value = "Double click! ${count.value++}" + }, + onLongClick = { + text.value = "Long click! ${count.value++}" + } + ) + .align(Alignment.Center) ) } } @@ -93,9 +93,9 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) { 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.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier @@ -111,23 +111,23 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) { 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" - ) + 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" + ) } } } diff --git a/tutorials/Scrollbars/README.md b/tutorials/Scrollbars/README.md index b46464cff6..f699ad3eaa 100644 --- a/tutorials/Scrollbars/README.md +++ b/tutorials/Scrollbars/README.md @@ -25,7 +25,7 @@ import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.ScrollableColumn import androidx.compose.foundation.ScrollableRow -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.VerticalScrollbar import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -82,7 +82,7 @@ fun TextBox(text: String = "Item") { .width(400.dp) .background(color = Color(200, 0, 0, 20)) .padding(start = 10.dp), - alignment = Alignment.CenterStart + contentAlignment = Alignment.CenterStart ) { Text(text = text) } @@ -99,18 +99,12 @@ You can use scrollbars with lazy scrollable components, for example, LazyColumn. import androidx.compose.desktop.Window import androidx.compose.foundation.background import androidx.compose.foundation.ExperimentalFoundationApi -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxHeight -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.lazy.ExperimentalLazyDsl import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.Text import androidx.compose.foundation.VerticalScrollbar +import androidx.compose.foundation.layout.* import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.graphics.Color @@ -124,14 +118,14 @@ fun main() { } } -@OptIn(ExperimentalLazyDsl::class, ExperimentalFoundationApi::class) +@OptIn(ExperimentalFoundationApi::class) @Composable fun LazyScrollable() { Box( modifier = Modifier.fillMaxSize() .background(color = Color(180, 180, 180)) .padding(10.dp) - ) { + ) { val state = rememberLazyListState() val itemCount = 1000 @@ -160,7 +154,7 @@ fun TextBox(text: String = "Item") { .fillMaxWidth() .background(color = Color(0, 0, 0, 20)) .padding(start = 10.dp), - alignment = Alignment.CenterStart + contentAlignment = Alignment.CenterStart ) { Text(text = text) } @@ -184,11 +178,10 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.ScrollableColumn -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.VerticalScrollbar import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable @@ -238,7 +231,7 @@ fun TextBox(text: String = "Item") { .fillMaxWidth() .background(color = Color(0, 0, 0, 20)) .padding(start = 10.dp), - alignment = Alignment.CenterStart + contentAlignment = Alignment.CenterStart ) { Text(text = text) } diff --git a/tutorials/Swing_Integration/README.md b/tutorials/Swing_Integration/README.md index 7a18280c3c..7394f19996 100644 --- a/tutorials/Swing_Integration/README.md +++ b/tutorials/Swing_Integration/README.md @@ -11,8 +11,6 @@ ComposePanel lets you create a UI using Compose for Desktop in a Swing-based UI. ```kotlin import androidx.compose.desktop.AppManager import androidx.compose.desktop.ComposePanel -import androidx.compose.desktop.setContent -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -22,7 +20,7 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.width -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Button import androidx.compose.material.Surface @@ -39,7 +37,6 @@ import java.awt.event.ActionEvent import java.awt.event.ActionListener import javax.swing.JFrame import javax.swing.JButton -import javax.swing.SwingUtilities import javax.swing.WindowConstants val northClicks = mutableStateOf(0) diff --git a/tutorials/Tray_Notifications_MenuBar/README.md b/tutorials/Tray_Notifications_MenuBar/README.md index ae2c6461c1..2f5bc0e128 100755 --- a/tutorials/Tray_Notifications_MenuBar/README.md +++ b/tutorials/Tray_Notifications_MenuBar/README.md @@ -15,25 +15,23 @@ You can add an application icon to the system tray. You can also send notificati ```kotlin import androidx.compose.desktop.AppManager import androidx.compose.desktop.Window -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.onActive -import androidx.compose.runtime.onDispose import androidx.compose.ui.Alignment import androidx.compose.ui.window.MenuItem import androidx.compose.ui.window.Tray import androidx.compose.ui.Modifier import java.awt.Color -import java.awt.Graphics2D import java.awt.image.BufferedImage fun main() { val count = mutableStateOf(0) Window( - icon = getMyAppIcon() - ) { + icon = getMyAppIcon() + ) { onActive { val tray = Tray().apply { icon(getTrayIcon()) @@ -66,7 +64,7 @@ fun main() { // content Box( modifier = Modifier.fillMaxSize(), - alignment = Alignment.Center + contentAlignment = Alignment.Center ) { Text(text = "Value: ${count.value}") } @@ -111,19 +109,18 @@ Notifier also has 3 types of notification: ```kotlin import androidx.compose.desktop.Window import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.material.Button import androidx.compose.ui.window.Notifier import java.awt.Color -import java.awt.Graphics2D import java.awt.image.BufferedImage fun main() { val message = "Some message!" val notifier = Notifier() Window( - icon = getMyAppIcon() - ) { + icon = getMyAppIcon() + ) { Column { Button(onClick = { notifier.notify("Notification.", message) }) { Text(text = "Notify") @@ -163,7 +160,7 @@ To create a common context menu for all the application windows, you need to con ```kotlin import androidx.compose.desktop.AppManager import androidx.compose.desktop.Window -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.mutableStateOf @@ -176,6 +173,9 @@ import androidx.compose.ui.window.Menu import androidx.compose.ui.window.MenuBar fun main() { + // To use Apple global menu. + System.setProperty("apple.laf.useScreenMenuBar", "true") + val action = mutableStateOf("Last action: None") AppManager.setMenu( @@ -213,7 +213,7 @@ fun main() { // content Box( modifier = Modifier.fillMaxSize(), - alignment = Alignment.Center + contentAlignment = Alignment.Center ) { Text(text = action.value) } @@ -228,7 +228,7 @@ You can create a MenuBar for a specific window, and have the other windows use t ```kotlin import androidx.compose.desktop.AppManager import androidx.compose.desktop.Window -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material.Button @@ -244,6 +244,9 @@ import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.IntSize fun main() { + // To use Apple global menu. + System.setProperty("apple.laf.useScreenMenuBar", "true") + val action = mutableStateOf("Last action: None") Window( @@ -285,7 +288,7 @@ fun main() { location = IntOffset(100, 100), centered = false ) { - + } } ) { @@ -293,7 +296,7 @@ fun main() { } Box( modifier = Modifier.fillMaxSize(), - alignment = Alignment.Center + contentAlignment = Alignment.Center ) { Text(text = action.value) } diff --git a/tutorials/Window_API/README.md b/tutorials/Window_API/README.md index 175a8596a5..d20de5bd0f 100755 --- a/tutorials/Window_API/README.md +++ b/tutorials/Window_API/README.md @@ -19,7 +19,7 @@ fun main() = invokeLater { } ``` -Note that AppWindow should be created in AWT Event Thread. Instead of calling invokeLater explicitly you can use Window DSL: +Note that AppWindow should be created in AWT Event Thread. Instead of calling `invokeLater()` explicitly you can use `Window` DSL: ```kotlin import androidx.compose.desktop.Window @@ -55,7 +55,7 @@ fun main() { if (dialogState.value) { Dialog( - onDismissEvent = { dialogState.value = false } + onDismissRequest = { dialogState.value = false } ) { // dialog's content } @@ -84,7 +84,7 @@ An example of using window parameters in the creation step: import androidx.compose.desktop.AppManager import androidx.compose.desktop.Window import androidx.compose.desktop.WindowEvents -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -100,7 +100,6 @@ import androidx.compose.ui.window.KeyStroke import androidx.compose.ui.window.Menu import androidx.compose.ui.window.MenuBar import java.awt.Color -import java.awt.Graphics2D import java.awt.image.BufferedImage fun main() { @@ -140,7 +139,7 @@ fun main() { // content Box( modifier = Modifier.fillMaxSize(), - alignment = Alignment.Center + contentAlignment = Alignment.Center ) { Column { Text(text = "Location: ${windowPos.value} Value: ${count.value}") @@ -160,7 +159,7 @@ fun getMyAppIcon() : BufferedImage { val size = 256 val image = BufferedImage(size, size, BufferedImage.TYPE_INT_ARGB) val graphics = image.createGraphics() - graphics.setColor(Color.orange) + graphics.color = Color.orange graphics.fillOval(0, 0, size, size) graphics.dispose() return image @@ -200,10 +199,10 @@ import androidx.compose.ui.unit.IntOffset fun main() { val windowPos = mutableStateOf(IntOffset.Zero) - + Window { val current = AppWindowAmbient.current - + // content Box( modifier = Modifier.fillMaxSize(), @@ -231,7 +230,7 @@ fun main() { ```kotlin import androidx.compose.desktop.AppManager import androidx.compose.desktop.Window -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -248,7 +247,7 @@ fun main() { // content Box( modifier = Modifier.fillMaxSize(), - alignment = Alignment.Center + contentAlignment = Alignment.Center ) { Column { Text(text = "Location: ${windowPos.value}") @@ -281,19 +280,16 @@ Using the following methods, you can change the properties of the AppWindow: ```kotlin import androidx.compose.desktop.AppWindowAmbient import androidx.compose.desktop.Window -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.material.Button fun main() { Window { - val current = AppWindowAmbient.current // content Button( onClick = { - if (current != null) { - current.setWindowCentered() - } + AppWindowAmbient.current?.setWindowCentered() } ) { Text(text = "Center the window") @@ -322,10 +318,9 @@ Actions can be assigned to the following window events: ```kotlin import androidx.compose.desktop.Window import androidx.compose.desktop.WindowEvents -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.material.Button import androidx.compose.runtime.mutableStateOf import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -334,7 +329,7 @@ import androidx.compose.ui.unit.IntSize fun main() { val windowSize = mutableStateOf(IntSize.Zero) val focused = mutableStateOf(false) - + Window( events = WindowEvents( onFocusGet = { focused.value = true }, @@ -347,7 +342,7 @@ fun main() { // content Box( modifier = Modifier.fillMaxSize(), - alignment = Alignment.Center + contentAlignment = Alignment.Center ) { Text(text = "Size: ${windowSize.value} Focused: ${focused.value}") } @@ -394,7 +389,7 @@ Compose for Desktop is tightly integrated with Swing at the top-level windows la ```kotlin import androidx.compose.desktop.AppManager import androidx.compose.desktop.Window -import androidx.compose.foundation.Text +import androidx.compose.material.Text import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize @@ -409,7 +404,7 @@ fun main() { // content Box( modifier = Modifier.fillMaxSize(), - alignment = Alignment.Center + contentAlignment = Alignment.Center ) { Column { Button( @@ -424,7 +419,7 @@ fun main() { ) { Text(text = "Check display scaling factor") } - Text(text = "Scaling factor: ${scaleFactor.value}}") + Text(text = "Scaling factor: ${scaleFactor.value}") } } }