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

proofread suggested changes

pull/24/head
David.Watson 4 years ago
parent
f440b6ddee
commit
96fc1d4b42
4 changed files with 67 additions and 67 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. 30
      tutorials/Getting_Started/main.md
  2. 12
      tutorials/Mouse_Events/main.md
  3. 12
      tutorials/Tray_Notifications_MenuBar/main.md
  4. 80
      tutorials/Window_API/main.md

30
tutorials/Getting_Started/main.md
Unescape View File

@ -2,32 +2,32 @@
## What is covered ## What is covered
In this tutorial we will see how to create simple desktop UI application In this tutorial we will create a simple desktop UI application
using Compose UI framework. using the Compose UI framework.
## Prerequisites ## Prerequisites
Compose for Desktop can produce applications for macOS, Linux and Windows platforms, 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 * 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 ## Creating a new project
*TBD: new project wizard* *TBD: new project wizard*
Recommended way of building Compose for Desktop projects is using Gradle. The recommended way of building Compose for Desktop projects is by using Gradle.
JetBrains provides a convenient way of building Compose for Desktop project JetBrains provides a simple way of building Compose for Desktop projects
using special Gradle plugin. using a special Gradle plugin.
First create a new directory, named `sample`. First create a new directory, named `sample`.
```shell script ```shell script
mkdir sample mkdir sample
cd sample cd sample
``` ```
Create `settings.gradle.kts` as following: Create `settings.gradle.kts` as follows:
```kotlin ```kotlin
pluginManagement { pluginManagement {
repositories { repositories {
@ -98,16 +98,16 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(300, 300)) {
``` ```
## Running the project ## 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) ![New project](screen1.png)
After downloading Compose for Desktop dependencies from Maven repositories your new project is ready After you download the Compose for Desktop dependencies from the Maven repositories your new project is ready
to go. Open Gradle toolbar on the right, and select `sample/Tasks/applications/run`. to go. Open the Gradle toolbar on the right, and select `sample/Tasks/applications/run`.
First run may take some time, and afterwards following dialog will show up: The first run may take some time, but afterwards following dialog will be shown:
![Application running](screen2.gif) ![Application running](screen2.gif)
One could click on the button several times, and see that application can reactively You can click on the button several times and see that application reacts and
update UI from state. updates the UI.

12
tutorials/Mouse_Events/main.md
Unescape View File

@ -2,7 +2,7 @@
## What is covered ## 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. in Compose for Desktop.
## Mouse event listeners ## Mouse event listeners
@ -10,7 +10,7 @@ in Compose for Desktop.
### Click listeners ### Click listeners
Click listeners are available in both Compose on Android and Compose for Desktop, 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 ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
@ -53,10 +53,10 @@ fun main() = Window(title = "Compose for Desktop", size = IntSize(400, 400)) {
### Mouse move listeners ### Mouse move listeners
As typically mouse or other positional pointers are available on a desktop platforms only, As typically mouse and other positional pointers are only available on desktop platforms,
following code will only work with Compose for Desktop. the following code will only work with Compose for Desktop.
Let's create a text, and install pointer move filter on it, changing the background Let's create a window and install a pointer move filter on it that changes the background
color per mouse pointer position: color according to the mouse pointer position:
```kotlin ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
import androidx.compose.foundation.background import androidx.compose.foundation.background

12
tutorials/Tray_Notifications_MenuBar/main.md
Unescape View File

@ -2,11 +2,11 @@
## What is covered ## 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 ## 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 1. notify - simple notification
2. warn - warning notification 2. warn - warning notification
@ -102,7 +102,7 @@ fun getTrayIcon() : BufferedImage {
## Notifier ## Notifier
You can send system notifications with Notifier without using the system tray. 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 1. notify - simple notification
2. warn - warning notification 2. warn - warning notification
@ -157,8 +157,8 @@ fun getMyAppIcon() : BufferedImage {
## MenuBar ## MenuBar
MenuBar is used to create and customize the common context menu of the application or any particular window. 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 application windows, you need to configure the AppManager. To create a common context menu for all the application windows, you need to configure the AppManager.
```kotlin ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
@ -223,7 +223,7 @@ fun main() {
![Application MenuBar](app_menubar.gif) ![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 ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager

80
tutorials/Window_API/main.md
Unescape View File

@ -2,7 +2,7 @@
## What is covered ## 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 ## 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. 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. 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 ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
@ -54,19 +54,19 @@ fun main() {
## Window attributes ## 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 1. title – window title
2. size - initial window size 2. size – initial window size
3. location - initial window position 3. location – initial window position
4. centered - set the window to the center of the display 4. centered – set the window to the center of the display
5. icon - window icon 5. icon – window icon
6. menuBar - window context menu 6. menuBar – window context menu
7. undecorated - disable native border and title bar of the window 7. undecorated – disable native border and title bar of the window
8. events - window events 8. events – window events
9. onDismissEvent - event when removing the window content from a composition 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 ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager
@ -161,13 +161,13 @@ fun getMyAppIcon() : BufferedImage {
AppWindow parameters correspond to the following properties: AppWindow parameters correspond to the following properties:
1. title - window title 1. title – window title
2. width - window width 2. width – window width
3. height - window height 3. height – window height
4. x - position of the left top corner of the window along the X axis 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 5. y – position of the left top corner of the window along the Y axis
6. icon - window icon image 6. icon – window icon image
7. events - window events 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: 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) ![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 1. setTitle(title: String) – window title
2. setSize(width: Int, height: Int) - window size 2. setSize(width: Int, height: Int) – window size
3. setLocation(x: Int, y: Int) - window position 3. setLocation(x: Int, y: Int) – window position
4. setWindowCentered() - set the window to the center of the display 4. setWindowCentered() – set the window to the center of the display
5. setIcon(image: BufferedImage?) - window icon 5. setIcon(image: BufferedImage?) – window icon
```kotlin ```kotlin
import androidx.compose.desktop.AppWindowAmbient import androidx.compose.desktop.AppWindowAmbient
@ -294,18 +294,18 @@ fun main() {
## Window events ## 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: Actions can be assigned to the following window events:
1. onOpen - event during window opening 1. onOpen – event during window opening
2. onClose - event during window closing 2. onClose – event during window closing
3. onMinimize - event during window minimizing 3. onMinimize – event during window minimizing
4. onMaximize - event during window maximizing 4. onMaximize – event during window maximizing
5. onRestore - event during restoring window size after window minimize/maximize 5. onRestore – event during restoring window size after window minimize/maximize
6. onFocusGet - event when window gets focus 6. onFocusGet – event when window gets focus
7. onFocusLost - event when window loses focus 7. onFocusLost – event when window loses focus
8. onResize - event on window resize (argument is window size as IntSize) 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) 9. onRelocate – event of the window reposition on display (argument is window position as IntOffset)
```kotlin ```kotlin
import androidx.compose.desktop.Window import androidx.compose.desktop.Window
@ -377,7 +377,7 @@ AppManager.exit() // closes all windows
## Access to Swing components ## 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 ```kotlin
import androidx.compose.desktop.AppManager import androidx.compose.desktop.AppManager

Write Preview
Loading…
Cancel
Save