[gnome-maps/wip/template-layerspopover] WIP: Template of layers-popover

[Mattias Bengtsson <mattiasb src gnome org>]

commit d74359997baa98771e67aba3091c4cc3a58c4b92
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Tue Oct 28 00:48:27 2014 +0100

    WIP: Template of layers-popover

 src/layers-popover.ui |   93 ++++++++++++++++++++++++++----------------------
 src/layersPopover.js  |   21 ++++++-----
 2 files changed, 62 insertions(+), 52 deletions(-)
---
diff --git a/src/layers-popover.ui b/src/layers-popover.ui
index c90f241..e1df4ce 100644
--- a/src/layers-popover.ui
+++ b/src/layers-popover.ui
@@ -1,59 +1,66 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <!-- interface-requires gtk+ 3.10 -->
-  <object class="GtkGrid" id="grid">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="halign">center</property>
-    <property name="valign">center</property>
-    <property name="row_spacing">5</property>
+  <template class="LayersPopover" parent="GtkPopover">
+    <property name="visible">False</property>
+    <property name="no_show_all">True</property>
+    <property name="width_request">200</property>
     <child>
-      <object class="GtkRadioButton" id="street-layer-button">
+      <object class="GtkGrid">
         <property name="visible">True</property>
-        <property name="can-focus">True</property>
-        <property name="action-name">win.map-type</property>
-        <property name="action-target">"STREET"</property>
-        <property name="draw-indicator">False</property>
-        <style>
-          <class name="layer-radio-button"/>
-        </style>
+        <property name="can_focus">False</property>
+        <property name="halign">center</property>
+        <property name="valign">center</property>
+        <property name="row_spacing">5</property>
         <child>
-          <object class="GtkImage" id="street-layer-image">
+          <object class="GtkRadioButton" id="street-layer-button">
             <property name="visible">True</property>
-            <property name="pixbuf">maptype-street.png</property>
+            <property name="can-focus">True</property>
+            <property name="action-name">win.map-type</property>
+            <property name="action-target">"STREET"</property>
+            <property name="draw-indicator">False</property>
+            <style>
+              <class name="layer-radio-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="street-layer-image">
+                <property name="visible">True</property>
+                <property name="pixbuf">maptype-street.png</property>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
         </child>
-      </object>
-      <packing>
-        <property name="left-attach">0</property>
-        <property name="top-attach">0</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkRadioButton" id="aerial-layer-button">
-        <property name="visible">True</property>
-        <property name="can-focus">True</property>
-        <property name="action-name">win.map-type</property>
-        <property name="action-target">"AERIAL"</property>
-        <property name="draw-indicator">False</property>
-        <style>
-          <class name="layer-radio-button"/>
-        </style>
         <child>
-          <object class="GtkImage" id="aerial-layer-image">
+          <object class="GtkRadioButton" id="aerial-layer-button">
             <property name="visible">True</property>
-            <property name="pixbuf">maptype-aerial.png</property>
+            <property name="can-focus">True</property>
+            <property name="action-name">win.map-type</property>
+            <property name="action-target">"AERIAL"</property>
+            <property name="draw-indicator">False</property>
+            <style>
+              <class name="layer-radio-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="aerial-layer-image">
+                <property name="visible">True</property>
+                <property name="pixbuf">maptype-aerial.png</property>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">1</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
         </child>
       </object>
-      <packing>
-        <property name="left-attach">0</property>
-        <property name="top-attach">1</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
     </child>
-  </object>
+  </template>
 </interface>
diff --git a/src/layersPopover.js b/src/layersPopover.js
index 5055a6c..aa6c7b7 100644
--- a/src/layersPopover.js
+++ b/src/layersPopover.js
@@ -26,19 +26,22 @@ const Utils = imports.utils;
 const LayersPopover = new Lang.Class({
     Name: 'LayersPopover',
     Extends: Gtk.Popover,
+    Template: "resource:///org/gnome/maps/layers-popover.ui",
+    Children: [ 'street-layer-button',
+                'aerial-layer-button' ],
 
+    get _streetLayerButton() {
+        return this.get_template_child(LayersPopover, 'street-layer-button');
+    },
+    get _aerialLayerButton() {
+        return this.get_template_child(LayersPopover, 'aerial-layer-button');
+    },
+    
     _init: function() {
-        let ui = Utils.getUIObject('layers-popover', [ 'grid',
-                                                       'street-layer-button',
-                                                       'aerial-layer-button' ]);
+        this.parent();
 
-        this.parent({ width_request: 200,
-                      no_show_all: true,
-                      visible: false });
-
-        ui.aerialLayerButton.join_group(ui.streetLayerButton);
+        this._aerialLayerButton.join_group(this._streetLayerButton);
 
         this.get_style_context().add_class('maps-popover');
-        this.add(ui.grid);
     }
 });