jupyterlab_atp_extension

Name	jupyterlab_atp_extension JSON
Version	1.0.3 JSON
	download
home_page	None
Summary	A minimal JupyterLab extension opening a main area widget.
upload_time	2023-08-10 01:43:10
maintainer	None
docs_url	None
author	Project Jupyter Contributors
requires_python	>=3.8
license	BSD-3-Clause License
keywords
VCS
bugtrack_url
requirements	No requirements were recorded.
Travis-CI	No Travis.
coveralls test coverage	No coveralls.

            # Widgets

> Add a new Widget element to the main window.

In this example you will learn how to add a new tab to JupyterLab.

Visible elements such as tabs and notebooks are represented by widgets in the [Lumino](https://lumino.readthedocs.io/en/stable/api/modules/widgets.html)
library that is the basis of the JupyterLab application.

It is the fundamental brick of any visual component in the JupyterLab interface.

![New Tab with a Custom Widget](preview.png)
## ATP 定制服务端发起训练插件

![img.png](docs/img.png)

## A Basic Tab

The base widget class can be imported with:

```ts
// src/index.ts#L8-L8

import { Widget } from '@lumino/widgets';
```

It requires to add the library as package dependency:

```bash
jlpm add @lumino/widgets
```

A Widget can be added to the main area through the
[JupyterLab Shell](https://jupyterlab.readthedocs.io/en/latest/api/classes/application.LabShell.html).

Inside of the `activate` function, you can obtain it through the `shell` attribute
of the `app` object:

```ts
// src/index.ts#L19-L19

const { commands, shell } = app;
```

Then the widget can be inserted by calling the `add` method, like in the command defined
in this example:

<!-- prettier-ignore-start -->
```ts
// src/index.ts#L25-L28

execute: () => {
  const widget = new ExampleWidget();
  shell.add(widget, 'main');
}
```
<!-- prettier-ignore-end -->

The custom widget `ExampleWidget` is inherited from the base class `Widget`.

In this case, no specific behavior is defined for the widget. Only some properties are set:

- `addClass`: Add a CSS class to allow widget styling
- `id`: id of the widget's DOM node - it is mandatory to be set to be included in JupyterLab
- `title.label`: The widget tab title
- `title.closable`: Allow the widget tab to be closed

```ts
// src/index.ts#L36-L44

class ExampleWidget extends Widget {
  constructor() {
    super();
    this.addClass('jp-example-view');
    this.id = 'iflytek-atp-widget';
    this.title.label = 'Widget Example View';
    this.title.closable = true;
  }
}
```

You can associate style properties to the custom CSS class in the file
`style/base.css`:

<!-- prettier-ignore-start -->
<!-- embedme style/base.css#L7-L9 -->

```css
.jp-example-view {
  background-color: aliceblue;
}
```
<!-- prettier-ignore-end -->

## Where to Go Next

This example uses a command to display the widget. Have a look a the
[commands example](../commands/README.md) for more information about it.

The widget created in this example is simple. You will find more advanced
widgets in the following examples:

- Widget showing a [Datagrid](../datagrid/README.md)
- Widget integrating [React components](../react-widget/README.md)
- Widget interacting with a [Kernel](../kernel-messaging/README.md)
- Extending document widget (like the notebook panel) with a new [Toolbar Button](../toolbar-button/README.md)

            

Raw data

            {
    "_id": null,
    "home_page": null,
    "name": "jupyterlab_atp_extension",
    "maintainer": null,
    "docs_url": null,
    "requires_python": ">=3.8",
    "maintainer_email": null,
    "keywords": null,
    "author": "Project Jupyter Contributors",
    "author_email": null,
    "download_url": "https://files.pythonhosted.org/packages/43/01/ac5e223d4850a3a87f08e87a6c941ce5f52fa8a1298ba7e42fad0c67953b/jupyterlab_atp_extension-1.0.3.tar.gz",
    "platform": null,
    "description": "# Widgets\n\n> Add a new Widget element to the main window.\n\nIn this example you will learn how to add a new tab to JupyterLab.\n\nVisible elements such as tabs and notebooks are represented by widgets in the [Lumino](https://lumino.readthedocs.io/en/stable/api/modules/widgets.html)\nlibrary that is the basis of the JupyterLab application.\n\nIt is the fundamental brick of any visual component in the JupyterLab interface.\n\n![New Tab with a Custom Widget](preview.png)\n## ATP \u5b9a\u5236\u670d\u52a1\u7aef\u53d1\u8d77\u8bad\u7ec3\u63d2\u4ef6\n\n![img.png](docs/img.png)\n\n## A Basic Tab\n\nThe base widget class can be imported with:\n\n```ts\n// src/index.ts#L8-L8\n\nimport { Widget } from '@lumino/widgets';\n```\n\nIt requires to add the library as package dependency:\n\n```bash\njlpm add @lumino/widgets\n```\n\nA Widget can be added to the main area through the\n[JupyterLab Shell](https://jupyterlab.readthedocs.io/en/latest/api/classes/application.LabShell.html).\n\nInside of the `activate` function, you can obtain it through the `shell` attribute\nof the `app` object:\n\n```ts\n// src/index.ts#L19-L19\n\nconst { commands, shell } = app;\n```\n\nThen the widget can be inserted by calling the `add` method, like in the command defined\nin this example:\n\n<!-- prettier-ignore-start -->\n```ts\n// src/index.ts#L25-L28\n\nexecute: () => {\n  const widget = new ExampleWidget();\n  shell.add(widget, 'main');\n}\n```\n<!-- prettier-ignore-end -->\n\nThe custom widget `ExampleWidget` is inherited from the base class `Widget`.\n\nIn this case, no specific behavior is defined for the widget. Only some properties are set:\n\n- `addClass`: Add a CSS class to allow widget styling\n- `id`: id of the widget's DOM node - it is mandatory to be set to be included in JupyterLab\n- `title.label`: The widget tab title\n- `title.closable`: Allow the widget tab to be closed\n\n```ts\n// src/index.ts#L36-L44\n\nclass ExampleWidget extends Widget {\n  constructor() {\n    super();\n    this.addClass('jp-example-view');\n    this.id = 'iflytek-atp-widget';\n    this.title.label = 'Widget Example View';\n    this.title.closable = true;\n  }\n}\n```\n\nYou can associate style properties to the custom CSS class in the file\n`style/base.css`:\n\n<!-- prettier-ignore-start -->\n<!-- embedme style/base.css#L7-L9 -->\n\n```css\n.jp-example-view {\n  background-color: aliceblue;\n}\n```\n<!-- prettier-ignore-end -->\n\n## Where to Go Next\n\nThis example uses a command to display the widget. Have a look a the\n[commands example](../commands/README.md) for more information about it.\n\nThe widget created in this example is simple. You will find more advanced\nwidgets in the following examples:\n\n- Widget showing a [Datagrid](../datagrid/README.md)\n- Widget integrating [React components](../react-widget/README.md)\n- Widget interacting with a [Kernel](../kernel-messaging/README.md)\n- Extending document widget (like the notebook panel) with a new [Toolbar Button](../toolbar-button/README.md)\n",
    "bugtrack_url": null,
    "license": "BSD-3-Clause License",
    "summary": "A minimal JupyterLab extension opening a main area widget.",
    "version": "1.0.3",
    "project_urls": {
        "Bug Tracker": "https://github.com/jupyterlab/extension-examples/issues",
        "Homepage": "https://github.com/jupyterlab/extension-examples",
        "Repository": "https://github.com/jupyterlab/extension-examples.git"
    },
    "split_keywords": [],
    "urls": [
        {
            "comment_text": null,
            "digests": {
                "blake2b_256": "7f157120e61eee63975c326d9bde365f761785701d99e99a8d0cc0f2a8e2d8f6",
                "md5": "9737fd37b69a4b384e3a5a6dceb8ef64",
                "sha256": "e4ca2c582b552cd3080c23051bcba62baf8109dbf941b2da15936f2ab830d48e"
            },
            "downloads": -1,
            "filename": "jupyterlab_atp_extension-1.0.3-py3-none-any.whl",
            "has_sig": false,
            "md5_digest": "9737fd37b69a4b384e3a5a6dceb8ef64",
            "packagetype": "bdist_wheel",
            "python_version": "py3",
            "requires_python": ">=3.8",
            "size": 45245,
            "upload_time": "2023-08-10T01:43:07",
            "upload_time_iso_8601": "2023-08-10T01:43:07.556540Z",
            "url": "https://files.pythonhosted.org/packages/7f/15/7120e61eee63975c326d9bde365f761785701d99e99a8d0cc0f2a8e2d8f6/jupyterlab_atp_extension-1.0.3-py3-none-any.whl",
            "yanked": false,
            "yanked_reason": null
        },
        {
            "comment_text": null,
            "digests": {
                "blake2b_256": "4301ac5e223d4850a3a87f08e87a6c941ce5f52fa8a1298ba7e42fad0c67953b",
                "md5": "21e9113115f403a6cc63fbbb7d385933",
                "sha256": "9a0c44ca59a2fcd62412b9378219003ed887e3a7d23e71a03f2e823935397a86"
            },
            "downloads": -1,
            "filename": "jupyterlab_atp_extension-1.0.3.tar.gz",
            "has_sig": false,
            "md5_digest": "21e9113115f403a6cc63fbbb7d385933",
            "packagetype": "sdist",
            "python_version": "source",
            "requires_python": ">=3.8",
            "size": 381859,
            "upload_time": "2023-08-10T01:43:10",
            "upload_time_iso_8601": "2023-08-10T01:43:10.098677Z",
            "url": "https://files.pythonhosted.org/packages/43/01/ac5e223d4850a3a87f08e87a6c941ce5f52fa8a1298ba7e42fad0c67953b/jupyterlab_atp_extension-1.0.3.tar.gz",
            "yanked": false,
            "yanked_reason": null
        }
    ],
    "upload_time": "2023-08-10 01:43:10",
    "github": true,
    "gitlab": false,
    "bitbucket": false,
    "codeberg": false,
    "github_user": "jupyterlab",
    "github_project": "extension-examples",
    "travis_ci": false,
    "coveralls": false,
    "github_actions": true,
    "lcname": "jupyterlab_atp_extension"
}