Genie Discord forum

I am trying to create the mainscreen using genie and stippleUI. Even though I have gone through the documentation a bit, I am getting an error named : "MethodError: no method matching page(::ParsedHTMLString)". This error could result in a blank web screen whenever I launch it

The code is shown below:

`using GenieFramework, Genie.Router, Genie.Renderer.Html using .Stipple, .StippleUI

#Handler Code @appname GradeMaster

#UI function ui() row(cell(class = "st-module", btn(class="q-my-md", "Attendance Register", color = "primary") btn(class="q-my-md", "Student Entry", color = "primary") btn(class="q-my-md", "Grade Input", color = "primary") )) end

route("/") do html(ui()) end

Genie.isrunning(:webserver) || up()`

I've tried certain methods to fix this issue and this error still impedes... How to rectify such problems like this?

You should use the @page macro here, like this:

@page("/", ui)

You're also missing reactive variables for the buttons in the UI. I recommend you check out the first dashboard guide to see how reactie apps work

https://learn.genieframework.com/docs/guides/first-dashboard

if possible, can you show one example of how to code reactive variables for buttons, even though I've gone through the tutorial on the first dashboard to see how reactive apps work?

You need to use the @click macro inside btn to toggle a boolean reactive variable. then, attach a reactive handler to this boolean.

btn("Record", @click("recording =! recording")

https://learn.genieframework.com/examples/reactive-ui/live-style-changes

(dont mind the page title it's wrong I need to fix it)

Or a simpler example

using GenieFramework

@app begin
    @in clicked = false
    @onchange clicked begin
        println("button clicked")
    end
end

ui() = [ btn("Click me", @click("clicked =! clicked"))]
@page("/", ui)
up()

also do quasar html elements go in hand with stippleUI?

Even though I am able to get the code up and running, I am getting an error shown below:

Hello

how do I position GUI widgets in codes like this:

btn("Click me", @click("clicked =! clicked"))

For example I want to position the buttons at the center

you can use inline css styling for that https://learn.genieframework.com/docs/reference/reactive-ui/styling

Regarding Genie and Quasar, Genie uses Quasar v1. Most components are available but if any is missing you can use the quasar(:component, ...) call. Regarding that error, do not worry about it. It's something we need to fix

Also, please open new threads for unrelated questions