C++ docs: Add a getting started section

This combines the tutorial sub-section from the intro (a bit weird as sub-section there)
and the usage part of the cmake section into a getting started that
has a complete little C++ example.
This commit is contained in:
Simon Hausmann 2021-07-02 16:20:58 +02:00
parent 13bd828b96
commit 8f9a723e75
4 changed files with 89 additions and 38 deletions

View file

@ -86,37 +86,5 @@ and downloading the `cpp_bin` artifact.
After extracting the artifact you can place the `lib` directory into your `CMAKE_PREFIX_PATH` and `find_package(SixtyFPS)` should succeed
in locating the package.
## Usage
Once SixtyFPS is built, you can use it in your CMake application or library target in two steps:
1. Associate the `.60` files that you'd like to use by calling the `sixtyfps_target_60_sources` cmake command. The first parameter is
your application (or library) CMake target, and the parameters following are the names of the `.60` files. This will result in the
`.60` files to be compiled into C++ source code.
2. The generated C++ source code also needs the SixtyFPS run-time library. This dependency is satisfied by linking `SixtyFPS::SixtyFPS`
into your target with the `target_link_libraries` command.
A typical example looks like this:
```cmake
cmake_minimum_required(VERSION 3.16)
project(my_application LANGUAGES CXX)
# Note: Use find_package(SixtyFPS) instead of the following three commands, if you prefer the package
# approach.
include(FetchContent)
FetchContent_Declare(
SixtyFPS
GIT_REPOSITORY https://github.com/sixtyfpsui/sixtyfps.git
GIT_TAG v0.1.0
SOURCE_SUBDIR api/sixtyfps-cpp
)
FetchContent_MakeAvailable(SixtyFPS)
add_executable(my_application main.cpp)
sixtyfps_target_60_sources(my_application my_application_ui.60)
target_link_libraries(my_application PRIVATE SixtyFPS::SixtyFPS)
```
In the next section you will learn how to use the installed library in your application
and load `.60` UI files.

View file

@ -0,0 +1,76 @@
# Getting Started
Once SixtyFPS is built, you can use it in your CMake application or library target in two steps:
1. Associate the `.60` files that you'd like to use by calling the `sixtyfps_target_60_sources` cmake command. The first parameter is
your application (or library) CMake target, and the parameters following are the names of the `.60` files. This will result in the
`.60` files to be compiled into C++ source code.
2. The generated C++ source code also needs the SixtyFPS run-time library. This dependency is satisfied by linking `SixtyFPS::SixtyFPS`
into your target with the `target_link_libraries` command.
A typical example looks like this:
```cmake
cmake_minimum_required(VERSION 3.16)
project(my_application LANGUAGES CXX)
# Note: Use find_package(SixtyFPS) instead of the following three commands, if you prefer the package
# approach.
include(FetchContent)
FetchContent_Declare(
SixtyFPS
GIT_REPOSITORY https://github.com/sixtyfpsui/sixtyfps.git
GIT_TAG v0.1.0
SOURCE_SUBDIR api/sixtyfps-cpp
)
FetchContent_MakeAvailable(SixtyFPS)
add_executable(my_application main.cpp)
sixtyfps_target_60_sources(my_application my_application_ui.60)
target_link_libraries(my_application PRIVATE SixtyFPS::SixtyFPS)
```
Suppose `my_application_ui.60` was a "Hello World" like this:
```60,ignore
HelloWorld := Window {
width: 400px;
height: 400px;
// Declare an alias that exposes the label's text property to C++
property my_label <=> label.text;
label := Text {
y: parent.width / 2;
x: parent.x + 200px;
text: "Hello, world";
color: blue;
}
}
```
then you can use the following code in you `main` function to show the [`Window`](markdown/builtin_elements.md#window)
and change the text:
```cpp
#include "my_application_ui.h"
int main(int argc, char **argv)
{
auto hello_world = HelloWorld::create();
hello_world->set_my_label("Hello from C++");
// Show the window and spin the event loop until the window is closed.
hello_world->run();
return 0;
}
```
This works because the SixtyFPS compiler translated `my_application_ui.60` to C++ code, in the `my_application_ui.h`
header file. That generated code has a C++ class that corresponds to the `HelloWorld` element and has API to create
the ui, read or write properties or set callbacks. You can learn more about how this API looks like in general in the
[](generated_code.md) section.
## Tutorial
For an in-depth walk-through, you may be interested in reading our walk-through <a href="../tutorial/cpp">SixtyFPS Memory Game Tutorial Tutorial</a>.
It will guide you through the `.60` mark-up language and the C++ API by building a little memory game.

View file

@ -20,6 +20,8 @@ Welcome to SixtyFPS C++'s documentation!
cmake.md
getting_started.md
api/library_root
language.rst

View file

@ -1,9 +1,14 @@
# Introduction
[SixtyFPS](https://sixtyfps.io/) is a UI toolkit that supports different programming languages.
SixtyFPS.cpp is the C++ API to interact with a SixtyFPS UI from C++.
SixtyFPS C++ is the C++ API to interact with a SixtyFPS UI from C++.
## Tutorial
The user interfaces are written in the [.60 design markup language](markdown/langref.md).
If you are new to SixtyFPS, then you may be interested in reading our walk-through <a href="../tutorial/cpp">SixtyFPS Memory Game Tutorial Tutorial</a>.
It will guide you through the `.60` mark-up language and the C++ API by building a little memory game.
You can create and edit `.60` files using our [SixtyFPS Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=SixtyFPS.sixtyfps-vscode),
which features syntax highlighting and live design preview.
For a quick edit and preview cycle, you can also use the `sixtyfps-viewer` command line tool, which can be installed using `cargo install sixtyfps-viewer`,
if you have [Cargo](https://marketplace.visualstudio.com/items?itemName=SixtyFPS.sixtyfps-vscode) installed.
In the next section you will learn how to install the SixtyFPS C++ library and the CMake build system integration.