jlengrand/compose-multiplatform
1
0
Fork 0
mirror of https://github.com/jlengrand/compose-multiplatform.git synced 2026-03-10 08:11:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a template for building snippets from web tutorials

Browse Source
This commit is contained in:
Oleksandr Karpovich
2021-05-31 19:38:19 +02:00
committed by Oleksandr Karpovich
parent e6ed151d7a
commit e727dab151
13 changed files with 558 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
templates/web-template/build.gradle.kts Normal file
View File

@@ -0,0 +1,32 @@
import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins {
// __KOTLIN_COMPOSE_VERSION__
kotlin("multiplatform") version "1.5.0"
// __LATEST_COMPOSE_RELEASE_VERSION__
id("org.jetbrains.compose") version ("0.0.0-web-dev-13")
}
repositories {
mavenCentral()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
kotlin {
js(IR) {
browser()
binaries.executable()
}
sourceSets {
val jsMain by getting {
kotlin.srcDir("src/main/kotlin")
resources.srcDir("src/main/resources")
dependencies {
implementation(compose.web.core)
implementation(compose.runtime)
}
}
}
}

2
templates/web-template/gradle.properties Normal file
View File

@@ -0,0 +1,2 @@
org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
kotlin.code.style=official

BIN
templates/web-template/gradle/wrapper/gradle-wrapper.jar vendored Normal file
View File

Binary file not shown.

5
templates/web-template/gradle/wrapper/gradle-wrapper.properties vendored Normal file
View File

@@ -0,0 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

183
templates/web-template/gradlew vendored Executable file
View File

@@ -0,0 +1,183 @@
#!/usr/bin/env sh
#
# Copyright 2015 the original author or authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
##############################################################################
##
## Gradle start up script for UN*X
##
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
PRG="$0"
# Need this for relative symlinks.
while [ -h "$PRG" ] ; do
ls=`ls -ld "$PRG"`
link=`expr "$ls" : '.*-> \(.*\)$'`
if expr "$link" : '/.*' > /dev/null; then
PRG="$link"
else
PRG=`dirname "$PRG"`"/$link"
fi
done
SAVED="`pwd`"
cd "`dirname \"$PRG\"`/" >/dev/null
APP_HOME="`pwd -P`"
cd "$SAVED" >/dev/null
APP_NAME="Gradle"
APP_BASE_NAME=`basename "$0"`
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD="maximum"
warn () {
echo "$*"
}
die () {
echo
echo "$*"
echo
exit 1
}
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "`uname`" in
CYGWIN* )
cygwin=true
;;
Darwin* )
darwin=true
;;
MINGW* )
msys=true
;;
NONSTOP* )
nonstop=true
;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD="$JAVA_HOME/jre/sh/java"
else
JAVACMD="$JAVA_HOME/bin/java"
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD="java"
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
# Increase the maximum file descriptors if we can.
if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
MAX_FD_LIMIT=`ulimit -H -n`
if [ $? -eq 0 ] ; then
if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
MAX_FD="$MAX_FD_LIMIT"
fi
ulimit -n $MAX_FD
if [ $? -ne 0 ] ; then
warn "Could not set maximum file descriptor limit: $MAX_FD"
fi
else
warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
fi
fi
# For Darwin, add options to specify how the application appears in the dock
if $darwin; then
GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
fi
# For Cygwin or MSYS, switch paths to Windows format before running java
if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
# We build the pattern for arguments to be converted via cygpath
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
SEP=""
for dir in $ROOTDIRSRAW ; do
ROOTDIRS="$ROOTDIRS$SEP$dir"
SEP="|"
done
OURCYGPATTERN="(^($ROOTDIRS))"
# Add a user-defined pattern to the cygpath arguments
if [ "$GRADLE_CYGPATTERN" != "" ] ; then
OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
fi
# Now convert the arguments - kludge to limit ourselves to /bin/sh
i=0
for arg in "$@" ; do
CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
else
eval `echo args$i`="\"$arg\""
fi
i=`expr $i + 1`
done
case $i in
0) set -- ;;
1) set -- "$args0" ;;
2) set -- "$args0" "$args1" ;;
3) set -- "$args0" "$args1" "$args2" ;;
4) set -- "$args0" "$args1" "$args2" "$args3" ;;
5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
esac
fi
# Escape application args
save () {
for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
echo " "
}
APP_ARGS=`save "$@"`
# Collect all arguments for the java command, following the shell quoting and substitution rules
eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
exec "$JAVACMD" "$@"

100
templates/web-template/gradlew.bat vendored Normal file
View File

@@ -0,0 +1,100 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto init
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto init
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:init
@rem Get command-line arguments, handling Windows variants
if not "%OS%" == "Windows_NT" goto win9xME_args
:win9xME_args
@rem Slurp the command line arguments.
set CMD_LINE_ARGS=
set _SKIP=2
:win9xME_args_slurp
if "x%~1" == "x" goto execute
set CMD_LINE_ARGS=%*
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega

6
templates/web-template/settings.gradle.kts Normal file
View File

@@ -0,0 +1,6 @@
pluginManagement {
repositories {
gradlePluginPortal()
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}
}

11
templates/web-template/src/main/kotlin/Main.kt Normal file
View File

@@ -0,0 +1,11 @@
import androidx.compose.web.elements.Div
import androidx.compose.web.elements.Text
import androidx.compose.web.renderComposable
fun main() {
renderComposable(rootElementId = "root") {
Div {
Text("This is a template!")
}
}
}

11
templates/web-template/src/main/resources/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template</title>
</head>
<body>
<div id="root"></div>
<script src="web-template.js"></script>
</body>
</html>

107
tutorials/Web/Building_UI/README.md
View File

@@ -10,7 +10,7 @@ In this tutorial we will look at several examples that use the Composable DOM DS
Compose for Web needs an HTML node that will be a root of its composition. Inside this root node, Compose then manages its own DOM tree.
```kotlin
``` kotlin
renderComposable(rootElementId = "root") {
// content goes here
}
@@ -22,7 +22,7 @@ While the DOM DSL for Compose for Web doesn't provide a Composable for every HTM
Let's have a look at the Composable for a `Div` tag (most other tags have the same signature):
```kotlin
``` kotlin
Div(
attrs = {
// specify attributes here
@@ -37,7 +37,7 @@ Div(
For convenience, some tags like `Input`, `A`, `Form`, or `Img` allow you to specify some extra parameters in the signature that are specific to the respective HTML tag. For example, let’s look at the `Input` tag:
```kotlin
``` kotlin
Input(
type = InputType.Text, // All InputTypes supported
value = "", // sets the input value
@@ -48,7 +48,7 @@ Input(
We can use the `type` parameter which is provided for our convenience, or can use the `attrs` block to specify the input type:
```kotlin
``` kotlin
Input(attrs = { type(InputType.Text) })
```
@@ -56,13 +56,13 @@ Input(attrs = { type(InputType.Text) })
The `Text` allows you to add text content to an HTML tag. Besides, the text content it represents, it does not have any parameters:
```kotlin
``` kotlin
Text("Arbitrary text")
```
If you want to apply styles to text, it needs to be wrapped in a container with a style applied, like a `Span` or `P`:
```kotlin
``` kotlin
Span(
style = { color("red") } // inline style
) {
@@ -81,7 +81,7 @@ The `attrs` parameter (which we’ve already seen in some of the previous exampl
The most flexible way to define attributes is by using the `attr` function, which allows you to specify the attribute name and its value.
```kotlin
``` kotlin
Div(
attrs = {
attr(attr = "custom_attr", value = "its_value")
@@ -95,7 +95,7 @@ However, with this approach, Compose for Web is not able to validate that the at
Here are some examples of common attributes that are available for most Composables representing HTML tags:
```kotlin
``` kotlin
attrs = {
id("elementId")
classes("cl1", "cl2")
@@ -112,7 +112,7 @@ attrs = {
Depending on the element you are working with, you may also have access to some specific attributes – attributes that are only meaningful for this particular tag. For example, the `A` tag provides some specific attributes, that are specific to hyperlinks:
```kotlin
``` kotlin
A(
attrs = {
href("https://localhost:8080/page2")
@@ -140,7 +140,7 @@ To discover all attributes that are available in your current scope, you can use
You can declare event listeners in the `attrs` block:
```kotlin
``` kotlin
Button(
attrs = {
onClick { println("Button clicked") }
@@ -158,8 +158,7 @@ There are ways to set the style for a component:
You can declare inline styles via the `style` block of a component:
```kotlin
``` kotlin
Div(
style = {
display(DisplayStyle.Flex)
@@ -171,4 +170,86 @@ Div(
) { /* content goes here */ }
```
You can find a more detailed overview of the style DSL, as well as additional examples here - [Style DSL](../Style_Dsl/README.md)
You can find a more detailed overview of the style DSL, as well as additional examples here - [Style DSL](../Style_Dsl/README.md)
### Runnable example
```kotlin
import androidx.compose.web.elements.*
import androidx.compose.web.attributes.*
import androidx.compose.web.css.*
import androidx.compose.web.renderComposable
fun main() {
renderComposable(rootElementId = "root") {
Div(
attrs = {
// specify attributes here
},
style = {
// specify inline style here
}
) {
Text("A text in <div>")
}
Input(
type = InputType.Text, // All InputTypes supported
value = "", // sets the input value
attrs = {},
style = {}
)
Input(attrs = { type(InputType.Text) })
Text("Arbitrary text")
Span(
style = { color("red") } // inline style
) {
Text("Red text")
}
Div(
attrs = {
id("elementId")
classes("cl1", "cl2")
hidden(false)
title("title")
draggable(Draggable.Auto)
dir(DirType.Auto)
lang("en")
contentEditable(true)
// custom attr
attr(attr = "custom_attr", value = "its_value")
}
) { /* content */ }
A(
attrs = {
href("https://localhost:8080/page2")
target(ATarget.Blank)
hreflang("en")
download("https://...")
}
) { Text("Link") }
Button(
attrs = {
onClick { println("Button clicked") }
}
) { Text("Button") }
Div(
style = {
display(DisplayStyle.Flex)
padding(20.px)
// custom property
property("font-family", value("Arial, Helvetica, sans-serif"))
}
) { Text("Text in Div with inline style") }
}
}
```

49
tutorials/Web/Events_Handling/README.md
View File

@@ -5,7 +5,7 @@
You can add event listeners in the `attrs` block:
#### onClick
```kotlin
``` kotlin
Button(
attrs = {
onClick { wrappedMouseEvent ->
@@ -21,7 +21,7 @@ Button(
```
#### onInput
```kotlin
``` kotlin
val text = remember { mutableStateOf("") }
TextArea(
@@ -40,7 +40,7 @@ TextArea(
For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `WrappedEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event:
```
``` kotlin
Form(attrs = {
this.addEventListener("submit") {
console.log("Hello, Submit!")
@@ -54,3 +54,46 @@ https://developer.mozilla.org/en-US/docs/Web/API/Event
There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/androidx/blob/compose-web-main/compose/web/src/jsMain/kotlin/androidx/compose/web/attributes/EventsListenerBuilder.kt).
### Runnable example
```kotlin
import androidx.compose.runtime.*
import androidx.compose.web.elements.*
import androidx.compose.web.attributes.*
import androidx.compose.web.renderComposable
fun main() {
renderComposable(rootElementId = "root") {
Button(
attrs = {
onClick { wrappedMouseEvent ->
// wrappedMouseEvent is of `WrappedMouseEvent` type
println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
val nativeEvent = wrappedMouseEvent.nativeEvent
}
}
) {
Text("Button")
}
val text = remember { mutableStateOf("") }
TextArea(
value = text.value,
attrs = {
onTextInput { wrappedTextInputEvent ->
// wrappedTextInputEvent is of `WrappedTextInputEvent` type
text.value = wrappedTextInputEvent.inputValue
}
}
)
Span {
Text("Typed text = ${text.value}")
}
}
}
```

21
tutorials/Web/Getting_Started/README.md
View File

@@ -39,7 +39,7 @@ pluginManagement {
```
#### 3. Update `build.gradle.kts`:
```kotlin
``` kotlin
// Add compose gradle plugin
plugins {
kotlin("multiplatform") version "1.5.0"
@@ -90,6 +90,17 @@ kotlin {
#### 7. Add the `Main.kt` file:
```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.web.css.padding
import androidx.compose.web.css.px
import androidx.compose.web.elements.Button
import androidx.compose.web.elements.Div
import androidx.compose.web.elements.Span
import androidx.compose.web.elements.Text
import androidx.compose.web.renderComposable
fun main() {
var count: Int by mutableStateOf(0)
@@ -105,7 +116,6 @@ fun main() {
Text("$count")
}
Button(attrs = {
onClick { count += 1 }
}) {
@@ -115,13 +125,6 @@ fun main() {
}
}
```
In case you see an error:
`Type 'MutableState<TypeVariable(T)>' has no method 'getValue(Nothing?, KProperty<*>)'...` or
`Type 'MutableState<TypeVariable(T)>' has no method 'setValue(Nothing?, KProperty<*>, Int)'...`, please add the imports:
```kotlin
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
```
## Running the project

61
tutorials/Web/Style_Dsl/README.md
View File

@@ -9,7 +9,7 @@ In this tutorial we have a look at how to style the components using the Style D
You can declare inline styles via the `style` block of a component
```kotlin
``` kotlin
Div(
style = {
display(DisplayStyle.Flex)
@@ -31,7 +31,7 @@ In HTML, it will look like this:
### Stylesheet
An alternative way is to define a Stylesheet that contains rules:
```kotlin
``` kotlin
object AppStylesheet : StyleSheet() {
val container by style { // container is a class
display(DisplayStyle.Flex)
@@ -72,7 +72,7 @@ In HTML, it will look like this:
The Style DSL also provides a way to combine and unify selectors:
```kotlin
``` kotlin
object AppStylesheet : StyleSheet() {
init {
@@ -116,7 +116,7 @@ object AppStylesheet : StyleSheet() {
To specify media queries, you can use the `media` function, which takes the related query, and a block of styles:
```kotlin
``` kotlin
object AppStylesheet : StyleSheet() {
val container by style {
padding(48.px)
@@ -134,7 +134,7 @@ object AppStylesheet : StyleSheet() {
The style DSL also provides support for CSS variables.
```kotlin
``` kotlin
object MyVariables : CSSVariables {
// declare a variable
val contentBackgroundColor by variable<Color>()
@@ -159,3 +159,54 @@ object MyStyleSheet: StyleSheet() {
}
}
```
### Runnable example
```kotlin
import androidx.compose.runtime.*
import androidx.compose.web.elements.*
import androidx.compose.web.attributes.*
import androidx.compose.web.css.*
import androidx.compose.web.renderComposable
object AppStylesheet : StyleSheet() {
val container by style { // container is a class
display(DisplayStyle.Flex)
padding(20.px)
// custom property (or not supported out of a box)
property("font-family", value("Arial, Helvetica, sans-serif"))
}
}
@Composable
fun Container(content: @Composable () -> Unit) {
Div(
attrs = { classes(AppStylesheet.container) }
) {
content()
}
}
fun main() {
renderComposable(rootElementId = "root") {
Div(
style = {
display(DisplayStyle.Flex)
padding(20.px)
// custom property (or not supported out of a box)
property("font-family", value("Arial, Helvetica, sans-serif"))
}
) { /* content goes here */ }
Style(AppStylesheet)
Container {
Text("Content")
}
}
}
```