Replace ref with id

Author: frmdstryr

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.9.0
+
+Remove `ref` and just use `id` instead
+
 # 0.8.10
 
 Add slot to support weakref on the Html tag

examples/dataframe_viewer/app.js

@@ -7,7 +7,7 @@ function initViewer(ref) {
     ws.onmessage = function(evt) {
         var change = JSON.parse(evt.data);
         console.log(change);
-        var $tag = $('[ref="'+change.ref+'"]');
+        var $tag = $('#'+change.id);
         change.object = $tag;
 
         if (change.type === 'refresh') {
@@ -17,7 +17,7 @@ function initViewer(ref) {
         } else if (change.type === 'added') {
             $tag.append($(change.value));
         } else if (change.type === 'removed') {
-            $tag.find('[ref="'+change.value+'"]').remove();
+            $tag.find('#'+change.value).remove();
         } else if (change.type === 'update') {
             if (change.name==="text") {
                 var node = $tag.contents().get(0);
@@ -52,7 +52,7 @@ function initViewer(ref) {
 
     function sendNodeValue(){
         sendEvent({
-            'ref':$(this).attr('ref'),
+            'id': this.id,
             'type':'update',
             'name':'value',
             'value':$(this).val(),
@@ -62,14 +62,14 @@ function initViewer(ref) {
     $(document).on('click', '[clickable]',function(e){
         e.preventDefault();
         sendEvent({
-            'ref':$(this).attr('ref'),
+            'id':this.id,
             'type':'event',
             'name':'clicked'
         });
     });
     $(document).on('change', ":checkbox", function(){
         sendEvent({
-        'ref':$(this).attr('ref'),
+        'id':this.id,
         'type':'update',
         'name':'checked',
         'value':($(this).prop('checked'))?'checked':'',
@@ -79,7 +79,7 @@ function initViewer(ref) {
     $(document).on('input', 'input', sendNodeValue);
     $(document).on('change', 'textarea', function() {
         sendEvent({
-            'ref':$(this).attr('ref'),
+            'id':this.id,
             'type':'update',
             'name':'text',
             'value':$(this).val(),

examples/dataframe_viewer/app.py

@@ -4,6 +4,7 @@
 import tornado.web
 import tornado.websocket
 import tornado.ioloop
+from tornado.log import enable_pretty_logging
 from web.core.app import WebApplication
 
 with enaml.imports():
@@ -44,7 +45,7 @@ def get(self):
         )
 
         # Store the viewer in the cache
-        CACHE[viewer.ref] = viewer
+        CACHE[viewer.id] = viewer
 
         self.write(viewer.render())
 
@@ -75,10 +76,10 @@ def on_message(self, message):
         log.debug(f'Update from js: {change}')
 
         # Lookup the node
-        ref = change.get('ref')
+        ref = change.get('id')
         if not ref:
             return
-        nodes = self.viewer.xpath('//*[@ref=$ref]', ref=ref)
+        nodes = self.viewer.xpath('//*[@id=$ref]', ref=ref)
         if not nodes:
             return  # Unknown node
         node = nodes[0]
@@ -109,6 +110,7 @@ def on_close(self):
 
 
 def run():
+    enable_pretty_logging()
     # Needed to create enaml components
     enaml_app = WebApplication()
 
@@ -118,7 +120,7 @@ def run():
         (r'/websocket/', ViewerWebSocket),
         (r'/static/(.*)', tornado.web.StaticFileHandler, {
             'path': os.path.dirname(__file__)}),
-    ])
+    ], debug=True)
     app.listen(8888)
     tornado.ioloop.IOLoop.current().start()
 

examples/dataframe_viewer/viewer.enaml

@@ -23,7 +23,7 @@ enamldef Viewer(Html): viewer:
             $(document).ready(function(){
                 initViewer('%s');
             });
-            '''% viewer.ref
+            '''% viewer.id
 
         Link:
             rel="stylesheet"

setup.py

@@ -7,7 +7,7 @@
 
 setup(
     name='enaml-web',
-    version='0.8.10',
+    version='0.9.0',
     author='CodeLV',
     author_email='[email protected]',
     url='https://github.com/codelv/enaml-web',

web/components/html.py

@@ -39,9 +39,6 @@ class Tag(ToolkitObject):
     #: Object ID
     id = d_(Unicode())
 
-    #: Object ID
-    ref = d_(Unicode())
-
     #: Tag name
     tag = d_(Unicode()).tag(attr=False)
 
@@ -88,7 +85,7 @@ class Tag(ToolkitObject):
     #: Event triggered when a drop occurs
     dropped = d_(Event(ToolkitObject))
 
-    def _default_ref(self):
+    def _default_id(self):
         return '%0x' % id(self)
 
     @observe('id', 'tag', 'cls', 'style', 'text', 'tail', 'alt', 'attrs',
@@ -111,7 +108,7 @@ def _update_proxy(self, change):
             else:
                 self.proxy.set_attribute(name, value)
             self._notify_modified({
-                'ref': self.ref,
+                'id': self.id,
                 'type': t,
                 'name': name,
                 'value': value
@@ -137,7 +134,7 @@ def child_added(self, child):
         super(Tag, self).child_added(child)
         if isinstance(child, Tag) and self.proxy_is_active:
             change = {
-                'ref': self.ref,
+                'id': self.id,
                 'type': 'added',
                 'name': 'children',
                 'value': child.render().decode()
@@ -149,7 +146,7 @@ def child_added(self, child):
             while i < len(children):
                 c = children[i]
                 if isinstance(c, Tag):  # Ignore pattern nodes
-                    change['before'] = c.ref
+                    change['before'] = c.id
                     break
                 else:
                     i += 1
@@ -161,10 +158,10 @@ def child_moved(self, child):
         if isinstance(child, Tag) and self.proxy_is_active:
             if self.proxy.child_moved(child.proxy):
                 change = {
-                    'ref': self.ref,
+                    'id': self.id,
                     'type': 'moved',
                     'name': 'children',
-                    'value': child.ref
+                    'value': child.id
                 }
 
                 # Indicate where it was moved to
@@ -173,7 +170,7 @@ def child_moved(self, child):
                 while i < len(children):
                     c = children[i]
                     if isinstance(c, Tag):  # Ignore pattern nodes
-                        change['before'] = c.ref
+                        change['before'] = c.id
                         break
                     else:
                         i += 1
@@ -189,10 +186,10 @@ def child_removed(self, child):
         super(Tag, self).child_removed(child)
         if isinstance(child, Tag) and self.proxy_is_active:
             self._notify_modified({
-                'ref': self.ref,
+                'id': self.id,
                 'type': 'removed',
                 'name': 'children',
-                'value': child.ref,
+                'value': child.id,
             })
 
     # =========================================================================
@@ -728,7 +725,7 @@ class Select(Tag):
     value = d_(Unicode())
 
     def _default_name(self):
-        return u'{}'.format(self.ref)
+        return u'{}'.format(self.id)
 
     @observe('name', 'value')
     def _update_proxy(self, change):
@@ -771,7 +768,7 @@ class Input(Tag):
     value = d_(Value())
 
     def _default_name(self):
-        return u'{}'.format(self.ref)
+        return u'{}'.format(self.id)
 
     @observe('name', 'type', 'disabled', 'checked', 'value', 'placeholder')
     def _update_proxy(self, change):
@@ -787,7 +784,7 @@ class Textarea(Tag):
     cols = d_(Unicode())
 
     def _default_name(self):
-        return u'{}'.format(self.ref)
+        return u'{}'.format(self.id)
 
     @observe('name', 'rows', 'cols')
     def _update_proxy(self, change):
@@ -803,7 +800,7 @@ class Button(Tag):
     value = d_(Unicode('1'))
 
     def _default_name(self):
-        return u'{}'.format(self.ref)
+        return u'{}'.format(self.id)
 
     @observe('type')
     def _update_proxy(self, change):

web/impl/lxml_toolkit_object.py

@@ -16,7 +16,7 @@
 from web.core.app import WebApplication
 
 
-#: Components are cached for lookup by ref
+#: Components are cached for lookup by id
 CACHE = {}
 
 
@@ -53,9 +53,8 @@ def init_widget(self):
         d = self.declaration
 
         #: Save ref id
-        ref = d.ref
-        CACHE[ref] = atomref(self)
-        widget.set('ref', ref)
+        CACHE[d.id] = atomref(self)
+        widget.set('id', d.id)
 
         if d.text:
             self.set_text(d.text)
@@ -67,8 +66,6 @@ def init_widget(self):
             self.set_cls(d.cls)
         if d.attrs:
             self.set_attrs(d.attrs)
-        if d.id:
-            widget.set('id', d.id)
         if d.draggable:
             self.set_draggable(d.draggable)
 
@@ -145,7 +142,7 @@ def destroy(self):
 
             d = self.declaration
             try:
-                del CACHE[d.ref]
+                del CACHE[d.id]
             except KeyError:
                 pass
         super(WebComponent, self).destroy()
@@ -221,7 +218,7 @@ def xpath(self, query, **kwargs):
             return []
         matches = []
         for node in nodes:
-            aref = CACHE.get(node.attrib.get('ref'))
+            aref = CACHE.get(node.attrib.get('id'))
             obj = aref() if aref else None
             if obj is None:
                 continue