EuroScipy 2015 demo.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This is the demo that I used during the EuroScipy 2015 talk on Flexx."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# flexx.webruntime"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Launch a web runtime. Can be a browser or something that looks like a desktop app."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from flexx.webruntime import launch\n",
    "rt = launch('http://flexx.rtfd.org', 'xul', title='Test title')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# flexx.pyscript"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flexx.pyscript import py2js"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "var square;\n",
      "square = function (x) {return Math.pow(x, 2);};\n"
     ]
    }
   ],
   "source": [
    "print(py2js('square = lambda x: x**2'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "var foo;\n",
      "foo = function (n) {\n",
      "    var i, res;\n",
      "    res = [];\n",
      "    for (i = 0; i < n; i += 1) {\n",
      "        (res.append || res.push).apply(res, [Math.pow(i, 2)]);\n",
      "    }\n",
      "    return res;\n",
      "};\n",
      "\n"
     ]
    }
   ],
   "source": [
    "def foo(n):\n",
    "    res = []\n",
    "    for i in range(n):\n",
    "        res.append(i**2)\n",
    "    return res\n",
    "print(py2js(foo))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "var foo;\n",
      "foo = function (n) {\n",
      "    return (function list_comprehenson () {var res = [];var i, iter0, i0;iter0 = (function (start, end, step) {var i, res = []; for (i=start; i<end; i+=step) {res.push(i);} return res;})(0, n, 1);if ((typeof iter0 === \"object\") && (!Array.isArray(iter0))) {iter0 = Object.keys(iter0);}for (i0=0; i0<iter0.length; i0++) {i = iter0[i0];{res.push(Math.pow(i, 2));}}return res;}).apply(this);\n",
      "};\n",
      "\n"
     ]
    }
   ],
   "source": [
    "def foo(n):\n",
    "    return [i**2 for i in range(n)]\n",
    "print(py2js(foo))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# flexx.react"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Reactive programming uses signals to communicate between different components of an app, and provides easy ways to react to changes in the values of these signals.\n",
    "\n",
    "\n",
    "The API for flexx.react consists of a few decorators to turn functions into signals. One signal is the input signal."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flexx import react"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "@react.input\n",
    "def name(n='john doe'):\n",
    "    if not isinstance(n, str):\n",
    "        raise ValueError('Name must be a string')\n",
    "    return n.capitalize()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<InputSignal 'name' with value 'John doe' at 0x7f7888143f98>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "name"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "hello John doe\n"
     ]
    }
   ],
   "source": [
    "@react.connect('name')\n",
    "def greet(n):\n",
    "    print('hello %s' % n)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "hello Almar klein\n"
     ]
    }
   ],
   "source": [
    "name(\"almar klein\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A signal can have multiple upstream signals."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "@react.connect('first_name', 'last_name')\n",
    "def greet(first, last):\n",
    "    print('hello %s %s!' % (first, last))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "*Dynamism* provides great flexibility"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "class Person(react.HasSignals):\n",
    "    \n",
    "    @react.input\n",
    "    def father(f):\n",
    "        assert isinstance(f, Person)\n",
    "        return f\n",
    "\n",
    "    @react.connect('father.last_name')\n",
    "    def last_name(s):\n",
    "        return s\n",
    "    \n",
    "    @react.connect('children.*.name')\n",
    "    def child_names(*names):\n",
    "        return ', '.join(name)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# flexx.app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Serving apps at http://localhost:54307/\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<i>Injecting Flexx JS and CSS</i><style>\n",
       "\n",
       ".output_subarea.output_javascript { padding: 0px; }\n",
       "\n",
       "</style>\n",
       "<script>\n",
       "window.flexx_session_id = '7f788814d208';\n",
       "\n",
       "\n",
       "\"use strict\";\n",
       "\n",
       "var FlexxJS;\n",
       "var _truthy = function (v) {if (v === null || typeof v !== \"object\") {return v;} else if (v.length !== undefined) {return v.length ? v : false;} else if (v.byteLength !== undefined) {return v.byteLength ? v : false;} else {return Object.getOwnPropertyNames(v).length ? v : false;}};\n",
       "FlexxJS = function () {\n",
       "    // JavaScript Flexx module. This provides the connection between\n",
       "    // the Python and JS (via a websocket).\n",
       "    if (this.__init__) {\n",
       "       this.__init__.apply(this, arguments);\n",
       "    }\n",
       "};\n",
       "FlexxJS.prototype._base_class = Object;\n",
       "\n",
       "\n",
       "FlexxJS.prototype.__init__ = function () {\n",
       "    this.ws = null;\n",
       "    this.last_msg = null;\n",
       "    this.is_notebook = false;\n",
       "    this.ws_url = 'ws://' + location.hostname + ':' + location.port + '/' + location.pathname + '/ws';\n",
       "    this.is_exported = false;\n",
       "    this.classes = {};\n",
       "    this.instances = {};\n",
       "    if ((((typeof(window) === 'undefined')) && ((typeof(module) === 'object')))) {\n",
       "        this._global = root;\n",
       "        this.nodejs = true;\n",
       "        root.setTimeout(this.init, 1);\n",
       "        process.on('exit', this.exit, false);\n",
       "        process.on('SIGINT', this.exit, false);\n",
       "        root.setTimeout(this.exit, 10000000);\n",
       "    } else {\n",
       "        this._global = window;\n",
       "        window.addEventListener('load', this.init, false);\n",
       "        window.addEventListener('beforeunload', this.exit, false);\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "FlexxJS.prototype.init = function () {\n",
       "    // Called after document is loaded.\n",
       "    if (_truthy(flexx.is_exported)) {\n",
       "        flexx.runExportedApp();\n",
       "    } else if ((_truthy(flexx.is_notebook) && ((!(_truthy(window.IPython) && _truthy(window.IPython.notebook) && _truthy(window.IPython.notebook.session)))))) {\n",
       "        console.log('Flexx: hey, I am in an exported notebook!');\n",
       "    } else {\n",
       "        flexx.initSocket();\n",
       "        flexx.initLogging();\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "FlexxJS.prototype.exit = function () {\n",
       "    // Called when runtime is about to quit.\n",
       "    if (_truthy(this.ws)) {\n",
       "        this.ws.close();\n",
       "        this.ws = null;\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "FlexxJS.prototype.get = function (id) {\n",
       "    // Get instance of a Model class.\n",
       "    if ((id == 'body')) {\n",
       "        return document.body;\n",
       "    } else {\n",
       "        return this.instances[id];\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "FlexxJS.prototype.initSocket = function () {\n",
       "    var WebSocket, err_3, err_4, on_ws_close, on_ws_error, on_ws_message, on_ws_open, ws;\n",
       "    // Make the connection to Python.\n",
       "    if (_truthy(this.nodejs)) {\n",
       "        try {\n",
       "            WebSocket = require('ws');\n",
       "        } catch(err_3) {\n",
       "            {\n",
       "                throw \"FAIL: you need to 'npm install -g ws'.\";\n",
       "            }\n",
       "        }\n",
       "    } else {\n",
       "        WebSocket = window.WebSocket;\n",
       "        if ((window.WebSocket === undefined)) {\n",
       "            document.body.innerHTML = 'This browser does not support WebSockets';\n",
       "            throw 'FAIL: need websocket';\n",
       "        }\n",
       "    }\n",
       "    this.ws = ws = new WebSocket(flexx.ws_url);\n",
       "    ws.binaryType = 'arraybuffer';\n",
       "    on_ws_open = function (evt) {\n",
       "        console.info('Socket connected');\n",
       "        ws.send('hiflexx ' + window.flexx_session_id);\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    on_ws_message = function (evt) {\n",
       "        var msg;\n",
       "        flexx.last_msg = _truthy(evt.data) || _truthy(evt);\n",
       "        msg = flexx.decodeUtf8(flexx.last_msg);\n",
       "        flexx.command(msg);\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    on_ws_close = function (evt) {\n",
       "        var msg;\n",
       "        this.ws = null;\n",
       "        msg = 'Lost connection with server';\n",
       "        if ((_truthy(evt) && _truthy(evt.reason))) {\n",
       "            msg += ': ' + evt.reason + ' (' + evt.code + ')';\n",
       "        }\n",
       "        if ((((!_truthy(flexx.is_notebook))) && ((!_truthy(this.nodejs))))) {\n",
       "            document.body.innerHTML = msg;\n",
       "        } else {\n",
       "            console.info(msg);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    on_ws_error = function (evt) {\n",
       "        this.ws = null;\n",
       "        console.error('Socket error');\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    if (_truthy(this.nodejs)) {\n",
       "        ws.on('open', on_ws_open);\n",
       "        ws.on('message', on_ws_message);\n",
       "        ws.on('close', on_ws_close);\n",
       "        ws.on('error', on_ws_error);\n",
       "    } else {\n",
       "        ws.onopen = on_ws_open;\n",
       "        ws.onmessage = on_ws_message;\n",
       "        ws.onclose = on_ws_close;\n",
       "        ws.onerror = on_ws_error;\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "FlexxJS.prototype.initLogging = function () {\n",
       "    var error, info, log, on_error, warn;\n",
       "    // Setup logging so that messages are proxied to Python.\n",
       "    if (_truthy(console.ori_log)) {\n",
       "        return null;\n",
       "    }\n",
       "    console.ori_log = console.log;\n",
       "    console.ori_info = _truthy(console.info) || _truthy(console.log);\n",
       "    console.ori_warn = _truthy(console.warn) || _truthy(console.log);\n",
       "    console.ori_error = _truthy(console.error) || _truthy(console.log);\n",
       "    log = function (msg) {\n",
       "        console.ori_log(msg);\n",
       "        if ((flexx.ws !== null)) {\n",
       "            flexx.ws.send('PRINT ' + msg);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    info = function (msg) {\n",
       "        console.ori_info(msg);\n",
       "        if ((flexx.ws !== null)) {\n",
       "            flexx.ws.send('INFO ' + msg);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    warn = function (msg) {\n",
       "        console.ori_warn(msg);\n",
       "        if ((flexx.ws !== null)) {\n",
       "            flexx.ws.send('WARN ' + msg);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    error = function (msg) {\n",
       "        console.ori_error(msg);\n",
       "        if ((flexx.ws !== null)) {\n",
       "            flexx.ws.send('ERROR ' + msg);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    on_error = function (evt) {\n",
       "        var msg;\n",
       "        msg = evt;\n",
       "        if ((_truthy(evt.message) && _truthy(evt.lineno))) {\n",
       "            msg = 'On line ' + evt.lineno + ' in ' + evt.filename + ':\\n' + evt.message + '';\n",
       "        } else if (_truthy(evt.stack)) {\n",
       "            msg = evt.stack;\n",
       "        }\n",
       "        if ((flexx.ws !== null)) {\n",
       "            flexx.ws.send('ERROR ' + msg);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    console.log = log;\n",
       "    console.info = info;\n",
       "    console.warn = warn;\n",
       "    console.error = error;\n",
       "    if (_truthy(this.nodejs)) {\n",
       "        process.on('uncaughtException', on_error, false);\n",
       "    } else {\n",
       "        window.addEventListener('error', on_error, false);\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "FlexxJS.prototype.command = function (msg) {\n",
       "    var el, link;\n",
       "    // Execute a command received from the server.\n",
       "    if ((msg.indexOf('PRINT ') == 0)) {\n",
       "        console.ori_log(msg.slice(6));\n",
       "    } else if ((msg.indexOf('EVAL ') == 0)) {\n",
       "        this._global._ = eval(msg.slice(5));\n",
       "        flexx.ws.send('RET ' + this._global._);\n",
       "    } else if ((msg.indexOf('EXEC ') == 0)) {\n",
       "        eval(msg.slice(5));\n",
       "    } else if ((msg.indexOf('DEFINE-JS ') == 0)) {\n",
       "        eval(msg.slice(10));\n",
       "    } else if ((msg.indexOf('DEFINE-CSS ') == 0)) {\n",
       "        el = document.createElement('style');\n",
       "        el.type = 'text/css';\n",
       "        el.innerHTML = msg.slice(11);\n",
       "        document.body.appendChild(el);\n",
       "    } else if ((msg.indexOf('TITLE ') == 0)) {\n",
       "        if ((!_truthy(this.nodejs))) {\n",
       "            document.title = msg.slice(6);\n",
       "        }\n",
       "    } else if ((msg.indexOf('ICON ') == 0)) {\n",
       "        if ((!_truthy(this.nodejs))) {\n",
       "            link = document.createElement('link');\n",
       "            link.rel = 'icon';\n",
       "            link.href = msg.slice(5);\n",
       "            document.head.appendChild(link);\n",
       "        }\n",
       "    } else if ((msg.indexOf('OPEN ') == 0)) {\n",
       "        window.win1 = window.open(msg.slice(5), 'new', 'chrome');\n",
       "    } else {\n",
       "        console.warn(('Invalid command: \"' + msg) + '\"');\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "FlexxJS.prototype.decodeUtf8 = function (arrayBuffer) {\n",
       "    var result = \"\",\n",
       "            i = 0,\n",
       "            c = 0,\n",
       "            c1 = 0,\n",
       "            c2 = 0,\n",
       "            c3 = 0,\n",
       "            data = new Uint8Array(arrayBuffer);\n",
       "    \n",
       "        // If we have a BOM skip it\n",
       "        if (data.length >= 3 && data[0] === 0xef && data[1] === 0xbb && data[2] === 0xbf) {\n",
       "            i = 3;\n",
       "        }\n",
       "    \n",
       "        while (i < data.length) {\n",
       "            c = data[i];\n",
       "    \n",
       "            if (c < 128) {\n",
       "                result += String.fromCharCode(c);\n",
       "                i += 1;\n",
       "            } else if (c > 191 && c < 224) {\n",
       "                if (i + 1 >= data.length) {\n",
       "                    throw \"UTF-8 Decode failed. Two byte character was truncated.\";\n",
       "                }\n",
       "                c2 = data[i + 1];\n",
       "                result += String.fromCharCode(((c & 31) << 6) | (c2 & 63));\n",
       "                i += 2;\n",
       "            } else {\n",
       "                if (i + 2 >= data.length) {\n",
       "                    throw \"UTF-8 Decode failed. Multi byte character was truncated.\";\n",
       "                }\n",
       "                c2 = data[i + 1];\n",
       "                c3 = data[i + 2];\n",
       "                result += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));\n",
       "                i += 3;\n",
       "            }\n",
       "        }\n",
       "        return result;\n",
       "};\n",
       "\n",
       "var flexx = new FlexxJS();\n",
       "\n",
       "\n",
       "flexx.Serializer = function () {\n",
       "    if (this.__init__) {\n",
       "       this.__init__.apply(this, arguments);\n",
       "    }\n",
       "};\n",
       "flexx.Serializer.prototype._base_class = Object;\n",
       "\n",
       "\n",
       "flexx.Serializer.prototype.__init__ = function () {\n",
       "    var _replacer, _reviver, _revivers, add_reviver, loads, saves;\n",
       "    this._revivers = _revivers = {};\n",
       "    loads = function (text) {\n",
       "        return JSON.parse(text, _reviver);\n",
       "    };\n",
       "\n",
       "    saves = function (obj) {\n",
       "        return JSON.stringify(obj, _replacer);\n",
       "    };\n",
       "\n",
       "    add_reviver = function (type_name, func) {\n",
       "        if (!(({}).toString.call(type_name).match(/\\s([a-zA-Z]+)/)[1].toLowerCase() === 'string')) {throw \"AssertionError: ({}).toString.call(type_name).match(/\\s([a-zA-Z]+)/)[1].toLowerCase() === 'string'\";}\n",
       "        _revivers[type_name] = func;\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    _reviver = function (dct, val) {\n",
       "        var dummy1_, func, type;\n",
       "        val = (val === undefined) ? undefined: val;\n",
       "        if ((val !== undefined)) {\n",
       "            dct = val;\n",
       "        }\n",
       "        if ((({}).toString.call(dct).match(/\\s([a-zA-Z]+)/)[1].toLowerCase() === 'object')) {\n",
       "            type = (/*py-dict.get*/typeof dct.get===\"function\" ? dct.get('__type__', null) : (dct['__type__'] || null));\n",
       "            if ((type !== null)) {\n",
       "                func = (/*py-dict.get*/typeof (dummy1_=_revivers).get===\"function\" ? dummy1_.get(type, null) : (dummy1_[type] || null));\n",
       "                if ((func !== null)) {\n",
       "                    return func(dct);\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "        return dct;\n",
       "    };\n",
       "\n",
       "    _replacer = function (obj, val) {\n",
       "        var err_5;\n",
       "        val = (val === undefined) ? undefined: val;\n",
       "        if ((val === undefined)) {\n",
       "            try {\n",
       "                return obj.__json__();\n",
       "            } catch(err_4) {\n",
       "                if (err_4 instanceof Error && err_4.name === \"AttributeError\") {\n",
       "                    err_5 = new Error('TypeError:' + ('Cannot serialize object to JSON: ' + JSON.stringify(obj) + '')); err_5.name = \"TypeError\"; throw err_5;\n",
       "                }\n",
       "            }\n",
       "        } else {\n",
       "            if (((val !== null) && _truthy(val.__json__))) {\n",
       "                return val.__json__();\n",
       "            }\n",
       "            return val;\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    this.loads = loads;\n",
       "    this.saves = saves;\n",
       "    this.add_reviver = add_reviver;\n",
       "    return null;\n",
       "};\n",
       "\n",
       "\n",
       "flexx.serializer = new flexx.Serializer();\n",
       "flexx.classes.HasSignals = function () {\n",
       "    // An implementation of the HasSignals class in PyScript. It has\n",
       "    // some boilerplate code to create signal objects in JavaScript, but\n",
       "    // otherwise shares most of the code with the Python signal classes\n",
       "    // by transpiling their methods via PyScript. This ensures that the\n",
       "    // Python and JS implementation of this reactive programming system\n",
       "    // have the same API and behave the same.\n",
       "    // \n",
       "    // The Python version of this class has a ``JSCODE`` attribute that\n",
       "    // contains the auto-generated JavaScript for this class.\n",
       "    if (this.__init__) {\n",
       "       this.__init__.apply(this, arguments);\n",
       "    }\n",
       "};\n",
       "flexx.classes.HasSignals.prototype._base_class = Object;\n",
       "\n",
       "\n",
       "flexx.classes.HasSignals.prototype.__signals__ = [];\n",
       "flexx.classes.HasSignals.prototype.__init__ = function () {\n",
       "    this._create_signals();\n",
       "    this.connect_signals(false);\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._signal_changed = function (signal) {\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype.connect_signals = function (raise_on_fail) {\n",
       "    var connected, dummy1_, dummy2_sequence, dummy3_iter, name, s, success;\n",
       "    raise_on_fail = (raise_on_fail === undefined) ? true: raise_on_fail;\n",
       "    success = true;\n",
       "    dummy2_sequence = this.__signals__;\n",
       "    if ((typeof dummy2_sequence === \"object\") && (!Array.isArray(dummy2_sequence))) {\n",
       "        dummy2_sequence = Object.keys(dummy2_sequence);\n",
       "    }\n",
       "    for (dummy3_iter = 0; dummy3_iter < dummy2_sequence.length; dummy3_iter += 1) {\n",
       "        name = dummy2_sequence[dummy3_iter];\n",
       "        if (_truthy(((dummy1_ = this.__props__).indexOf ? dummy1_ : Object.keys(dummy1_)).indexOf(name) >= 0)) {\n",
       "            continue;\n",
       "        }\n",
       "        s = this[name];\n",
       "        if (_truthy(s.not_connected)) {\n",
       "            connected = s.connect(raise_on_fail);\n",
       "            success = _truthy(success) && _truthy(connected);\n",
       "        }\n",
       "    }\n",
       "    return success;\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_property = function (obj, name, private_name, initial) {\n",
       "    var getter, opts, setter;\n",
       "    getter = function () {\n",
       "        return obj[private_name];\n",
       "    };\n",
       "\n",
       "    setter = function () {\n",
       "        var err_2;\n",
       "        err_2 = new Error('ValueError:' + (name + ' is not settable')); err_2.name = \"ValueError\"; throw err_2;\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    obj[private_name] = initial;\n",
       "    opts = {'enumerable': true, 'configurable': false, 'get': getter, 'set': setter};\n",
       "    Object.defineProperty(obj, name, opts);\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_signals = function () {\n",
       "    var creator, dummy4_sequence, dummy5_iter, func, name, signal;\n",
       "    this.__props__ = [];\n",
       "    dummy4_sequence = this.__signals__;\n",
       "    if ((typeof dummy4_sequence === \"object\") && (!Array.isArray(dummy4_sequence))) {\n",
       "        dummy4_sequence = Object.keys(dummy4_sequence);\n",
       "    }\n",
       "    for (dummy5_iter = 0; dummy5_iter < dummy4_sequence.length; dummy5_iter += 1) {\n",
       "        name = dummy4_sequence[dummy5_iter];\n",
       "        func = this[('_' + name) + '_func'];\n",
       "        func._name = name;\n",
       "        creator = this['_create_' + func._signal_type];\n",
       "        signal = creator.call(this, func, func._upstream);\n",
       "        signal.flags = func.flags;\n",
       "        signal.signal_type = func._signal_type;\n",
       "        this._create_property(this, name, ('_' + name) + '_signal', signal);\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_PySignal = function (func, upstream, selff) {\n",
       "    return this._create_SourceSignal(func, upstream, selff);\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_PyInputSignal = function (func, upstream, selff) {\n",
       "    return this._create_InputSignal(func, upstream, selff);\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_SourceSignal = function (func, upstream, selff) {\n",
       "    selff = this._create_Signal(func, upstream, selff);\n",
       "    selff._update_value = function () {\n",
       "        var args, dummy1_sequence, dummy2_iter, ok, s, value;\n",
       "        if ((this._timestamp == 0)) {\n",
       "            ok = false;\n",
       "            try {\n",
       "                value = this._call_func();\n",
       "                ok = value !== undefined;\n",
       "            } catch(err_4) {\n",
       "                {\n",
       "                }\n",
       "            }\n",
       "            if (_truthy(ok)) {\n",
       "                this._set_value(value);\n",
       "                return null;\n",
       "            } else {\n",
       "                this._status = 2;\n",
       "                this._last_timestamp = this._timestamp;\n",
       "                this._timestamp = 1;\n",
       "            }\n",
       "        }\n",
       "        if (this._upstream.length) {\n",
       "            args = [this._value];\n",
       "            dummy1_sequence = this._upstream;\n",
       "            if ((typeof dummy1_sequence === \"object\") && (!Array.isArray(dummy1_sequence))) {\n",
       "                dummy1_sequence = Object.keys(dummy1_sequence);\n",
       "            }\n",
       "            for (dummy2_iter = 0; dummy2_iter < dummy1_sequence.length; dummy2_iter += 1) {\n",
       "                s = dummy1_sequence[dummy2_iter];\n",
       "                (args.append || args.push).apply(args, [s()]);\n",
       "            }\n",
       "            value = this._call_func.apply(this, args);\n",
       "            this._set_value(value);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    selff._set = function (value) {\n",
       "        var dummy1_sequence, dummy2_iter, dummy3_sequence, dummy4_iter, signal;\n",
       "        if (_truthy(this._is_being_set)) {\n",
       "            return null;\n",
       "        }\n",
       "        this._is_being_set = true;\n",
       "        try {\n",
       "            value = this._call_func(value);\n",
       "            this._set_value(value);\n",
       "            if ((value === undefined)) {\n",
       "                return null;\n",
       "            }\n",
       "            dummy1_sequence = this._downstream_reconnect.slice(0);\n",
       "            if ((typeof dummy1_sequence === \"object\") && (!Array.isArray(dummy1_sequence))) {\n",
       "                dummy1_sequence = Object.keys(dummy1_sequence);\n",
       "            }\n",
       "            for (dummy2_iter = 0; dummy2_iter < dummy1_sequence.length; dummy2_iter += 1) {\n",
       "                signal = dummy1_sequence[dummy2_iter];\n",
       "                signal.connect(false);\n",
       "            }\n",
       "            dummy3_sequence = this._downstream;\n",
       "            if ((typeof dummy3_sequence === \"object\") && (!Array.isArray(dummy3_sequence))) {\n",
       "                dummy3_sequence = Object.keys(dummy3_sequence);\n",
       "            }\n",
       "            for (dummy4_iter = 0; dummy4_iter < dummy3_sequence.length; dummy4_iter += 1) {\n",
       "                signal = dummy3_sequence[dummy4_iter];\n",
       "                signal._set_status(1, this);\n",
       "            }\n",
       "        } finally {\n",
       "            this._is_being_set = false;\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    return selff;\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_InputSignal = function (func, upstream) {\n",
       "    var selff;\n",
       "    selff = function () {\n",
       "        var args, err_3;\n",
       "        args = Array.prototype.slice.call(arguments);\n",
       "        if ((!args.length)) {\n",
       "            return selff._get_value();\n",
       "        } else if ((args.length == 1)) {\n",
       "            return selff._set(args[0]);\n",
       "        } else {\n",
       "            err_3 = new Error('ValueError:' + ('Setting input signal ' + JSON.stringify(selff._name) + ' requires exactly one argument.')); err_3.name = \"ValueError\"; throw err_3;\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    return this._create_SourceSignal(func, upstream, selff);\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_LazySignal = function (func, upstream, selff) {\n",
       "    selff = (selff === undefined) ? null: selff;\n",
       "    selff = this._create_Signal(func, upstream, selff);\n",
       "    selff._active = false;\n",
       "    return selff;\n",
       "};\n",
       "\n",
       "flexx.classes.HasSignals.prototype._create_Signal = function (func, upstream, selff) {\n",
       "    var _call_func, _resolve_signals, _save_update, _set_value, obj;\n",
       "    selff = (selff === undefined) ? null: selff;\n",
       "    obj = this;\n",
       "    if ((selff === null)) {\n",
       "        selff = function () {\n",
       "            var args, err_4;\n",
       "            args = Array.prototype.slice.call(arguments);\n",
       "            if ((!args.length)) {\n",
       "                return selff._get_value();\n",
       "            } else {\n",
       "                err_4 = new Error('RuntimeError:' + ('Can only set signal values of InputSignal objects, which signal ' + JSON.stringify(selff._name) + ' is not.')); err_4.name = \"RuntimeError\"; throw err_4;\n",
       "            }\n",
       "            return null;\n",
       "        };\n",
       "\n",
       "    }\n",
       "    this._create_property(selff, 'value', '_value', undefined);\n",
       "    this._create_property(selff, 'last_value', '_last_value', undefined);\n",
       "    this._create_property(selff, 'timestamp', '_timestamp', 0);\n",
       "    this._create_property(selff, 'last_timestamp', '_last_timestamp', 0);\n",
       "    this._create_property(selff, 'not_connected', '_not_connected', 'No connection attempt yet.');\n",
       "    selff._name = func._name;\n",
       "    selff._IS_SIGNAL = true;\n",
       "    selff._active = true;\n",
       "    selff._func = func;\n",
       "    selff._status = 3;\n",
       "    selff._count = 0;\n",
       "    selff.__self__ = obj;\n",
       "    selff._upstream_given = upstream;\n",
       "    selff._upstream = [];\n",
       "    selff._downstream = [];\n",
       "    selff._upstream_reconnect = [];\n",
       "    selff._downstream_reconnect = [];\n",
       "    selff.connect = function (raise_on_fail) {\n",
       "        var dummy1_sequence, dummy2_iter, dummy3_sequence, dummy4_iter, err_4, s, signal;\n",
       "        raise_on_fail = (raise_on_fail === undefined) ? true: raise_on_fail;\n",
       "        while (this._upstream.length) {\n",
       "            s = this._upstream.pop(0);\n",
       "            s._unsubscribe(this);\n",
       "        }\n",
       "        while (this._upstream_reconnect.length) {\n",
       "            s = this._upstream_reconnect.pop(0);\n",
       "            s._unsubscribe(this);\n",
       "        }\n",
       "        if (_truthy(this._class_desciptor)) {\n",
       "            this._not_connected = 'Cannot connect signal descriptors on a class.';\n",
       "            if (_truthy(raise_on_fail)) {\n",
       "                err_4 = new Error('RuntimeError:' + this._not_connected); err_4.name = \"RuntimeError\"; throw err_4;\n",
       "            }\n",
       "            return false;\n",
       "        }\n",
       "        this._not_connected = this._resolve_signals();\n",
       "        dummy1_sequence = this._upstream;\n",
       "        if ((typeof dummy1_sequence === \"object\") && (!Array.isArray(dummy1_sequence))) {\n",
       "            dummy1_sequence = Object.keys(dummy1_sequence);\n",
       "        }\n",
       "        for (dummy2_iter = 0; dummy2_iter < dummy1_sequence.length; dummy2_iter += 1) {\n",
       "            signal = dummy1_sequence[dummy2_iter];\n",
       "            signal._subscribe(this);\n",
       "        }\n",
       "        dummy3_sequence = this._upstream_reconnect;\n",
       "        if ((typeof dummy3_sequence === \"object\") && (!Array.isArray(dummy3_sequence))) {\n",
       "            dummy3_sequence = Object.keys(dummy3_sequence);\n",
       "        }\n",
       "        for (dummy4_iter = 0; dummy4_iter < dummy3_sequence.length; dummy4_iter += 1) {\n",
       "            signal = dummy3_sequence[dummy4_iter];\n",
       "            signal._subscribe(this, true);\n",
       "        }\n",
       "        if (_truthy(this._not_connected)) {\n",
       "            this._set_status(3);\n",
       "            if (_truthy(raise_on_fail)) {\n",
       "                err_4 = new Error('RuntimeError:' + (('Connection error in signal ' + JSON.stringify(this._name) + ': ') + this._not_connected)); err_4.name = \"RuntimeError\"; throw err_4;\n",
       "            }\n",
       "            return false;\n",
       "        }\n",
       "        this._set_status(1);\n",
       "        return true;\n",
       "    };\n",
       "\n",
       "    selff.disconnect = function (destroy) {\n",
       "        var s;\n",
       "        destroy = (destroy === undefined) ? true: destroy;\n",
       "        while (this._upstream.length) {\n",
       "            s = this._upstream.pop(0);\n",
       "            s._unsubscribe(this);\n",
       "        }\n",
       "        this._not_connected = 'Explicitly disconnected via disconnect()';\n",
       "        this._value = undefined;\n",
       "        this._last_value = undefined;\n",
       "        if (_truthy(destroy)) {\n",
       "            this._frame = null;\n",
       "        }\n",
       "        this._set_status(3);\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    selff._subscribe = function (signal, reconnect) {\n",
       "        var dummy1_, dummy2_;\n",
       "        reconnect = (reconnect === undefined) ? false: reconnect;\n",
       "        if (_truthy(reconnect)) {\n",
       "            if (_truthy(((dummy1_ = this._downstream_reconnect).indexOf ? dummy1_ : Object.keys(dummy1_)).indexOf(signal) < 0)) {\n",
       "                (this._downstream_reconnect.append || this._downstream_reconnect.push).apply(this._downstream_reconnect, [signal]);\n",
       "            }\n",
       "        } else if (_truthy(((dummy2_ = this._downstream).indexOf ? dummy2_ : Object.keys(dummy2_)).indexOf(signal) < 0)) {\n",
       "            (this._downstream.append || this._downstream.push).apply(this._downstream, [signal]);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    selff._unsubscribe = function (signal) {\n",
       "        var dummy1_, dummy2_;\n",
       "        while (((dummy1_ = this._downstream).indexOf ? dummy1_ : Object.keys(dummy1_)).indexOf(signal) >= 0) {\n",
       "            (this._downstream.remove || function (x) {this.splice(this.indexOf(x), 1);}).apply(this._downstream, [signal]);\n",
       "        }\n",
       "        while (((dummy2_ = this._downstream_reconnect).indexOf ? dummy2_ : Object.keys(dummy2_)).indexOf(signal) >= 0) {\n",
       "            (this._downstream_reconnect.remove || function (x) {this.splice(this.indexOf(x), 1);}).apply(this._downstream_reconnect, [signal]);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    selff._get_value = function () {\n",
       "        var err_3;\n",
       "        if (_truthy(this._not_connected)) {\n",
       "            this.connect(false);\n",
       "        }\n",
       "        if ((this._status == 1)) {\n",
       "            this._update_value();\n",
       "        } else if ((this._status == 2)) {\n",
       "            err_3 = new Error('SignalValueError:' + ('The signal ' + JSON.stringify(this._name) + ' is not initialized.')); err_3.name = \"SignalValueError\"; throw err_3;\n",
       "        } else if ((this._status == 3)) {\n",
       "            err_3 = new Error('SignalValueError:' + ('The signal ' + JSON.stringify(this._name) + ' is not connected.')); err_3.name = \"SignalValueError\"; throw err_3;\n",
       "        }\n",
       "        return this._value;\n",
       "    };\n",
       "\n",
       "    selff._update_value = function () {\n",
       "        var args, dummy1_sequence, dummy2_iter, s, value;\n",
       "        args = [];\n",
       "        dummy1_sequence = this._upstream;\n",
       "        if ((typeof dummy1_sequence === \"object\") && (!Array.isArray(dummy1_sequence))) {\n",
       "            dummy1_sequence = Object.keys(dummy1_sequence);\n",
       "        }\n",
       "        for (dummy2_iter = 0; dummy2_iter < dummy1_sequence.length; dummy2_iter += 1) {\n",
       "            s = dummy1_sequence[dummy2_iter];\n",
       "            (args.append || args.push).apply(args, [s()]);\n",
       "        }\n",
       "        value = this._call_func.apply(this, args);\n",
       "        this._set_value(value);\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    selff._set_status = function (status, initiator) {\n",
       "        var count, dummy1_sequence, dummy2_iter, dummy3_sequence, dummy4_iter, dummy5_sequence, dummy6_iter, initial_initiator, s, signal, statuses;\n",
       "        initiator = (initiator === undefined) ? null: initiator;\n",
       "        initial_initiator = initiator;\n",
       "        if (((this === initial_initiator) && ((!_truthy(this._status))))) {\n",
       "            return null;\n",
       "        }\n",
       "        if ((initiator === null)) {\n",
       "            initiator = this;\n",
       "        }\n",
       "        statuses = [1, status];\n",
       "        dummy1_sequence = this._upstream;\n",
       "        if ((typeof dummy1_sequence === \"object\") && (!Array.isArray(dummy1_sequence))) {\n",
       "            dummy1_sequence = Object.keys(dummy1_sequence);\n",
       "        }\n",
       "        for (dummy2_iter = 0; dummy2_iter < dummy1_sequence.length; dummy2_iter += 1) {\n",
       "            s = dummy1_sequence[dummy2_iter];\n",
       "            if ((s !== initiator)) {\n",
       "                (statuses.append || statuses.push).apply(statuses, [s._status]);\n",
       "            }\n",
       "        }\n",
       "        this._status = Math.max.apply(null, statuses);\n",
       "        if ((_truthy(this._active) && (this._status == 1))) {\n",
       "            count = this._count;\n",
       "            this._save_update();\n",
       "            if ((this._count == count)) {\n",
       "                return null;\n",
       "            }\n",
       "        }\n",
       "        if ((this === initial_initiator)) {\n",
       "            return null;\n",
       "        }\n",
       "        dummy3_sequence = this._downstream_reconnect.slice(0);\n",
       "        if ((typeof dummy3_sequence === \"object\") && (!Array.isArray(dummy3_sequence))) {\n",
       "            dummy3_sequence = Object.keys(dummy3_sequence);\n",
       "        }\n",
       "        for (dummy4_iter = 0; dummy4_iter < dummy3_sequence.length; dummy4_iter += 1) {\n",
       "            signal = dummy3_sequence[dummy4_iter];\n",
       "            signal.connect(false);\n",
       "        }\n",
       "        dummy5_sequence = this._downstream;\n",
       "        if ((typeof dummy5_sequence === \"object\") && (!Array.isArray(dummy5_sequence))) {\n",
       "            dummy5_sequence = Object.keys(dummy5_sequence);\n",
       "        }\n",
       "        for (dummy6_iter = 0; dummy6_iter < dummy5_sequence.length; dummy6_iter += 1) {\n",
       "            signal = dummy5_sequence[dummy6_iter];\n",
       "            signal._set_status(status, initiator);\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    selff._seek_signal = function (fullname, nameparts, ob) {\n",
       "        var dummy1_, dummy2_, dummy3_, dummy4_sequence, dummy5_iter, msg, name, sub_ob;\n",
       "        if (((ob === undefined) || (nameparts.length == 0))) {\n",
       "            if ((ob === undefined)) {\n",
       "                return 'Signal ' + JSON.stringify(fullname) + ' does not exist.';\n",
       "            }\n",
       "            if ((!(((dummy1_=ob) !== undefined && dummy1_ !== null && dummy1_['_IS_SIGNAL'] !== undefined)))) {\n",
       "                return 'Object ' + JSON.stringify(fullname) + ' is not a signal.';\n",
       "            }\n",
       "            (this._upstream.append || this._upstream.push).apply(this._upstream, [ob]);\n",
       "            return null;\n",
       "        }\n",
       "        if ((((dummy2_=ob) !== undefined && dummy2_ !== null && dummy2_['_IS_SIGNAL'] !== undefined))) {\n",
       "            (this._upstream_reconnect.append || this._upstream_reconnect.push).apply(this._upstream_reconnect, [ob]);\n",
       "            try {\n",
       "                ob = ob();\n",
       "            } catch(err_4) {\n",
       "                if (err_4 instanceof Error && err_4.name === \"SignalValueError\") {\n",
       "                    return 'Signal ' + JSON.stringify(fullname) + ' does not have all parts ready';\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "        dummy3_ = [nameparts[0], nameparts.slice(1)];\n",
       "        name = dummy3_[0];nameparts = dummy3_[1];\n",
       "        if (((name == '*') && ((({}).toString.call(ob).match(/\\s([a-zA-Z]+)/)[1].toLowerCase() === 'array')))) {\n",
       "            dummy4_sequence = ob;\n",
       "            if ((typeof dummy4_sequence === \"object\") && (!Array.isArray(dummy4_sequence))) {\n",
       "                dummy4_sequence = Object.keys(dummy4_sequence);\n",
       "            }\n",
       "            for (dummy5_iter = 0; dummy5_iter < dummy4_sequence.length; dummy5_iter += 1) {\n",
       "                sub_ob = dummy4_sequence[dummy5_iter];\n",
       "                msg = this._seek_signal(fullname, nameparts, sub_ob);\n",
       "                if (_truthy(msg)) {\n",
       "                    return msg;\n",
       "                }\n",
       "            }\n",
       "            return null;\n",
       "        }\n",
       "        return this._seek_signal(fullname, nameparts, (function (ob, name, dflt) {if (ob !== undefined && ob !== null && ob[name] !== undefined) {return ob[name];} else {return dflt;}})(ob, name, undefined));\n",
       "    };\n",
       "\n",
       "    _resolve_signals = function () {\n",
       "        var dummy6_sequence, dummy7_iter, fullname, msg, nameparts, ob;\n",
       "        selff._upstream = [];\n",
       "        selff._upstream_reconnect = [];\n",
       "        dummy6_sequence = selff._upstream_given;\n",
       "        if ((typeof dummy6_sequence === \"object\") && (!Array.isArray(dummy6_sequence))) {\n",
       "            dummy6_sequence = Object.keys(dummy6_sequence);\n",
       "        }\n",
       "        for (dummy7_iter = 0; dummy7_iter < dummy6_sequence.length; dummy7_iter += 1) {\n",
       "            fullname = dummy6_sequence[dummy7_iter];\n",
       "            nameparts = fullname.split('.');\n",
       "            ob = obj[nameparts[0]];\n",
       "            msg = selff._seek_signal(fullname, nameparts.slice(1), ob);\n",
       "            if (_truthy(msg)) {\n",
       "                selff._upstream = [];\n",
       "                return msg;\n",
       "            }\n",
       "        }\n",
       "        return false;\n",
       "    };\n",
       "\n",
       "    _save_update = function () {\n",
       "        var err;\n",
       "        try {\n",
       "            selff();\n",
       "        } catch(err_3) {\n",
       "            if (err_3 instanceof Error && err_3.name === \"SignalValueError\") {\n",
       "            } else {\n",
       "                err = err_3;\n",
       "                console.error('Error updating signal: ' + err);\n",
       "            }\n",
       "        }\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    _set_value = function (value) {\n",
       "        if ((value === undefined)) {\n",
       "            this._status = ((this._count == 0))? (3) : (0);\n",
       "            return null;\n",
       "        }\n",
       "        selff._last_value = selff._value;\n",
       "        selff._value = value;\n",
       "        selff._last_timestamp = selff._timestamp;\n",
       "        selff._count += 1;\n",
       "        selff._timestamp = ((new Date()).getTime()) / 1000;\n",
       "        selff._status = 0;\n",
       "        obj._signal_changed(selff);\n",
       "        return null;\n",
       "    };\n",
       "\n",
       "    _call_func = function () {\n",
       "        var args;\n",
       "        args = Array.prototype.slice.call(arguments);\n",
       "        return func.apply(obj, args);\n",
       "    };\n",
       "\n",
       "    selff._resolve_signals = _resolve_signals;\n",
       "    selff._save_update = _save_update;\n",
       "    selff._set_value = _set_value;\n",
       "    selff._call_func = _call_func;\n",
       "    return selff;\n",
       "};\n",
       "\n",
       "\n",
       "flexx.classes.Model = function () {\n",
       "    if (this.__init__) {\n",
       "       this.__init__.apply(this, arguments);\n",
       "    }\n",
       "};\n",
       "flexx.classes.Model.prototype = Object.create(flexx.classes.HasSignals.prototype);\n",
       "flexx.classes.Model.prototype._base_class = flexx.classes.HasSignals.prototype;\n",
       "\n",
       "\n",
       "flexx.classes.Model.prototype.__signals__ = flexx.classes.HasSignals.prototype.__signals__.concat([]).sort();\n",
       "flexx.classes.Model.prototype.__from_json__ = function (dct) {\n",
       "    return flexx.instances[dct.id];\n",
       "};\n",
       "\n",
       "flexx.classes.Model.prototype.__init__ = function (id) {\n",
       "    this.__id = this._id = this.id = id;\n",
       "    this._linked_signals = {};\n",
       "    this._init();\n",
       "    flexx.classes.HasSignals.prototype.__init__.call(this);\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.Model.prototype.__json__ = function () {\n",
       "    return {'__type__': 'Flexx-Model', 'id': this.id};\n",
       "};\n",
       "\n",
       "flexx.classes.Model.prototype._init = function () {\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.Model.prototype._link_js_signal = function (name, link) {\n",
       "    var signal;\n",
       "    if (_truthy(link)) {\n",
       "        this._linked_signals[name] = true;\n",
       "        signal = this[name];\n",
       "        if (_truthy(signal._timestamp > 1)) {\n",
       "            this._signal_changed(this[name]);\n",
       "        }\n",
       "    } else if (_truthy(this._linked_signals[name])) {\n",
       "        delete this._linked_signals[name];\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.Model.prototype._set_signal_from_py = function (name, text, esid) {\n",
       "    var signal, value;\n",
       "    value = flexx.serializer.loads(text);\n",
       "    signal = this[name];\n",
       "    if (((esid == 0) || (signal._esid == 0))) {\n",
       "        this._signal_emit_lock = true;\n",
       "        signal._set(value);\n",
       "        signal._esid = 0;\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "\n",
       "flexx.classes.Model.prototype._signal_changed = function (signal) {\n",
       "    var txt;\n",
       "    if ((flexx.ws === null)) {\n",
       "        return null;\n",
       "    }\n",
       "    if (_truthy(this._signal_emit_lock)) {\n",
       "        this._signal_emit_lock = false;\n",
       "        return null;\n",
       "    }\n",
       "    signal._esid = signal._count;\n",
       "    if (_truthy(signal.flags.nosync)) {\n",
       "        return null;\n",
       "    }\n",
       "    if (((signal.signal_type != 'PySignal') && ((!(signal._name.indexOf('_') == 0))))) {\n",
       "        txt = flexx.serializer.saves(signal.value);\n",
       "        flexx.ws.send('SIGNAL ' + ([this.id, signal._esid, signal._name, txt].join(' ')));\n",
       "    }\n",
       "    return null;\n",
       "};\n",
       "flexx.classes.Model.prototype._class_name = \"Model\";\n",
       "\n",
       "flexx.serializer.add_reviver(\"Flexx-Model\", flexx.classes.Model.prototype.__from_json__);\n",
       "</script><script>flexx.ws_url='ws://localhost:54307/__default__/ws'; flexx.is_notebook=true; flexx.init();</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from flexx import app, react\n",
    "app.init_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "new ws connection __default__\n"
     ]
    }
   ],
   "source": [
    "class Greeter(app.Model):\n",
    "    \n",
    "    @react.input\n",
    "    def name(s):\n",
    "        return str(s)\n",
    "    \n",
    "    class JS:\n",
    "        \n",
    "        @react.connect('name')\n",
    "        def _greet(name):\n",
    "            alert('Hello %s!' % name)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "WARNING:root:Dynamically defining class <class '__main__.Greeter'>\n"
     ]
    },
    {
     "data": {
      "application/javascript": [
       "flexx.command('DEFINE-JS flexx.classes.Greeter = function () {\\n    if (this.__init__) {\\n       this.__init__.apply(this, arguments);\\n    }\\n};\\nflexx.classes.Greeter.prototype = Object.create(flexx.classes.Model.prototype);\\nflexx.classes.Greeter.prototype._base_class = flexx.classes.Model.prototype;\\n\\n\\nflexx.classes.Greeter.prototype.__signals__ = flexx.classes.Model.prototype.__signals__.concat([\\'_greet\\', \\'name\\']).sort();\\nflexx.classes.Greeter.prototype.__greet_func = function (name) {\\n    alert(\\'Hello \\' + name + \\'!\\');\\n    return null;\\n};\\n\\nflexx.classes.Greeter.prototype.__greet_func._upstream = [\\'name\\'];\\n\\nflexx.classes.Greeter.prototype.__greet_func._signal_type = \\'Signal\\';\\n\\nflexx.classes.Greeter.prototype.__greet_func.flags = JSON.parse(\\'{}\\');\\n\\nflexx.classes.Greeter.prototype._name_func = function (v) {\\n    return v;\\n};\\n\\nflexx.classes.Greeter.prototype._name_func._upstream = [];\\n\\nflexx.classes.Greeter.prototype._name_func._signal_type = \\'PyInputSignal\\';\\n\\nflexx.classes.Greeter.prototype._name_func.flags = JSON.parse(\\'{}\\');\\nflexx.classes.Greeter.prototype._class_name = \"Greeter\";\\n');"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "flexx.command(\"EXEC flexx.instances.Greeter1 = new flexx.classes.Greeter('Greeter1');\");"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "greeter = Greeter()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "flexx.command('EXEC flexx.instances.Greeter1._set_signal_from_py(\\'name\\', \\'\"John\"\\', 0);');"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "greeter.name('John')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}