diff --git a/api/sixtyfps-cpp/docs/intro.md b/api/sixtyfps-cpp/docs/intro.md index 16b3a73d2..cf375f5ea 100644 --- a/api/sixtyfps-cpp/docs/intro.md +++ b/api/sixtyfps-cpp/docs/intro.md @@ -125,115 +125,5 @@ necessary to link your executable or library against the `SixtyFPS::SixtyFPS` ta ## Tutorial -Let's make a UI for a todo list application using the SixtyFPS UI description language. -Hopefully this should be self explanatory. Check out the documentation of the language for help - -```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 - -struct TodoItem { - bool checked; - sixtyfps::SharedString title; -}; - -struct MainWindow { - public: - inline auto create () -> sixtyfps::ComponentHandle; - - inline auto get_todo_model () const -> std::shared_ptr>; - inline void set_todo_model (const std::shared_ptr> &value) const; - - inline void invoke_todo_added (sixtyfps::SharedString arg_0) const; - template 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>(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. +If you are new to SixtyFPS, then you may be interested in reading our walk-through [SixtyFPS Memory Game Tutorial Tutorial](../tutorial/cpp). +It will guide you through the `.60` mark-up language and the C++ API by building a little memory game.