Merge pull request #340 from JetBrains/tutorials

Tutorials. Migrate to 0.3.0-build146

tutorials/Getting_Started/README.md

@@ -61,8 +61,8 @@ Then create `build.gradle.kts` with the following content:
 import org.jetbrains.compose.compose
 
 plugins {
-    kotlin("jvm") version "1.4.20"
-    id("org.jetbrains.compose") version "0.2.0-build132"
+    kotlin("jvm") version "1.4.21-2"
+    id("org.jetbrains.compose") version "0.3.0-build146"
 }
 
 repositories {

tutorials/Image_And_Icons_Manipulations/README.md

@@ -21,6 +21,7 @@ fun main() {
     Window {
         Image(
             bitmap = imageResource("sample.png"), // ImageBitmap
+            contentDescription = "Sample",
             modifier = Modifier.fillMaxSize()
         )
     }
@@ -49,6 +50,7 @@ fun main() {
         val image = remember { imageFromFile(File("sample.png")) }
         Image(
             bitmap = image,
+            contentDescription = "Sample",
             modifier = Modifier.fillMaxSize()
         )
     }
@@ -172,6 +174,7 @@ fun main() {
         val imageAsset = remember { asImageAsset(image) }
         Image(
             bitmap = imageAsset,
+            contentDescription = "Icon",
             modifier = Modifier.fillMaxSize()
         )
     }
@@ -223,6 +226,7 @@ fun main() {
         val imageAsset = remember { asImageAsset(image) }
         Image(
             bitmap = imageAsset,
+            contentDescription = "Icon",
             modifier = Modifier.fillMaxSize()
         )
     }
@@ -264,7 +268,7 @@ import androidx.compose.desktop.AppManager
 import androidx.compose.desktop.Window
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.onActive
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
@@ -279,7 +283,7 @@ import javax.imageio.ImageIO
 fun main() {
     val image = getWindowIcon()
     Window {
-        onActive {
+        DisposableEffect(Unit) {
             val tray = Tray().apply {
                 icon(getWindowIcon())
                 menu(
@@ -297,6 +301,7 @@ fun main() {
         val imageAsset = asImageAsset(image)
         Image(
             bitmap = imageAsset,
+            contentDescription = "Icon",
             modifier = Modifier.fillMaxSize()
         )
     }
@@ -355,6 +360,7 @@ fun main() {
     Window {
         Image(
             imageVector = vectorXmlResource("images/compose-logo.xml"),
+            contentDescription = "Compose logo",
             modifier = Modifier.fillMaxSize()
         )
     }

tutorials/Scrollbars/README.md

@@ -10,29 +10,29 @@ You can apply scrollbars to scrollable components. The scrollbar and scrollable
 
 ```kotlin
 import androidx.compose.desktop.Window
-import androidx.compose.foundation.background
 import androidx.compose.foundation.HorizontalScrollbar
+import androidx.compose.foundation.VerticalScrollbar
+import androidx.compose.foundation.background
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 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.ScrollableRow
+import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Text
-import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
 
 fun main() {
     Window(title = "Scrollbars", size = IntSize(250, 400)) {
@@ -44,18 +44,18 @@ fun main() {
             val stateVertical = rememberScrollState(0f)
             val stateHorizontal = rememberScrollState(0f)
 
-            ScrollableColumn(
-                modifier = Modifier.fillMaxSize()
-                    .padding(end = 12.dp, bottom = 12.dp),
-                scrollState = stateVertical
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .verticalScroll(stateVertical)
+                    .padding(end = 12.dp, bottom = 12.dp)
+                    .horizontalScroll(stateHorizontal)
             ) {
-                ScrollableRow(scrollState = stateHorizontal) {
-                    Column {
-                        for (item in 0..30) {
-                            TextBox("Item in ScrollableColumn #$item")
-                            if (item < 30) {
-                                Spacer(modifier = Modifier.height(5.dp))
-                            }
+                Column {
+                    for (item in 0..30) {
+                        TextBox("Item in ScrollableColumn #$item")
+                        if (item < 30) {
+                            Spacer(modifier = Modifier.height(5.dp))
                         }
                     }
                 }
@@ -97,20 +97,26 @@ You can use scrollbars with lazy scrollable components, for example, LazyColumn.
 
 ```kotlin
 import androidx.compose.desktop.Window
-import androidx.compose.foundation.background
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.VerticalScrollbar
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 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.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
 
 fun main() {
     Window(title = "Scrollbars", size = IntSize(250, 400)) {
@@ -131,7 +137,7 @@ fun LazyScrollable() {
         val itemCount = 1000
 
         LazyColumn(Modifier.fillMaxSize().padding(end = 12.dp), state) {
-            items((1..itemCount).toList()) { x ->
+            items(itemCount) { x ->
                 TextBox("Item in ScrollableColumn #$x")
                 Spacer(modifier = Modifier.height(5.dp))
             }

tutorials/Tray_Notifications_MenuBar/README.md

@@ -15,15 +15,15 @@ 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.material.Text
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Text
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.onActive
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.window.MenuItem
 import androidx.compose.ui.window.Tray
-import androidx.compose.ui.Modifier
 import java.awt.Color
 import java.awt.image.BufferedImage
 
@@ -32,7 +32,7 @@ fun main() {
     Window(
         icon = getMyAppIcon()
     ) {
-        onActive {
+        DisposableEffect(Unit) {
             val tray = Tray().apply {
                 icon(getTrayIcon())
                 menu(
@@ -71,7 +71,7 @@ fun main() {
     }
 }
 
-fun getMyAppIcon() : BufferedImage {
+fun getMyAppIcon(): BufferedImage {
     val size = 256
     val image = BufferedImage(size, size, BufferedImage.TYPE_INT_ARGB)
     val graphics = image.createGraphics()
@@ -85,7 +85,7 @@ fun getMyAppIcon() : BufferedImage {
     return image
 }
 
-fun getTrayIcon() : BufferedImage {
+fun getTrayIcon(): BufferedImage {
     val size = 256
     val image = BufferedImage(size, size, BufferedImage.TYPE_INT_ARGB)
     val graphics = image.createGraphics()

tutorials/Window_API/README.md

@@ -39,8 +39,8 @@ You can see an example of both types of window below.
 
 ```kotlin
 import androidx.compose.desktop.Window
-import androidx.compose.foundation.Text
 import androidx.compose.material.Button
+import androidx.compose.material.Text
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.window.Dialog