[gnome-characters/wip/template] Switch to widget template
- From: Daiki Ueno <dueno src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-characters/wip/template] Switch to widget template
- Date: Wed, 19 Nov 2014 09:17:05 +0000 (UTC)
commit 85e2e2a05731cb5d277dfe9c5bedf53d118b7d5d
Author: Daiki Ueno <dueno src gnome org>
Date: Wed Nov 19 17:15:11 2014 +0900
Switch to widget template
data/character.ui | 162 ++++++++++++++------------
data/main.ui | 104 ----------------
data/mainview.ui | 72 ++++++++++++
data/mainwindow.ui | 72 ++++++++++++
data/org.gnome.Characters.data.gresource.xml | 4 +-
data/sidebar.ui | 12 --
src/character.js | 45 +++----
src/window.js | 55 +++------
8 files changed, 268 insertions(+), 258 deletions(-)
---
diff --git a/data/character.ui b/data/character.ui
index 8286fb8..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">
- <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">
+ <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>
+ <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="GtkListBox" id="related-listbox">
+ <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
new file mode 100644
index 0000000..b08a0e0
--- /dev/null
+++ b/data/mainview.ui
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk+" version="3.12"/>
+ <template class="Gjs_MainView" parent="GtkStack">
+ <property name="visible">True</property>
+ <child>
+ <object class="GtkGrid" id="search-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="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>
+ <packing>
+ <property name="name">search-banner</property>
+ </packing>
+ </child>
+ <child>
+ <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>
+ </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>
+ </template>
+</interface>
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
new file mode 100644
index 0000000..4452d46
--- /dev/null
+++ b/data/mainwindow.ui
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk+" version="3.12"/>
+ <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>
+ <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>
+ <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>
+ </child>
+ <child>
+ <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">
+ <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>
+ <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">
+ <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>
+ </object>
+ </child>
+ </template>
+</interface>
diff --git a/data/org.gnome.Characters.data.gresource.xml b/data/org.gnome.Characters.data.gresource.xml
index 729e149..41136b5 100644
--- a/data/org.gnome.Characters.data.gresource.xml
+++ b/data/org.gnome.Characters.data.gresource.xml
@@ -2,8 +2,8 @@
<gresources>
<gresource prefix="/org/gnome/Characters">
<file preprocess="xml-stripblanks">app-menu.ui</file>
- <file preprocess="xml-stripblanks">main.ui</file>
- <file preprocess="xml-stripblanks">sidebar.ui</file>
+ <file preprocess="xml-stripblanks">mainwindow.ui</file>
+ <file preprocess="xml-stripblanks">mainview.ui</file>
<file preprocess="xml-stripblanks">character.ui</file>
<file>application.css</file>
</gresource>
diff --git a/src/character.js b/src/character.js
index 9a86687..75edf41 100644
--- a/src/character.js
+++ b/src/character.js
@@ -12,6 +12,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', '', '',
@@ -29,9 +32,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);
@@ -47,20 +50,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._doneButton = this.add_button(_("Done"), Gtk.ResponseType.CLOSE);
this._doneButton.get_style_context().add_class(
@@ -73,10 +66,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',
@@ -110,26 +103,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();
@@ -147,8 +140,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 af00130..22f28a4 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,43 +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/main.ui');
- builder.add_from_resource('/org/gnome/Characters/sidebar.ui');
-
- this._headerBar = builder.get_object('main-header');
- 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));
-
- let grid = builder.get_object('main-grid');
- let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL });
+ this._search_bar.connect_entry(this._search_entry);
+ this._search_entry.connect('search-changed',
+ Lang.bind(this, this._handleSearchChanged));
- let sidebarGrid = builder.get_object('sidebar-grid');
this._categoryList = new CategoryList.CategoryListWidget();
- sidebarGrid.add(this._categoryList);
- hbox.pack_start(sidebarGrid, false, false, 2);
+ this._sidebar_grid.add(this._categoryList);
this._mainView = new MainView();
- hbox.pack_start(this._mainView, true, true, 0);
-
- grid.add(hbox);
-
- 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
@@ -180,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) {
@@ -192,6 +177,9 @@ const MainWindow = new Lang.Class({
const MainView = new Lang.Class({
Name: 'MainView',
Extends: Gtk.Stack,
+ Template: 'resource:///org/gnome/Characters/mainview.ui',
+ InternalChildren: ['search-banner-grid', 'loading-banner-grid',
+ 'loading-banner-spinner'],
_init: function(params) {
params = Params.fill(params, { hexpand: true, vexpand: true });
@@ -217,13 +205,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/main.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 = [];
@@ -260,7 +241,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();
}));
@@ -270,7 +251,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]
