github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Update tutorials.

pull/145/head
Nikolay Igotti 4 years ago
parent
803ba02c49
commit
12188983bc
6 changed files with 81 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      tutorials/Keyboard/README.md
  2. 14
      tutorials/Mouse_Events/README.md
  3. 21
      tutorials/Scrollbars/README.md
  4. 5
      tutorials/Swing_Integration/README.md
  5. 23
      tutorials/Tray_Notifications_MenuBar/README.md
  6. 33
      tutorials/Window_API/README.md

2
tutorials/Keyboard/README.md
Unescape View File

@ -35,10 +35,10 @@ The most common use case is to define keyboard handlers for active controls like
``` kotlin ``` kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
import androidx.compose.material.TextField import androidx.compose.material.TextField
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf

14
tutorials/Mouse_Events/README.md
Unescape View File

@ -14,9 +14,9 @@ so code like this will work on both platforms:
```kotlin ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.foundation.Text
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -25,8 +25,8 @@ import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) { fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
var count = 0 var count = remember { mutableStateOf(0) }
Box(alignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) { Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) {
var text = remember { mutableStateOf("Click me!") } var text = remember { mutableStateOf("Click me!") }
Text( Text(
text = text.value, text = text.value,
@ -34,13 +34,13 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
modifier = Modifier modifier = Modifier
.clickable( .clickable(
onClick = { onClick = {
text.value = "Click! ${count++}" text.value = "Click! ${count.value++}"
}, },
onDoubleClick = { onDoubleClick = {
text.value = "Double click! ${count++}" text.value = "Double click! ${count.value++}"
}, },
onLongClick = { onLongClick = {
text.value = "Long click! ${count++}" text.value = "Long click! ${count.value++}"
} }
) )
.align(Alignment.Center) .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: Compose for Desktop also supports pointer enter and exit handlers, like this:
```kotlin ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.foundation.Text
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier

21
tutorials/Scrollbars/README.md
Unescape View File

@ -25,7 +25,7 @@ import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.ScrollableColumn import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.ScrollableRow import androidx.compose.foundation.ScrollableRow
import androidx.compose.foundation.Text import androidx.compose.material.Text
import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
@ -82,7 +82,7 @@ fun TextBox(text: String = "Item") {
.width(400.dp) .width(400.dp)
.background(color = Color(200, 0, 0, 20)) .background(color = Color(200, 0, 0, 20))
.padding(start = 10.dp), .padding(start = 10.dp),
alignment = Alignment.CenterStart contentAlignment = Alignment.CenterStart
) { ) {
Text(text = text) 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.desktop.Window
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.ExperimentalFoundationApi 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.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.foundation.Text import androidx.compose.foundation.Text
import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
@ -124,7 +118,7 @@ fun main() {
} }
} }
@OptIn(ExperimentalLazyDsl::class, ExperimentalFoundationApi::class) @OptIn(ExperimentalFoundationApi::class)
@Composable @Composable
fun LazyScrollable() { fun LazyScrollable() {
Box( Box(
@ -160,7 +154,7 @@ fun TextBox(text: String = "Item") {
.fillMaxWidth() .fillMaxWidth()
.background(color = Color(0, 0, 0, 20)) .background(color = Color(0, 0, 0, 20))
.padding(start = 10.dp), .padding(start = 10.dp),
alignment = Alignment.CenterStart contentAlignment = Alignment.CenterStart
) { ) {
Text(text = text) Text(text = text)
} }
@ -184,11 +178,10 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollbarAdapter import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.ScrollableColumn import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.Text import androidx.compose.material.Text
import androidx.compose.foundation.VerticalScrollbar import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.material.MaterialTheme import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -238,7 +231,7 @@ fun TextBox(text: String = "Item") {
.fillMaxWidth() .fillMaxWidth()
.background(color = Color(0, 0, 0, 20)) .background(color = Color(0, 0, 0, 20))
.padding(start = 10.dp), .padding(start = 10.dp),
alignment = Alignment.CenterStart contentAlignment = Alignment.CenterStart
) { ) {
Text(text = text) Text(text = text)
} }

5
tutorials/Swing_Integration/README.md
Unescape View File

@ -11,8 +11,6 @@ ComposePanel lets you create a UI using Compose for Desktop in a Swing-based UI.
```kotlin ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
import androidx.compose.desktop.ComposePanel 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.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize 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.size
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.width 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.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button import androidx.compose.material.Button
import androidx.compose.material.Surface import androidx.compose.material.Surface
@ -39,7 +37,6 @@ import java.awt.event.ActionEvent
import java.awt.event.ActionListener import java.awt.event.ActionListener
import javax.swing.JFrame import javax.swing.JFrame
import javax.swing.JButton import javax.swing.JButton
import javax.swing.SwingUtilities
import javax.swing.WindowConstants import javax.swing.WindowConstants
val northClicks = mutableStateOf(0) val northClicks = mutableStateOf(0)

23
tutorials/Tray_Notifications_MenuBar/README.md
Unescape View File

@ -15,18 +15,16 @@ You can add an application icon to the system tray. You can also send notificati
```kotlin ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
import androidx.compose.desktop.Window 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.Box
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.onActive import androidx.compose.runtime.onActive
import androidx.compose.runtime.onDispose
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.window.MenuItem import androidx.compose.ui.window.MenuItem
import androidx.compose.ui.window.Tray import androidx.compose.ui.window.Tray
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import java.awt.Color import java.awt.Color
import java.awt.Graphics2D
import java.awt.image.BufferedImage import java.awt.image.BufferedImage
fun main() { fun main() {
@ -66,7 +64,7 @@ fun main() {
// content // content
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Text(text = "Value: ${count.value}") Text(text = "Value: ${count.value}")
} }
@ -111,11 +109,10 @@ Notifier also has 3 types of notification:
```kotlin ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.Text import androidx.compose.material.Text
import androidx.compose.material.Button import androidx.compose.material.Button
import androidx.compose.ui.window.Notifier import androidx.compose.ui.window.Notifier
import java.awt.Color import java.awt.Color
import java.awt.Graphics2D
import java.awt.image.BufferedImage import java.awt.image.BufferedImage
fun main() { fun main() {
@ -163,7 +160,7 @@ To create a common context menu for all the application windows, you need to con
```kotlin ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
import androidx.compose.desktop.Window 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.Box
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
@ -176,6 +173,9 @@ import androidx.compose.ui.window.Menu
import androidx.compose.ui.window.MenuBar import androidx.compose.ui.window.MenuBar
fun main() { fun main() {
// To use Apple global menu.
System.setProperty("apple.laf.useScreenMenuBar", "true")
val action = mutableStateOf("Last action: None") val action = mutableStateOf("Last action: None")
AppManager.setMenu( AppManager.setMenu(
@ -213,7 +213,7 @@ fun main() {
// content // content
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Text(text = action.value) 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 ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
import androidx.compose.desktop.Window 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.Box
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button import androidx.compose.material.Button
@ -244,6 +244,9 @@ import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntSize import androidx.compose.ui.unit.IntSize
fun main() { fun main() {
// To use Apple global menu.
System.setProperty("apple.laf.useScreenMenuBar", "true")
val action = mutableStateOf("Last action: None") val action = mutableStateOf("Last action: None")
Window( Window(
@ -293,7 +296,7 @@ fun main() {
} }
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Text(text = action.value) Text(text = action.value)
} }

33
tutorials/Window_API/README.md
Unescape View File

@ -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 ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
@ -55,7 +55,7 @@ fun main() {
if (dialogState.value) { if (dialogState.value) {
Dialog( Dialog(
onDismissEvent = { dialogState.value = false } onDismissRequest = { dialogState.value = false }
) { ) {
// dialog's content // 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.AppManager
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.desktop.WindowEvents 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.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize 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.Menu
import androidx.compose.ui.window.MenuBar import androidx.compose.ui.window.MenuBar
import java.awt.Color import java.awt.Color
import java.awt.Graphics2D
import java.awt.image.BufferedImage import java.awt.image.BufferedImage
fun main() { fun main() {
@ -140,7 +139,7 @@ fun main() {
// content // content
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Column { Column {
Text(text = "Location: ${windowPos.value} Value: ${count.value}") Text(text = "Location: ${windowPos.value} Value: ${count.value}")
@ -160,7 +159,7 @@ fun getMyAppIcon() : BufferedImage {
val size = 256 val size = 256
val image = BufferedImage(size, size, BufferedImage.TYPE_INT_ARGB) val image = BufferedImage(size, size, BufferedImage.TYPE_INT_ARGB)
val graphics = image.createGraphics() val graphics = image.createGraphics()
graphics.setColor(Color.orange) graphics.color = Color.orange
graphics.fillOval(0, 0, size, size) graphics.fillOval(0, 0, size, size)
graphics.dispose() graphics.dispose()
return image return image
@ -231,7 +230,7 @@ fun main() {
```kotlin ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
import androidx.compose.desktop.Window 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.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@ -248,7 +247,7 @@ fun main() {
// content // content
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Column { Column {
Text(text = "Location: ${windowPos.value}") Text(text = "Location: ${windowPos.value}")
@ -281,19 +280,16 @@ Using the following methods, you can change the properties of the AppWindow:
```kotlin ```kotlin
import androidx.compose.desktop.AppWindowAmbient import androidx.compose.desktop.AppWindowAmbient
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.foundation.Text import androidx.compose.material.Text
import androidx.compose.material.Button import androidx.compose.material.Button
fun main() { fun main() {
Window { Window {
val current = AppWindowAmbient.current
// content // content
Button( Button(
onClick = { onClick = {
if (current != null) { AppWindowAmbient.current?.setWindowCentered()
current.setWindowCentered()
}
} }
) { ) {
Text(text = "Center the window") Text(text = "Center the window")
@ -322,10 +318,9 @@ Actions can be assigned to the following window events:
```kotlin ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.desktop.WindowEvents 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.Box
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
@ -347,7 +342,7 @@ fun main() {
// content // content
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Text(text = "Size: ${windowSize.value} Focused: ${focused.value}") 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 ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
import androidx.compose.desktop.Window 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.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@ -409,7 +404,7 @@ fun main() {
// content // content
Box( Box(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
alignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Column { Column {
Button( Button(
@ -424,7 +419,7 @@ fun main() {
) { ) {
Text(text = "Check display scaling factor") Text(text = "Check display scaling factor")
} }
Text(text = "Scaling factor: ${scaleFactor.value}}") Text(text = "Scaling factor: ${scaleFactor.value}")
} }
} }
} }

Write Preview
Loading…
Cancel
Save