Switch ImagePage to composite template

data/resources.gresource.xml

@@ -2,6 +2,7 @@
 <gresources>
   <gresource prefix="/org/gnome/Tour/">
     <file compressed="true" alias="style.css">resources/style.css</file>
+    <file compressed="true" preprocess="xml-stripblanks" alias="ui/image-page.ui">resources/ui/image-page.ui</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="ui/paginator.ui">resources/ui/paginator.ui</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="ui/window.ui">resources/ui/window.ui</file>
     <file compressed="true" alias="welcome.svg">resources/assets/welcome.svg</file>

data/resources/ui/image-page.ui

+<interface>
+  <template class="ImagePageWidget" parent="GtkWidget">
+    <property name="vexpand">true</property>
+    <property name="hexpand">true</property>
+    <property name="valign">fill</property>
+    <property name="halign">fill</property>
+    <style>
+      <class name="page" />
+    </style>
+    <child>
+      <object class="GtkBox" id="container">
+        <property name="orientation">vertical</property>
+        <property name="spacing">12</property>
+        <property name="valign">center</property>
+        <property name="halign">center</property>
+        <property name="vexpand">true</property>
+        <property name="margin-bottom">48</property>
+        <property name="margin-top">12</property>
+        <property name="margin-start">12</property>
+        <property name="margin-end">12</property>
+        <child>
+          <object class="GtkPicture" id="picture">
+            <property name="can-shrink">false</property>
+            <property name="content-fit">contain</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel" id="head_label">
+            <property name="label" bind-source="ImagePageWidget" bind-property="head" />
+            <property name="valign">center</property>
+            <property name="justify">center</property>
+            <property name="margin-top">36</property>
+            <style>
+              <class name="title-1" />
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label" bind-source="ImagePageWidget" bind-property="body" />
+            <property name="lines">2</property>
+            <property name="wrap">true</property>
+            <property name="valign">center</property>
+            <property name="justify">center</property>
+            <property name="margin-top">12</property>
+            <style>
+              <class name="body" />
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

src/widgets/image_page.rs

@@ -4,12 +4,12 @@ use gtk::subclass::prelude::*;
 
 mod imp {
     use super::*;
-    use glib::{ParamSpec, Properties, Value};
     use gtk::glib::once_cell::sync::OnceCell;
     use std::cell::RefCell;
 
-    #[derive(Debug, Default, Properties)]
+    #[derive(Debug, Default, glib::Properties, gtk::CompositeTemplate)]
     #[properties(wrapper_type = super::ImagePageWidget)]
+    #[template(resource = "/org/gnome/Tour/ui/image-page.ui")]
     pub struct ImagePageWidget {
         #[property(get, set= Self::set_resource_uri, construct_only)]
         pub(super) resource_uri: OnceCell<String>,
@@ -17,101 +17,55 @@ mod imp {
         pub(super) head: OnceCell<String>,
         #[property(get, set, construct)]
         pub(super) body: RefCell<Option<String>>,
-        pub(super) picture: gtk::Picture,
+        #[template_child]
+        pub(super) picture: TemplateChild<gtk::Picture>,
+        #[template_child]
+        pub(super) container: TemplateChild<gtk::Box>,
     }
 
     #[glib::object_subclass]
     impl ObjectSubclass for ImagePageWidget {
         const NAME: &'static str = "ImagePageWidget";
-        type ParentType = gtk::Box;
+        type ParentType = gtk::Widget;
         type Type = super::ImagePageWidget;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.bind_template();
+            klass.set_layout_manager_type::<adw::ClampLayout>();
+        }
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
     }
 
     impl ObjectImpl for ImagePageWidget {
-        fn constructed(&self) {
-            self.parent_constructed();
-            let obj = self.obj();
-            let layout_manager = obj
-                .layout_manager()
-                .and_downcast::<gtk::BoxLayout>()
-                .unwrap();
-            layout_manager.set_orientation(gtk::Orientation::Vertical);
-            obj.add_css_class("page");
-
-            obj.set_hexpand(true);
-            obj.set_vexpand(true);
-            obj.set_halign(gtk::Align::Fill);
-            obj.set_valign(gtk::Align::Fill);
-
-            let container = gtk::Box::builder()
-                .orientation(gtk::Orientation::Vertical)
-                .spacing(12)
-                .halign(gtk::Align::Center)
-                .valign(gtk::Align::Center)
-                .vexpand(true)
-                .margin_bottom(48)
-                .margin_top(12)
-                .margin_start(12)
-                .margin_end(12)
-                .build();
-            let clamp = adw::Clamp::new();
-            clamp.set_child(Some(&container));
-
-            self.picture.set_can_shrink(false);
-            self.picture.set_content_fit(gtk::ContentFit::Contain);
-            container.append(&self.picture);
-
-            let head_label = gtk::Label::builder()
-                .justify(gtk::Justification::Center)
-                .valign(gtk::Align::Center)
-                .margin_top(36)
-                .build();
-            obj.bind_property("head", &head_label, "label")
-                .sync_create()
-                .build();
-
-            head_label.add_css_class("title-1");
-            container.append(&head_label);
-
-            let body_label = gtk::Label::builder()
-                .lines(2)
-                .wrap(true)
-                .justify(gtk::Justification::Center)
-                .valign(gtk::Align::Center)
-                .margin_top(12)
-                .build();
-            obj.bind_property("body", &body_label, "label")
-                .sync_create()
-                .build();
-            container.append(&body_label);
-
-            obj.append(&clamp);
+        fn dispose(&self) {
+            self.container.unparent();
         }
 
-        fn properties() -> &'static [ParamSpec] {
+        fn properties() -> &'static [glib::ParamSpec] {
             Self::derived_properties()
         }
 
-        fn set_property(&self, id: usize, value: &Value, pspec: &ParamSpec) {
+        fn set_property(&self, id: usize, value: &glib::Value, pspec: &glib::ParamSpec) {
             self.derived_set_property(id, value, pspec)
         }
 
-        fn property(&self, id: usize, pspec: &ParamSpec) -> Value {
+        fn property(&self, id: usize, pspec: &glib::ParamSpec) -> glib::Value {
             self.derived_property(id, pspec)
         }
     }
     impl WidgetImpl for ImagePageWidget {}
-    impl BoxImpl for ImagePageWidget {}
 
     impl ImagePageWidget {
         fn set_resource_uri(&self, resource_uri: &str) {
-            self.picture.set_resource(Some(resource_uri));
             self.resource_uri.set(resource_uri.to_owned()).unwrap();
+            self.picture.set_resource(Some(resource_uri));
         }
     }
 }
 
 glib::wrapper! {
     pub struct ImagePageWidget(ObjectSubclass<imp::ImagePageWidget>)
-        @extends gtk::Widget, gtk::Box;
+        @extends gtk::Widget;
 }