add slint course

Author: cristianaprecup

docs/desktop_applications/03_Slint/01_Introduction.md

@@ -0,0 +1,80 @@
+# Introduction to Slint
+
+## What is Slint?
+Slint is a **declarative UI language** designed to make building modern, efficient, and portable user interfaces simple and intuitive.  
+It allows you to describe *what* your UI should look like and *how* it should behave, without dealing with low-level implementation details.
+
+Slint is designed to work seamlessly with languages like **Rust**, **C++**, and **JavaScript**, keeping your **business logic** separate from the UI code.
+
+
+## Core Concepts
+
+### Elements and Properties
+Slint uses **elements** (such as `Text`, `Rectangle`, `Button`) followed by curly braces `{}` to define UI components.  
+Inside the braces, you set **properties** that describe the appearance or behavior of that element.
+
+Example:
+```slint
+Text {
+    text: "Hello World!";
+    font-size: 24px;
+    color: #0044ff;
+}
+```
+
+### Nesting Elements
+Elements can be placed inside one another to build hierarchical UIs.
+
+Example:
+```slint
+Rectangle {
+    width: 150px;
+    height: 60px;
+    background: white;
+    border-radius: 10px;
+
+    Text {
+        text: "Hello World!";
+        font-size: 24px;
+        color: black;
+    }
+}
+```
+
+### Reactivity
+Slint has **built-in reactivity**: when a property changes, all dependent UI elements automatically update.
+
+Example with a counter:
+```slint
+property <int> counter: 0;
+
+Rectangle {
+    width: 150px;
+    height: 60px;
+    background: white;
+    border-radius: 10px;
+
+    Text {
+        text: "Count: " + counter;
+        font-size: 24px;
+        color: black;
+    }
+
+    TouchArea {
+        clicked => {
+            counter += 1;
+        }
+    }
+}
+```
+
+
+## Why Slint?
+
+- **Pure declarative language** built for UI from the ground up.  
+- **Easy to read and write** for both developers and designers.  
+- **Portable** works on desktop, embedded systems, and web.  
+- **Clear separation** of UI and business logic.  
+- **Reactivity** makes dynamic UIs effortless.
+
+Compared to traditional UI approaches (like HTML/JavaScript or XML-based layouts), Slint is more concise, readable, and easier to maintain.

docs/desktop_applications/03_Slint/02_Reactivity.md

@@ -0,0 +1,132 @@
+# Slint Reactivity
+
+## Introduction
+**Reactivity** is a core concept in Slint. It allows you to create complex, dynamic user interfaces with far less code.  
+In Slint, UI elements automatically update when the properties they depend on change — without requiring manual refresh logic.
+
+## Example: Mouse Tracking and Color Change
+```slint
+export component MyComponent {
+    width: 400px; height: 400px;
+
+    Rectangle {
+        background: #151515;
+    }
+
+    ta := TouchArea {}
+
+    myRect := Rectangle {
+        x: ta.mouse-x;
+        y: ta.mouse-y;
+        width: 40px;
+        height: 40px;
+        background: ta.pressed ? orange : white;
+    }
+
+    Text {
+        x: 5px; y: 5px;
+        text: "x: " + myRect.x / 1px;
+        color: white;
+    }
+
+    Text {
+        x: 5px; y: 15px;
+        text: "y: " + myRect.y / 1px;
+        color: white;
+    }
+}
+```
+
+### How It Works
+- The **rectangle follows the mouse** using `x: ta.mouse-x;` and `y: ta.mouse-y;`.
+- **Color changes on click**: `background: ta.pressed ? orange : white;`.
+- Text labels **automatically update** to show the rectangle's current position.
+
+This works because:
+1. The `TouchArea` exposes `mouse-x`, `mouse-y`, and `pressed` properties.  
+2. When these properties change, all bound expressions are automatically re-evaluated.  
+3. The UI updates only where dependencies have changed.
+
+
+## Performance and Dependency Tracking
+Slint evaluates bindings lazily:
+- Dependencies are registered when a property is accessed during evaluation.
+- When a property changes, only dependent expressions are re-evaluated.
+- This ensures high performance, even for complex UIs.
+
+
+## Property Expressions
+Property bindings can be simple or complex:
+
+```slint
+// Tracks foo.x
+x: foo.x;
+
+// Conditional expression
+x: foo.x > 100px ? 0px : 400px;
+
+// Clamped value
+x: clamp(foo.x, 0px, 400px);
+```
+
+You can also use **functions** for clarity:
+
+```slint
+export component MyComponent {
+    width: 400px; height: 400px;
+
+    pure function lengthToInt(n: length) -> int {
+        return (n / 1px);
+    }
+
+    ta := TouchArea {}
+
+    myRect := Rectangle {
+        x: ta.mouse-x;
+        y: ta.mouse-y;
+        width: 40px;
+        height: 40px;
+        background: ta.pressed ? orange : white;
+    }
+
+    Text {
+        x: 5px; y: 5px;
+        text: "x: " + lengthToInt(myRect.x);
+    }
+    Text {
+        x: 5px; y: 15px;
+        text: "y: " + lengthToInt(myRect.y);
+    }
+}
+```
+
+## Purity in Bindings
+For reactivity to work correctly, bindings must be **pure**:
+- Evaluating a property should not change any other observable state.
+- The Slint compiler enforces purity in binding expressions, pure functions, and pure callbacks.
+
+Example:
+```slint
+export component Example {
+    pure callback foo() -> int;
+    public pure function bar(x: int) -> int {
+        return x + foo();
+    }
+}
+```
+
+## Two-Way Bindings
+Two-way bindings keep two properties in sync using `<=>`:
+
+```slint
+export component Example  {
+    in property<brush> rect-color <=> r.background;
+    in property rect-color2 <=> r.background;
+
+    r:= Rectangle {
+        width: parent.width;
+        height: parent.height;
+        background: blue;
+    }
+}
+```

docs/desktop_applications/03_Slint/03_Slint-file.md

@@ -0,0 +1,179 @@
+# The `.slint` File
+
+## Introduction
+In Slint, you define user interfaces in the **Slint language** and save them in files with the `.slint` extension.
+
+Each `.slint` file defines **one or more components**. Components declare a tree of elements and can be reused to build your own set of UI controls. You can use each declared component by its name in other components.
+
+
+## Example: Components and Elements
+```slint
+component MyButton inherits Text {
+    color: black;
+    // ...
+}
+
+export component MyApp inherits Window {
+    preferred-width: 200px;
+    preferred-height: 100px;
+    Rectangle {
+        width: 200px;
+        height: 100px;
+        background: green;
+    }
+    MyButton {
+        x: 0; y: 0;
+        text: "hello";
+    }
+    MyButton {
+        y: 0;
+        x: 50px;
+        text: "world";
+    }
+}
+```
+
+- `MyButton` and `MyApp` are components.  
+- `Window` and `Rectangle` are **built-in elements**.  
+- Components can **reuse** other components.
+
+
+## Naming Elements
+You can assign names to elements using `:=`:
+
+```slint
+export component MyApp inherits Window {
+    preferred-width: 200px;
+    preferred-height: 100px;
+
+    hello := MyButton {
+        x: 0; y: 0;
+        text: "hello";
+    }
+    world := MyButton {
+        y: 0;
+        text: "world";
+        x: 50px;
+    }
+}
+```
+
+### Reserved Names
+- `root` → outermost element of a component.  
+- `self` → current element.  
+- `parent` → parent element.
+
+
+## Comments
+- **Single-line**: `// comment`
+- **Multi-line**: `/* ... */`
+
+```slint
+// Single line comment
+/*
+   Multi-line comment
+*/
+```
+
+---
+
+## Elements and Components
+- **Elements** → basic building blocks (e.g., `Text`, `Rectangle`).  
+- **Components** → can be built from multiple elements.  
+- Declared as: `ElementName { ... }`
+
+Valid:
+```slint
+Text {}
+Text {
+}
+```
+
+Invalid:
+```slint
+Text {};
+```
+
+
+## The Root Element
+The root element in a `.slint` file must be a **component**.
+
+```slint
+component MyApp {
+    Text {
+        text: "Hello World";
+        font-size: 24px;
+    }
+}
+```
+
+## Properties
+Set with `property-name: value;`.
+
+### Identifiers
+- Letters, numbers, `_`, or `-`.
+- Cannot start with number or `-`.
+- `_` and `-` are considered equivalent (`foo_bar` = `foo-bar`).
+
+
+## Conditional Elements
+Use `if` to create elements conditionally.
+
+```slint
+export component Example inherits Window {
+    preferred-width: 50px;
+    preferred-height: 50px;
+    if area.pressed : foo := Rectangle { background: blue; }
+    if !area.pressed : Rectangle { background: red; }
+    area := TouchArea {}
+}
+```
+
+## Modules (Import/Export)
+By default, components are **private**. Use `export` to make them available in other files.
+
+```slint
+component ButtonHelper inherits Rectangle { }
+component Button inherits Rectangle {
+    ButtonHelper { }
+}
+export { Button }
+```
+
+Rename on export:
+```slint
+component Button inherits Rectangle { }
+export { Button as ColorButton }
+```
+
+Export directly:
+```slint
+export component Button inherits Rectangle { }
+```
+
+Import from other files:
+```slint
+import { Button } from "./button.slint";
+```
+
+Rename on import:
+```slint
+import { Button as CoolButton } from "../theme/button.slint";
+```
+
+## Module Syntax
+### Import
+```slint
+import { MyButton } from "module.slint";
+import { MyButton, MySwitch } from "module.slint";
+import { MyButton as OtherButton } from "module.slint";
+```
+
+### Export
+```slint
+export component MyButton inherits Rectangle { }
+component MySwitch inherits Rectangle { }
+export { MySwitch }
+export { MySwitch as Alias1, MyButton as Alias2 }
+export * from "other_module.slint";
+```