elements by default. These are accessible\n",
" // as ``this.el``. Many Bokeh views ignore the default
and\n",
" // instead do things like draw to the HTML canvas. In this case though,\n",
" // the program changes the contents of the
based on the current\n",
" // slider value.\n",
" super.render()\n",
"\n",
" this.shadow_el.appendChild(div({\n",
" style: {\n",
" padding: '2px',\n",
" color: '#b88d8e',\n",
" backgroundColor: '#2a3153',\n",
" },\n",
" }, `${this.model.text}: ${this.model.slider.value}`))\n",
" }\n",
"}\n",
"\n",
"export class Custom extends UIElement {\n",
" slider: {value: string}\n",
"\n",
" // Generally, the ``__name__`` class attribute should match the name of\n",
" // the corresponding Python class exactly. TypeScript matches the name\n",
" // automatically during compilation, so, barring some special cases, you\n",
" // don't have to do this manually. This helps avoid typos, which stop\n",
" // serialization/deserialization of the model.\n",
" static __name__ = \"Surface3d\"\n",
"\n",
" static {\n",
" // If there is an associated view, this is typically boilerplate.\n",
" this.prototype.default_view = CustomView\n",
"\n",
" // The this.define() block adds corresponding \"properties\" to the JS\n",
" // model. These should normally line up 1-1 with the Python model\n",
" // class. Most property types have counterparts. For example,\n",
" // bokeh.core.properties.String will correspond to ``String`` in the\n",
" // JS implementation. Where JS lacks a given type, you can use\n",
" // ``p.Any`` as a \"wildcard\" property type.\n",
" this.define(({String, Ref}) => ({\n",
" text: [ String ],\n",
" slider: [ Ref(Slider) ],\n",
" }))\n",
" }\n",
"}\n",
"```"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Zusammenfügen\n",
"\n",
"Bei integrierten Bokeh-Modellen wird die Implementierung in BokehJS vom Build-Prozess automatisch mit dem entsprechenden Python-Modell abgeglichen. Um JavaScript-Implementierungen mit Python-Modellen zu verbinden, ist ein zusätzlicher Schritt erforderlich. Die Python-Klasse sollte über ein Klassenattribut `__implementation__` verfügen, dessen Name der TypeScript-Code (oder JavaScript- oder CoffeeScript-Code) ist, der das clientseitige Modell sowie optionale Ansichten definiert.\n",
"\n",
"Vorausgesetzt, der obige TypeScript-Code wurde in einer Datei `custom.ts` gespeichert, könnte die vollständige Python-Klasse folgendermaßen aussehen:"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"from bokeh.core.properties import Instance, String\n",
"from bokeh.models import LayoutDOM, Slider\n",
"\n",
"\n",
"class Custom(LayoutDOM):\n",
" __implementation__ = \"custom.ts\"\n",
"\n",
" text = String(default=\"Custom text\")\n",
"\n",
" slider = Instance(Slider)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Wenn diese Klasse dann in einem Python-Modul `custom.py` definiert ist, kann die benutzerdefinierte Erweiterung jetzt genau wie jedes integrierte Bokeh-Modell verwendet werden:"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"from bokeh.io import output_file, show\n",
"from bokeh.layouts import column\n",
"from bokeh.models import Slider\n",
"\n",
"\n",
"slider = Slider(start=0, end=10, step=0.1, value=0, title=\"value\")\n",
"\n",
"custom = Custom(text=\"Special Slider Display\", slider=slider)\n",
"\n",
"layout = column(slider, custom)\n",
"\n",
"show(layout)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Integration in Bokeh Server\n",
"\n",
"Es sind keine besonderen Arbeiten oder Modifikationen erforderlich, um benutzerdefinierte Erweiterungen in den Bokeh-Server zu integrieren. Wie bei Standalone-Dokumenten ist die JavaScript-Implementierung automatisch in der gerenderten Anwendung enthalten. Zusätzlich erfolgt die Standardsynchronisation der Bokeh-Modelleigenschaften, die für alle integrierten Modelle gilt, auch transparent für benutzerdefinierte Erweiterungen."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Beispiele\n",
"\n",
"In der Bokeh-Dokumentation stehen einige vollständige Beispiele zur Verfügung, die als Referenz dienen sollen. In vielen Fällen ist es erforderlich, den Quellcode der Basisklassen in [bokehjs/src/lib/models](https://github.com/bokeh/bokeh/tree/1.0.4/bokehjs/src/lib/models) zu studieren.\n",
"\n",
"* [Specialized Axis Ticking](https://docs.bokeh.org/en/latest/docs/examples/advanced/extensions/ticking.html)\n",
"* [A New Custom Tool](https://docs.bokeh.org/en/latest/docs/examples/advanced/extensions/tool.html)\n",
"* [Wrapping A JavaScript Library](https://docs.bokeh.org/en/latest/docs/examples/advanced/extensions/wrapping.html)\n",
"* [Creating Latex Labels](https://docs.bokeh.org/en/latest/docs/examples/models/latex_labels.html)\n",
"* [Adding A Custom Widget](https://docs.bokeh.org/en/latest/docs/examples/advanced/extensions/widget.html)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3.11 Kernel",
"language": "python",
"name": "python311"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.11.4"
},
"latex_envs": {
"LaTeX_envs_menu_present": true,
"autoclose": false,
"autocomplete": true,
"bibliofile": "biblio.bib",
"cite_by": "apalike",
"current_citInitial": 1,
"eqLabelWithNumbers": true,
"eqNumInitial": 1,
"hotkeys": {
"equation": "Ctrl-E",
"itemize": "Ctrl-I"
},
"labels_anchors": false,
"latex_user_defs": false,
"report_style_numbering": false,
"user_envs_cfg": false
},
"widgets": {
"application/vnd.jupyter.widget-state+json": {
"state": {},
"version_major": 2,
"version_minor": 0
}
}
},
"nbformat": 4,
"nbformat_minor": 4
}