[gnome-characters/wip/template: 6/6] Switch to widget template
- From: Daiki Ueno <dueno src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-characters/wip/template: 6/6] Switch to widget template
- Date: Wed, 26 Nov 2014 02:33:17 +0000 (UTC)
commit 05e1efe00ad7a6c2476ecaf99c0c90d722da5dd2
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]
