Browse Source

Add a template for building snippets from web tutorials

pull/725/head
Oleksandr Karpovich 4 years ago committed by Oleksandr Karpovich
parent
commit
e727dab151
  1. 32
      templates/web-template/build.gradle.kts
  2. 2
      templates/web-template/gradle.properties
  3. BIN
      templates/web-template/gradle/wrapper/gradle-wrapper.jar
  4. 5
      templates/web-template/gradle/wrapper/gradle-wrapper.properties
  5. 183
      templates/web-template/gradlew
  6. 100
      templates/web-template/gradlew.bat
  7. 6
      templates/web-template/settings.gradle.kts
  8. 11
      templates/web-template/src/main/kotlin/Main.kt
  9. 11
      templates/web-template/src/main/resources/index.html
  10. 107
      tutorials/Web/Building_UI/README.md
  11. 49
      tutorials/Web/Events_Handling/README.md
  12. 21
      tutorials/Web/Getting_Started/README.md
  13. 61
      tutorials/Web/Style_Dsl/README.md

32
templates/web-template/build.gradle.kts

@ -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

@ -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

Binary file not shown.

5
templates/web-template/gradle/wrapper/gradle-wrapper.properties vendored

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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")
}
}
}
```
Loading…
Cancel
Save