How to add Adw.HeaderBar in Adw.ApplicationWindow?

I’ve created this simple Application using, Adw.Application and Adw.ApplicationWindow in Vala.

public class Application : Adw.Application {
	public Application() {
		Object(
			application_id: "com.github.username.application",
			flags: ApplicationFlags.FLAGS_NONE
		);
	}
	
	protected override void activate() {
		var window = new Adw.ApplicationWindow(this);
		window.title = "Terminal";
		window.default_width = 600;
		window.default_height = 400;
		
		window.present();
	}
}

int main(string[] args) {
	var app = new Application();
	return app.run(args);
}

This returns a beautiful window without HeaderBar. Now, I would like to add this Adw.HeaderBar. How can I add this? In future, also plan to toggle the HeaderBar.

There’s an example in docs.

So, consider the XML mentioned in doc you mentioned, following is correct in Vala or wrong?

public class Application : Adw.Application {
	public Application() {
		Object(
			application_id: "com.github.username.application",
			flags: ApplicationFlags.FLAGS_NONE
		);
	}
	
	protected override void activate() {
		var window = new Adw.ApplicationWindow(this);
		window.title = "Terminal";
		window.default_width = 600;
		window.default_height = 400;
		
		var headerBar = new Adw.HeaderBar();
		
		var box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
		box.append(headerBar);
		
		window.set_content(box);
		window.present();
	}
}

int main(string[] args) {
	var app = new Application();
	return app.run(args);
}

I used a GtkHeaderBar instead of AdwHeaderBar, but sure. Though really does GtkWindow not work for you here? It’s not like you have to use every widget that starts with Adw :wink: