language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-01 06:11:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

C++: Replace the "quick tutorial" from the README with a reference to the walk-through

Browse source
This commit is contained in:
Simon Hausmann 2021-07-01 08:29:12 +02:00
parent 8289a3f576
commit 2646f442b5
1 changed files with 2 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

114
api/sixtyfps-cpp/docs/intro.md
View file

@ -125,115 +125,5 @@ necessary to link your executable or library against the `SixtyFPS::SixtyFPS` ta
## Tutorial ## Tutorial
Let's make a UI for a todo list application using the SixtyFPS UI description language. If you are new to SixtyFPS, then you may be interested in reading our walk-through [SixtyFPS Memory Game Tutorial Tutorial](../tutorial/cpp).
Hopefully this should be self explanatory. Check out the documentation of the language for help It will guide you through the `.60` mark-up language and the C++ API by building a little memory game.
```60
// file: my_application_ui.60
import { CheckBox, Button, ListView, LineEdit } from "sixtyfps_widgets.60";
export struct TodoItem := {
title: string,
checked: bool,
}
export MainWindow := Window {
callback todo_added(string);
property <[TodoItem]> todo_model;
GridLayout {
Row {
text_edit := LineEdit {
accepted(text) => { todo_added(text); }
}
Button {
text: "Add Todo";
clicked => {
todo_added(text_edit.text);
}
}
}
list_view := ListView {
rowspan: 2;
row: 2;
for todo in todo_model: Rectangle {
height: 20px;
GridLayout {
CheckBox {
text: todo.title;
checked: todo.checked;
toggled => {
todo.checked = checked;
}
}
}
}
}
}
}
```
We can compile this code using the `sixtyfps-compiler` binary:
```sh
sixtyfps-compiler my_application_ui.60 > my_application_ui.h
```
Note: You would usually not type this command yourself, this is done automatically by the build system.
(that's what the `sixtyfps_target_60_sources` cmake function does)
This will generate a `my_application_ui.h` header file. It basically contains the following code
(edited for brevity)
```C++
#include <sixtyfps>
struct TodoItem {
bool checked;
sixtyfps::SharedString title;
};
struct MainWindow {
public:
inline auto create () -> sixtyfps::ComponentHandle<MainWindow>;
inline auto get_todo_model () const -> std::shared_ptr<sixtyfps::Model<TodoItem>>;
inline void set_todo_model (const std::shared_ptr<sixtyfps::Model<TodoItem>> &value) const;
inline void invoke_todo_added (sixtyfps::SharedString arg_0) const;
template<typename Functor> inline void on_todo_added (Functor && callback_handler) const;
//...
}
```
We can then use this from out .cpp file
```C++
// include the generated file
#include "my_application_ui.h"
int main() {
// Let's instantiate our window
auto todo_app = MainWindow::create();
// let's create a model:
auto todo_model = std::make_shared<sixtyfps::VectorModel<TodoItem>>(std::vector {
TodoItem { false, "Write documentation" },
});
// set the model as the model of our view
todo_app->set_todo_model(todo_model);
// let's connect our "add" button to add an item in the model
todo_app->on_todo_added([todo_model](const sixtyfps::SharedString &s) {
todo_model->push_back(TodoItem { false, s} );
});
// Show the window and run the event loop
todo_app->run();
}
```
That's it.
Check the rest of the documentation for the reference.