Is there an example how to use the Jetpack Compose...

# kilua

[Stefan Oltmann]

Is there an example how to use the Jetpack Compose API?

I added the dev.kilua:kilua-jetpack dependency, but for example I don't find the Box class.

[Robert Jaros]

You should be able to

[Stefan Oltmann]

Yeah, it just started to work. dev.kilua.compose.foundation.layout.Box
Maybe a Gradle/IDEA issue.

[Stefan Oltmann]

This should give me a red background with a centered text, right?

import dev.kilua.Application
import dev.kilua.CoreModule
import dev.kilua.Hot
import dev.kilua.JetpackModule
import dev.kilua.compose.foundation.layout.Box
import dev.kilua.compose.root
import dev.kilua.compose.ui.Alignment
import dev.kilua.compose.ui.Modifier
import dev.kilua.compose.ui.background
import dev.kilua.compose.ui.fillMaxSize
import dev.kilua.form.text.Text
import dev.kilua.html.Color
import dev.kilua.startApplication

class App : Application() {

    override fun start() {

        root("root") {

            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Aqua)
            ) {

                Text("Hello")
            }
        }
    }
}

fun main() {
    startApplication(
        ::App,
        bundlerHot(),
        JetpackModule,
        CoreModule
    )
}

fun bundlerHot(): Hot? {
    return js("import.meta.webpackHot").unsafeCast<Hot?>()
}

[Robert Jaros]

No :)

[Stefan Oltmann]

That's why I asked for an example project 😄

[Stefan Oltmann]

Yes, my screen is white.

How do I do it?

[Robert Jaros]

the correct code is this:

Box(
                            contentAlignment = Alignment.Center,
                            modifier = Modifier
                                .fillMaxSize()
                                .background(Color.Aqua)
                        ) {
                            span {
                                +"Hello"
                            }
                        }

[Robert Jaros]

1. Kilua's composable functions are lowercase.

[Robert Jaros]

Even though jetpack api (Box, Column, Row) are uppercase, all other functions are lowercase.

[Stefan Oltmann]

Ah, I see... I got the wrong "Text"... I was looking for the Compose API text

[Robert Jaros]

2. class Text and composable text is text input control

[Stefan Oltmann]

Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .background(Color.Aqua)
                    .fillMaxSize()
            ) {

                span {
                    textNode("Hello")
                }
            }

That works, but why is fillMaxSize() not effective?

[Stefan Oltmann]

Ah, I see the implementation.

[Stefan Oltmann]

So I'd need to request the browser window size and set this as size

[Robert Jaros]

What do you mean "not effective" ?

[Stefan Oltmann]

Wouldn't it make sense to have a dev.kilua.compose.foundation.layout.Text that does span { textNode("Hello") behind the scenes?

[Robert Jaros]

Probably yes, but you would like other jetpack classes as well, at that's probably a lot of work.

[Stefan Oltmann]

What do you mean "not effective" ?

I somehow expected this to fill the whole screen.

root("root") {

            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .background(Color.Aqua)
                    .fillMaxSize()
            ) {
                
                span {
                    textNode("Hello")
                }
            }
        }

Also, I wonder where the padding comes from.

[Stefan Oltmann]

Strange. This is the same padding I have seen in my experiments with summon yesterday.

[Robert Jaros]

No padding for me ...

[Stefan Oltmann]

Firefox 146 on Windows 11

[Stefan Oltmann]

Same with Brave/Chrome

[Robert Jaros]

You can use a wrapper:

div {
                            width(100.vw)
                            height(100.vh)
                            Box(
                                contentAlignment = Alignment.Center,
                                modifier = Modifier
                                    .fillMaxSize()
                                    .background(Color.Aqua)
                            ) {
                                span {
                                    +"Hello"
                                }
                            }
                        }

to make fillMaxSize do what you want

[Stefan Oltmann]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <base href="/">
    <script src="main.bundle.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

[Robert Jaros]

what the browser dev tools say?

[Robert Jaros]

Oh, managed to reproduce your padding :)

[Robert Jaros]

https://medium.com/@patrickdunn_15451/beware-default-html-margins-6159ae7a8b3e#:~:text=Basic%20html%20page%20in%20the%20browser%20with,tag.%20Default%20browser%20margin%20for%20of%208px.

[Robert Jaros]

It's just the dafault when no css is applied

[Stefan Oltmann]

I hate browsers and web dev, lol.

[Robert Jaros]

I've generated the project with bootstrap module, so I don't see this in my project

[Robert Jaros]

frameworks like bootstrap or tailwindcss have their own reasonable defaults

[Stefan Oltmann]

Thanks for giving this hint.

Super odd that every framework need to add

body {
  margin: 0;
}

just to fix this strange browser default

[Stefan Oltmann]

Hmm.. There seem to be limitations on how complex I can make the layout using the Compose API.

import androidx.compose.runtime.Composable
import dev.kilua.compose.foundation.layout.Box
import dev.kilua.compose.foundation.layout.Column
import dev.kilua.compose.foundation.layout.Row
import dev.kilua.compose.ui.Alignment
import dev.kilua.compose.ui.Modifier
import dev.kilua.compose.ui.background
import dev.kilua.compose.ui.fillMaxSize
import dev.kilua.compose.ui.fillMaxWidth
import dev.kilua.compose.ui.height
import dev.kilua.core.IComponent
import dev.kilua.html.Color
import dev.kilua.html.div
import dev.kilua.html.em
import dev.kilua.html.span
import dev.kilua.html.textNode
import dev.kilua.html.vh
import dev.kilua.html.vw

@Composable
fun IComponent.MainView() {

    Column {

        div {

            width(100.vw)
            height(100.vh)

            Box(
                modifier = Modifier.fillMaxSize()
            ) {

                Row(
                    modifier = Modifier
                        .align(Alignment.TopCenter)
                        .height(48.em)
                        .fillMaxWidth()
                        .background(color = Color.Red)
                ) {

                    span {
                        textNode("topbar")
                    }
                }

                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .align(Alignment.Center)
                        .fillMaxSize()
                        .background(color = Color.Blue)
                ) {

                    span {
                        textNode("text in middle")
                    }
                }
            }
        }

        span {
            textNode("Shown when scroll down")
        }
    }
}

[Robert Jaros]

I'm not a Jetpack expert. Can you elaborate a bit more?

[Robert Jaros]

For me it looks exactly as you coded :)

[Stefan Oltmann]

And I'm not a web dev expert. 🫣

I try to build a portfolio page like https://yujisatojr.github.io/react-portfolio-template , but I think maybe it's time to go to plan B and just let ChatGPT generate a static HTML page. 😅

[Stefan Oltmann]

As a portfolio page it should be SEO-friendly. Otherwise I would have done it with Compose for Web already like all my regular apps.

[Robert Jaros]

creating this wrapper div (with 100vh and 100vw) is definitely not something you would like to use on a webpage, even though it lets you use jetpack vertical alignment

[Stefan Oltmann]

After Yousef presented https://www.yousef.codes/ in #C0BJ0GTE2 I got this feeling that I should have a nice portfolio page like his, too. But I stumble in a lot of issues trying summon, kobweb and kilua.

So maybe that's just not my tech and I should give up.

[Stefan Oltmann]

I'm sure that's due to my lack of web knowledge.

[Stefan Oltmann]

creating this wrapper div (with 100vh and 100vw) is definitely not something you would like to use on a webpage, even though it lets you use jetpack vertical alignment

Okay. Thanks for the hint.

[Robert Jaros]

In my opinion, to build nice looking website you need to be at least proficient in CSS or use some kind of CSS framework. It just not possible with HTML only, and that's what you get in general with Kotlin code (regardless if using Kilua, KVision, Kobweb or Summon).

[Stefan Oltmann]

I see. Thank you. 🙂