-
Notifications
You must be signed in to change notification settings - Fork 949
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Ian Hunt-Isaak <[email protected]>
- Loading branch information
Showing
1 changed file
with
13 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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`" | ||
] | ||
}, | ||
{ | ||
|
@@ -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", | ||
"```" | ||
] | ||
}, | ||
{ | ||
|
@@ -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", | ||
|
@@ -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" | ||
] | ||
}, | ||
{ | ||
|
@@ -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", | ||
|