Skip Navigation
Programming @programming.dev
onlinepersona @programming.dev

How does one create slint components with their own compiled logic?

This is a question regarding the frontend framework Slint

Let's take a web frontend framework as an example like React, Vue, Svelte, and so on. They allow you create components with their own distinct logic and expose an interface with which parents or siblings can react.

(I don't actually write Vue, this is just an example from memory)

 vue
    
<script>
let status = ref("Unknown");
async function onClick(){
  let result = await fetch("https://somewhere.org/");
  status.value = result.json()?status;
  emit("status", status);
}
</script>
<template>
<button @onClick="onClick">Check status</button>
<p>{{ status}}</p>
</template>

How can this be achieved in slint + another language (cpp, python, rust, ...)?

Say, I'm writing a desktop application and have a window, with a 3 column layout, and somewhere deep in the component tree, I have a StatusButton. This button, upon clicking is supposed to execute an IO call in my language of choice and its parent component should react to that. For the sake of the example, make it an HTTP network request that calls a server, expects a JSON with a status field.

How do I create the StatusButton component and use it in slint?

For what it's worth, I use rust, but whichever language the solution is presented in, it can probably be adapted to work in rust.

slint::slint!( some slint in here ) in rust. This just moves the .slint file into rust but I haven't found out how to use the new component in a .slint file or in another slint::slint!(...) macro

The examples seem to suggest that any non-slint actions have to be passed all the way up to the main component / app window (see example)

Maybe @slint@fosstodon.org can help?

Comments

0