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,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"
+            )
        }
    }
 }
--- 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)
    }
--- 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,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)
        }
--- 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}")
            }
        }
    }