[gnome-characters/wip/template: 15/15] Switch to widget template



commit e827db6a5c73f373d7abf184cec70d7fb1894570
Author: Daiki Ueno <dueno src gnome org>
Date:   Wed Nov 19 17:15:11 2014 +0900

    Switch to widget template

 data/character.ui  |  160 +++++++++++++++++++++++++++-------------------------
 data/mainview.ui   |   93 +++++++++++++++++-------------
 data/mainwindow.ui |   88 +++++++++++++++-------------
 src/character.js   |   45 ++++++---------
 src/window.js      |   52 ++++++-----------
 5 files changed, 221 insertions(+), 217 deletions(-)
---
diff --git a/data/character.ui b/data/character.ui
index 6e54cdc..784f206 100644
--- a/data/character.ui
+++ b/data/character.ui
@@ -1,93 +1,101 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk+" version="3.12"/>
-  <object class="GtkStack" id="main-stack">
-    <property name="visible">True</property>
-    <child>
-      <object class="GtkGrid" id="character-grid">
-       <property name="visible">True</property>
-       <property name="can_focus">False</property>
-       <property name="halign">center</property>
-       <property name="valign">center</property>
-       <property name="border_width">5</property>
-       <property name="orientation">vertical</property>
-       <property name="row_spacing">50</property>
+  <template class="Gjs_CharacterDialog" parent="GtkDialog">
+    <child internal-child="vbox">
+      <object class="GtkBox" id="vbox1">
        <child>
-         <object class="GtkLabel" id="character-label">
+         <object class="GtkStack" id="main-stack">
            <property name="visible">True</property>
-           <property name="can_focus">False</property>
-           <property name="ellipsize">end</property>
-           <property name="halign">center</property>
-           <property name="valign">center</property>
-           <style>
-             <class name="character-label"/>
-           </style>
-         </object>
-         <packing>
-           <property name="left_attach">0</property>
-           <property name="top_attach">0</property>
-         </packing>
-       </child>
-       <child>
-         <object class="GtkButton" id="copy-button">
-           <property name="label" translatable="yes">Copy Character</property>
-           <property name="visible">True</property>
-           <property name="can_focus">True</property>
-           <property name="receives_default">False</property>
-         </object>
-         <packing>
-           <property name="left_attach">0</property>
-           <property name="top_attach">1</property>
-         </packing>
-       </child>
-       <child>
-         <object class="GtkLabel" id="detail-label">
-           <property name="visible">True</property>
-           <property name="can_focus">False</property>
-           <property name="halign">center</property>
-           <style>
-             <class name="detail-label"/>
-           </style>
-         </object>
-         <packing>
-           <property name="left_attach">0</property>
-           <property name="top_attach">2</property>
-         </packing>
-       </child>
-      </object>
-      <packing>
-       <property name="name">character</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkScrolledWindow" id="related-scrolled">
-       <property name="visible">True</property>
-       <property name="can_focus">False</property>
-       <property name="margin_start">6</property>
-       <property name="margin_end">6</property>
-       <property name="margin_top">6</property>
-       <property name="margin_bottom">6</property>
-       <property name="hscrollbar_policy">never</property>
-       <style>
-         <class name="related"/>
-       </style>
-       <child>
-         <object class="GtkViewport" id="related-viewport">
            <child>
-             <object class="GtkListBox" id="related-listbox">
+             <object class="GtkGrid" id="character-grid">
+               <property name="visible">True</property>
+               <property name="can_focus">False</property>
+               <property name="halign">center</property>
+               <property name="valign">center</property>
+               <property name="border_width">5</property>
+               <property name="orientation">vertical</property>
+               <property name="row_spacing">50</property>
+               <child>
+                 <object class="GtkLabel" id="character-label">
+                   <property name="visible">True</property>
+                   <property name="can_focus">False</property>
+                   <property name="ellipsize">end</property>
+                   <property name="halign">center</property>
+                   <property name="valign">center</property>
+                   <style>
+                     <class name="character-label"/>
+                   </style>
+                 </object>
+                 <packing>
+                   <property name="left_attach">0</property>
+                   <property name="top_attach">0</property>
+                 </packing>
+               </child>
+               <child>
+                 <object class="GtkButton" id="copy-button">
+                   <property name="label" translatable="yes">Copy Character</property>
+                   <property name="visible">True</property>
+                   <property name="can_focus">True</property>
+                   <property name="receives_default">False</property>
+                 </object>
+                 <packing>
+                   <property name="left_attach">0</property>
+                   <property name="top_attach">1</property>
+                 </packing>
+               </child>
+               <child>
+                 <object class="GtkLabel" id="detail-label">
+                   <property name="visible">True</property>
+                   <property name="can_focus">False</property>
+                   <property name="halign">center</property>
+                   <style>
+                     <class name="detail-label"/>
+                   </style>
+                 </object>
+                 <packing>
+                   <property name="left_attach">0</property>
+                   <property name="top_attach">2</property>
+                 </packing>
+               </child>
+             </object>
+             <packing>
+               <property name="name">character</property>
+             </packing>
+           </child>
+           <child>
+             <object class="GtkScrolledWindow" id="related-scrolled">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
+               <property name="margin_start">6</property>
+               <property name="margin_end">6</property>
+               <property name="margin_top">6</property>
+               <property name="margin_bottom">6</property>
+               <property name="hscrollbar_policy">never</property>
+               <style>
+                 <class name="related"/>
+               </style>
                <child>
-                 <placeholder/>
+                 <object class="GtkViewport" id="related-viewport">
+                   <child>
+                     <object class="GtkListBox" id="related-listbox">
+                       <property name="visible">True</property>
+                       <property name="can_focus">False</property>
+                       <child>
+                         <placeholder/>
+                       </child>
+                     </object>
+                   </child>
+                 </object>
                </child>
              </object>
+             <packing>
+               <property name="name">related</property>
+             </packing>
            </child>
          </object>
        </child>
       </object>
-      <packing>
-       <property name="name">related</property>
-      </packing>
     </child>
-  </object>
+  </template>
 </interface>
diff --git a/data/mainview.ui b/data/mainview.ui
index f19057d..b08a0e0 100644
--- a/data/mainview.ui
+++ b/data/mainview.ui
@@ -1,59 +1,72 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk+" version="3.12"/>
-  <object class="GtkGrid" id="search-banner-grid">
-    <property name="can_focus">False</property>
+  <template class="Gjs_MainView" parent="GtkStack">
     <property name="visible">True</property>
-    <property name="orientation">horizontal</property>
-    <property name="halign">center</property>
-    <property name="valign">center</property>
-    <style>
-      <class name="banner"/>
-    </style>
     <child>
-      <object class="GtkImage" id="search-banner-image">
+      <object class="GtkGrid" id="search-banner-grid">
        <property name="can_focus">False</property>
        <property name="visible">True</property>
-       <property name="icon_name">edit-find-symbolic</property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkLabel" id="search-banner-label">
-       <property name="can_focus">False</property>
-       <property name="visible">True</property>
-       <property name="label" translatable="yes">Type to Search</property>
+       <property name="orientation">horizontal</property>
+       <property name="halign">center</property>
+       <property name="valign">center</property>
        <style>
-         <class name="banner-label"/>
+         <class name="banner"/>
        </style>
+       <child>
+         <object class="GtkImage" id="search-banner-image">
+           <property name="can_focus">False</property>
+           <property name="visible">True</property>
+           <property name="icon_name">edit-find-symbolic</property>
+         </object>
+       </child>
+       <child>
+         <object class="GtkLabel" id="search-banner-label">
+           <property name="can_focus">False</property>
+           <property name="visible">True</property>
+           <property name="label" translatable="yes">Type to Search</property>
+           <style>
+             <class name="banner-label"/>
+           </style>
+         </object>
+       </child>
       </object>
-    </child>
-  </object>
-  <object class="GtkGrid" id="loading-banner-grid">
-    <property name="can_focus">False</property>
-    <property name="visible">True</property>
-    <property name="orientation">horizontal</property>
-    <property name="halign">center</property>
-    <property name="valign">center</property>
-    <style>
-      <class name="banner"/>
-    </style>
-    <child>
-      <object class="GtkSpinner" id="loading-banner-spinner">
-       <property name="can_focus">False</property>
-       <property name="visible">True</property>
-       <property name="width-request">128</property>
-       <property name="height-request">128</property>
-      </object>
+      <packing>
+       <property name="name">search-banner</property>
+      </packing>
     </child>
     <child>
-      <object class="GtkLabel" id="loading-banner-label">
+      <object class="GtkGrid" id="loading-banner-grid">
        <property name="can_focus">False</property>
        <property name="visible">True</property>
-       <property name="label" translatable="yes">Loading...</property>
+       <property name="orientation">horizontal</property>
+       <property name="halign">center</property>
+       <property name="valign">center</property>
        <style>
-         <class name="banner-label"/>
+         <class name="banner"/>
        </style>
+       <child>
+         <object class="GtkSpinner" id="loading-banner-spinner">
+           <property name="can_focus">False</property>
+           <property name="visible">True</property>
+           <property name="width-request">128</property>
+           <property name="height-request">128</property>
+         </object>
+       </child>
+       <child>
+         <object class="GtkLabel" id="loading-banner-label">
+           <property name="can_focus">False</property>
+           <property name="visible">True</property>
+           <property name="label" translatable="yes">Loading...</property>
+           <style>
+             <class name="banner-label"/>
+           </style>
+         </object>
+       </child>
       </object>
+      <packing>
+       <property name="name">loading-banner</property>
+      </packing>
     </child>
-  </object>
+  </template>
 </interface>
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index 65f80cc..4452d46 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -1,66 +1,72 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk+" version="3.12"/>
-  <object class="GtkHeaderBar" id="main-headerbar">
-    <property name="can_focus">False</property>
-    <property name="visible">True</property>
-    <property name="show-close-button">True</property>
-    <property name="title" translatable="yes">Current page</property>
-    <child>
-      <object class="GtkToggleButton" id="search-active-button">
-       <property name="can_focus">True</property>
+  <template class="Gjs_MainWindow" parent="GtkApplicationWindow">
+    <child type="titlebar">
+      <object class="GtkHeaderBar" id="main-headerbar">
+       <property name="can_focus">False</property>
        <property name="visible">True</property>
-       <style>
-         <class name="image-button"/>
-       </style>
+       <property name="show-close-button">True</property>
+       <property name="title" translatable="yes">Current page</property>
        <child>
-         <object class="GtkImage" id="search-button-image">
-           <property name="visible">True</property>
-           <property name="icon-name">edit-find-symbolic</property>
+         <object class="GtkToggleButton" id="search-active-button">
+            <property name="can_focus">True</property>
+            <property name="visible">True</property>
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="search-button-image">
+               <property name="visible">True</property>
+               <property name="icon-name">edit-find-symbolic</property>
+              </object>
+            </child>
          </object>
+         <packing>
+            <property name="pack-type">start</property>
+         </packing>
        </child>
       </object>
-      <packing>
-       <property name="pack-type">start</property>
-      </packing>
     </child>
-  </object>
-  <object class="GtkGrid" id="main-grid">
-    <property name="can_focus">False</property>
-    <property name="visible">True</property>
-    <property name="orientation">vertical</property>
     <child>
-      <object class="GtkSearchBar" id="search-bar">
+      <object class="GtkGrid" id="main-grid">
+       <property name="can_focus">False</property>
        <property name="visible">True</property>
-       <property name="hexpand">True</property>
+       <property name="orientation">vertical</property>
        <child>
-         <object class="GtkSearchEntry" id="search-entry">
-           <property name="can_focus">True</property>
-           <property name="width-request">500</property>
-           <property name="halign">center</property>
+         <object class="GtkSearchBar" id="search-bar">
+           <property name="visible">True</property>
+           <property name="hexpand">True</property>
+           <child>
+             <object class="GtkSearchEntry" id="search-entry">
+               <property name="can_focus">True</property>
+               <property name="width-request">500</property>
+               <property name="halign">center</property>
+             </object>
+           </child>
          </object>
        </child>
-      </object>
-    </child>
-    <child>
-      <object class="GtkBox" id="main-hbox">
-       <property name="can_focus">False</property>
-       <property name="visible">True</property>
-       <property name="orientation">horizontal</property>
        <child>
-         <object class="GtkGrid" id="sidebar-grid">
+         <object class="GtkBox" id="main-hbox">
            <property name="can_focus">False</property>
            <property name="visible">True</property>
-           <property name="orientation">vertical</property>
+           <property name="orientation">horizontal</property>
+           <child>
+             <object class="GtkGrid" id="sidebar-grid">
+               <property name="can_focus">False</property>
+               <property name="visible">True</property>
+               <property name="orientation">vertical</property>
+               <child>
+                 <placeholder/>
+               </child>
+             </object>
+           </child>
            <child>
              <placeholder/>
            </child>
          </object>
        </child>
-       <child>
-         <placeholder/>
-       </child>
       </object>
     </child>
-  </object>
+  </template>
 </interface>
diff --git a/src/character.js b/src/character.js
index d593ec8..66f440b 100644
--- a/src/character.js
+++ b/src/character.js
@@ -30,6 +30,9 @@ const Util = imports.util;
 const CharacterDialog = new Lang.Class({
     Name: 'CharacterDialog',
     Extends: Gtk.Dialog,
+    Template: 'resource:///org/gnome/Characters/character.ui',
+    InternalChildren: ['main-stack', 'character-label', 'detail-label',
+                       'copy-button', 'related-listbox'],
     Properties: {
         'font': GObject.ParamSpec.string(
             'font', '', '',
@@ -47,9 +50,9 @@ const CharacterDialog = new Lang.Class({
 
         this._font = v;
         let description = Pango.FontDescription.from_string(this._font);
-        this._characterLabel.override_font(description);
+        this._character_label.override_font(description);
 
-        let children = this._relatedList.get_children();
+        let children = this._related_listbox.get_children();
         for (let index in children) {
             let label = children[index].get_children()[0];
             label.override_font(description);
@@ -65,20 +68,10 @@ const CharacterDialog = new Lang.Class({
 
         this._cancellable = new Gio.Cancellable();
 
-        let builder = new Gtk.Builder();
-        builder.add_from_resource('/org/gnome/Characters/character.ui');
-        this._stack = builder.get_object('main-stack')
-        this.get_content_area().add(this._stack);
+        this._copy_button.connect('clicked', Lang.bind(this, this._copyCharacter));
 
-        this._characterLabel = builder.get_object('character-label');
-        this._detailLabel = builder.get_object('detail-label');
-
-        let copyButton = builder.get_object('copy-button');
-        copyButton.connect('clicked', Lang.bind(this, this._copyCharacter));
-
-        this._relatedList = builder.get_object('related-listbox');
-        this._relatedList.connect('row-selected',
-                                  Lang.bind(this, this._handleRowSelected));
+        this._related_listbox.connect('row-selected',
+                                      Lang.bind(this, this._handleRowSelected));
 
         this._relatedButton = new Gtk.ToggleButton({ label: _("See Also") });
         this.add_action_widget(this._relatedButton, Gtk.ResponseType.HELP);
@@ -87,10 +80,10 @@ const CharacterDialog = new Lang.Class({
         this._relatedButton.connect(
             'toggled',
             Lang.bind(this, function() {
-                if (this._stack.visible_child_name == 'character')
-                    this._stack.visible_child_name = 'related';
+                if (this._main_stack.visible_child_name == 'character')
+                    this._main_stack.visible_child_name = 'related';
                 else
-                    this._stack.visible_child_name = 'character';
+                    this._main_stack.visible_child_name = 'character';
             }));
 
         Main.settings.bind('font', this, 'font',
@@ -124,26 +117,26 @@ const CharacterDialog = new Lang.Class({
             row.add(hbox);
             row.show_all();
 
-            this._relatedList.add(row);
+            this._related_listbox.add(row);
         }
 
         this._relatedButton.visible =
-            this._relatedList.get_children().length > 0;
+            this._related_listbox.get_children().length > 0;
     },
 
     _setCharacter: function(uc) {
         this._character = uc;
 
         this._character = this._character;
-        this._characterLabel.label = this._character;
+        this._character_label.label = this._character;
 
         let codePoint = this._character.charCodeAt(0);
         let codePointHex = codePoint.toString(16).toUpperCase();
-        this._detailLabel.label = _("Unicode U+%04s").format(codePointHex);
+        this._detail_label.label = _("Unicode U+%04s").format(codePointHex);
 
-        let children = this._relatedList.get_children();
+        let children = this._related_listbox.get_children();
         for (let index in children)
-            this._relatedList.remove(children[index]);
+            this._related_listbox.remove(children[index]);
 
         this._cancellable.cancel();
         this._cancellable.reset();
@@ -161,8 +154,8 @@ const CharacterDialog = new Lang.Class({
             }));
 
         this._relatedButton.active = false;
-        this._stack.visible_child_name = 'character';
-        this._stack.show_all();
+        this._main_stack.visible_child_name = 'character';
+        this._main_stack.show_all();
 
         let headerBar = this.get_header_bar();
         let name = Gc.character_name(this._character);
diff --git a/src/window.js b/src/window.js
index 94cc43e..8df0fac 100644
--- a/src/window.js
+++ b/src/window.js
@@ -44,6 +44,10 @@ const MAX_SEARCH_RESULTS = 100;
 const MainWindow = new Lang.Class({
     Name: 'MainWindow',
     Extends: Gtk.ApplicationWindow,
+    Template: 'resource:///org/gnome/Characters/mainwindow.ui',
+    InternalChildren: ['main-headerbar', 'search-active-button',
+                       'search-bar', 'search-entry',
+                       'main-grid', 'main-hbox', 'sidebar-grid'],
     Properties: {
         'search-active': GObject.ParamSpec.boolean(
             'search-active', '', '',
@@ -74,39 +78,24 @@ const MainWindow = new Lang.Class({
                             activate: this._character,
                             parameter_type: new GLib.VariantType('s') }]);
 
-        let builder = new Gtk.Builder();
-        builder.add_from_resource('/org/gnome/Characters/mainwindow.ui');
-
-        this._headerBar = builder.get_object('main-headerbar');
-        this.set_titlebar(this._headerBar);
-
-        let searchBtn = builder.get_object('search-active-button');
-        this.bind_property('search-active', searchBtn, 'active',
+        this.bind_property('search-active', this._search_active_button, 'active',
                            GObject.BindingFlags.SYNC_CREATE |
                            GObject.BindingFlags.BIDIRECTIONAL);
-        this._searchBar = builder.get_object('search-bar');
         this.bind_property('search-active',
-                           this._searchBar,
+                           this._search_bar,
                            'search-mode-enabled',
                            GObject.BindingFlags.SYNC_CREATE |
                            GObject.BindingFlags.BIDIRECTIONAL);
-        let searchEntry = builder.get_object('search-entry');
-        this._searchBar.connect_entry(searchEntry);
-        searchEntry.connect('search-changed',
-                            Lang.bind(this, this._handleSearchChanged));
+        this._search_bar.connect_entry(this._search_entry);
+        this._search_entry.connect('search-changed',
+                                   Lang.bind(this, this._handleSearchChanged));
 
-        let grid = builder.get_object('main-grid');
-
-        let sidebarGrid = builder.get_object('sidebar-grid');
         this._categoryList = new CategoryList.CategoryListWidget();
-        sidebarGrid.add(this._categoryList);
+        this._sidebar_grid.add(this._categoryList);
 
-        let hbox = builder.get_object('main-hbox');
         this._mainView = new MainView();
-        hbox.pack_start(this._mainView, true, true, 0);
-
-        this.add(grid);
-        grid.show_all();
+        this._main_hbox.pack_start(this._mainView, true, true, 0);
+        this._main_grid.show_all();
 
         // Due to limitations of gobject-introspection wrt GdkEvent
         // and GdkEventKey, this needs to be a signal handler
@@ -140,7 +129,7 @@ const MainWindow = new Lang.Class({
     },
 
     _handleKeyPress: function(self, event) {
-        return this._searchBar.handle_event(event);
+        return this._search_bar.handle_event(event);
     },
 
     _about: function() {
@@ -176,7 +165,7 @@ const MainWindow = new Lang.Class({
 
         Util.assertNotEqual(category, null);
         this._mainView.setPage(category.name);
-        this._headerBar.title = Gettext.gettext(category.label);
+        this._main_headerbar.title = Gettext.gettext(category.label);
     },
 
     _character: function(action, v) {
@@ -188,6 +177,8 @@ const MainWindow = new Lang.Class({
 const MainView = new Lang.Class({
     Name: 'MainView',
     Extends: Gtk.Stack,
+    Template: 'resource:///org/gnome/Characters/mainview.ui',
+    InternalChildren: ['loading-banner-spinner'],
 
     _init: function(params) {
         params = Params.fill(params, { hexpand: true, vexpand: true });
@@ -213,13 +204,6 @@ const MainView = new Lang.Class({
                        'search-result');
         this._characterListWidgets['search-result'] = characterList;
 
-        let builder = new Gtk.Builder();
-        builder.add_from_resource('/org/gnome/Characters/mainview.ui');
-        let searchBannerGrid = builder.get_object('search-banner-grid');
-        this.add_named(searchBannerGrid, 'search-banner');
-        let loadingBannerGrid = builder.get_object('loading-banner-grid');
-        this._spinner = builder.get_object('loading-banner-spinner');
-        this.add_named(loadingBannerGrid, 'loading-banner');
         this._spinnerTimeoutId = 0;
 
         this._recentCharacters = [];
@@ -256,7 +240,7 @@ const MainView = new Lang.Class({
         this._spinnerTimeoutId =
             GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000,
                              Lang.bind(this, function () {
-                                 this._spinner.start();
+                                 this._loading_banner_spinner.start();
                                  this.visible_child_name = 'loading-banner';
                                  this.show_all();
                              }));
@@ -266,7 +250,7 @@ const MainView = new Lang.Class({
         if (this._spinnerTimeoutId > 0) {
             GLib.source_remove(this._spinnerTimeoutId);
             this._spinnerTimeoutId = 0;
-            this._spinner.stop();
+            this._loading_banner_spinner.stop();
         }
 
         let characters = [];


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]