In this tutorial we will see how to create simple desktop UI application
using Compose UI framework.
In this tutorial we will create a simple desktop UI application
using the Compose UI framework.
## Prerequisites
Compose for Desktop can produce applications for macOS, Linux and Windows platforms,
and all those three platforms could be used for running this tutorial.
and so any of these platforms can be used for this tutorial.
Following software have to be preinstalled:
The following software has to be preinstalled:
* JDK 11 or later
* IDEA Community or Ultimate 20.2 or later (other editors could be used, but we assume IDEA in this tutorial)
* IntelliJ IDEA Community Edition or Ultimate Edition 20.2 or later (other editors could be used, but we assume you are using IntelliJ IDEA in this tutorial)
## Creating a new project
*TBD: new project wizard*
Recommended way of building Compose for Desktop projects is using Gradle.
JetBrains provides a convenient way of building Compose for Desktop project
using special Gradle plugin.
The recommended way of building Compose for Desktop projects is by using Gradle.
JetBrains provides a simple way of building Compose for Desktop projects
using a special Gradle plugin.
First create a new directory, named `sample`.
```shell script
mkdir sample
cd sample
```
Create `settings.gradle.kts` as following:
Create `settings.gradle.kts` as follows:
```kotlin
pluginManagement {
repositories {
@ -98,16 +98,16 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
```
## Running the project
Open `build.gradle.kts` as a project in IDEA.
Open `build.gradle.kts` as a project in IntelliJ IDEA.
After downloading Compose for Desktop dependencies from Maven repositories your new project is ready
to go. Open Gradle toolbar on the right, and select `sample/Tasks/applications/run`.
First run may take some time, and afterwards following dialog will show up:
After you download the Compose for Desktop dependencies from the Maven repositories your new project is ready
to go. Open the Gradle toolbar on the right, and select `sample/Tasks/applications/run`.
The first run may take some time, but afterwards following dialog will be shown:
One could click on the button several times, and see that application can reactively
update UI from state.
You can click on the button several times and see that application reacts and
In this guide, we'll show you how to work with system tray, create application menu bar and create window specific menu bar, and send system notifications using Compose for Desktop.
In this tutorial we'll show you how to work with the system tray, create an application menu bar and a window-specific menu bar, and send system notifications using Compose for Desktop.
## Tray
You can add an application icon into the system tray. Using Tray, you can also send notifications to the user. There are 3 types of notifications:
You can add an application icon to the system tray. You can also send notifications to the user using the system tray. There are 3 types of notification:
1. notify - simple notification
2. warn - warning notification
@ -102,7 +102,7 @@ fun getTrayIcon() : BufferedImage {
## Notifier
You can send system notifications with Notifier without using the system tray.
Notifier also has 3 types of notifications:
Notifier also has 3 types of notification:
1. notify - simple notification
2. warn - warning notification
@ -157,8 +157,8 @@ fun getMyAppIcon() : BufferedImage {
## MenuBar
MenuBar is used to create and customize the common context menu of the application or any particular window.
To create a common context menu for all application windows, you need to configure the AppManager.
MenuBar is used to create and customize the common context menu of the application or a particular window.
To create a common context menu for all the application windows, you need to configure the AppManager.
```kotlin
import androidx.compose.desktop.AppManager
@ -223,7 +223,7 @@ fun main() {
You can to create a MenuBar for a specific window (while others will use the common MenuBar, if defined).
You can to create a MenuBar for a specific window, and have the other windows use the defined MenuBar.
In this guide, we'll show you how to work with windows using Compose for Desktop.
In this tutorial we will show you how to work with windows using Compose for Desktop.
## Windows creation
@ -18,12 +18,12 @@ fun main() {
}
```
There are two types of windows - modal and regular. Below are functions for creating each type of window:
There are two types of window – modal and regular. Below are the functions for creating each type of window:
1. Window - regular window type.
2. Dialog - modal window type. Such a window locks its parent window until the user completes working with it and closes the modal window.
1. Window – regular window type.
2. Dialog – modal window type. Such a window locks its parent window until the user completes working with it and closes the modal window.
You can see an example for both types of windows below.
You can see an example of both types of window below.
```kotlin
import androidx.compose.desktop.Window
@ -54,19 +54,19 @@ fun main() {
## Window attributes
Each window has 9 parameters listed below, all of them could be omitted and have default values:
Each window has 9 parameters, all of them could be omitted and have default values:
1. title - window title
2. size - initial window size
3. location - initial window position
4. centered - set the window to the center of the display
5. icon - window icon
6. menuBar - window context menu
7. undecorated - disable native border and title bar of the window
8. events - window events
9. onDismissEvent - event when removing the window content from a composition
1. title – window title
2. size – initial window size
3. location – initial window position
4. centered – set the window to the center of the display
5. icon – window icon
6. menuBar – window context menu
7. undecorated – disable native border and title bar of the window
8. events – window events
9. onDismissEvent – event when removing the window content from a composition
An example of using window parameters at the creation step:
An example of using window parameters in the creation step:
```kotlin
import androidx.compose.desktop.AppManager
@ -161,13 +161,13 @@ fun getMyAppIcon() : BufferedImage {
AppWindow parameters correspond to the following properties:
1. title - window title
2. width - window width
3. height - window height
4. x - position of the left top corner of the window along the X axis
5. y - position of the left top corner of the window along the Y axis
6. icon - window icon image
7. events - window events
1. title – window title
2. width – window width
3. height – window height
4. x – position of the left top corner of the window along the X axis
5. y – position of the left top corner of the window along the Y axis
6. icon – window icon image
7. events – window events
To get the properties of a window, it is enough to have a link to the current or specific window. There are two ways to get the current focused window:
@ -258,13 +258,13 @@ fun main() {
Using the following methods, one can change the properties of AppWindow:
Using the following methods, you can change the properties of the AppWindow:
1. setTitle(title: String) - window title
2. setSize(width: Int, height: Int) - window size
3. setLocation(x: Int, y: Int) - window position
4. setWindowCentered() - set the window to the center of the display
5. setIcon(image: BufferedImage?) - window icon
1. setTitle(title: String) – window title
2. setSize(width: Int, height: Int) – window size
3. setLocation(x: Int, y: Int) – window position
4. setWindowCentered() – set the window to the center of the display
5. setIcon(image: BufferedImage?) – window icon
```kotlin
import androidx.compose.desktop.AppWindowAmbient
@ -294,18 +294,18 @@ fun main() {
## Window events
Events could be defined using the events parameter at the window creation step or redefine using the events property at runtime.
Events can be defined using the events parameter in the window creation step or redefine using the events property at runtime.
Actions can be assigned to the following window events:
1. onOpen - event during window opening
2. onClose - event during window closing
3. onMinimize - event during window minimizing
4. onMaximize - event during window maximizing
5. onRestore - event during restoring window size after window minimize/maximize
6. onFocusGet - event when window gets focus
7. onFocusLost - event when window loses focus
8. onResize - event on window resize (argument is window size as IntSize)
9. onRelocate - event of the window reposition on display (argument is window position as IntOffset)
1. onOpen – event during window opening
2. onClose – event during window closing
3. onMinimize – event during window minimizing
4. onMaximize – event during window maximizing
5. onRestore – event during restoring window size after window minimize/maximize
6. onFocusGet – event when window gets focus
7. onFocusLost – event when window loses focus
8. onResize – event on window resize (argument is window size as IntSize)
9. onRelocate – event of the window reposition on display (argument is window position as IntOffset)
```kotlin
import androidx.compose.desktop.Window
@ -377,7 +377,7 @@ AppManager.exit() // closes all windows
## Access to Swing components
Compose for Desktop is tightly integrated with Swing on the level of top level windows. For more detailed customization, you can access the JFrame (Swing window representation):
Compose for Desktop is tightly integrated with Swing at the top-level windows layer. For more detailed customization, you can access the JFrame class:
David.Watson
4 years ago