Skip to content

Commit

Permalink
Minor tweaks to the custom widget tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
jtpio committed Feb 3, 2021
1 parent d8ec7c7 commit 4d23460
Showing 1 changed file with 9 additions and 14 deletions.
23 changes: 9 additions & 14 deletions docs/source/examples/Widget Custom.ipynb
Original file line number Diff line number Diff line change
Expand Up @@ -370,8 +370,7 @@
"The TypeScript cookiecutter generates a file `src/widget.ts`. Open the file and rename `ExampleModel` to `EmailModel` and `ExampleView` to `EmailView`:\n",
"\n",
"```typescript\n",
"export\n",
"class EmailModel extends DOMWidgetModel {\n",
"export class EmailModel extends DOMWidgetModel {\n",
" defaults() {\n",
" return {...super.defaults(),\n",
" _model_name: EmailModel.model_name,\n",
Expand All @@ -392,14 +391,13 @@
" static model_name = 'EmailModel';\n",
" static model_module = MODULE_NAME;\n",
" static model_module_version = MODULE_VERSION;\n",
" static view_name = 'EmailView'; // Set to null if no view\n",
" static view_module = MODULE_NAME; // Set to null if no view\n",
" static view_name = 'EmailView';\n",
" static view_module = MODULE_NAME;\n",
" static view_module_version = MODULE_VERSION;\n",
"}\n",
"\n",
"\n",
"export\n",
"class EmailView extends DOMWidgetView {\n",
"export class EmailView extends DOMWidgetView {\n",
" render() {\n",
" this.el.classList.add('custom-widget');\n",
"\n",
Expand Down Expand Up @@ -445,7 +443,7 @@
"Then, add the following logic for the `render` method:\n",
"\n",
"```typescript\n",
"render: function() { \n",
"render() { \n",
" this._emailInput = document.createElement('input');\n",
" this._emailInput.type = 'email';\n",
" this._emailInput.value = '[email protected]';\n",
Expand Down Expand Up @@ -501,7 +499,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"We want to be able to avoid user to write an invalid email address, so we need a validator using traitlets.\n",
"We want to be able to avoid the user to write an invalid email address, so we need a validator using traitlets.\n",
"\n",
"```python\n",
"from ipywidgets import DOMWidget, ValueWidget, register\n",
Expand Down Expand Up @@ -570,8 +568,7 @@
"By replacing the string literal with a call to `model.get`, the view will now display the value of the back end upon display. However, it will not update itself to a new value when the value changes.\n",
"\n",
"```typescript\n",
"export\n",
"class EmailView extends DOMWidgetView {\n",
"export class EmailView extends DOMWidgetView {\n",
" render() {\n",
" this._emailInput = document.createElement('input');\n",
" this._emailInput.type = 'email';\n",
Expand Down Expand Up @@ -604,8 +601,7 @@
"To get the view to update itself dynamically, register a function to update the view's value when the model's `value` property changes. This can be done using the `model.on` method. The `on` method takes three parameters, an event name, callback handle, and callback context. The Backbone event named `change` will fire whenever the model changes. By appending `:value` to it, you tell Backbone to only listen to the change event of the `value` property (as seen below).\n",
"\n",
"```typescript\n",
"export\n",
"class EmailView extends DOMWidgetView {\n",
"export class EmailView extends DOMWidgetView {\n",
" render() {\n",
" this._emailInput = document.createElement('input');\n",
" this._emailInput.type = 'email';\n",
Expand Down Expand Up @@ -639,8 +635,7 @@
"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",
"\n",
"```typescript\n",
"export\n",
"class EmailView extends DOMWidgetView {\n",
"export class EmailView extends DOMWidgetView {\n",
" render() {\n",
" this._emailInput = document.createElement('input');\n",
" this._emailInput.type = 'email';\n",
Expand Down

0 comments on commit 4d23460

Please sign in to comment.