From 4f1101b5aed1a16813ed994a16034a712e3d2ea0 Mon Sep 17 00:00:00 2001 From: Igor Demin Date: Wed, 4 Aug 2021 15:02:45 +0300 Subject: [PATCH] Templates. Set fixed height (#996) --- tutorials/Getting_Started/README.md | 12 ++++++------ .../Image_And_Icons_Manipulations/README.md | 12 ++++++------ tutorials/Keyboard/README.md | 4 ++-- tutorials/Mouse_Events/README.md | 8 ++++---- .../README.md | 2 +- tutorials/Swing_Integration/README.md | 4 ++-- tutorials/Tab_Navigation/README.md | 8 ++++---- .../Tray_Notifications_MenuBar_new/README.md | 4 ++-- tutorials/Web/Getting_Started/README.md | 6 +++--- tutorials/Window_API_new/README.md | 19 +++++++++---------- 10 files changed, 39 insertions(+), 40 deletions(-) diff --git a/tutorials/Getting_Started/README.md b/tutorials/Getting_Started/README.md index 09eb779166..269b8dc242 100644 --- a/tutorials/Getting_Started/README.md +++ b/tutorials/Getting_Started/README.md @@ -24,11 +24,11 @@ capable to create a Compose application automatically. Note that JDK must be at least JDK 11, and to use the native distribution packaging JDK 15 or later must be used. -![Create new project 1](screen3.png) +Create new project 1 -![Create new project 2](screen4.png) +Create new project 2 -![Create new project 3](screen5.png) +Create new project 3 ### IDE plugin @@ -146,17 +146,17 @@ fun main() = application { Open `build.gradle.kts` as a project in IntelliJ IDEA. -![New project](screen1.png) +New project 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/compose desktop/run`. The first run may take some time, but afterwards the following dialog will be shown: -![Application running](screen2.gif) +Application running You can click on the button several times and see that the application reacts and updates the UI. Running and debugging the `main()` function using run gutter is also supported. -![Application running](screen6.png) +Application running diff --git a/tutorials/Image_And_Icons_Manipulations/README.md b/tutorials/Image_And_Icons_Manipulations/README.md index 0d57c706c0..b5b8d046a0 100755 --- a/tutorials/Image_And_Icons_Manipulations/README.md +++ b/tutorials/Image_And_Icons_Manipulations/README.md @@ -8,7 +8,7 @@ In this tutorial we will show you how to work with images using Compose for Desk Using images from application resources is very simple. Suppose we have a PNG image that is placed in the `resources` directory in our project. For this tutorial we will use the image sample: -![Sample](sample.png) +Sample ```kotlin import androidx.compose.foundation.Image @@ -28,7 +28,7 @@ fun main() = singleWindowApplication { `painterResource` supports raster (BMP, GIF, HEIF, ICO, JPEG, PNG, WBMP, WebP) and vector formats (SVG, [XML vector drawable](https://developer.android.com/guide/topics/graphics/vector-drawable-resources)). -![Resources](image_from_resources.png) +Resources ## Loading images from device storage asynchronously @@ -127,7 +127,7 @@ fun loadXmlImageVector(file: File, density: Density): ImageVector = file.inputStream().buffered().use { loadXmlImageVector(InputSource(it), density) } ``` -![Storage](image_from_resources2.png) +Storage [PNG](sample.png) @@ -198,7 +198,7 @@ private fun ImageBitmap.getBytes(): ByteArray { } ``` -![Drawing raw images](draw_image_into_canvas.png) +Drawing raw images ## Setting the application window icon @@ -226,7 +226,7 @@ fun main() = application { } ``` -![Window icon](window_icon.png) +Window icon ## Setting the application tray icon @@ -261,4 +261,4 @@ fun main() = application { } ``` -![Tray icon](tray_icon.png) \ No newline at end of file +Tray icon \ No newline at end of file diff --git a/tutorials/Keyboard/README.md b/tutorials/Keyboard/README.md index ad9a37a0e4..e22d940846 100644 --- a/tutorials/Keyboard/README.md +++ b/tutorials/Keyboard/README.md @@ -74,7 +74,7 @@ fun main() = singleWindowApplication { Note the annotation `@OptIn(ExperimentalComposeUiApi::class)`. Some keys related APIs are still an experimental feature of Compose, and later API changes are possible. So it requires the use of a special annotation to emphasize the experimental nature of the code. -![keyInputFilter](keyInputFilter.gif) +keyInputFilter ## Window-scoped events @@ -163,4 +163,4 @@ fun App() { } ``` -![window_keyboard](window_keyboard.gif) +window_keyboard diff --git a/tutorials/Mouse_Events/README.md b/tutorials/Mouse_Events/README.md index c48385d9ab..2c76118bb4 100644 --- a/tutorials/Mouse_Events/README.md +++ b/tutorials/Mouse_Events/README.md @@ -60,7 +60,7 @@ fun main() = singleWindowApplication { } ``` -![Application running](mouse_click.gif) +Application running ### Mouse move listeners @@ -100,7 +100,7 @@ fun main() = singleWindowApplication { } ``` -![Application running](mouse_move.gif) +Application running ### Mouse enter listeners @@ -152,7 +152,7 @@ fun main() = singleWindowApplication { } } ``` -![Application running](mouse_enter.gif) +Application running ### Mouse right/middle clicks and keyboard modifiers @@ -195,6 +195,6 @@ fun main() = singleWindowApplication { ) } ``` -![Application running](mouse_event.gif) +Application running If you need more information about events there is an available raw AWT mouse event object in `mouseEvent` property of `PointerEvent` \ No newline at end of file diff --git a/tutorials/Native_distributions_and_local_execution/README.md b/tutorials/Native_distributions_and_local_execution/README.md index c09febaa6a..96cf5925fe 100755 --- a/tutorials/Native_distributions_and_local_execution/README.md +++ b/tutorials/Native_distributions_and_local_execution/README.md @@ -116,7 +116,7 @@ The following formats available for the supported operating systems: By default, Apple does not allow users to execute unsigned applications downloaded from the internet. Users attempting to run such applications will be faced with an error like this: -![](attrs-error.png) + See [our tutorial](/tutorials/Signing_and_notarization_on_macOS/README.md) on how to sign and notarize your application. diff --git a/tutorials/Swing_Integration/README.md b/tutorials/Swing_Integration/README.md index 0f9acde0f0..9cf8ad61a8 100644 --- a/tutorials/Swing_Integration/README.md +++ b/tutorials/Swing_Integration/README.md @@ -126,7 +126,7 @@ fun Counter(text: String, counter: MutableState) { } ``` -![IntegrationWithSwing](screenshot.png) +IntegrationWithSwing ## Adding a Swing component to CFD composition using SwingPanel @@ -221,4 +221,4 @@ fun actionButton( } ``` -![IntegrationWithSwing](swing_panel.gif) +IntegrationWithSwing diff --git a/tutorials/Tab_Navigation/README.md b/tutorials/Tab_Navigation/README.md index 7f81f9ed92..4f72904f2b 100644 --- a/tutorials/Tab_Navigation/README.md +++ b/tutorials/Tab_Navigation/README.md @@ -53,7 +53,7 @@ fun main() = application { } ``` -![default-tab-nav](default-tab-nav.gif) +default-tab-nav To make a non-focusable component focusable, you need to apply `Modifier.focusable()` modifier to the component. @@ -171,7 +171,7 @@ fun FocusableButton( } ``` -![focusable-buttons](focusable-button.gif) +focusable-buttons ## Custom ordering To move focus in custom order we need to create a `FocusRequester` and apply the `Modifier.focusOrder` modifier to each component you want to navigate. @@ -234,7 +234,7 @@ fun main() = application { } ``` -![reverse-order](reverse-order.gif) +reverse-order ## Making component focused @@ -309,4 +309,4 @@ fun main() = application { } ``` -![reverse-order](focus-switcher.gif) \ No newline at end of file +reverse-order \ No newline at end of file diff --git a/tutorials/Tray_Notifications_MenuBar_new/README.md b/tutorials/Tray_Notifications_MenuBar_new/README.md index b6b02d6d71..6f07bd165e 100644 --- a/tutorials/Tray_Notifications_MenuBar_new/README.md +++ b/tutorials/Tray_Notifications_MenuBar_new/README.md @@ -99,7 +99,7 @@ object TrayIcon : Painter() { } ``` -![](tray.gif) +Tray ## MenuBar @@ -179,4 +179,4 @@ object TrayIcon : Painter() { } ``` -![](window_menubar.gif) + diff --git a/tutorials/Web/Getting_Started/README.md b/tutorials/Web/Getting_Started/README.md index e496d31086..9fe4d56aea 100644 --- a/tutorials/Web/Getting_Started/README.md +++ b/tutorials/Web/Getting_Started/README.md @@ -25,7 +25,7 @@ The project wizard doesn't support Compose for web projects yet, so we need to p - Tick `Kotlin DSL build script` - Tick `Kotlin/Multiplatform` -![](create-mpp.png) + #### 2. Update `settings.gradle.kts`: @@ -135,8 +135,8 @@ Use the command line to run: Or run it from the IDE: -![](run_project.png) + The browser will open `localhost:8080`: -![](run_result.png) + diff --git a/tutorials/Window_API_new/README.md b/tutorials/Window_API_new/README.md index bb1775479d..8071ee0169 100644 --- a/tutorials/Window_API_new/README.md +++ b/tutorials/Window_API_new/README.md @@ -44,7 +44,7 @@ fun main() = application { } } ``` - +Window properties You can also close/open windows using a simple `if` statement. @@ -80,7 +80,7 @@ fun main() = application { } } ``` - +Window splash If the window requires some custom logic on close (for example, to show a dialog), you can override the close action using `onCloseRequest`. @@ -120,7 +120,7 @@ fun main() = application { } } ``` - +Ask to close If you don't need to close the window and just need to hide it (for example to the tray), you can change the `windowState.isVisible` state: ```kotlin @@ -177,7 +177,7 @@ object TrayIcon : Painter() { } } ``` - +Hide instead of closing If an application has multiple windows, then it is better to put its state into a separate class and open/close window in response to `mutableStateListOf` changes (see [notepad example](https://github.com/JetBrains/compose-jb/tree/master/examples/notepad) for more complex use cases): ```kotlin @@ -246,7 +246,7 @@ private class MyWindowState( fun close() = close(this) } ``` - +Multiple windows ## Function `singleWindowApplication` @@ -298,7 +298,7 @@ fun main() = application { } } ``` - +Adaptive window size ## Changing the state (maximized, minimized, fullscreen, size, position) of the window. @@ -378,7 +378,7 @@ fun main() = application { } } ``` - +Changing the state ## Listening the state of the window Reading the state in composition is useful when you need to update UI, but there are cases when you need to react to the state changes and send a value to another non-composable level of your application (write it to the database, for example): @@ -579,7 +579,7 @@ fun main() = application { } } ``` -Note that `WindowDraggableArea` can be used only inside `singleWindowApplication`, `Window` and `Dialog`. If you need to use it in another Composable function, pass `WindowScope` as a reciever there: +Note that `WindowDraggableArea` can be used only inside `singleWindowApplication`, `Window` and `Dialog`. If you need to use it in another Composable function, pass `WindowScope` as a receiver there: ```kotlin import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box @@ -605,5 +605,4 @@ private fun WindowScope.AppWindowTitleBar() = WindowDraggableArea { Box(Modifier.fillMaxWidth().height(48.dp).background(Color.DarkGray)) } ``` - -![](draggable_area.gif) +Draggable area