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

Creating Views

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.0”)],

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. We will later define HelloWindow:

@main
struct HelloWorld: App {

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

    var scene: Scene {
        HelloWindow()
    }

}

Create a View

1. Now, we will define HelloWindow. HelloWindow is a view, that means it conforms to the View protocol. As it additionally is a window, we’ll make it conform to the WindowScene which automatically adds conformance to View.

struct HelloWindow: WindowScene {

    var view: Body {
        Text(“Hello, world!")
            .padding()
    }

}

2. 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.
3. If you add another view inside of the view property of HelloWindow, the views get aligned vertically:

struct HelloWindow: WindowScene {

    var view: Body {
        HeaderBar.empty()
        Text(“Hello, world!")
            .padding()
    }

}