diff --git a/tutorials/Getting_Started/main.md b/tutorials/Getting_Started/main.md index b4766784..1cb289e5 100644 --- a/tutorials/Getting_Started/main.md +++ b/tutorials/Getting_Started/main.md @@ -2,32 +2,32 @@ ## What is covered -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. ![New project](screen1.png) -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: ![Application running](screen2.gif) -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 +updates the UI. diff --git a/tutorials/Mouse_Events/main.md b/tutorials/Mouse_Events/main.md index b113a2ad..cc31ed55 100644 --- a/tutorials/Mouse_Events/main.md +++ b/tutorials/Mouse_Events/main.md @@ -2,7 +2,7 @@ ## What is covered -In this tutorial we will see how to install mouse events listeners on components +In this tutorial we will see how to install mouse event listeners on components in Compose for Desktop. ## Mouse event listeners @@ -10,7 +10,7 @@ in Compose for Desktop. ### Click listeners Click listeners are available in both Compose on Android and Compose for Desktop, -so code like that will work on both platforms: +so code like this will work on both platforms: ```kotlin import androidx.compose.desktop.Window @@ -53,10 +53,10 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) { ### Mouse move listeners -As typically mouse or other positional pointers are available on a desktop platforms only, -following code will only work with Compose for Desktop. -Let's create a text, and install pointer move filter on it, changing the background -color per mouse pointer position: +As typically mouse and other positional pointers are only available on desktop platforms, +the following code will only work with Compose for Desktop. +Let's create a window and install a pointer move filter on it that changes the background +color according to the mouse pointer position: ```kotlin import androidx.compose.desktop.Window import androidx.compose.foundation.background diff --git a/tutorials/Tray_Notifications_MenuBar/main.md b/tutorials/Tray_Notifications_MenuBar/main.md index a98cd671..eeab73ef 100755 --- a/tutorials/Tray_Notifications_MenuBar/main.md +++ b/tutorials/Tray_Notifications_MenuBar/main.md @@ -2,11 +2,11 @@ ## What is covered -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() { ![Application MenuBar](app_menubar.gif) -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. ```kotlin import androidx.compose.desktop.AppManager diff --git a/tutorials/Window_API/main.md b/tutorials/Window_API/main.md index a6f32ce5..319b4f7e 100755 --- a/tutorials/Window_API/main.md +++ b/tutorials/Window_API/main.md @@ -2,7 +2,7 @@ ## What is covered -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() { ![Window properties](current_window.gif) -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: ```kotlin import androidx.compose.desktop.AppManager