1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
.. Copyright (c) Jupyter Development Team.
.. Distributed under the terms of the Modified BSD License.
Using JupyterLab components
===========================
JupyterLab is built with many re-usable components that are
independently `published on npm <https://www.npmjs.com/search?q=%40jupyterlab>`_.
JupyterLab itself assembles these components together to provide a full,
IDE-like experience. However, developers are encouraged to use these to bring
to life their own visions of what a computational environment should look
like.
The JupyterLab repository has `many examples <https://github.com/jupyterlab/jupyterlab/tree/4.0.x/examples>`_
to get you started.
The ``examples`` directory contains:
- several stand-alone examples (``console``, ``filebrowser``,
``notebook``, ``terminal``)
- a more complex example (``app``).
Installation instructions for the examples are found in the project's
README.
After installing the jupyter notebook server 4.2+, follow the steps for
installing the development version of JupyterLab. To build the examples,
enter from the ``jupyterlab`` repo root directory:
::
jlpm run build:examples
To run a particular example, navigate to the example's subdirectory in
the ``examples`` directory and enter:
::
python main.py
Dissecting the 'filebrowser' example
------------------------------------
The filebrowser example provides a stand-alone implementation of a
filebrowser. Here's what the filebrowser’s user interface looks like:
|filebrowser user interface|
Let's take a closer look at the source code in ``examples/filebrowser``.
Directory structure of 'filebrowser' example
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The filebrowser in ``examples/filebrowser`` is comprised by a handful of
files and the ``src`` directory:
|filebrowser source code|
The filebrowser example has two key source files:
- ``src/index.ts``: the TypeScript file that defines the functionality
- ``main.py``: the Python file that enables the example to be run
Reviewing the source code of each file will help you see the role that
each file plays in the stand-alone filebrowser example.
.. |filebrowser user interface| image:: filebrowser_example.png
.. |filebrowser source code| image:: filebrowser_source.png
|
