|
30 | 30 | "\n",
|
31 | 31 | "To create a custom widget, you need to define the widget both in the browser and in the Python kernel.\n",
|
32 | 32 | "\n",
|
33 |
| - "This tutorial shows how to build a simple email widget using the TypeScript widget cookiecutter" |
| 33 | + "This tutorial shows how to build a simple email widget using the TypeScript widget cookiecutter: https://github.com/jupyter-widgets/widget-ts-cookiecutter" |
34 | 34 | ]
|
35 | 35 | },
|
36 | 36 | {
|
|
50 | 50 | "Next create a conda environment that includes:\n",
|
51 | 51 | "\n",
|
52 | 52 | "1. the latest release of JupyterLab or the classic notebook\n",
|
53 |
| - "2. [cookiecutter](https://github.com/cookiecutter/cookiecutter), the tool you will use to bootstrap the custom widget\n", |
| 53 | + "2. [cookiecutter](https://github.com/cookiecutter/cookiecutter): the tool you will use to bootstrap the custom widget\n", |
54 | 54 | "3. [NodeJS](https://nodejs.org): the JavaScript runtime you'll use to\n",
|
55 | 55 | " compile the web assets (e.g., TypeScript, CSS) for the custom widget\n",
|
56 | 56 | "\n",
|
|
85 | 85 | "cookiecutter https://github.com/jupyter-widgets/widget-ts-cookiecutter\n",
|
86 | 86 | "```\n",
|
87 | 87 | "\n",
|
88 |
| - "When prompted, enter the desired values like the following for all of the cookiecutter prompts:\n", |
| 88 | + "When prompted, enter the desired values as follows:\n", |
89 | 89 | "\n",
|
90 | 90 | "```bash\n",
|
91 | 91 | "author_name []: Your Name\n",
|
|
98 | 98 | "project_short_description [A Custom Jupyter Widget Library]: An Custom Email Widget\n",
|
99 | 99 | "```\n",
|
100 | 100 | "\n",
|
101 |
| - "Change to the directory the cookiecutter created and list the files.\n", |
| 101 | + "Change to the directory the cookiecutter created and list the files:\n", |
102 | 102 | "\n",
|
103 | 103 | "```bash\n",
|
104 | 104 | "cd ipyemail\n",
|
105 | 105 | "ls\n",
|
106 | 106 | "```\n",
|
107 | 107 | "\n",
|
108 |
| - "You should see a list like the following.\n", |
| 108 | + "You should see a list like the following:\n", |
109 | 109 | "\n",
|
110 | 110 | "```bash\n",
|
111 | 111 | "appveyor.yml css examples ipyemail.json MANIFEST.in pytest.ini readthedocs.yml setup.cfg src tsconfig.json\n",
|
|
127 | 127 | "If you are using JupyterLab:\n",
|
128 | 128 | "\n",
|
129 | 129 | "```bash\n",
|
130 |
| - "# install the widget manager to display Widgets in the JupyterLab interface\n", |
| 130 | + "# install the widget manager to display the widgets in JupyterLab\n", |
131 | 131 | "jupyter labextension install @jupyter-widgets/jupyterlab-manager --no-build\n",
|
132 | 132 | "\n",
|
133 | 133 | "# install the local extension\n",
|
|
161 | 161 | "\n",
|
162 | 162 | "\n",
|
163 | 163 | "\n",
|
164 |
| - "The next step will walk you through how to modify the existing code to transform the widget into an email widget." |
| 164 | + "The next steps will walk you through how to modify the existing code to transform the widget into an email widget." |
165 | 165 | ]
|
166 | 166 | },
|
167 | 167 | {
|
|
225 | 225 | "\n",
|
226 | 226 | "Instead, you must tell it yourself by defining specially named trait attributes, `_view_name`, `_view_module`, and `_view_module_version` (as seen below) and optionally `_model_name` and `_model_module`.\n",
|
227 | 227 | "\n",
|
| 228 | + "First let's rename `ipyemail/example.py` to `ipyemail/widget.py`.\n", |
228 | 229 | "\n",
|
229 |
| - "In `ipyemail/example.py`, replace the example code with the following:\n", |
| 230 | + "In `ipyemail/widget.py`, replace the example code with the following:\n", |
230 | 231 | "\n",
|
231 | 232 | "```python\n",
|
232 | 233 | "from ipywidgets import DOMWidget, ValueWidget, register\n",
|
|
254 | 255 | "In `ipyemail/__init__.py`, change the import from:\n",
|
255 | 256 | "\n",
|
256 | 257 | "```python\n",
|
257 |
| - "from .example import ExampleWidget\n", |
| 258 | + "from .widget import ExampleWidget\n", |
258 | 259 | "```\n",
|
259 | 260 | "\n",
|
260 | 261 | "To:\n",
|
261 | 262 | "\n",
|
262 | 263 | "```python\n",
|
263 |
| - "from .example import Email\n", |
| 264 | + "from .widget import Email\n", |
264 | 265 | "```"
|
265 | 266 | ]
|
266 | 267 | },
|
|
433 | 434 | "\n",
|
434 | 435 | "A handle to the widget's default DOM element can be acquired via `this.el`. The `el` property is the DOM element associated with the view.\n",
|
435 | 436 | "\n",
|
436 |
| - "In `src/widget.ts`, define the `email_input` attribute:\n", |
| 437 | + "In `src/widget.ts`, define the `_emailInput` attribute:\n", |
437 | 438 | "\n",
|
438 | 439 | "```typescript\n",
|
439 | 440 | "export class EmailView extends DOMWidgetView {\n",
|
440 | 441 | " private _emailInput: HTMLInputElement;\n",
|
441 | 442 | "}\n",
|
442 | 443 | "```\n",
|
443 | 444 | "\n",
|
444 |
| - "Then, add the following logic for the `render`:\n", |
| 445 | + "Then, add the following logic for the `render` method:\n", |
445 | 446 | "\n",
|
446 | 447 | "```typescript\n",
|
447 | 448 | "render: function() { \n",
|
|
503 | 504 | "We want to be able to avoid user to write an invalid email address, so we need a validator using traitlets.\n",
|
504 | 505 | "\n",
|
505 | 506 | "```python\n",
|
506 |
| - "from traitlets import Unicode, Bool, validate, TraitError\n", |
507 | 507 | "from ipywidgets import DOMWidget, ValueWidget, register\n",
|
| 508 | + "from traitlets import Unicode, Bool, validate, TraitError\n", |
508 | 509 | "\n",
|
509 | 510 | "from ._frontend import module_name, module_version\n",
|
510 | 511 | "\n",
|
|
0 commit comments