Update language-specific docs to document that public functions can be called from the backend code (#5522)

* Examples for calling public functions in language-specific docs.

* Update the function example so it actually uses its parameter.

(This broke some c++ tests because of the unused argument warning)
This commit is contained in:
Danut Enachioiu 2024-07-03 12:13:08 +02:00 committed by GitHub
parent 07e10f37ab
commit 033e4de9b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 54 additions and 9 deletions

View file

@ -26,6 +26,7 @@ These classes have the same name as the component will have the following public
* `invoke_<callback_name>` function which takes the callback argument as parameter and call the callback.
* `on_<callback_name>` function which takes a functor as an argument and sets the callback handler
for this callback. the functor must accept the type parameter of the callback
* For each public function declared in the root component, an `invoke_<function_name>` function to call the function.
* A `global` function to access exported global singletons.
The `create` function creates a new instance of the component, which is wrapped
@ -48,10 +49,13 @@ Let's assume we've this code in our `.slint` file:
```slint,no-preview
export component SampleComponent inherits Window {
in-out property<int> counter;
// note that dashes will be replaced by underscores in the generated code
in-out property<string> user_name;
callback hello;
public function do-something(x: int) -> bool { return x > 0; }
// ... maybe more elements here
}
```
This generates a header with the following contents (edited for documentation purpose)
@ -94,6 +98,9 @@ public:
/// Sets the callback handler for the `hello` callback.
template<typename Functor> inline void on_hello (Functor && callback_handler) const;
/// Call this function to call the `do-something` function.
inline bool invoke_do_something (int x) const;
/// Returns a reference to a global singleton that's exported.
///
/// **Note:** Only globals that are exported or re-exported from the main .slint file will

View file

@ -144,6 +144,37 @@ component.clicked = function() { console.log("hello"); };
component.clicked();
```
### Functions
Functions in Slint can be defined using the `function` keyword.
**`ui/my-component.slint`**
```slint
export component MyComponent inherits Window {
width: 400px;
height: 200px;
public function my-function() -> int {
return 42;
}
}
```
If the function is marked `public`, it can also be called from JavaScript.
**`main.js`**
```js
import * as slint from "slint-ui";
let ui = slint.loadFile("ui/my-component.slint");
let component = new ui.MyComponent();
// call a public function
let result = component.my_function();
```
### Type Mappings
The types used for properties in .slint design markup each translate to specific types in JavaScript. The follow table summarizes the entire mapping:

View file

@ -23,13 +23,16 @@ pub mod generated_code {
/// This an example of the API that is generated for a component in `.slint` design markup. This may help you understand
/// what functions you can call and how you can pass data in and out.
///
/// This is the source code:
///
/// ```slint,no-preview
/// export component SampleComponent inherits Window {
/// in-out property<int> counter;
/// // note that dashes will be replaced by underscores in the generated code
/// in-out property<string> user-name;
/// callback hello();
/// callback hello;
/// public function do-something(x: int) -> bool { return x > 0; }
/// // ... maybe more elements here
/// }
/// ```
@ -77,6 +80,13 @@ pub mod generated_code {
/// });
/// ```
pub fn on_hello(&self, f: impl Fn() + 'static) {}
/// For each public function declared at the root of the component, a function to call
/// that function is generated. This is the function that calls the `do-something` function
/// declared in the `.slint` design markup.
pub fn invoke_do_something(&self, d: i32) -> bool {
unimplemented!()
}
}
impl ComponentHandle for SampleComponent {

View file

@ -1,14 +1,11 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
export struct MyStruct := {
foo: int,
bar: string,
}
SampleComponent := Window {
property<int> counter;
property<string> user_name;
export component SampleComponent inherits Window {
in-out property<int> counter;
// note that dashes will be replaced by underscores in the generated code
in-out property<string> user_name;
callback hello;
public function do-something(x: int) -> bool { return x > 0; }
// ... maybe more elements here
}