adwaita-swift/user-manual/Basics/HelloWorld.md

Hello World

This is a beginner tutorial. We will create a simple "Hello, world!" app using Adwaita.

Create the Swift Package

1. Open your terminal client and navigate to a directory you want to create the package in (e.g. ~/Documents/).
2. Create a new folder for the package using mkdir HelloWorld.
3. Enter the newly created folder using cd HelloWorld.
4. Run swift package init --type executable for creating a new Swift package.
5. Open the Swift package. If you are using GNOME Builder, click on Select a Folder… in the view that appears after opening Builder and open the HelloWorld folder.

Add the Dependency

1. Open the Package.swift file.
2. Add the following line of code after name: "HelloWorld",:

dependencies: [.package(url: "https://github.com/david-swift/Adwaita", from: "0.1.1")],

Create the App

1. Navigate to Sources/main.swift.
2. An app that uses the Adwaita framework has a structure that conforms to the App protocol. The scene property returns one or more windows which provide content for display. An @main attribute marks it as the entry point of the app. Replace print("Hello, world!") by your first app:

import Adwaita

@main
struct HelloWorld: App {

    let id = "io.github.david-swift.HelloWorld"
    var app: GTUIApp!

    var scene: Scene {
        Window(id: "content") { _ in
            Text("Hello, world!")
                .padding()
        }
    }

}

Test the App

1. Run the executable Swift package (in GNOME Builder, press the play button, on the command line, use swift run). You can see that one important component of a window in GNOME is missing: The header bar.

Add a Header Bar

1. If you add another view inside of the Window's body, the views get aligned vertically:

import Adwaita

@main
struct HelloWorld: App {

    let id = "io.github.david-swift.HelloWorld"
    var app: GTUIApp!

    var scene: Scene {
        Window(id: "content") { _ in
            // Add the header bar:
            HeaderBar.empty()
            Text("Hello, world!")
                .padding()
        }
    }

}

2. Run the app.