[gnome-weather/wip/cdavis/ui-tweaks: 2/7] window: Use composite template for main window

[Christopher Davis <christopherdavis src gnome org>]

commit acfc81537f6bfec205dc396b0512920beeb5622f
Author: Christopher Davis <christopherdavis gnome org>
Date:   Fri Feb 12 04:38:54 2021 -0800

    window: Use composite template for main window

 data/window.ui    | 271 +++++++++++++++++++++++++++++-------------------------
 src/app/window.js |  35 ++-----
 2 files changed, 152 insertions(+), 154 deletions(-)
---
diff --git a/data/window.ui b/data/window.ui
index 24218b9..1ac4471 100644
--- a/data/window.ui
+++ b/data/window.ui
@@ -2,163 +2,182 @@
 <!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.10"/>
-  <object class="GtkBox" id="main-box">
+  <menu id="primary-menu">
+    <submenu>
+      <attribute translatable="yes" name="label">_Temperature Unit</attribute>
+      <item>
+        <attribute translatable="yes" name="label">_Celsius</attribute>
+        <attribute name="action">app.temperature-unit</attribute>
+        <attribute name="target">centigrade</attribute>
+      </item>
+      <item>
+        <attribute translatable="yes" name="label">_Fahrenheit</attribute>
+        <attribute name="action">app.temperature-unit</attribute>
+        <attribute name="target">fahrenheit</attribute>
+      </item>
+    </submenu>
+    <section>
+      <item>
+        <attribute name="action">win.about</attribute>
+        <attribute name="label" translatable="yes">_About Weather</attribute>
+      </item>
+    </section>
+  </menu>
+  <template class="Gjs_MainWindow" parent="HdyApplicationWindow">
     <property name="visible">True</property>
-    <property name="orientation">vertical</property>
     <child>
-      <object class="HdyHeaderBar" id="header-bar">
+      <object class="GtkBox">
         <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="vexpand">False</property>
-        <property name="show_close_button">True</property>
-        <property name="centering_policy">strict</property>
-        <child>
-          <object class="GtkButton" id="refresh-button">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">False</property>
-            <property name="valign">center</property>
-            <property name="action_name">win.refresh</property>
-            <child>
-              <object class="GtkImage" id="refresh-button-image">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon_name">view-refresh-symbolic</property>
-                <property name="icon_size">1</property>
-              </object>
-            </child>
-            <child internal-child="accessible">
-              <object class="AtkObject" id="refresh-button-atkobject">
-                <property name="AtkObject::accessible-name" translatable="yes">Refresh</property>
-              </object>
-            </child>
-            <style>
-              <class name="image-button"/>
-            </style>
-          </object>
-        </child>
-       <child type="title">
-         <object class="HdyViewSwitcherTitle" id="switcher-title">
-           <property name="visible">True</property>
-           <property name="title" translatable="yes">Weather</property>
-         </object>
-       </child>
-        <child>
-          <object class="GtkMenuButton" id="primary-menu-button">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">False</property>
-            <property name="valign">center</property>
-            <child>
-              <object class="GtkImage" id="primary-menu-img">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon_name">open-menu-symbolic</property>
-                <property name="icon_size">1</property>
-              </object>
-            </child>
-            <style>
-              <class name="image-button"/>
-            </style>
-          </object>
-          <packing>
-            <property name="pack_type">end</property>
-          </packing>
-        </child>
-      </object>
-    </child>
-    <child>
-      <object class="GtkGrid" id="main-panel">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
         <property name="orientation">vertical</property>
         <child>
-          <object class="GtkStack" id="main-stack">
+          <object class="HdyHeaderBar" id="header">
+            <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="transition_type">crossfade</property>
+            <property name="vexpand">False</property>
+            <property name="show_close_button">True</property>
+            <property name="centering_policy">strict</property>
             <child>
-              <object class="GtkGrid" id="initial-grid">
-                <property name="name">initial-grid</property>
+              <object class="GtkButton" id="refresh">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">center</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
                 <property name="valign">center</property>
-                <property name="margin_top">25</property>
-                <property name="margin_bottom">25</property>
-                <property name="vexpand">False</property>
-                <property name="orientation">vertical</property>
-                <property name="row_homogeneous">True</property>
+                <property name="action_name">win.refresh</property>
                 <child>
-                  <object class="GtkImage" id="mark-location-image">
+                  <object class="GtkImage" id="refresh-button-image">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <property name="vexpand">False</property>
-                    <property name="icon_name">mark-location-symbolic</property>
-                    <property name="use_fallback">True</property>
-                    <property name="icon_size">6</property>
+                    <property name="icon_name">view-refresh-symbolic</property>
+                  </object>
+                </child>
+                <child internal-child="accessible">
+                  <object class="AtkObject" id="refresh-button-atkobject">
+                    <property name="AtkObject::accessible-name" translatable="yes">Refresh</property>
                   </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">0</property>
-                  </packing>
                 </child>
+              </object>
+            </child>
+           <child type="title">
+             <object class="HdyViewSwitcherTitle" id="forecastStackSwitcher">
+               <property name="visible">True</property>
+               <property name="title" translatable="yes">Weather</property>
+             </object>
+           </child>
+            <child>
+              <object class="GtkMenuButton" id="primary-menu-button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="valign">center</property>
+                <property name="menu_model">primary-menu</property>
                 <child>
-                  <object class="GtkLabel" id="search-location-label">
+                  <object class="GtkImage" id="primary-menu-img">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <property name="vexpand">False</property>
-                    <property name="label" translatable="yes">Search for a location</property>
+                    <property name="icon_name">open-menu-symbolic</property>
                   </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">1</property>
-                  </packing>
                 </child>
+              </object>
+              <packing>
+                <property name="pack_type">end</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkGrid">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkStack" id="stack">
+                <property name="can_focus">False</property>
+                <property name="transition_type">crossfade</property>
                 <child>
-                  <object class="GtkLabel" id="search-nereby-location-label">
+                  <object class="GtkGrid" id="searchView">
+                    <property name="name">initial-grid</property>
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="halign">center</property>
                     <property name="valign">center</property>
+                    <property name="margin_top">25</property>
+                    <property name="margin_bottom">25</property>
                     <property name="vexpand">False</property>
-                    <property name="wrap">True</property>
-                    <property name="label" translatable="yes">To see weather information, enter the name of 
a city.</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">2</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GWeatherLocationEntry" id="initial-grid-location-entry">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="activates_default">True</property>
+                    <property name="orientation">vertical</property>
+                    <property name="row_homogeneous">True</property>
+                    <child>
+                      <object class="GtkImage" id="mark-location-image">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="vexpand">False</property>
+                        <property name="icon_name">mark-location-symbolic</property>
+                        <property name="use_fallback">True</property>
+                        <property name="icon_size">6</property>
+                      </object>
+                      <packing>
+                        <property name="left_attach">0</property>
+                        <property name="top_attach">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="search-location-label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="vexpand">False</property>
+                        <property name="label" translatable="yes">Search for a location</property>
+                      </object>
+                      <packing>
+                        <property name="left_attach">0</property>
+                        <property name="top_attach">1</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="search-nereby-location-label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="vexpand">False</property>
+                        <property name="wrap">True</property>
+                        <property name="label" translatable="yes">To see weather information, enter the name 
of a city.</property>
+                      </object>
+                      <packing>
+                        <property name="left_attach">0</property>
+                        <property name="top_attach">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GWeatherLocationEntry" id="searchEntry">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="activates_default">True</property>
+                      </object>
+                      <packing>
+                        <property name="left_attach">0</property>
+                        <property name="top_attach">3</property>
+                      </packing>
+                    </child>
                   </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">3</property>
-                  </packing>
                 </child>
               </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">0</property>
+              </packing>
             </child>
           </object>
-          <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">0</property>
-          </packing>
+        </child>
+        <child>
+          <object class="HdyViewSwitcherBar" id="forecastStackSwitcherBar">
+            <property name="visible">True</property>
+            <property name="reveal" bind-source="forecastStackSwitcher" bind-property="title-visible" 
bind-flags="sync-create" />
+          </object>
         </child>
       </object>
     </child>
-    <child>
-      <object class="HdyViewSwitcherBar" id="switcher-bar">
-        <property name="visible">True</property>
-        <property name="reveal" bind-source="switcher-title" bind-property="title-visible" 
bind-flags="sync-create" />
-      </object>
-    </child>
-  </object>
+  </template>
 </interface>
diff --git a/src/app/window.js b/src/app/window.js
index 0843091..545bfba 100644
--- a/src/app/window.js
+++ b/src/app/window.js
@@ -33,8 +33,11 @@ const Page = {
     CITY: 1
 };
 
-var MainWindow = GObject.registerClass(
-    class MainWindow extends Handy.ApplicationWindow {
+var MainWindow = GObject.registerClass({
+    Template: 'resource:///org/gnome/Weather/window.ui',
+    InternalChildren: ['header', 'refresh', 'forecastStackSwitcher', 'stack',
+                       'searchView', 'searchEntry', 'forecastStackSwitcherBar']
+}, class MainWindow extends Handy.ApplicationWindow {
 
     _init(params) {
         super._init(params);
@@ -67,51 +70,26 @@ var MainWindow = GObject.registerClass(
         refreshAction.connect('activate', () => this.update());
         this.add_action(refreshAction);
 
-        let builder = new Gtk.Builder();
-        builder.add_from_resource('/org/gnome/Weather/window.ui');
-        builder.add_from_resource('/org/gnome/Weather/primary-menu.ui');
-
-        let grid = builder.get_object('main-panel');
-        this._header = builder.get_object('header-bar');
         this._header.set_title(_('Select Location'));
 
         this._model = this.application.model;
 
-        this._searchView = builder.get_object('initial-grid');
-
-        this._searchEntry = builder.get_object('initial-grid-location-entry');
         this._searchEntry.connect('notify::location', (entry) => {
             this._searchLocationChanged(entry);
         });
 
-        let refresh = builder.get_object('refresh-button');
-        this._pageWidgets[Page.CITY].push(refresh);
-
-        let primaryMenuModel = builder.get_object('primary-menu');
-        let primaryMenuButton = builder.get_object('primary-menu-button');
-        let popover = Gtk.Popover.new_from_model(primaryMenuButton, primaryMenuModel);
-
-        primaryMenuButton.set_popover(popover);
-
-        this._stack = builder.get_object('main-stack');
+        this._pageWidgets[Page.CITY].push(this._refresh);
 
         this._cityView = new City.WeatherView(this.application, this,
                                               { hexpand: true, vexpand: true });
         this._stack.add(this._cityView);
 
-        this._forecastStackSwitcher = builder.get_object('switcher-title');
         this._forecastStackSwitcher.set_stack(this._cityView.getInfoPage().getForecastStack());
 
-        this._forecastStackSwitcherBar = builder.get_object('switcher-bar');
         this._forecastStackSwitcherBar.set_stack(this._cityView.getInfoPage().getForecastStack());
 
         this._stack.set_visible_child(this._searchView);
 
-        let box = builder.get_object('main-box');
-
-        this.add(box);
-        box.show_all();
-
         for (let i = 0; i < this._pageWidgets[Page.CITY].length; i++)
             this._pageWidgets[Page.CITY][i].hide();
 
@@ -121,6 +99,7 @@ var MainWindow = GObject.registerClass(
         }
 
         this._showingDefault = false;
+        this.show_all();
     }
 
     update() {