Update templates and tutorials

JetBrains · Jul 26, 2021 · ff08066 · ff08066
1 parent f58fc63
commit ff08066
Show file tree

Hide file tree

Showing 28 changed files with 541 additions and 1,492 deletions.
diff --git a/README.md b/README.md
@@ -35,10 +35,8 @@ Preview functionality (check your application UI without building/running it) fo
        * [Mouse events and hover](tutorials/Mouse_Events)
        * [Scrolling and scrollbars](tutorials/Desktop_Components)
        * [Tooltips](tutorials/Desktop_Components#tooltips)
-       * [Top level windows management](tutorials/Window_API)
-       * [Top level windows management (new Composable API, experimental)](tutorials/Window_API_new)
-       * [Menu, tray, notifications](tutorials/Tray_Notifications_MenuBar)
-       * [Menu, tray, notifications (new Composable API, experimental)](tutorials/Tray_Notifications_MenuBar_new)
+       * [Top level windows management](tutorials/Window_API_new)
+       * [Menu, tray, notifications](tutorials/Tray_Notifications_MenuBar_new)
        * [Keyboard support](tutorials/Keyboard)
        * [Building native distribution](tutorials/Native_distributions_and_local_execution)
        * [Signing and notarization](tutorials/Signing_and_notarization_on_macOS)

diff --git a/..._And_Icons_Manipulations/compose-logo.xml → artwork/compose-logo.xml b/..._And_Icons_Manipulations/compose-logo.xml → artwork/compose-logo.xml
diff --git a/compose/frameworks/support b/compose/frameworks/support
diff --git a/tutorials/Desktop_Components/README.md b/tutorials/Desktop_Components/README.md
@@ -9,7 +9,6 @@ In this tutorial, we will show you how to use desktop-specific components of Com
 You can apply scrollbars to scrollable components. The scrollbar and scrollable components share a common state to synchronize with each other. For example, `VerticalScrollbar` can be attached to `Modifier.verticalScroll`, and `LazyColumnFor` and `HorizontalScrollbar` can be attached to `Modifier.horizontalScroll` and `LazyRowFor`.
 
 ```kotlin
-import androidx.compose.desktop.Window
 import androidx.compose.foundation.HorizontalScrollbar
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.background
@@ -29,49 +28,53 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.WindowState
+import androidx.compose.ui.window.singleWindowApplication
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() = singleWindowApplication(
+    title = "Scrollbars",
+    state = WindowState(width = 250.dp, height = 400.dp)
+) {
+    Box(
+        modifier = Modifier.fillMaxSize()
+            .background(color = Color(180, 180, 180))
+            .padding(10.dp)
+    ) {
+        val stateVertical = rememberScrollState(0)
+        val stateHorizontal = rememberScrollState(0)
 
-fun main() {
-    Window(title = "Scrollbars", size = IntSize(250, 400)) {
         Box(
-            modifier = Modifier.fillMaxSize()
-                .background(color = Color(180, 180, 180))
-                .padding(10.dp)
+            modifier = Modifier
+                .fillMaxSize()
+                .verticalScroll(stateVertical)
+                .padding(end = 12.dp, bottom = 12.dp)
+                .horizontalScroll(stateHorizontal)
         ) {
-            val stateVertical = rememberScrollState(0)
-            val stateHorizontal = rememberScrollState(0)
-
-            Box(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .verticalScroll(stateVertical)
-                    .padding(end = 12.dp, bottom = 12.dp)
-                    .horizontalScroll(stateHorizontal)
-            ) {
-                Column {
-                    for (item in 0..30) {
-                        TextBox("Item #$item")
-                        if (item < 30) {
-                            Spacer(modifier = Modifier.height(5.dp))
-                        }
+            Column {
+                for (item in 0..30) {
+                    TextBox("Item #$item")
+                    if (item < 30) {
+                        Spacer(modifier = Modifier.height(5.dp))
                     }
                 }
             }
-            VerticalScrollbar(
-                modifier = Modifier.align(Alignment.CenterEnd)
-                    .fillMaxHeight(),
-                adapter = rememberScrollbarAdapter(stateVertical)
-            )
-            HorizontalScrollbar(
-                modifier = Modifier.align(Alignment.BottomStart)
-                    .fillMaxWidth()
-                    .padding(end = 12.dp),
-                adapter = rememberScrollbarAdapter(stateHorizontal)
-            )
         }
+        VerticalScrollbar(
+            modifier = Modifier.align(Alignment.CenterEnd)
+                .fillMaxHeight(),
+            adapter = rememberScrollbarAdapter(stateVertical)
+        )
+        HorizontalScrollbar(
+            modifier = Modifier.align(Alignment.BottomStart)
+                .fillMaxWidth()
+                .padding(end = 12.dp),
+            adapter = rememberScrollbarAdapter(stateHorizontal)
+        )
     }
 }
 
@@ -96,7 +99,6 @@ fun TextBox(text: String = "Item") {
 You can use scrollbars with lazy scrollable components, for example, `LazyColumn`.
 
 ```kotlin
-import androidx.compose.desktop.Window
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -112,13 +114,21 @@ import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
 
-fun main() {
-    Window(title = "Scrollbars", size = IntSize(250, 400)) {
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() = application {
+    Window(
+        onCloseRequest = ::exitApplication,
+        title = "Scrollbars",
+        state = rememberWindowState(width = 250.dp, height = 400.dp)
+    ) {
         LazyScrollable()
     }
 }
@@ -170,7 +180,6 @@ Scrollbars support themes to change their appearance. The example below shows ho
 
 ```kotlin
 import androidx.compose.desktop.DesktopTheme
-import androidx.compose.desktop.Window
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -188,13 +197,21 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
 
-fun main() {
-    Window(title = "Scrollbars", size = IntSize(280, 400)) {
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() = application {
+    Window(
+        onCloseRequest = ::exitApplication,
+        title = "Scrollbars",
+        state = rememberWindowState(width = 250.dp, height = 400.dp)
+    ) {
         MaterialTheme {
             DesktopTheme {
                 Box(
@@ -254,7 +271,6 @@ The main arguments of the `BoxWithTooltip` function:
  - offset - tooltip offset, the default position of the tooltip is under the mouse cursor
 
 ```kotlin
-import androidx.compose.desktop.Window
 import androidx.compose.foundation.BoxWithTooltip
 import androidx.compose.foundation.TooltipPlacement
 import androidx.compose.foundation.layout.Arrangement
@@ -266,41 +282,51 @@ import androidx.compose.material.Button
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.DpOffset
-import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
 
-fun main() = Window(title = "Tooltip Example", size = IntSize(300, 300)) {
-    val buttons = listOf("Button A", "Button B", "Button C", "Button D", "Button E", "Button F")
-    Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
-        buttons.forEachIndexed { index, name ->
-            // wrap button in BoxWithTooltip
-            BoxWithTooltip(
-                modifier = Modifier.padding(start = 40.dp),
-                tooltip = {
-                    // composable tooltip content
-                    Surface(
-                        modifier = Modifier.shadow(4.dp),
-                        color = Color(255, 255, 210),
-                        shape = RoundedCornerShape(4.dp)
-                    ) {
-                        Text(
-                            text = "Tooltip for ${name}",
-                            modifier = Modifier.padding(10.dp)
-                        )
-                    }
-                },
-                delay = 600, // in milliseconds
-                tooltipPlacement = TooltipPlacement(
-                    anchor = TooltipPlacement.Anchor.Pointer,
-                    alignment = Alignment.BottomEnd,
-                    offset = if (index % 2 == 0) DpOffset(-16.dp, 0.dp) else DpOffset.Zero // tooltip offset
-                )
-            ) {
-                Button(onClick = {}) { Text(text = name) }
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() = application {
+    Window(
+        onCloseRequest = ::exitApplication,
+        title = "Tooltip Example",
+        state = rememberWindowState(width = 300.dp, height = 300.dp)
+    ) {
+        val buttons = listOf("Button A", "Button B", "Button C", "Button D", "Button E", "Button F")
+        Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
+            buttons.forEachIndexed { index, name ->
+                // wrap button in BoxWithTooltip
+                BoxWithTooltip(
+                    modifier = Modifier.padding(start = 40.dp),
+                    tooltip = {
+                        // composable tooltip content
+                        Surface(
+                            modifier = Modifier.shadow(4.dp),
+                            color = Color(255, 255, 210),
+                            shape = RoundedCornerShape(4.dp)
+                        ) {
+                            Text(
+                                text = "Tooltip for ${name}",
+                                modifier = Modifier.padding(10.dp)
+                            )
+                        }
+                    },
+                    delay = 600, // in milliseconds
+                    tooltipPlacement = TooltipPlacement(
+                        anchor = TooltipPlacement.Anchor.Pointer,
+                        alignment = Alignment.BottomEnd,
+                        offset = if (index % 2 == 0) DpOffset(-16.dp, 0.dp) else DpOffset.Zero // tooltip offset
+                    )
+                ) {
+                    Button(onClick = {}) { Text(text = name) }
+                }
             }
         }
     }

diff --git a/tutorials/Getting_Started/README.md b/tutorials/Getting_Started/README.md
@@ -92,7 +92,6 @@ compose.desktop {
 ```
 Then create `src/main/kotlin/main.kt` and put the following code in there:
 ```kotlin
-import androidx.compose.desktop.Window
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -102,25 +101,35 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
-
-fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
-    val count = remember { mutableStateOf(0) }
-    MaterialTheme {
-        Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
-            Button(modifier = Modifier.align(Alignment.CenterHorizontally),
-                   onClick = {
-                       count.value++
-                   }) {
-                Text(if (count.value == 0) "Hello World" else "Clicked ${count.value}!")
-            }
-            Button(modifier = Modifier.align(Alignment.CenterHorizontally),
-                   onClick = {
-                       count.value = 0
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() = application {
+    Window(
+        onCloseRequest = ::exitApplication,
+        title = "Compose for Desktop",
+        state = rememberWindowState(width = 300.dp, height = 300.dp)
+    ) {
+        val count = remember { mutableStateOf(0) }
+        MaterialTheme {
+            Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
+                Button(modifier = Modifier.align(Alignment.CenterHorizontally),
+                    onClick = {
+                        count.value++
+                    }) {
+                    Text(if (count.value == 0) "Hello World" else "Clicked ${count.value}!")
+                }
+                Button(modifier = Modifier.align(Alignment.CenterHorizontally),
+                    onClick = {
+                        count.value = 0
                     }) {
-                Text("Reset")
+                    Text("Reset")
+                }
             }
         }
     }