Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Ian Hunt-Isaak <[email protected]>
  • Loading branch information
jtpio and ianhi authored Feb 17, 2021
1 parent 126075e commit 4359680
Showing 1 changed file with 13 additions and 9 deletions.
22 changes: 13 additions & 9 deletions docs/source/examples/Widget Custom.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -197,13 +197,13 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"To define a widget, you must inherit from the `DOMWidget`, `ValueWidget`, or `Widget` base class. If you intend for your widget to be displayed, you'll want to inherit from `DOMWidget`. If you intend for your widget to be used as an input for [interact](./Using%20Interact.ipynb), you'll want to inherit from `ValueWidget`. Your widget should inherit from `ValueWidget` if it has a single ovious output (for example, the output of an `IntSlider` is clearly the current value of the slider).\n",
"To define a widget, you must inherit from the `DOMWidget`, `ValueWidget`, or `Widget` base class. If you intend for your widget to be displayed, you'll want to inherit from `DOMWidget`. If you intend for your widget to be used as an input for [interact](./Using%20Interact.ipynb), you'll want to inherit from `ValueWidget`. Your widget should inherit from `ValueWidget` if it has a single obvious output (for example, the output of an `IntSlider` is clearly the current value of the slider).\n",
"\n",
"Both the `DOMWidget` and `ValueWidget` classes inherit from the `Widget` class. The `Widget` class is useful for cases in which the widget is not meant to be displayed directly in the notebook, but instead as a child of another rendering environment. Here are some examples:\n",
"\n",
"- If you wanted to create a [three.js](https://threejs.org/) widget (three.js is a popular WebGL library), you would implement the rendering window as a `DOMWidget` and any 3D objects or lights meant to be rendered in that window as `Widget`\n",
"- If you wanted to create a widget that displays directly in the notebook for usage with `interact` (like `IntSlider`), you should multiple inherit from both `DOMWidget` and `ValueWidget`. \n",
"- If you wanted to create a widget that provides a value to `interact` but is controlled and viewed by another widget or an external source, you should inherit from only `ValueWidget`"
"- If you wanted to create a widget that provides a value to `interact` but does not need to be displayed, you should inherit from only `ValueWidget`"
]
},
{
Expand Down Expand Up @@ -242,10 +242,12 @@
" _model_module = Unicode(module_name).tag(sync=True)\n",
" _model_module_version = Unicode(module_version).tag(sync=True)\n",
"\n",
" _view_name = Unicode('EmailView').tag(sync=True)\n",
" _view_module = Unicode(module_name).tag(sync=True)\n",
" _view_module_version = Unicode(module_version).tag(sync=True)\n",
"```"
" _view_name = Unicode('EmailView').tag(sync=True)\n",
" _view_module = Unicode(module_name).tag(sync=True)\n",
" _view_module_version = Unicode(module_version).tag(sync=True)\n",
"\n",
" value = Unicode('[email protected]').tag(sync=True)\n",
"```"
]
},
{
Expand All @@ -255,7 +257,7 @@
"In `ipyemail/__init__.py`, change the import from:\n",
"\n",
"```python\n",
"from .widget import ExampleWidget\n",
"from .example import ExampleWidget\n",
"```\n",
"\n",
"To:\n",
Expand Down Expand Up @@ -362,7 +364,9 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"The IPython widget framework front end relies heavily on [Backbone.js](http://backbonejs.org/). Backbone.js is an MVC (model view controller) framework. Widgets defined in the back end are automatically synchronized with generic Backbone.js models in the front end. The traitlets are added to the front end instance automatically on first state push. The `_view_name` trait that you defined earlier is used by the widget framework to create the corresponding Backbone.js view and link that view to the model."
"The IPython widget framework front end relies heavily on [Backbone.js](http://backbonejs.org/). Backbone.js is an MVC (model view controller) framework. Widgets defined in the back end are automatically synchronized with Backbone.js `Model` in the front end. Each front end `Model` handles the widget data and state, and can have any number of associate `View`s. In the context of a widget the `Views` are what render objects for the user to interact with, and the Model handles communication with the Python objects.\n",
"\n",
"On the first state push from python the synced traitlets are added automatically. The `_view_name` trait that you defined earlier is used by the widget framework to create the corresponding Backbone.js view and link that view to the model.\n"
]
},
{
Expand Down Expand Up @@ -651,7 +655,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"This allows us to update the value from the Python kernel to the views. Now to get the value updated from the front-end to the Python kernel (when the input is not disabled) we can do it using the `model.set` method.\n",
"This allows us to update the value from the Python kernel to the views. Now to get the value updated from the front-end to the Python kernel (when the input is not disabled) we set the value on the frontend model using `model.set` and then sync the frontend model with the Python object using `model.save_changes`.\n",
"\n",
"```typescript\n",
"export class EmailView extends DOMWidgetView {\n",
Expand Down

0 comments on commit 4359680

Please sign in to comment.