Update tutorials.

4 years ago · 12188983bc
6 changed files with 81 additions and 93 deletions
--- 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
--- 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,8 +25,8 @@ 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,
@ -34,13 +34,13 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
            modifier = Modifier
                .clickable(
                    onClick = {
-                                text.value = "Click! ${count++}"
+                        text.value = "Click! ${count.value++}"
                    },
                    onDoubleClick = {
-                                text.value = "Double click! ${count++}"
+                        text.value = "Double click! ${count.value++}"
                    },
                    onLongClick = {
-                                text.value = "Long click! ${count++}"
+                        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
--- 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,7 +118,7 @@ fun main() {
    }
 }

-@OptIn(ExperimentalLazyDsl::class, ExperimentalFoundationApi::class)
+@OptIn(ExperimentalFoundationApi::class)
@Composable
 fun LazyScrollable() {
    Box(
@ -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)
    }
--- 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)
--- a/tutorials/Tray_Notifications_MenuBar/README.md
+++ b/tutorials/Tray_Notifications_MenuBar/README.md
@ -15,18 +15,16 @@ 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() {
@ -66,7 +64,7 @@ fun main() {
        // content
        Box(
            modifier = Modifier.fillMaxSize(),
-            alignment = Alignment.Center
+            contentAlignment = Alignment.Center
        ) {
            Text(text = "Value: ${count.value}")
        }
@ -111,11 +109,10 @@ 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() {
@ -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(
@ -293,7 +296,7 @@ fun main() {
        }
        Box(
            modifier = Modifier.fillMaxSize(),
-            alignment = Alignment.Center
+            contentAlignment = Alignment.Center
        ) {
            Text(text = action.value)
        }
--- 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
@ -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
@ -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}")
            }
        }
    }