Browse Source

Web/update tutorials and examples (#942)

* web: Update tutorials (to use 0.5.0-build270)

* web: Update examples (to use 0.5.0-build270 and kotlin 1.5.21)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
pull/952/head
Oleksandr Karpovich 3 years ago committed by GitHub
parent
commit
b41344ef41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      examples/falling_balls_with_web/build.gradle.kts
  2. 4
      examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt
  3. 4
      examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt
  4. 2
      examples/web-compose-bird/build.gradle.kts
  5. 4
      examples/web-getting-started/build.gradle.kts
  6. 4
      examples/web-with-react/build.gradle.kts
  7. 4
      examples/web_landing/build.gradle.kts
  8. 4
      examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
  9. 12
      examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
  10. 2
      examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
  11. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
  12. 14
      examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
  13. 22
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt
  14. 3
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt
  15. 8
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt
  16. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt
  17. 8
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt
  18. 4
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt
  19. 8
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt
  20. 56
      examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt
  21. 4
      templates/web-template/build.gradle.kts
  22. 6
      tutorials/Web/Building_UI/README.md
  23. 26
      tutorials/Web/Events_Handling/README.md
  24. 6
      tutorials/Web/Getting_Started/README.md
  25. 2
      tutorials/Web/README.md
  26. 34
      tutorials/Web/Style_Dsl/README.md
  27. 4
      web/gradle.properties

4
examples/falling_balls_with_web/build.gradle.kts

@ -2,8 +2,8 @@ import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins {
kotlin("multiplatform") version "1.5.10"
id("org.jetbrains.compose") version "0.5.0-build235"
kotlin("multiplatform") version "1.5.21"
id("org.jetbrains.compose") version "0.5.0-build270"
}
version = "1.0-SNAPSHOT"

4
examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt

@ -3,7 +3,7 @@ object Deps {
object JetBrains {
object Kotlin {
// __KOTLIN_COMPOSE_VERSION__
private const val VERSION = "1.5.10"
private const val VERSION = "1.5.21"
const val gradlePlugin = "org.jetbrains.kotlin:kotlin-gradle-plugin:$VERSION"
const val testCommon = "org.jetbrains.kotlin:kotlin-test-common:$VERSION"
const val testJunit = "org.jetbrains.kotlin:kotlin-test-junit:$VERSION"
@ -13,7 +13,7 @@ object Deps {
object Compose {
// __LATEST_COMPOSE_RELEASE_VERSION__
private const val VERSION = "0.5.0-build235"
private const val VERSION = "0.5.0-build270"
const val gradlePlugin = "org.jetbrains.compose:compose-gradle-plugin:$VERSION"
}
}

4
examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt

@ -43,7 +43,7 @@ fun MaterialCheckbox(
attrs = {
classes("filled-in")
if (checked) checked()
onCheckboxInput { onCheckedChange(it.checked) }
onChange { onCheckedChange(it.value) }
}
)
@ -85,7 +85,7 @@ fun MaterialTextArea(
attrs = {
id("text_area_add_todo")
classes("materialize-textarea")
onTextInput { onTextChanged(it.inputValue) }
onInput { onTextChanged(it.value) }
style {
width(100.percent)
height(100.percent)

2
examples/web-compose-bird/build.gradle.kts

@ -1,7 +1,7 @@
// Add compose gradle plugin
plugins {
kotlin("multiplatform") version "1.5.21"
id("org.jetbrains.compose") version "0.5.0-build262"
id("org.jetbrains.compose") version "0.5.0-build270"
}
group = "com.theapache64.composebird"
version = "1.0.0-alpha01"

4
examples/web-getting-started/build.gradle.kts

@ -1,6 +1,6 @@
plugins {
kotlin("multiplatform") version "1.5.10"
id("org.jetbrains.compose") version "0.5.0-build235"
kotlin("multiplatform") version "1.5.21"
id("org.jetbrains.compose") version "0.5.0-build270"
}
repositories {

4
examples/web-with-react/build.gradle.kts

@ -1,6 +1,6 @@
plugins {
kotlin("multiplatform") version "1.5.10"
id("org.jetbrains.compose") version "0.5.0-build235"
kotlin("multiplatform") version "1.5.21"
id("org.jetbrains.compose") version "0.5.0-build270"
}
repositories {

4
examples/web_landing/build.gradle.kts

@ -1,6 +1,6 @@
plugins {
kotlin("multiplatform") version "1.5.10"
id("org.jetbrains.compose") version "0.5.0-build235"
kotlin("multiplatform") version "1.5.21"
id("org.jetbrains.compose") version "0.5.0-build270"
}
repositories {

4
examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt

@ -84,7 +84,7 @@ private fun CardWithList(card: CardWithListPresentation) {
Ul(attrs = {
classes(WtTexts.wtText2)
}) {
card.list.forEachIndexed { ix, it ->
card.list.forEachIndexed { _, it ->
Li({
style {
property("padding-top", 24.px)
@ -93,4 +93,4 @@ private fun CardWithList(card: CardWithListPresentation) {
}
}
}
}
}

12
examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

@ -15,7 +15,7 @@ import org.jetbrains.compose.web.dom.Text
import com.sample.style.AppStylesheet
import org.jetbrains.compose.web.attributes.value
private object SwitcherVariables : CSSVariables {
private object SwitcherVariables {
val labelWidth by variable<CSSpxValue>()
val labelPadding by variable<CSSpxValue>()
}
@ -23,7 +23,7 @@ private object SwitcherVariables : CSSVariables {
object SwitcherStylesheet : StyleSheet(AppStylesheet) {
val boxed by style {
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
SwitcherVariables.labelWidth(48.px)
SwitcherVariables.labelPadding(5.px)
@ -44,7 +44,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
color(Color("transparent"))
borderRadius(20.px, 20.px, 20.px)
}
color("#aaa")
color(Color("#aaa"))
}
border {
@ -66,7 +66,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
color(Color("#167dff"))
borderRadius(20.px, 20.px, 20.px)
}
color("#000")
color(Color("#000"))
}
}
}
@ -82,9 +82,9 @@ fun CodeSampleSwitcher(count: Int, current: Int, onSelect: (Int) -> Unit) {
value("snippet$ix")
id("snippet$ix")
if (current == ix) checked()
onRadioInput { onSelect(ix) }
onChange { onSelect(ix) }
})
Label(forId = "snippet$ix") { Text("${ix + 1}") }
}
}
}
}

2
examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt

@ -236,7 +236,7 @@ private fun TitledCodeSample(title: String, code: String) {
Div({
classes(WtOffsets.wtTopOffset24)
style {
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
backgroundColor(rgba(39, 40, 44, 0.05))
borderRadius(8.px, 8.px, 8.px)
property("padding", "12px 16px")
}

6
examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt

@ -121,7 +121,7 @@ private fun IntroCodeSample() {
Div({
style {
marginTop(24.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
backgroundColor(rgba(39, 40, 44, 0.05))
borderRadius(8.px)
property("font-family", "'JetBrains Mono', monospace")
}
@ -149,7 +149,7 @@ private fun IntroCodeSample() {
style {
height(1.px)
border(width = 0.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.15))
backgroundColor(rgba(39, 40, 44, 0.15))
}
})
@ -220,4 +220,4 @@ private fun ComposeWebStatusMessage() {
}
}
}
}
}

14
examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt

@ -3,9 +3,9 @@ package com.sample.style
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.CSSSelector
object AppCSSVariables : CSSVariables {
val wtColorGreyLight by variable<Color>()
val wtColorGreyDark by variable<Color>()
object AppCSSVariables {
val wtColorGreyLight by variable<CSSColorValue>()
val wtColorGreyDark by variable<CSSColorValue>()
val wtOffsetTopUnit by variable<CSSUnitValue>()
val wtHorizontalLayoutGutter by variable<CSSUnitValue>()
@ -39,11 +39,11 @@ object AppStylesheet : StyleSheet() {
top((-32).px)
marginLeft(8.px)
fontSize(15.px)
backgroundColor(Color.RGBA(39, 40, 44, .05))
color(Color.RGBA(39,40,44,.7))
backgroundColor(rgba(39, 40, 44, .05))
color(rgba(39,40,44,.7))
borderRadius(4.px, 4.px, 4.px)
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
top((-16).px)
}
@ -66,7 +66,7 @@ object AppStylesheet : StyleSheet() {
margin(0.px)
}
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
CSSSelector.Universal style {
AppCSSVariables.wtOffsetTopUnit(16.px)
AppCSSVariables.wtFlowUnit(16.px)

22
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt

@ -10,19 +10,19 @@ object WtCards : StyleSheet(AppStylesheet) {
property("min-height", 0)
property("box-sizing", "border-box")
}
val wtCardThemeLight by style {
border(color = Color.RGBA(39,40,44,.2))
color("#27282c")
backgroundColor("white")
border(color = rgba(39,40,44,.2))
color(Color("#27282c"))
backgroundColor(Color("white"))
}
val wtCardThemeDark by style {
backgroundColor(Color.RGBA(255, 255, 255, 0.05))
color(Color.RGBA(255, 255, 255, 0.6))
backgroundColor(rgba(255, 255, 255, 0.05))
color(rgba(255, 255, 255, 0.6))
border(0.px)
}
val wtCardSection by style {
position(Position.Relative)
property("overflow", "auto")
@ -31,19 +31,19 @@ object WtCards : StyleSheet(AppStylesheet) {
property("box-sizing", "border-box")
property("padding", "24px 32px")
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style { padding(16.px) }
}
}
val wtVerticalFlex by style {
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Column)
alignItems(AlignItems.FlexStart)
}
val wtVerticalFlexGrow by style {
flexGrow(1)
property("max-width", 100.percent)
}
}
}

3
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt

@ -9,6 +9,7 @@ import org.jetbrains.compose.web.css.maxWidth
import org.jetbrains.compose.web.css.media
import org.jetbrains.compose.web.css.percent
import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.mediaMaxWidth
import org.jetbrains.compose.web.css.selectors.CSSSelector
fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
@ -16,7 +17,7 @@ fun <TBuilder> GenericStyleSheetBuilder<TBuilder>.mediaMaxWidth(
cssSelector: CSSSelector,
rulesBuild: TBuilder.() -> Unit
) {
media(maxWidth(value)) {
media(mediaMaxWidth(value)) {
cssSelector style rulesBuild
}
}

8
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt

@ -11,7 +11,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
property("padding-right", 22.px)
property("max-width", 1276.px)
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
property("max-width", 100.percent)
property("padding-left", 16.px)
@ -19,7 +19,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
}
}
media(maxWidth(1276.px)) {
media(mediaMaxWidth(1276.px)) {
self style {
property("max-width", 996.px)
property("padding-left", 22.px)
@ -27,7 +27,7 @@ object WtContainer : StyleSheet(AppStylesheet) {
}
}
media(maxWidth(1000.px)) {
media(mediaMaxWidth(1000.px)) {
self style {
property("max-width", 100.percent)
property("padding-left", 22.px)
@ -35,4 +35,4 @@ object WtContainer : StyleSheet(AppStylesheet) {
}
}
}
}
}

6
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt

@ -8,7 +8,7 @@ object WtDisplay : StyleSheet(AppStylesheet) {
}
val wtDisplayMdBlock by style {
media(maxWidth(1000.px)) {
media(mediaMaxWidth(1000.px)) {
self style {
display(DisplayStyle.Block)
}
@ -16,10 +16,10 @@ object WtDisplay : StyleSheet(AppStylesheet) {
}
val wtDisplayMdNone by style {
media(maxWidth(1000.px)) {
media(mediaMaxWidth(1000.px)) {
self style {
display(DisplayStyle.None)
}
}
}
}
}

8
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt

@ -22,9 +22,9 @@ object WtOffsets : StyleSheet(AppStylesheet) {
val wtTopOffset48 by style {
marginTop(48.px)
}
val wtTopOffsetSm12 by style {
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
marginTop(12.px)
}
@ -32,10 +32,10 @@ object WtOffsets : StyleSheet(AppStylesheet) {
}
val wtTopOffsetSm24 by style {
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
marginTop(24.px)
}
}
}
}
}

4
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt

@ -23,7 +23,7 @@ object WtRows : StyleSheet(AppStylesheet) {
val wtRowSizeM by style {
AppCSSVariables.wtHorizontalLayoutGutter(16.px)
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
AppCSSVariables.wtHorizontalLayoutGutter(8.px)
}
@ -39,4 +39,4 @@ object WtRows : StyleSheet(AppStylesheet) {
alignItems(AlignItems.Center)
}
}
}
}

8
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt

@ -12,16 +12,16 @@ object WtSections : StyleSheet(AppStylesheet) {
propertyName = "padding-bottom",
value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})"
)
backgroundColor("#fff")
backgroundColor(Color("#fff"))
}
val wtSectionBgGrayLight by style {
backgroundColor("#f4f4f4")
backgroundColor(Color("#f4f4f4"))
backgroundColor(AppCSSVariables.wtColorGreyLight.value())
}
val wtSectionBgGrayDark by style {
backgroundColor("#323236")
backgroundColor(Color("#323236"))
backgroundColor(AppCSSVariables.wtColorGreyDark.value())
}
}
}

56
examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt

@ -6,7 +6,7 @@ import org.jetbrains.compose.web.css.selectors.hover
object WtTexts : StyleSheet(AppStylesheet) {
val wtHero by style {
color("#27282c")
color(Color("#27282c"))
fontSize(60.px)
property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px))
property("letter-spacing", (-1.5).px)
@ -14,7 +14,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
property("line-height", 64.px)
property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px))
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
AppCSSVariables.wtHeroFontSize(42.px)
AppCSSVariables.wtHeroLineHeight(48.px)
@ -28,7 +28,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtSubtitle2 by style {
color("#27282c")
color(Color("#27282c"))
fontSize(28.px)
property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px))
property("letter-spacing", "normal")
@ -36,7 +36,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
property("line-height", 40.px)
property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px))
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
AppCSSVariables.wtSubtitle2FontSize(24.px)
AppCSSVariables.wtSubtitle2LineHeight(32.px)
@ -50,7 +50,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtText1 by style {
color(Color.RGBA(39, 40, 44, .7))
color(rgba(39, 40, 44, .7))
fontSize(18.px)
property("letter-spacing", "normal")
property("font-weight", 400)
@ -63,11 +63,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtText1ThemeDark by style {
color(Color.RGBA(255, 255, 255, 0.6))
color(rgba(255, 255, 255, 0.6))
}
val wtText2 by style {
color(Color.RGBA(39, 40, 44, .7))
color(rgba(39, 40, 44, .7))
fontSize(15.px)
property("letter-spacing", "normal")
property("font-weight", 400)
@ -80,7 +80,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtText3 by style {
color(Color.RGBA(39, 40, 44, .7))
color(rgba(39, 40, 44, .7))
fontSize(12.px)
property("letter-spacing", "normal")
property("font-weight", 400)
@ -93,21 +93,21 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtTextPale by style {
color(Color.RGBA(255, 255, 255, 0.30))
color(rgba(255, 255, 255, 0.30))
}
val wtText2ThemeDark by style {
color(Color.RGBA(255, 255, 255, 0.6))
color(rgba(255, 255, 255, 0.6))
}
val wtText3ThemeDark by style {
color(Color.RGBA(255, 255, 255, 0.6))
color(rgba(255, 255, 255, 0.6))
}
val wtLink by style {
property("border-bottom", "1px solid transparent")
property("text-decoration", "none")
color("#167dff")
color(Color("#167dff"))
hover(self) style {
property("border-bottom-color", "#167dff")
@ -115,7 +115,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtH2 by style {
color("#27282c")
color(Color("#27282c"))
fontSize(31.px)
property("font-size", AppCSSVariables.wtH2FontSize.value(31.px))
property("letter-spacing", (-.5).px)
@ -123,7 +123,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
property("line-height", 40.px)
property("line-height", 40.px)
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
AppCSSVariables.wtH2FontSize(24.px)
AppCSSVariables.wtH2LineHeight(32.px)
@ -137,11 +137,11 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtH2ThemeDark by style {
color("#fff")
color(Color("#fff"))
}
val wtH3 by style {
color("#27282c")
color(Color("#27282c"))
fontSize(21.px)
property("font-size", AppCSSVariables.wtH3FontSize.value(20.px))
property("letter-spacing", "normal")
@ -156,12 +156,12 @@ object WtTexts : StyleSheet(AppStylesheet) {
}
val wtH3ThemeDark by style {
color("#fff")
color(Color("#fff"))
}
val wtButton by style {
color("white")
backgroundColor("#167dff")
color(Color("white"))
backgroundColor(Color("#167dff"))
fontSize(15.px)
display(DisplayStyle.InlineBlock)
property("text-decoration", "none")
@ -172,7 +172,7 @@ object WtTexts : StyleSheet(AppStylesheet) {
property("width", "fit-content")
hover(self) style {
backgroundColor(Color.RGBA(22, 125, 255, .8))
backgroundColor(rgba(22, 125, 255, .8))
}
}
@ -186,16 +186,16 @@ object WtTexts : StyleSheet(AppStylesheet) {
property("outline", "none")
hover(self) style {
backgroundColor(Color.RGBA(255, 255, 255, 0.1))
backgroundColor(rgba(255, 255, 255, 0.1))
}
}
val wtButtonContrast by style {
color("white")
backgroundColor("#27282c")
color(Color("white"))
backgroundColor(Color("#27282c"))
hover(self) style {
backgroundColor(Color.RGBA(39, 40, 44, .7))
backgroundColor(rgba(39, 40, 44, .7))
}
}
@ -203,19 +203,19 @@ object WtTexts : StyleSheet(AppStylesheet) {
property("margin-right", 16.px)
marginLeft(16.px)
padding(12.px)
backgroundColor("transparent")
backgroundColor(Color("transparent"))
display(DisplayStyle.LegacyInlineFlex)
hover(self) style {
backgroundColor(Color.RGBA(255, 255, 255, 0.1))
backgroundColor(rgba(255, 255, 255, 0.1))
property("border-radius", "24px")
}
media(maxWidth(640.px)) {
media(mediaMaxWidth(640.px)) {
self style {
property("margin-right", 8.px)
property("margin-left", 8.px)
}
}
}
}
}

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

@ -3,9 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins {
// __KOTLIN_COMPOSE_VERSION__
kotlin("multiplatform") version "1.5.10"
kotlin("multiplatform") version "1.5.21"
// __LATEST_COMPOSE_RELEASE_VERSION__
id("org.jetbrains.compose") version ("0.5.0-build235")
id("org.jetbrains.compose") version ("0.5.0-build270")
}
repositories {

6
tutorials/Web/Building_UI/README.md

@ -1,6 +1,6 @@
# Building the UI with Compose Web
**The API is experimental, and breaking changes can be expected**
**The API is not finalized, and breaking changes can be expected**
## Introduction
@ -62,7 +62,7 @@ If you want to apply styles to text, it needs to be wrapped in a container with
``` kotlin
Span(
attrs = { style { color("red") } } // inline style
attrs = { style { color(Color.red) } } // inline style
) {
Text("Red text")
}
@ -202,7 +202,7 @@ fun main() {
Text("Arbitrary text")
Span({
style { color("red") } // inline style
style { color(Color.red) } // inline style
}) {
Text("Red text")
}

26
tutorials/Web/Events_Handling/README.md

@ -1,6 +1,6 @@
# Events handling in Compose Web
**The API is experimental, and breaking changes can be expected**
**The API is not finalized, and breaking changes can be expected**
You can add event listeners in the `attrs` block:
@ -8,11 +8,11 @@ You can add event listeners in the `attrs` block:
``` kotlin
Button(
attrs = {
onClick { wrappedMouseEvent ->
// wrappedMouseEvent is of `WrappedMouseEvent` type
println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
onClick { event ->
// event is of `SyntheticMouseEvent` type
println("button clicked at ${event.movementX}, ${event.movementY}")
val nativeEvent = wrappedMouseEvent.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
val nativeEvent = event.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
}
}
) {
@ -37,22 +37,19 @@ TextArea(
#### Other event handlers
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:
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 `SyntheticEvent`. 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!")
it.nativeEvent.preventDefault()
it.preventDefault()
}
})
```
Your event handlers receive wrapped events that inherit from `GenericWrappedEvent`, which also provides access to the underlying `nativeEvent` – the actual event created by JS runtime -
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).
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/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt).
### Runnable example
@ -67,11 +64,8 @@ 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
onClick { event ->
println("button clicked at ${event.movementX}, ${event.movementY}")
}
}
) {

6
tutorials/Web/Getting_Started/README.md

@ -1,6 +1,6 @@
# Getting Started With Compose for Web
**The API is experimental, and breaking changes can be expected**
**The API is not finalized, and breaking changes can be expected**
## Introduction
@ -42,8 +42,8 @@ pluginManagement {
``` kotlin
// Add compose gradle plugin
plugins {
kotlin("multiplatform") version "1.5.10"
id("org.jetbrains.compose") version "0.5.0-build228"
kotlin("multiplatform") version "1.5.21"
id("org.jetbrains.compose") version "0.5.0-build270"
}
// Add maven repositories

2
tutorials/Web/README.md

@ -1,5 +1,5 @@
# Compose for Web
**The API is experimental, and breaking changes can be expected**
**The API is not finalized, and breaking changes can be expected**
### Content:

34
tutorials/Web/Style_Dsl/README.md

@ -1,5 +1,5 @@
# Style DSL in Compose Web
**The API is experimental, and breaking changes can be expected**
**The API is not finalized, and breaking changes can be expected**
## Introduction
In this tutorial we have a look at how to style the components using the Style DSL. It’s a typesafe DSL for style sheets, which you can use to express CSS rules in your Kotlin code, and even modify styles based on the state of your Compose application.
@ -101,11 +101,11 @@ object AppStylesheet : StyleSheet() {
// A convenient way to create a class selector
// AppStylesheet.container can be used as a class in component attrs
val container by style {
color("red")
color(Color.red)
// hover selector for a class
self + hover() style { // self is a selector for `container`
color("green")
color(Color.green)
}
}
}
@ -135,9 +135,9 @@ object AppStylesheet : StyleSheet() {
The style DSL also provides support for CSS variables.
``` kotlin
object MyVariables : CSSVariables {
object MyVariables {
// declare a variable
val contentBackgroundColor by variable<Color>()
val contentBackgroundColor by variable<CSSColorValue>()
}
object MyStyleSheet: StyleSheet() {
@ -169,6 +169,30 @@ import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable
object MyVariables {
// declare a variable
val contentBackgroundColor by variable<CSSColorValue>()
}
object MyStyleSheet: StyleSheet() {
val container by style {
//set variable's value for the `container` scope
MyVariables.contentBackgroundColor(Color("blue"))
}
val content by style {
// get the value
backgroundColor(MyVariables.contentBackgroundColor.value())
}
val contentWithDefaultBgColor by style {
// default value can be provided as well
// default value is used when the value is not previously set
backgroundColor(MyVariables.contentBackgroundColor.value(Color("#333")))
}
}
object AppStylesheet : StyleSheet() {
val container by style { // container is a class
display(DisplayStyle.Flex)

4
web/gradle.properties

@ -1,6 +1,6 @@
# __LATEST_COMPOSE_RELEASE_VERSION__
COMPOSE_CORE_VERSION=0.5.0-build262
COMPOSE_WEB_VERSION=0.5.0-build262
COMPOSE_CORE_VERSION=0.5.0-build270
COMPOSE_WEB_VERSION=0.5.0-build270
COMPOSE_WEB_BUILD_WITH_EXAMPLES=false
compose.web.buildSamples=false
compose.web.tests.integration.withFirefox

Loading…
Cancel
Save