From 25f8ca9ba351f85f5e6f382c4c25b37aed000746 Mon Sep 17 00:00:00 2001 From: cliebhardt Date: Thu, 29 Jan 2026 16:59:12 +0100 Subject: [PATCH 1/3] feat: added InfiniteScroll Kotlin Views - InfiniteScrollCustomLoadingKotlinView - InfiniteScrollKotlinView - InfiniteSrollLoadingKotlinView - Item --- .../InfiniteScrollCustomLoadingKotlinView.kt | 58 +++++++++++++++++++ .../ininitescroll/InfiniteScrollKotlinView.kt | 52 +++++++++++++++++ .../InfiniteScrollLoadingKotlinView.kt | 49 ++++++++++++++++ .../samples/views/ininitescroll/Item.kt | 41 +++++++++++++ 4 files changed, 200 insertions(+) create mode 100644 src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt create mode 100644 src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt create mode 100644 src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt create mode 100644 src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt new file mode 100644 index 000000000..cb10176e3 --- /dev/null +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt @@ -0,0 +1,58 @@ +package com.webforj.samples.views.ininitescroll + +import com.webforj.annotation.StyleSheet +import com.webforj.component.Composite +import com.webforj.component.html.elements.Div +import com.webforj.component.icons.FeatherIcon +import com.webforj.kotlin.dsl.component.html.elements.div +import com.webforj.kotlin.dsl.component.html.elements.span +import com.webforj.kotlin.dsl.component.icons.featherIcon +import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll +import com.webforj.kotlin.extension.set +import com.webforj.kotlin.extension.styles +import com.webforj.router.annotation.FrameTitle +import com.webforj.router.annotation.Route + +@Route +@FrameTitle("Fully Customized Loading") +@StyleSheet("ws://css/infinitescroll/infinitescrollcustom.css") +class InfiniteScrollCustomLoadingKotlinView: Composite
() { + + init { + boundComponent.apply { + height = "100vh" + styles["overflow"] = "auto" + infiniteScroll { + addClassName("is") + height = "100%" + val canvas = div { + maxWidth = "600px" + addClassName("is-canvas") + } + div { + addClassName("custom-loading") + featherIcon(FeatherIcon.CLOUD) { + setSize("32px", "32px") + addClassName("loading-icon") + } + span("Loading awesome content...") + } + var index = 0 + onScroll { + if (index > 40) { + isCompleted = true + update() + return@onScroll + } + + for (i in 0..<8) { + canvas.add(Item()) + } + + index++ + update() + } + } + } + } +} diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt new file mode 100644 index 000000000..f422c1f0d --- /dev/null +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt @@ -0,0 +1,52 @@ +package com.webforj.samples.views.ininitescroll + +import com.webforj.annotation.StyleSheet +import com.webforj.component.Composite +import com.webforj.component.html.elements.Div +import com.webforj.component.icons.FeatherIcon +import com.webforj.component.layout.flexlayout.FlexAlignment +import com.webforj.component.layout.flexlayout.FlexJustifyContent +import com.webforj.kotlin.dsl.component.html.elements.div +import com.webforj.kotlin.dsl.component.icons.featherIcon +import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll +import com.webforj.kotlin.dsl.component.layout.flexlayout.flexLayout +import com.webforj.kotlin.dsl.component.layout.flexlayout.horizontal +import com.webforj.kotlin.dsl.component.layout.flexlayout.vertical +import com.webforj.kotlin.extension.set +import com.webforj.kotlin.extension.styles +import com.webforj.router.annotation.Route +import kotlin.random.Random + +@Route +@StyleSheet("ws://css/infinitescroll/infinitescroll.css") +class InfiniteScrollKotlinView: Composite
() { + + init { + boundComponent.apply { + height = "100vh" + styles["overflow"] = "auto" + infiniteScroll { + height = "100%" + val canvas = div { + maxHeight = "600px" + addClassName("is-canvas") + } + var index = 0 + onScroll { + if (index > 40) { + isCompleted = true + update() + return@onScroll + } + for (i in 0..<8) { + canvas.add(Item()) + } + index++ + update() + } + } + } + } + +} + diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt new file mode 100644 index 000000000..e8f83df7f --- /dev/null +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt @@ -0,0 +1,49 @@ +package com.webforj.samples.views.ininitescroll + +import com.webforj.annotation.StyleSheet +import com.webforj.component.Composite +import com.webforj.component.html.elements.Div +import com.webforj.component.icons.TablerIcon +import com.webforj.kotlin.dsl.component.html.elements.div +import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll +import com.webforj.kotlin.extension.set +import com.webforj.kotlin.extension.styles +import com.webforj.router.annotation.FrameTitle +import com.webforj.router.annotation.Route + +@Route +@FrameTitle("Custom Loading Indicator") +@StyleSheet("ws://css/infinitescroll/infinitescroll.css") +class InfiniteScrollLoadingKotlinView: Composite
() { + + init { + boundComponent.apply { + height = "100vh" + styles["overflow"] = "auto" + infiniteScroll("Fetching more records...") { + addClassName("is") + height = "100%" + val canvas = div { + maxWidth = "600px" + addClassName("is-canvas") + } + setIcon(TablerIcon.create("cloud-download")) + var index = 0 + onScroll { + if (index > 40) { + isCompleted = true + update() + return@onScroll + } + + for (i in 0..<8) { + canvas.add(Item()) + } + + index++ + update() + } + } + } + } +} diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt new file mode 100644 index 000000000..20cacb524 --- /dev/null +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt @@ -0,0 +1,41 @@ +package com.webforj.samples.views.ininitescroll + +import com.webforj.component.Composite +import com.webforj.component.html.elements.Div +import com.webforj.component.icons.FeatherIcon +import com.webforj.component.layout.flexlayout.FlexAlignment +import com.webforj.component.layout.flexlayout.FlexJustifyContent +import com.webforj.kotlin.dsl.component.html.elements.div +import com.webforj.kotlin.dsl.component.icons.featherIcon +import com.webforj.kotlin.dsl.component.layout.flexlayout.flexLayout +import com.webforj.kotlin.dsl.component.layout.flexlayout.horizontal +import com.webforj.kotlin.dsl.component.layout.flexlayout.vertical +import kotlin.random.Random + +class Item: Composite
() { + val random = Random.Default + val names = arrayOf( + "John", "Jane", "Alice", "Bob", "Charlie", "Diana", + "Ethan", "Fiona", "George", "Hannah", "Ian", "Jill" + ); + + init { + boundComponent.apply { + flexLayout { + horizontal() + justifyContent = FlexJustifyContent.BETWEEN + alignment = FlexAlignment.CENTER + flexLayout { + vertical() + div(names.random()).addClassName("item-name") + div { + addClassName("item-excerpt") + text = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. " + + "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.") + } + } + featherIcon(FeatherIcon.ARROW_RIGHT).setMinSize("24px", "24px") + } + } + } +} From f3f4dc0b2faca069af69b3f3b9b29e55aa26d84d Mon Sep 17 00:00:00 2001 From: cliebhardt Date: Thu, 19 Mar 2026 16:03:28 +0100 Subject: [PATCH 2/3] fix: use Kotlin extensions and self field in Kotlin InfiniteScroll views --- .../InfiniteScrollCustomLoadingKotlinView.kt | 23 ++++++++++++------- .../ininitescroll/InfiniteScrollKotlinView.kt | 16 +++++++++---- .../InfiniteScrollLoadingKotlinView.kt | 18 ++++++++++----- .../samples/views/ininitescroll/Item.kt | 21 ++++++++++++----- 4 files changed, 53 insertions(+), 25 deletions(-) diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt index cb10176e3..8d6bae446 100644 --- a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt @@ -8,8 +8,14 @@ import com.webforj.kotlin.dsl.component.html.elements.div import com.webforj.kotlin.dsl.component.html.elements.span import com.webforj.kotlin.dsl.component.icons.featherIcon import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll +import com.webforj.kotlin.extension.classNames +import com.webforj.kotlin.extension.percent +import com.webforj.kotlin.extension.plus +import com.webforj.kotlin.extension.px import com.webforj.kotlin.extension.set +import com.webforj.kotlin.extension.size import com.webforj.kotlin.extension.styles +import com.webforj.kotlin.extension.vh import com.webforj.router.annotation.FrameTitle import com.webforj.router.annotation.Route @@ -17,23 +23,24 @@ import com.webforj.router.annotation.Route @FrameTitle("Fully Customized Loading") @StyleSheet("ws://css/infinitescroll/infinitescrollcustom.css") class InfiniteScrollCustomLoadingKotlinView: Composite
() { + private val self = boundComponent init { - boundComponent.apply { - height = "100vh" + self.apply { + height = 100.vh styles["overflow"] = "auto" infiniteScroll { - addClassName("is") - height = "100%" + classNames + "is" + height = 100.percent val canvas = div { - maxWidth = "600px" - addClassName("is-canvas") + maxWidth = 600.px + classNames + "is-canvas" } div { addClassName("custom-loading") featherIcon(FeatherIcon.CLOUD) { - setSize("32px", "32px") - addClassName("loading-icon") + size = 32.px to 32.px + classNames + "loading-icon" } span("Loading awesome content...") } diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt index f422c1f0d..fe6d8d6e7 100644 --- a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt @@ -12,24 +12,30 @@ import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll import com.webforj.kotlin.dsl.component.layout.flexlayout.flexLayout import com.webforj.kotlin.dsl.component.layout.flexlayout.horizontal import com.webforj.kotlin.dsl.component.layout.flexlayout.vertical +import com.webforj.kotlin.extension.classNames +import com.webforj.kotlin.extension.percent +import com.webforj.kotlin.extension.plus +import com.webforj.kotlin.extension.px import com.webforj.kotlin.extension.set import com.webforj.kotlin.extension.styles +import com.webforj.kotlin.extension.vh import com.webforj.router.annotation.Route import kotlin.random.Random @Route @StyleSheet("ws://css/infinitescroll/infinitescroll.css") class InfiniteScrollKotlinView: Composite
() { + private val self = boundComponent init { - boundComponent.apply { - height = "100vh" + self.apply { + height = 100.vh styles["overflow"] = "auto" infiniteScroll { - height = "100%" + height = 100.percent val canvas = div { - maxHeight = "600px" - addClassName("is-canvas") + maxHeight = 600.px + classNames + "is-canvas" } var index = 0 onScroll { diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt index e8f83df7f..775853200 100644 --- a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt @@ -6,8 +6,13 @@ import com.webforj.component.html.elements.Div import com.webforj.component.icons.TablerIcon import com.webforj.kotlin.dsl.component.html.elements.div import com.webforj.kotlin.dsl.component.infiniitescroll.infiniteScroll +import com.webforj.kotlin.extension.classNames +import com.webforj.kotlin.extension.percent +import com.webforj.kotlin.extension.plus +import com.webforj.kotlin.extension.px import com.webforj.kotlin.extension.set import com.webforj.kotlin.extension.styles +import com.webforj.kotlin.extension.vh import com.webforj.router.annotation.FrameTitle import com.webforj.router.annotation.Route @@ -15,17 +20,18 @@ import com.webforj.router.annotation.Route @FrameTitle("Custom Loading Indicator") @StyleSheet("ws://css/infinitescroll/infinitescroll.css") class InfiniteScrollLoadingKotlinView: Composite
() { + private val self = boundComponent init { - boundComponent.apply { - height = "100vh" + self.apply { + height = 100.vh styles["overflow"] = "auto" infiniteScroll("Fetching more records...") { - addClassName("is") - height = "100%" + classNames + "is" + height = 100.percent val canvas = div { - maxWidth = "600px" - addClassName("is-canvas") + maxWidth = 600.px + classNames + "is-canvas" } setIcon(TablerIcon.create("cloud-download")) var index = 0 diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt index 20cacb524..c5fee378b 100644 --- a/src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/Item.kt @@ -10,31 +10,40 @@ import com.webforj.kotlin.dsl.component.icons.featherIcon import com.webforj.kotlin.dsl.component.layout.flexlayout.flexLayout import com.webforj.kotlin.dsl.component.layout.flexlayout.horizontal import com.webforj.kotlin.dsl.component.layout.flexlayout.vertical +import com.webforj.kotlin.extension.classNames +import com.webforj.kotlin.extension.minSize +import com.webforj.kotlin.extension.plus +import com.webforj.kotlin.extension.px import kotlin.random.Random class Item: Composite
() { - val random = Random.Default - val names = arrayOf( + private val self = boundComponent + private val random = Random.Default + private val names = arrayOf( "John", "Jane", "Alice", "Bob", "Charlie", "Diana", "Ethan", "Fiona", "George", "Hannah", "Ian", "Jill" ); init { - boundComponent.apply { + self.apply { flexLayout { horizontal() justifyContent = FlexJustifyContent.BETWEEN alignment = FlexAlignment.CENTER flexLayout { vertical() - div(names.random()).addClassName("item-name") + div(names.random()) { + classNames + "item-name" + } div { - addClassName("item-excerpt") + classNames + "item-excerpt" text = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. " + "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.") } } - featherIcon(FeatherIcon.ARROW_RIGHT).setMinSize("24px", "24px") + featherIcon(FeatherIcon.ARROW_RIGHT) { + minSize = 24.px to 24.px + } } } } From ac262690b461fac6620bdbff549c3c81d554b9c0 Mon Sep 17 00:00:00 2001 From: cliebhardt Date: Mon, 30 Mar 2026 01:38:50 +0200 Subject: [PATCH 3/3] fix: update infinite scroll kotlin views --- .../ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt | 2 +- .../samples/views/ininitescroll/InfiniteScrollKotlinView.kt | 4 ++-- .../views/ininitescroll/InfiniteScrollLoadingKotlinView.kt | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt index 8d6bae446..457f5ddf0 100644 --- a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollCustomLoadingKotlinView.kt @@ -56,7 +56,7 @@ class InfiniteScrollCustomLoadingKotlinView: Composite
() { canvas.add(Item()) } - index++ + index += 8 update() } } diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt index fe6d8d6e7..72c126c00 100644 --- a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollKotlinView.kt @@ -34,7 +34,7 @@ class InfiniteScrollKotlinView: Composite
() { infiniteScroll { height = 100.percent val canvas = div { - maxHeight = 600.px + maxWidth = 600.px classNames + "is-canvas" } var index = 0 @@ -47,7 +47,7 @@ class InfiniteScrollKotlinView: Composite
() { for (i in 0..<8) { canvas.add(Item()) } - index++ + index += 8 update() } } diff --git a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt index 775853200..1c2620fcc 100644 --- a/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt +++ b/src/main/kotlin/com/webforj/samples/views/ininitescroll/InfiniteScrollLoadingKotlinView.kt @@ -46,7 +46,7 @@ class InfiniteScrollLoadingKotlinView: Composite
() { canvas.add(Item()) } - index++ + index += 8 update() } }