mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-27 13:54:11 +00:00
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:
parent
07e10f37ab
commit
033e4de9b9
4 changed files with 54 additions and 9 deletions
|
@ -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
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue