diff --git a/doc/explanation/api/api_context.md b/doc/explanation/api/api_context.md deleted file mode 100644 index 8aa0a2c664..0000000000 --- a/doc/explanation/api/api_context.md +++ /dev/null @@ -1,3 +0,0 @@ -# API context - -WIP diff --git a/doc/how_to/apis/callbacks.md b/doc/explanation/api/callbacks.md similarity index 100% rename from doc/how_to/apis/callbacks.md rename to doc/explanation/api/callbacks.md diff --git a/doc/how_to/apis/examples/stocks_callbacks.md b/doc/explanation/api/examples/stocks_callbacks.md similarity index 98% rename from doc/how_to/apis/examples/stocks_callbacks.md rename to doc/explanation/api/examples/stocks_callbacks.md index 77ab027035..a7c733963b 100644 --- a/doc/how_to/apis/examples/stocks_callbacks.md +++ b/doc/explanation/api/examples/stocks_callbacks.md @@ -53,7 +53,6 @@ plot_fns = { This example demonstrates how APIs in Panel differ, to see the same app implemented using a different API visit: - [Declarative API](stocks_declarative) -- [Interact API](stocks_interact) - [Reactive API](stocks_reactive) Other APIs in Panel are all reactive in some way, triggering actions whenever manipulating a widget causes a parameter to change, without users writing code to trigger callbacks explicitly. The callback based API on the other allows complete low-level control of precisely how the different components of the app are updated, but they can quickly become unmaintainable because the complexity increases dramatically as more callbacks are added. The approach works by defining callbacks using the ``.param.watch`` API that either update or replace the already rendered components when a watched parameter changes: diff --git a/doc/how_to/apis/examples/stocks_declarative.md b/doc/explanation/api/examples/stocks_declarative.md similarity index 98% rename from doc/how_to/apis/examples/stocks_declarative.md rename to doc/explanation/api/examples/stocks_declarative.md index 7dd70d09ea..6159f9a795 100644 --- a/doc/how_to/apis/examples/stocks_declarative.md +++ b/doc/explanation/api/examples/stocks_declarative.md @@ -53,7 +53,6 @@ plot_fns = { This example demonstrates how APIs in Panel differ, to see the same app implemented using a different API visit: - [Callback API](stocks_callbacks) -- [Interact API](stocks_interact) - [Reactive API](stocks_reactive) The declarative API expresses the app entirely as a single ``Parameterized`` class with parameters to declare the inputs, rather than explicit widgets. The parameters are independent of any GUI code, which can be important for maintaining large codebases, with parameters and functionality defined separately from any GUI or panel code. Once again the ``depends`` decorator is used to express the dependencies, but in this case the dependencies are expressed as strings referencing class parameters, not parameters of widgets. The parameters and the ``plot`` method can then be laid out independently, with Panel used only for this very last step. diff --git a/doc/how_to/apis/examples/stocks_reactive.md b/doc/explanation/api/examples/stocks_reactive.md similarity index 83% rename from doc/how_to/apis/examples/stocks_reactive.md rename to doc/explanation/api/examples/stocks_reactive.md index c4dbf2b136..a657b905bf 100644 --- a/doc/how_to/apis/examples/stocks_reactive.md +++ b/doc/explanation/api/examples/stocks_reactive.md @@ -54,9 +54,8 @@ This example demonstrates how APIs in Panel differ, to see the same app implemen - [Callback API](stocks_callbacks) - [Declarative API](stocks_declarative) -- [Interact API](stocks_interact) -The reactive programming model is similar to the ``interact`` function but relies on the user (a) explicitly instantiating widgets, (b) declaring how those widgets relate to the function arguments (using the ``bind`` function), and (c) laying out the widgets and other components explicitly. In principle we could reuse the ``get_plot`` function from above here but for clarity we will repeat it: +The reactive programming model relies on the user (a) explicitly instantiating widgets, (b) declaring how those widgets relate to the function arguments (using the ``bind`` function), and (c) laying out the widgets and other components explicitly. In principle we could reuse the ``get_plot`` function from above here but for clarity we will repeat it: ```{pyodide} backend = pn.widgets.Select(name='Backend', options=plot_fns) diff --git a/doc/explanation/api/index.md b/doc/explanation/api/index.md new file mode 100644 index 0000000000..245671631e --- /dev/null +++ b/doc/explanation/api/index.md @@ -0,0 +1,80 @@ +# APIs + +Panel can be used to make a simple app in minutes, but you can also create complex apps with fully customized behavior and appearance or even flexibly integrate GUI support into long-term, large-scale software projects. + +To accommodate these different ways of using Panel, multiple APIs are available. Nearly all of the functionality of Panel can be accessed using any of the APIs, but each makes certain things much easier than others. + +Let's go work through each API with an example app while pointing out the benefits and drawback along the way. Here's a quick summary: +1. The ``Reactive API`` approach allows you to define a reactive function that is bound directly to a set of widgets using `pn.bind`. This API is efficient while still being explicit, flexible, and maintainable. We recommend this for most users, especially those that are new to Panel. +2. When writing libraries or other code that might be used independently of the actual GUI, a Parameterized class can be a great way to organize the code. In this case, dive into the ``Declarative API``. +3. If you need low-level control or want to complement any of the other approaches, defining explicit callbacks can be done with the ``Callbacks API``. + +::::{grid} 1 2 2 3 +:gutter: 1 1 1 2 + +:::{grid-item-card} {octicon}`infinity;2.5em;sd-mr-1 sd-animate-grow50` 1. Reactive API +:link: reactive +:link-type: doc + +Linking functions or methods to widgets using ``pn.bind`` or the equivalent ``pn.depends`` decorator. +::: + +:::{grid-item-card} {octicon}`codespaces;2.5em;sd-mr-1 sd-animate-grow50` 2. Declarative API +:link: parameterized +:link-type: doc + +Declare parameters and their ranges in `Parameterized` classes, then get GUIs (and value checking!) for free. +::: + +:::{grid-item-card} {octicon}`link;2.5em;sd-mr-1 sd-animate-grow50` 3. Callbacks API +:link: callbacks +:link-type: doc + +Generate a UI by manually declaring callbacks that update panels or panes. +::: + +:::: + +## Examples + +Below are additional recipes using each API to create slightly more advanced apps. + +::::{grid} 1 2 2 3 +:gutter: 1 1 1 2 + +:::{grid-item-card} Stock Explorer - Callback API +:img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_callback.png +:link: examples/stocks_callbacks +:link-type: doc + +Build a stock explorer app using the `.param.watch` callback API. +::: + +:::{grid-item-card} Stock Explorer - Declarative API +:img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_declarative.png +:link: examples/stocks_declarative +:link-type: doc + +Build a stock explorer app using the Param based declarative API. +::: + +:::{grid-item-card} Stock Explorer - Reactive API +:img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_reactive.png +:link: examples/stocks_reactive +:link-type: doc + +Build a stock explorer app using the reactive API. +::: + +:::: + +```{toctree} +:titlesonly: +:hidden: +:maxdepth: 2 + +reactive +interact +parameterized +callbacks +``` diff --git a/doc/how_to/apis/parameterized.md b/doc/explanation/api/parameterized.md similarity index 99% rename from doc/how_to/apis/parameterized.md rename to doc/explanation/api/parameterized.md index db3476ef47..d683dca34a 100644 --- a/doc/how_to/apis/parameterized.md +++ b/doc/explanation/api/parameterized.md @@ -1,4 +1,4 @@ -# Parameterized Classes +# Declarative API The [Param](http://param.holoviz.org) library allows expressing the parameters of a class (or a hierarchy of classes) completely independently of a GUI implementation. Panel and other libraries can then take those parameter declarations and turn them into a GUI to control the parameters. This approach allows the parameters controlling some computation to be captured specifically and explicitly (but as abstract parameters, not as widgets). Then thanks to the `@param.depends` decorator (similar to `@panel.depends` but for use in Parameterized classes without any dependency on Panel), it is then possible to directly express the dependencies between the parameters and the computation defined in some method on the class, all without ever importing Panel or any other GUI library. The resulting objects can then be used in both GUI and non-GUI contexts (batch computations, scripts, servers). diff --git a/doc/how_to/apis/reactive.md b/doc/explanation/api/reactive.md similarity index 56% rename from doc/how_to/apis/reactive.md rename to doc/explanation/api/reactive.md index 87af1204ec..5fa7f754fd 100644 --- a/doc/how_to/apis/reactive.md +++ b/doc/explanation/api/reactive.md @@ -1,20 +1,20 @@ -# Reactive functions +# Reactive API -The `pn.bind` reactive programming API is very similar to the [`interact` function](interact) but is more explicit about widget selection and layout. `pn.bind` requires the programmer to select and configure widgets explicitly and to lay out components explicitly, without relying on inference of widget types and ranges and without any default layouts. Specifying those aspects explicitly provides more power and control, but does typically take a bit more code and more knowledge of widget and layout components than using `interact` does. Once widgets have been bound to a reactive function, you can lay out the bound function and the widgets in any order or combination you like, including across Jupyter notebook cells if desired. +The `pn.bind` reactive programming API requires the programmer to select and configure widgets and to lay out components explicitly. Once widgets have been bound to a reactive function, you can lay out the bound function and the widgets in any order or combination you like, including across Jupyter notebook cells if desired. ## Pros: -+ Very clear mapping from widgets to the arguments of the function. -+ Very explicit layout of each of the different components. -+ Like `interact`, doesn't typically require modifying existing visualization code. ++ Clear mapping from widgets to the arguments of the function. ++ Explicit layout of each of the different components. ++ Doesn't typically require modifying existing visualization code. ## Cons: -- Typically requires a bit more code than `interact` ++ Compared to the Declarative API approach, the resulting code is specific to the GUI framework ## Explanation -In this model, we can use an existing plotting function just as for `interact`, but then need to declare each widget explicitly and then bind a widget to each of the arguments that we want to be interactive. The `pn.bind` function works much like [`functools.partial`](https://docs.python.org/3/library/functools.html#functools.partial) in that it binds regular arguments and keyword arguments to a function. `partial` can only bind specific, static arguments like `5`, but `pn.bind` can also bind parameters, widgets, and other dynamic functions with dependencies to the arguments, ensuring when the function is called the current values of the parameters are passed to the function. A bound function is then reactive, updating whenever the widget values change. +In this model, we can use an existing plotting function, declare each widget explicitly, and then bind a widget to each of the arguments that we want to be interactive. The `pn.bind` function works much like [`functools.partial`](https://docs.python.org/3/library/functools.html#functools.partial) in that it binds regular arguments and keyword arguments to a function. `partial` can only bind specific, static arguments like `5`, but `pn.bind` can also bind parameters, widgets, and other dynamic functions with dependencies to the arguments, ensuring when the function is called the current values of the parameters are passed to the function. A bound function is then reactive, updating whenever the widget values change. To make the concept of binding clear, let's look at a trivial example first: @@ -58,7 +58,7 @@ pn.Row( ) ``` -Notice how here we didn't even need the `autompg_plot` function here, because `bind` works with both methods and functions, so for this particular case the reactive API works out to the same amount of code as the [`interact`](interact) API. +Notice how here we didn't even need the `autompg_plot` function because `bind` works with both methods and functions. If you are writing code specifically for building an app, and do not wish to keep domain and GUI code separate, the functionality of `pn.bind` is also available as a decorator `@pn.depends`: diff --git a/doc/explanation/apis.md b/doc/explanation/apis.md index 56c7e56fed..9c162e3fe2 100644 --- a/doc/explanation/apis.md +++ b/doc/explanation/apis.md @@ -10,5 +10,5 @@ :hidden: :maxdepth: 1 -API context +API context ``` diff --git a/doc/explanation/index.md b/doc/explanation/index.md index 122c480507..fb639391cf 100644 --- a/doc/explanation/index.md +++ b/doc/explanation/index.md @@ -9,11 +9,11 @@ Beyond the [Getting Started > Core Concepts](../getting_started/core_concepts.md ::::{grid} 1 2 2 3 :gutter: 1 1 1 2 -:::{grid-item-card} {octicon}`arrow-both;2.5em;sd-mr-1 sd-animate-grow50` API context -:link: api/api_context +:::{grid-item-card} {octicon}`workflow;2.5em;sd-mr-1 sd-animate-grow50` API context +:link: api/index :link-type: doc -Learn why there are multiple Panel APIs. +Learn the pros and cons of Panel's different APIs. ::: :::: diff --git a/doc/how_to/apis/examples/stocks_interact.md b/doc/how_to/apis/examples/stocks_interact.md deleted file mode 100644 index ed666206c6..0000000000 --- a/doc/how_to/apis/examples/stocks_interact.md +++ /dev/null @@ -1,68 +0,0 @@ -# Stock Explorer - Interact API - -Before launching into the application code we will first declare some components of the app that will be shared, including the title of the app, a set of stock tickers, a function to return a dataframe given the stock ``ticker`` and the rolling mean ``window_size``, and another function to return a plot given those same inputs: - -```{pyodide} -import panel as pn -import pandas as pd -import altair as alt -import plotly.graph_objects as go - -from bokeh.sampledata import stocks -from matplotlib.figure import Figure - -pn.extension('plotly', 'vega', template='bootstrap') -import hvplot.pandas - -tickers = ['AAPL', 'FB', 'GOOG', 'IBM', 'MSFT'] - -def get_df(ticker, window_size): - df = pd.DataFrame(getattr(stocks, ticker)) - df['date'] = pd.to_datetime(df.date) - return df.set_index('date').rolling(window=window_size).mean().reset_index() - -def get_altair(ticker, window_size): - df = get_df(ticker, window_size) - return alt.Chart(df).mark_line().encode(x='date', y='close').properties( - width="container", height=400 - ) - -def get_hvplot(ticker, window_size): - df = get_df(ticker, window_size) - return df.hvplot.line('date', 'close', grid=True, responsive=True, height=400) - -def get_mpl(ticker, window_size): - fig = Figure(figsize=(10, 6)) - ax = fig.subplots() - df = get_df(ticker, window_size) - df.plot.line('date', 'close', ax=ax) - return fig - -def get_plotly(ticker, window_size): - df = get_df(ticker, window_size) - return go.Scatter(x=df.date, y=df.close) - -plot_fns = { - 'altair': get_altair, - 'hvplot': get_hvplot, - 'matplotlib': get_mpl, - 'plotly': get_plotly -} -``` - -This example demonstrates how APIs in Panel differ, to see the same app implemented using a different API visit: - -- [Callback API](stocks_callbacks) -- [Declarative API](stocks_declarative) -- [Reactive API](stocks_reactive) - -In the ``interact`` model the widgets are automatically generated from the arguments to the function or by providing additional hints to the ``interact`` call. This is a very convenient way to generate a simple app, particularly when first exploring some data. However, because widgets are created implicitly based on introspecting the code, it is difficult to see how to modify the behavior. Also, to compose the different components in a custom way it is necessary to unpack the layout returned by the ``interact`` call, as we do here: - -```{pyodide} -def plot(backend, ticker, window_size): - return backend(ticker, window_size) - -interact = pn.interact(plot, ticker=tickers, window_size=(1, 51, 5), backend=plot_fns) - -pn.Row(interact[0], interact[1]).servable() -``` diff --git a/doc/how_to/apis/examples/stocks_plotly.md b/doc/how_to/apis/examples/stocks_plotly.md deleted file mode 100644 index ae9fc62c3b..0000000000 --- a/doc/how_to/apis/examples/stocks_plotly.md +++ /dev/null @@ -1,9 +0,0 @@ -# - -import panel as pn -import pandas as pd -import altair as alt - -from bokeh.sampledata import stocks - -pn.extension('vega', template='fast') diff --git a/doc/how_to/apis/index.md b/doc/how_to/apis/index.md deleted file mode 100644 index 80198cf5e1..0000000000 --- a/doc/how_to/apis/index.md +++ /dev/null @@ -1,93 +0,0 @@ -# APIs - -Panel can be used to make a first pass at an app or dashboard in minutes, while also allowing you to fully customize the app's behavior and appearance or flexibly integrate GUI support into long-term, large-scale software projects. To accommodate these different ways of using Panel, four different APIs are available: - -::::{grid} 1 2 2 4 -:gutter: 1 1 1 2 - -:::{grid-item-card} {octicon}`infinity;2.5em;sd-mr-1 sd-animate-grow50` Reactive API -:link: reactive -:link-type: doc - -Linking functions or methods to widgets using ``pn.bind`` or the equivalent ``pn.depends`` decorator. -::: - -:::{grid-item-card} {octicon}`pulse;2.5em;sd-mr-1 sd-animate-grow50` Interact functions -:link: interact -:link-type: doc - -Auto-generates a full UI (including widgets) given a function. -::: - -:::{grid-item-card} {octicon}`codespaces;2.5em;sd-mr-1 sd-animate-grow50` Param API -:link: parameterized -:link-type: doc - -Declare parameters and their ranges in `Parameterized` classes, then get GUIs (and value checking!) for free. -::: - - -:::{grid-item-card} {octicon}`link;2.5em;sd-mr-1 sd-animate-grow50` Callbacks API -:link: callbacks -:link-type: doc - -Generate a UI by manually declaring callbacks that update panels or panes. -::: - -:::: - -Each of these APIs has its own benefits and drawbacks, so this section will go through each one in turn, while working through an example app and pointing out the benefits and drawback along the way. For a quick overview you can also review the API gallery examples, e.g. the [stocks_hvplot](../../gallery/apis/stocks_hvplot.ipynb) app. - -As you will discover, each of these four APIs allows building the same basic application. The choice of the appropriate API depends very much on the use case. To build a quick throwaway GUI the ``interact`` approach can be completely sufficient. A much more explicit, flexible, and maintainable version of that approach is to define a reactive function that is bound directly to a set of widgets using `pn.bind`. When writing libraries or other code that might be used independently of the actual GUI, a Parameterized class can be a great way to organize the code. - -Finally, if you need low-level control or want to complement any of the other approaches, defining explicit callbacks can be the best approach. Nearly all of the functionality of Panel can be accessed using any of the APIs, but each makes certain things much easier than others. Choosing the API is therefore a matter of considering the tradeoffs and of course also a matter of preference. If you still aren't sure after reading the above, then just go with the `pn.bind` reactive API! - -## Examples - -::::{grid} 1 2 2 3 -:gutter: 1 1 1 2 - -:::{grid-item-card} Stock Explorer - Callback API -:img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_callback.png -:link: examples/stocks_callbacks -:link-type: doc - -Build a stock explorer app using the `.param.watch` callback API. -::: - -:::{grid-item-card} Stock Explorer - Declarative API -:img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_declarative.png -:link: examples/stocks_declarative -:link-type: doc - -Build a stock explorer app using the Param based declarative API. -::: - -:::{grid-item-card} Stock Explorer - Interact API -:img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_interact.png -:link: examples/stocks_interact -:link-type: doc - -Build a stock explorer app using the interact API. -::: - -:::{grid-item-card} Stock Explorer - Reactive API -:img-top: https://assets.holoviz.org/panel/how_to/apis/stocks_reactive.png -:link: examples/stocks_reactive -:link-type: doc - -Build a stock explorer app using the reactive API. -::: - -:::: - -```{toctree} -:titlesonly: -:hidden: -:maxdepth: 2 - -reactive -interact -parameterized -callbacks -``` diff --git a/doc/how_to/apis/interact.md b/doc/how_to/apis/interact.md deleted file mode 100644 index ff02395528..0000000000 --- a/doc/how_to/apis/interact.md +++ /dev/null @@ -1,55 +0,0 @@ -# Interact Functions - -The ``interact`` function will automatically generate a UI (including widgets) by inspecting the arguments of the function given to it, or by using additional hints you provide in the ``interact`` function call. If you have worked with the [``ipywidgets``](https://github.com/jupyter-widgets/ipywidgets) package you may already be familiar with this approach. (In fact, the Panel interact function is modeled on the one from ipywidgets, making it simpler to port code between the two platforms.) The basic idea is that given a function that returns some object, Panel will inspect the arguments to that function, try to infer appropriate widgets for those arguments, and then re-run that function to update the output whenever one of the widgets generates an event. For more detail on how interact creates widgets and other ways of using it, see the Panel [interact user guide](./Interact.md). This section instead focuses on when and why to use this API, laying out its benefits and drawbacks. - -The main benefit of this approach is convenience and ease of use. You start by writing some function that returns an object, be that a plot, a dataframe, or anything else that Panel can render. Then with a single call to `pn.interact()`, you can immediately get an interactive UI, without ever instantiating any widgets or wiring up any callbacks explicitly. Unlike ipywidgets, the ``pn.interact`` call will return a Panel. This Panel can then be further modified by laying out the widgets and output separately, or combining these components with other panes. Even though `pn.interact` itself is limited in flexibility compared to the rest of Panel, you can still unpack and reconfigure the results from it to generate fairly complex GUIs in very little code. - -## Pros: - -+ Easy to use (or at least easy to get started!). -+ Doesn't typically require modifying existing visualization code. - -## Cons: - -- Most of the behavior is implicit, with magic happening by introspection, making it difficult to see how to modify the appearance or functionality of the resulting object. -- Customizing the layout requires indexing into the panel returned by `interact`. - -## Explanation - -The magic of the `interact` API derives from the fact that it inspects the signature of a function and/or the arguments passed to `interact` and automatically generates widgets appropriate for controlling those arguments. - -As an example let us declare a simple function that returns the arguments formatted as a string. If we pass in an integer for argument `a` and a string for argument `b` it will generate a slider and string input widget for each argument respectively: - -```{pyodide} -import panel as pn -pn.extension() - -def fn(a, b): - return f'Arguments: {a,b}' - -pn.interact(fn, a=1, b='string') -``` - -This makes it very powerful for quickly making a function interactive but the behavior is very implicit and a more declarative approach is usually preferable for most usecases. - -## Example - -The simplest `interact` call can be a one-liner, but here we'll show an example of intermediate complexity so that you get a good idea of what `interact` can do in practice. In this code, ``pn.interact`` infers the initial value for `x` and `y` from the `autompg_plot` function default arguments and their widget type and range from the `columns` list provided to `interact`. `interact` wouldn't normally put up a color widget because it would have no way of knowing that this string-type argument represents an RGB color, and so here we explicitly create a color-picker widget and pass that as the value for the color so that we can control the color as well. - -Finally, we unpack the result from `interact` and rearrange it in a different layout with a title, to create the final app. See the Panel [interact user guide](./Interact.md) for even simpler examples along with details about how to control the widgets and how to rearrange the layout. - -```{pyodide} -import hvplot.pandas - -from bokeh.sampledata.autompg import autompg - -def autompg_plot(x='mpg', y='hp', color='#058805'): - return autompg.hvplot.scatter(x, y, c=color, padding=0.1) - -columns = list(autompg.columns[:-2]) - -color = pn.widgets.ColorPicker(name='Color', value='#4f4fdf') -layout = pn.interact(autompg_plot, x=columns, y=columns, color=color) - -pn.Row(pn.Column('## MPG Explorer', layout[0]), layout[1]) -``` diff --git a/doc/how_to/build_apps.md b/doc/how_to/build_apps.md index f7600326fb..2b60ba2c40 100644 --- a/doc/how_to/build_apps.md +++ b/doc/how_to/build_apps.md @@ -14,7 +14,4 @@ Construct individual components Styling components Arranging components Bind Component Parameters (Reactive API) -Autogenerate UIs (Interact API) -Explicitly link parameters (Callbacks API) -Generate UIs from declared parameters (Param API) ``` diff --git a/doc/how_to/index.md b/doc/how_to/index.md index 89dee4043f..8b9220f71d 100644 --- a/doc/how_to/index.md +++ b/doc/how_to/index.md @@ -15,13 +15,6 @@ The Panel How-to guides provide step by step recipes for solving essential probl How to effectively develop apps in your favorite notebook or code editor environment. ::: -:::{grid-item-card} {octicon}`workflow;2.5em;sd-mr-1 sd-animate-grow50` Choose an API -:link: apis/index -:link-type: doc - -How to choose from the different APIs offered by Panel. -::: - :::: @@ -58,31 +51,10 @@ How to apply designs, themes and custom styling to components to achieve a polis How to link selected widgets to arguments and make a reactive function. ::: -:::{grid-item-card} {octicon}`pulse;2.5em;sd-mr-1 sd-animate-grow50` Autogenerate UIs (`Interact API`) -:link: interact/index -:link-type: doc - -How to autogenerate UIs for function arguments. -::: - -:::{grid-item-card} {octicon}`codespaces;2.5em;sd-mr-1 sd-animate-grow50` Generate UIs from declared parameters (`Param API`) -:link: param/index -:link-type: doc - -How to use Parameterized classes with Panel to generate UIs without writing GUI code. -::: - -:::{grid-item-card} {octicon}`link;2.5em;sd-mr-1 sd-animate-grow50` Explicitly link parameters (`Callbacks API`) -:link: links/index -:link-type: doc - -How to link the parameters of Panel components in Python and Javascript. -::: - :::: -## Create specialized UIs +## Use specialized UIs and APIs ::::{grid} 1 2 2 3 :gutter: 1 1 1 2 @@ -101,6 +73,20 @@ How to build a Panel Pipeline that connects multiple panels into a sequential us How to extend Panel by building custom components. ::: +:::{grid-item-card} {octicon}`codespaces;2.5em;sd-mr-1 sd-animate-grow50` Generate UIs from declared parameters (`Declarative API`) +:link: param/index +:link-type: doc + +How to use Parameterized classes with Panel to generate UIs without writing GUI code. +::: + +:::{grid-item-card} {octicon}`link;2.5em;sd-mr-1 sd-animate-grow50` Explicitly link parameters (`Callbacks API`) +:link: links/index +:link-type: doc + +How to link the parameters of Panel components in Python and Javascript. +::: + :::: @@ -239,7 +225,7 @@ How to run Panel applications entirely in the browser using WebAssembly (Wasm), prepare_to_develop build_apps -create_specialized_uis +use_specialized_uis manage_session_tasks test_and_debug prepare_to_share diff --git a/doc/how_to/param/index.md b/doc/how_to/param/index.md index b6bddda814..72f276d920 100644 --- a/doc/how_to/param/index.md +++ b/doc/how_to/param/index.md @@ -1,4 +1,4 @@ -# Declare UIs with `Param` API +# Declare UIs with Declarative API Panel is built on [Param](https://param.holoviz.org) - a library for handling all the user-modifiable parameters, arguments, and attributes that control your code. This section contains how-to guides for using `Param` objects and declared dependencies to generate user interfaces with Panel. diff --git a/doc/how_to/create_specialized_uis.md b/doc/how_to/use_specialized_uis.md similarity index 56% rename from doc/how_to/create_specialized_uis.md rename to doc/how_to/use_specialized_uis.md index df5340275a..025b4e2ecd 100644 --- a/doc/how_to/create_specialized_uis.md +++ b/doc/how_to/use_specialized_uis.md @@ -1,9 +1,9 @@ .. raw:: html - + -# Create specialized UIs +# Use specialized UIs and APIs ```{toctree} :titlesonly: @@ -12,4 +12,6 @@ Build a sequential UI Build custom components +Explicitly link parameters (Callbacks API) +Generate UIs from declared parameters (Declarative API) ```