Genie Discord forum

add web component from server side?

12/28/2023, 12:03:04 AM

currently I can add a tag in the html file and then update it by draw a figure in julia and change its url to the figure file. I wonder if there any way to control and update the web component from server side? for example:

function plotAndSave()
  #xxxxx
  return fig_url
end
@onchange plot 
fig_url = plotAndSave()

addToWeb( " <img url = \"$(fig_url)\" " )

end

I need this feature since I have many different types of output result. I want to update them dynamically , rander than define all of them in the html layout.

Pere

12/29/2023, 11:01:11 AM

you can define a reactive variable with the component's code, and then include it in the page as:

@out code="<p>Hello there</p>"

<h1>A header</h1>
{{code}}

Or if you're using the low-code API

ui() = [ h1("a header"), "{{code}}"]

Finally, in case you dont need to dynamically change the code you can define a normal julia variable and include it as

code="<p>Hello there</p>"
ui() = [ h1("a header"), "$code"]

or in HTML

<h1>A header</h1>
$code

hhaensel

12/29/2023, 10:34:07 PM

If you are using Stipple, I would take advantage of the binding syntax, e.g.

using Stipple, Stipple.ReactiveTools
using StippleUI


ui() = [
    column([
        btn("New plot", @click(:new_plot), color = "primary")
        row([cell(), img(src! = :plot_url), cell()])
    ])
]

@app begin
    @in new_plot = false
    @out plot_url = "https://picsum.photos/id/$(rand(1:500))/200/300"

    @onbutton new_plot begin
        plot_url = "https://picsum.photos/id/$(rand(1:500))/200/300"
    end
end

route("/") do
    model = @init
    page(model, ui) |> html
end

up(open_browser = true)