Roman Sedaikin
4 years ago
2 changed files with 152 additions and 0 deletions
@ -0,0 +1,152 @@
|
||||
# Integration Compose for Desktop into Swing-based aplication |
||||
|
||||
## What is covered |
||||
|
||||
In this tutorial, we will show you how to use ComposePanel in your Swing application. |
||||
|
||||
## Using ComposePanel |
||||
|
||||
ComposePanel lets you create a UI using Compose for Desktop in a Swing-based UI. To achieve that you need to create instance of ComposePanel, add it to your Swing layout and describe composition inside `setContent`. Also you may need to crear the CFD application events via `AppManager.setEvents`. |
||||
|
||||
```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 |
||||
import androidx.compose.foundation.layout.fillMaxWidth |
||||
import androidx.compose.foundation.layout.height |
||||
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.foundation.shape.RoundedCornerShape |
||||
import androidx.compose.material.Button |
||||
import androidx.compose.material.Surface |
||||
import androidx.compose.runtime.Composable |
||||
import androidx.compose.runtime.MutableState |
||||
import androidx.compose.runtime.mutableStateOf |
||||
import androidx.compose.ui.Alignment |
||||
import androidx.compose.ui.graphics.Color |
||||
import androidx.compose.ui.Modifier |
||||
import androidx.compose.ui.unit.dp |
||||
import java.awt.BorderLayout |
||||
import java.awt.Dimension |
||||
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) |
||||
val westClicks = mutableStateOf(0) |
||||
val eastClicks = mutableStateOf(0) |
||||
|
||||
fun main() { |
||||
// explicitly clear the application events |
||||
AppManager.setEvents( |
||||
onAppStart = null, |
||||
onAppExit = null, |
||||
onWindowsEmpty = null |
||||
) |
||||
SwingComposeWindow() |
||||
} |
||||
|
||||
fun SwingComposeWindow() { |
||||
val window = JFrame() |
||||
|
||||
// creating ComposePanel |
||||
val composePanel = ComposePanel() |
||||
window.defaultCloseOperation = WindowConstants.EXIT_ON_CLOSE |
||||
window.title = "SwingComposeWindow" |
||||
|
||||
|
||||
window.contentPane.add(actionButton("NORTH", { northClicks.value++ }), BorderLayout.NORTH) |
||||
window.contentPane.add(actionButton("WEST", { westClicks.value++ }), BorderLayout.WEST) |
||||
window.contentPane.add(actionButton("EAST", { eastClicks.value++ }), BorderLayout.EAST) |
||||
window.contentPane.add( |
||||
actionButton( |
||||
text = "SOUTH/REMOVE COMPOSE", |
||||
action = { |
||||
window.contentPane.remove(composePanel) |
||||
} |
||||
), |
||||
BorderLayout.SOUTH |
||||
) |
||||
|
||||
// addind ComposePanel on JFrame |
||||
window.contentPane.add(composePanel, BorderLayout.CENTER) |
||||
|
||||
// setting the content |
||||
composePanel.setContent { |
||||
ComposeContent() |
||||
} |
||||
|
||||
window.setSize(800, 600) |
||||
window.setVisible(true) |
||||
} |
||||
|
||||
fun actionButton(text: String, action: (() -> Unit)? = null): JButton { |
||||
val button = JButton(text) |
||||
button.setToolTipText("Tooltip for $text button.") |
||||
button.setPreferredSize(Dimension(100, 100)) |
||||
button.addActionListener(object : ActionListener { |
||||
public override fun actionPerformed(e: ActionEvent) { |
||||
action?.invoke() |
||||
} |
||||
}) |
||||
|
||||
return button |
||||
} |
||||
|
||||
@Composable |
||||
fun ComposeContent() { |
||||
Box( |
||||
modifier = Modifier.fillMaxSize(), |
||||
alignment = Alignment.Center |
||||
) { |
||||
Row { |
||||
Counter("West", westClicks) |
||||
Spacer(modifier = Modifier.width(25.dp)) |
||||
Counter("North", northClicks) |
||||
Spacer(modifier = Modifier.width(25.dp)) |
||||
Counter("East", eastClicks) |
||||
} |
||||
} |
||||
} |
||||
|
||||
@Composable |
||||
fun Counter(text: String, counter: MutableState<Int>) { |
||||
Surface( |
||||
modifier = Modifier.size(130.dp, 130.dp), |
||||
color = Color(180, 180, 180), |
||||
shape = RoundedCornerShape(4.dp) |
||||
) { |
||||
Column { |
||||
Box( |
||||
modifier = Modifier.height(30.dp).fillMaxWidth(), |
||||
alignment = Alignment.Center |
||||
) { |
||||
Text(text = "${text}Clicks: ${counter.value}") |
||||
} |
||||
Spacer(modifier = Modifier.height(25.dp)) |
||||
Box( |
||||
modifier = Modifier.fillMaxSize(), |
||||
alignment = Alignment.Center |
||||
) { |
||||
Button(onClick = { counter.value++ }) { |
||||
Text(text = text, color = Color.White) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
``` |
||||
|
||||
![IntegrationWithSwing](screenshot.png) |
||||
|
||||
### Note. Adding a Swing component to CFD composition is not currently supported. |
After Width: | Height: | Size: 147 KiB |
Loading…
Reference in new issue