<div dir="ltr">Andrew and I had a chance to talk on HipChat.  For those who weren't there, I updated the IPEP because it was very out of date (<a href="https://github.com/ipython/ipython/wiki/IPEP-23%3A-Backbone.js-Widgets">https://github.com/ipython/ipython/wiki/IPEP-23%3A-Backbone.js-Widgets</a>).  It still needs a lot of work but at least the information is correct now.  I think this was the cause of the confusion.  I added a small section that summarizes the steps required to display a widget.  For those of you who are interested, but do not want to visit the full IPEP, see this excerpt:<div>
<br></div><div><ol style="padding:0px 0px 0px 30px;margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px"><li style>Open a comm with a <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">target_name</code> of <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">WidgetModel</code>. The widget manager watches for comms with the <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">target_name="WidgetModel"</code> and creates a widget model when that comm is created. The comm and widget model are automatically connected.<br style>
</li><li style>Send a full state update message on the new comm (see the <strong style>update</strong> Back-end to front-end message spec in the IPEP). The full state should include the following:<br style><ul style="padding:0px 0px 0px 30px;margin:0px">
<li style><code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">msg_throttle</code> and <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">_view_name</code><br style>
</li><li style><code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">_css</code> and <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">visible</code> if a DOM widget view is specified for <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">_view_name</code><br style>
</li><li style>The rest of the of the properties of the corresponding widget, i.e. <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">disabled</code>, <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">value</code>, <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;border:1px solid rgb(221,221,221);background-color:rgb(248,248,248);border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;max-width:100%;display:inline-block;overflow:auto;vertical-align:middle;line-height:1.3;padding:0px;white-space:nowrap">min</code>, etc...<br style>
</li></ul></li><li style>Send a display message on the comm (see the <strong style>display</strong> Back-end to front-end message spec in the IPEP).</li></ol><div><font color="#333333" face="Helvetica, arial, freesans, clean, sans-serif"><span style="font-size:15px;line-height:25px">Cheers,</span></font></div>
<div><font color="#333333" face="Helvetica, arial, freesans, clean, sans-serif"><span style="font-size:15px;line-height:25px">Jon</span></font></div></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Tue, Mar 18, 2014 at 1:20 PM, Doug Blank <span dir="ltr"><<a href="mailto:doug.blank@gmail.com" target="_blank">doug.blank@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div class="HOEnZb"><div class="h5">On Tue, Mar 18, 2014 at 3:15 PM, Andrew Gibiansky<br>
<<a href="mailto:andrew.gibiansky@gmail.com">andrew.gibiansky@gmail.com</a>> wrote:<br>
> Hey all,<br>
><br>
> I'm trying to implement widgets in IHaskell, and am having a lot of<br>
> difficulty understanding what should go into this. I currently have Comms<br>
> implemented, so things can change the way they are displayed to use JS+comms<br>
> to be dynamic.<br>
><br>
> However, it looks like widgets are significantly more than just that. At<br>
> least, they are output to a special widget area of the output cell. I<br>
> understand the general idea behind widgets but cannot understand the raw<br>
> underlying comm/networking protocol that gets them set up and working.<br>
><br>
> So, a few questions to start with:<br>
><br>
> How can I make, say, a slider widget appear in the frontend? My backend has<br>
> no Python in it whatsoever.<br>
> Which side sends the comm_open (backend or frontend)? Is it that the backend<br>
> sends a comm_open to the frontend with the proper target name, which then<br>
> creates the model, and later a display() can create the view?<br>
><br>
> I apologize in advance if this is thoroughly documented somewhere; I read<br>
> the IPEP for backbone widgets and found that it described the architecture<br>
> but I could not understand how the backend actually dealt with the messages<br>
> and how and to whom they were sent. Also, the example notebooks are helpful<br>
> in terms of understanding the Python support for this, but didn't quite<br>
> answer my questions.<br>
><br>
> Thanks!<br>
><br>
> Andrew Gibiansky<br>
<br>
</div></div>Andrew,<br>
<br>
We could attempt to share our ZMQServer.cs between Calico and F#, but<br>
your native F# is so clean looking that you may not want to :) You can<br>
see what is necessary to implement widgets here:<br>
<br>
<a href="https://bitbucket.org/ipre/calico/src/master/Source/Calico/Widgets.cs" target="_blank">https://bitbucket.org/ipre/calico/src/master/Source/Calico/Widgets.cs</a><br>
<a href="https://bitbucket.org/ipre/calico/src/master/Source/Calico/ZMQServer.cs" target="_blank">https://bitbucket.org/ipre/calico/src/master/Source/Calico/ZMQServer.cs</a><br>
<br>
This code is still being cleaned up, but I think we have everything<br>
implemented (traitlet-like behaviors, compositional widgets, etc).<br>
<br>
Hope that helps; if not feel free to ask a question.<br>
<br>
-Doug<br>
<br>
><br>
><br>
><br>
> _______________________________________________<br>
> IPython-dev mailing list<br>
> <a href="mailto:IPython-dev@scipy.org">IPython-dev@scipy.org</a><br>
> <a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
><br>
_______________________________________________<br>
IPython-dev mailing list<br>
<a href="mailto:IPython-dev@scipy.org">IPython-dev@scipy.org</a><br>
<a href="http://mail.scipy.org/mailman/listinfo/ipython-dev" target="_blank">http://mail.scipy.org/mailman/listinfo/ipython-dev</a><br>
</blockquote></div><br></div>