From 7115454234f9751e985c2c7be6ec97c6a575db8b Mon Sep 17 00:00:00 2001 From: Fabien Lelaquais Date: Tue, 10 Dec 2024 15:44:01 +0100 Subject: [PATCH 1/2] Make Page Builder great again --- .../generic/charts/advanced.md_template | 20 +- .../viselements/generic/dialog.md_template | 49 ++--- .../generic/expandable.md_template | 17 +- .../viselements/generic/indicator.md_template | 17 +- .../viselements/generic/layout.md_template | 93 ++++----- .../gui/viselements/generic/pane.md_template | 174 +++++++---------- .../gui/viselements/generic/part.md_template | 70 +++---- .../gui/viselements/generic/table.md_template | 36 ++-- .../gui/viselements/generic/tree.md_template | 20 +- .../articles/3rd_party_components/index.md | 10 +- docs/tutorials/articles/chatbot/index.md | 14 +- .../articles/colab_with_ngrok/index.md | 8 +- .../complete_application/step_01/step_01.md | 46 +++-- .../tutorials/articles/cycles_scopes/index.md | 20 +- docs/tutorials/articles/dataiku/index.md | 128 ++++++------ docs/tutorials/articles/decimator/index.md | 60 +++--- docs/tutorials/articles/multi_user/index.md | 8 +- docs/tutorials/articles/pyspark/index.md | 9 +- .../scenario_management_overview/index.md | 60 +++--- .../articles/scenario_subscription/index.md | 9 +- docs/tutorials/articles/scenarios/index.md | 35 ++-- .../understanding_gui/step_02/step_02.md | 66 +++---- .../understanding_gui/step_03/step_03.md | 41 ++-- .../understanding_gui/step_04/step_04.md | 143 +++++++------- .../understanding_gui/step_05/step_05.md | 124 ++++++------ .../understanding_gui/step_06/step_06.md | 96 ++++----- .../understanding_gui/step_07/step_07.md | 177 +++++++++-------- .../getting_started/index.md_template | 53 +++-- docs/userman/gui/binding.md | 64 +++--- .../gui/extension/dynamic_element/index.md | 2 +- docs/userman/gui/extension/tabular_data.md | 10 +- docs/userman/gui/pages/dialog/index.md | 44 ++--- docs/userman/gui/pages/index.md | 129 ++++++------ docs/userman/gui/pages/navigate/index.md | 183 +++++++++--------- docs/userman/gui/pages/pane/index.md | 39 ++-- docs/userman/gui/pages/partial/index.md | 88 ++++----- docs/userman/gui/styling/index.md | 109 +++++++---- docs/userman/gui/viselements/introduction.md | 78 ++++++-- tools/_setup_generation/step_viselements.py | 94 ++++----- 39 files changed, 1210 insertions(+), 1233 deletions(-) diff --git a/docs/refmans/gui/viselements/generic/charts/advanced.md_template b/docs/refmans/gui/viselements/generic/charts/advanced.md_template index 847227caf..45e461d3d 100644 --- a/docs/refmans/gui/viselements/generic/charts/advanced.md_template +++ b/docs/refmans/gui/viselements/generic/charts/advanced.md_template @@ -457,7 +457,13 @@ bar above the chart and force the Box select tool. Here is the definition of the chart and text controls: !!! example "Definition" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + tgb.chart("{data}", selected="{selected_indices}", layout="{layout}", plot_config="{config}") + ``` === "Markdown" ``` @@ -465,7 +471,6 @@ Here is the definition of the chart and text controls: <|{data}|chart|selected={selected_indices}|layout={layout}|plot_config={config}|> ``` - === "HTML" ```html @@ -479,14 +484,6 @@ Here is the definition of the chart and text controls: plot_config="{config}">{data} ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - tgb.chart("{data}", selected="{selected_indices}", layout="{layout}", plot_config="{config}") - ``` - And here is what the resulting page looks like:
@@ -585,13 +582,16 @@ def range_changed(state, x1, x2, x3): [TODO] !!! example "Page content" + === "Python" + ```python + [TODO] + ``` === "Markdown" ``` [TODO] ``` - === "HTML" ```html diff --git a/docs/refmans/gui/viselements/generic/dialog.md_template b/docs/refmans/gui/viselements/generic/dialog.md_template index 4e36ee2de..b18154366 100644 --- a/docs/refmans/gui/viselements/generic/dialog.md_template +++ b/docs/refmans/gui/viselements/generic/dialog.md_template @@ -16,9 +16,17 @@ Buttons can be generated automatically within the dialog, based on the dialog co To add elements to a dialog, you must use block syntax in your code: !!! example "Definition" - + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.dialog("{is_opened}") + # more visual elements + # e.g. + tgb.text("Hello") + tgb.button("Confirm") + ``` === "Markdown" - ``` <|{is_opened}|dialog| ... more visual elements @@ -27,7 +35,6 @@ To add elements to a dialog, you must use block syntax in your code: <|Confirm|button|> |> ``` - === "HTML" ```html @@ -39,18 +46,6 @@ To add elements to a dialog, you must use block syntax in your code: ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.dialog("{is_opened}") - # more visual elements - # e.g. - tgb.text("Hello") - tgb.button("Confirm") - ``` - In this example, the dialog is opened or closed based on the value of the *is_opened* variable. The dialog contains a text element and a button labeled "Confirm." @@ -79,23 +74,7 @@ This function closes the dialog by setting its [*open*](#p-open) property to Fal Here is the definition of the dialog that references the *show_dialog* variable and the *hide()* callback function: !!! example "Definition" - - === "Markdown" - - ``` - <|{show_dialog}|dialog|on_action=hide|> - ``` - - Note that - - === "HTML" - - ```html - {show_dialog} - ``` - === "Python" - ```python import taipy.gui.builder as tgb ... @@ -107,6 +86,14 @@ callback function: `tgb.dialog("{show_dialog}", on_action=lambda s: s.assign("show_dialog", False))`
With this line, the dialog action is defined as a lambda function that sets *show_dialog* to False, effectively closing the dialog. The *hide()* is not needed any longer. + === "Markdown" + ``` + <|{show_dialog}|dialog|on_action=hide|> + ``` + === "HTML" + ```html + {show_dialog} + ``` To open the dialog, the *show_dialog* variable must be set to True. This can be done using a callback function triggered by another control (e.g., a button).
diff --git a/docs/refmans/gui/viselements/generic/expandable.md_template b/docs/refmans/gui/viselements/generic/expandable.md_template index 2e0c65e65..be7a4c36e 100644 --- a/docs/refmans/gui/viselements/generic/expandable.md_template +++ b/docs/refmans/gui/viselements/generic/expandable.md_template @@ -18,7 +18,14 @@ collapsed. The content of `expandable` can be specified as the block content. !!! example "Definition" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.expandable("Title") + tgb.text("{some_content}") + ``` === "Markdown" ``` @@ -28,7 +35,6 @@ The content of `expandable` can be specified as the block content. ... |> ``` - === "HTML" ```html @@ -39,15 +45,6 @@ The content of `expandable` can be specified as the block content. ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.expandable("Title") - tgb.text("{some_content}") - ``` - ## Expandable with page The content of the expandable can be specified as an existing page name using the [*page*](#p-page) diff --git a/docs/refmans/gui/viselements/generic/indicator.md_template b/docs/refmans/gui/viselements/generic/indicator.md_template index 4f90e777f..d9498baf8 100644 --- a/docs/refmans/gui/viselements/generic/indicator.md_template +++ b/docs/refmans/gui/viselements/generic/indicator.md_template @@ -42,7 +42,14 @@ The properties [*width*](#p-width) and [*height*](#p-height) can be specified, d the value of [*orientation*](#p-orientation). !!! example "Definition" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + tgb.indicator("{Value 1}", value="{val1}", width="50vw") + tgb.indicator("{Value 2}", value="{val2}", orientation="vertical", width="50vw") + ``` === "Markdown" ``` @@ -50,7 +57,6 @@ the value of [*orientation*](#p-orientation). <|Value 2|indicator|value={val2}|orientation=vertical|height=50vh|> ``` - === "HTML" ```html @@ -59,15 +65,6 @@ the value of [*orientation*](#p-orientation). Value 2 ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - tgb.indicator("{Value 1}", value="{val1}", width="50vw") - tgb.indicator("{Value 2}", value="{val2}", orientation="vertical", width="50vw") - ``` - # Styling All the indicator controls are generated with the "taipy-indicator" CSS class. You can use this diff --git a/docs/refmans/gui/viselements/generic/layout.md_template b/docs/refmans/gui/viselements/generic/layout.md_template index 1d06cca2b..cbe93527f 100644 --- a/docs/refmans/gui/viselements/generic/layout.md_template +++ b/docs/refmans/gui/viselements/generic/layout.md_template @@ -11,9 +11,14 @@ If the _columns_ property contains only digits and spaces, it is considered as f The default layout contains 2 columns in desktop mode and 1 column in mobile mode. !!! example "Definition" - + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.layout() + tgb.text("{some_content}") + ``` === "Markdown" - ``` <|layout| @@ -21,9 +26,7 @@ The default layout contains 2 columns in desktop mode and 1 column in mobile mod |> ``` - === "HTML" - ```html @@ -32,22 +35,21 @@ The default layout contains 2 columns in desktop mode and 1 column in mobile mod ``` +## Specifying gap + +The *gap* between adjacent cells is set by default to 0.5rem and can be specified using the +[*gap*](#p-gap) property. + +!!! example "Definition" === "Python" ```python import taipy.gui.builder as tgb ... - with tgb.layout() + with tgb.layout(gap="20px") tgb.text("{some_content}") ``` -## Specifying gap - -The *gap* between adjacent cells is set by default to 0.5rem and can be specified using the -[*gap*](#p-gap) property. - -!!! example "Definition" - === "Markdown" ``` @@ -68,23 +70,26 @@ The *gap* between adjacent cells is set by default to 0.5rem and can be specifie ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.layout(gap="20px") - tgb.text("{some_content}") - ``` - ## Layout with a central "greedy" column You can use the `fr` CSS unit so that the middle column use all the available space. !!! example "Definition" - + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.layout(columns="50px 1fr 50px") + with tgb.part() + tgb.text("1st column content") + with tgb.part() + tgb.text("2nd column content") + with tgb.part() + tgb.text("3rd column content") + with tgb.part() + tgb.text("1st column and second row content") + ``` === "Markdown" - ``` <|layout|columns=50px 1fr 50px| @@ -99,9 +104,7 @@ You can use the `fr` CSS unit so that the middle column use all the available sp ... |> ``` - === "HTML" - ```html @@ -120,31 +123,27 @@ You can use the `fr` CSS unit so that the middle column use all the available sp ``` - === "Python" +## Different layout for desktop and mobile devices + +The [*columns[mobile]*](#p-columns[mobile]) property allows to specify a different layout when +running on a mobile device. +!!! example "Definition" + === "Python" ```python import taipy.gui.builder as tgb ... - with tgb.layout(columns="50px 1fr 50px") + with tgb.layout(columns="50px 1fr 50px", columns__mobile="1 1") with tgb.part() tgb.text("1st column content") with tgb.part() tgb.text("2nd column content") with tgb.part() - tgb.text("3rd column content") + tgb.text("3rd column content or 2nd row 1st column on mobile") with tgb.part() - tgb.text("1st column and second row content") + tgb.text("1st column and second row content or 2nd row 2nd column on mobile") ``` - -## Different layout for desktop and mobile devices - -The [*columns[mobile]*](#p-columns[mobile]) property allows to specify a different layout when -running on a mobile device. - -!!! example "Definition" - === "Markdown" - ``` <|layout|columns=50px 1fr 50px|columns[mobile]=1 1| @@ -159,9 +158,7 @@ running on a mobile device. ... |> ``` - === "HTML" - ```html @@ -180,22 +177,6 @@ running on a mobile device. ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.layout(columns="50px 1fr 50px", columns__mobile="1 1") - with tgb.part() - tgb.text("1st column content") - with tgb.part() - tgb.text("2nd column content") - with tgb.part() - tgb.text("3rd column content or 2nd row 1st column on mobile") - with tgb.part() - tgb.text("1st column and second row content or 2nd row 2nd column on mobile") - ``` - # Styling All the layout blocks are generated with the "taipy-layout" CSS class. You can use this class diff --git a/docs/refmans/gui/viselements/generic/pane.md_template b/docs/refmans/gui/viselements/generic/pane.md_template index ed6bfe19d..ff8f3b488 100644 --- a/docs/refmans/gui/viselements/generic/pane.md_template +++ b/docs/refmans/gui/viselements/generic/pane.md_template @@ -66,25 +66,7 @@ show_pane = False Here is the definition of the main page of the application: !!! example "Definition" - - === "Markdown" - - ```python - page = """ - # The **pane** block - - <|{show_pane}|pane| - Here is the content of the pane. - |> - - This is the content of the page. - - <|Show pane|button|> - """ - ``` - === "Python" - ```python import taipy.gui.builder as tgb ... @@ -98,7 +80,20 @@ Here is the definition of the main page of the application: tgb.button("Show pane") ``` + === "Markdown" + ```python + page = """ + # The **pane** block + <|{show_pane}|pane| + Here is the content of the pane. + |> + + This is the content of the page. + + <|Show pane|button|> + """ + ``` We define the `on_action` callback function so that it sets *show_pane* to True: ```python def on_action(state): @@ -129,25 +124,7 @@ a lambda definition as the button's action. Here is an alternative page definition: !!! example "Definition" - - === "Markdown" - - ```python - page = """ - # The **pane** block - - <|{show_pane}|pane| - Here is the content of the pane. - |> - - This is the content of the page. - - <|Show pane|button|on_action={lambda s: s.assign("show_pane", True)}|> - """ - ``` - === "Python" - ```python import taipy.gui.builder as tgb ... @@ -161,7 +138,20 @@ Here is an alternative page definition: tgb.button("Show pane", on_action=lambda s: s.assign("show_pane", True)) ``` + === "Markdown" + ```python + page = """ + # The **pane** block + + <|{show_pane}|pane| + Here is the content of the pane. + |> + + This is the content of the page. + <|Show pane|button|on_action={lambda s: s.assign("show_pane", True)}|> + """ + ``` We set the *on_action* property of the button control to a lambda function that sets the variable *show_pane* to true, so the definition of the callback function is no longer needed. @@ -171,9 +161,19 @@ The [*anchor*](#p-anchor) property defines which side of the page the pane is sh Here is a simple page definition demonstrating the use of this property: !!! example "Definition" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.Page() as page: + with tgb.pane("{show_pane}", anchor="top", height="50px"): + tgb.text("Here is a some text that is displayed at the top of the page in a pane.") - === "Markdown" + tgb.text("# Main page content", mode="md") + tgb.text("This is the content of the page.") + ``` + === "Markdown" ```python page = """ <|{show_pane}|pane|anchor=top|height=50px| @@ -186,20 +186,6 @@ Here is a simple page definition demonstrating the use of this property: """ ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.Page() as page: - with tgb.pane("{show_pane}", anchor="top", height="50px"): - tgb.text("Here is a some text that is displayed at the top of the page in a pane.") - - tgb.text("# Main page content", mode="md") - - tgb.text("This is the content of the page.") - ``` - With the [*anchor*](#p-anchor) property set to "top", here is how the page appears when the pane is visible:
@@ -229,9 +215,19 @@ show_pane = False The page definition is slightly more complex than in the case where the pane overlaps the main page: !!! example "Definition" - + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.Page() as page: + with tgb.part("d-flex"): + with tgb.pane("{show_pane}", persistent=True, show_button=True, width="150px"): + tgb.text("Here is the content of the pane.") + with tgb.part(): + tgb.text("# Main page", mode="md") + tgb.text("Here is the content of the page.") + ``` === "Markdown" - ```python page = """ <|d-flex| @@ -245,20 +241,6 @@ page: |> ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.Page() as page: - with tgb.part("d-flex"): - with tgb.pane("{show_pane}", persistent=True, show_button=True, width="150px"): - tgb.text("Here is the content of the pane.") - with tgb.part(): - tgb.text("# Main page", mode="md") - tgb.text("Here is the content of the page.") - ``` - Note that the pane block has its [*show_button*](#p-show_button) property set to True so we don't have to create another control to open the pane.
Also note that the entire page is embedded in a "d-flex" part to make if possible to leverage the @@ -309,29 +291,7 @@ The pane visibility is stored in the variable *show_rate*. We need to define two pages: !!! example "Definition" - - === "Markdown" - - ``` - rate_page = """ - Rate (in %): - <|{rate}|number|> - """ - - page = """ - <|{show_rate}|pane|show_button|page=_rate_pane|> - - # Interest Calculator - Initial amount: <|{initial_investment}|number|> - - Periods: <|{periods}|number|min=0|max=50|> - - Final amount: <|{final_amount}|text|format=%.2f|> - """ - ``` - === "Python" - ```python import taipy.gui.builder as tgb ... @@ -353,6 +313,24 @@ We need to define two pages: tgb.text("Final amount: ", inline=True) tgb.text("{final_amount}", format="%.2f", inline=True) ``` + === "Markdown" + ``` + rate_page = """ + Rate (in %): + <|{rate}|number|> + """ + + page = """ + <|{show_rate}|pane|show_button|page=_rate_pane|> + + # Interest Calculator + Initial amount: <|{initial_investment}|number|> + + Periods: <|{periods}|number|min=0|max=50|> + + Final amount: <|{final_amount}|text|format=%.2f|> + """ + ``` The `pane` block has its [*show_button*](#p-show_button) property set to True so we don't need to explicitly create a button to show the pane.
@@ -393,27 +371,21 @@ The content of the pane can also be specified as a `Partial^` instance using the The control definition will then look like this: !!! example "Definition" - + === "Python" + ```python + import taipy.gui.builder as tgb + ... + tgb.pane("{show_pane}", partial="{partial}") + ``` === "Markdown" - ``` <|{show_pane}|pane|partial={partial}|> ``` - === "HTML" - ```html {show_pane} ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - tgb.pane("{show_pane}", partial="{partial}") - ``` - # Styling All the pane blocks are generated with the "taipy-pane" CSS class. You can use this class diff --git a/docs/refmans/gui/viselements/generic/part.md_template b/docs/refmans/gui/viselements/generic/part.md_template index bface5aff..3c60c17dc 100644 --- a/docs/refmans/gui/viselements/generic/part.md_template +++ b/docs/refmans/gui/viselements/generic/part.md_template @@ -83,6 +83,13 @@ The most straightforward use of the `part` block is to group different visual el element to make it easy to manipulate. !!! example "Definition" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.part() + tgb.text("{some_content}") + ``` === "Markdown" ``` <| @@ -91,7 +98,6 @@ element to make it easy to manipulate. ... |> ``` - === "HTML" ```html @@ -101,21 +107,19 @@ element to make it easy to manipulate. ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.part() - tgb.text("{some_content}") - ``` - ## Showing and hiding controls If you set the [*render*](#p-render) property to False, the `part` is not rendered at all: !!! example "Page content" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + with tgb.part(render=False) + tgb.text("{some_content}") + ``` === "Markdown" ``` <|part|don't render| @@ -124,7 +128,6 @@ at all: ... |> ``` - === "HTML" ```html @@ -134,15 +137,6 @@ at all: ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - with tgb.part(render=False) - tgb.text("{some_content}") - ``` - If the value of [*render*](#p-render) is bound to a Boolean value, the `part` will show or hide its elements according to the value of the bound variable. @@ -179,27 +173,24 @@ You can also embed an external web page, setting the [*page*](#p-page) property (starting with `http://` or `https://`) you want to render: !!! example "Definition" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + tgb.html("p", "Here is the Wikipedia home page:") + with tgb.part(page="https://www.wikipedia.org/", height="500px") + ``` === "Markdown" ``` Here is the Wikipedia home page: <|part|page=https://www.wikipedia.org/|height=500px|> ``` - === "HTML" ```html

Here is the Wikipedia home page:

``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - tgb.html("p", "Here is the Wikipedia home page:") - with tgb.part(page="https://www.wikipedia.org/", height="500px") - ``` - The resulting page will be displayed as this:
@@ -410,28 +401,21 @@ its value. In the page, add a [`slider`](slider.md) control bound to this variable: !!! example "Definition" - + === "Python" + ```python + import taipy.gui.builder as tgb + ... + tgb.slider("{expansion}", min=1, max=1000) + ``` === "Markdown" - ``` <|{expansion}|slider|min=1|max=1000|> ``` - === "HTML" - ```html {expansion} ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - tgb.slider("{expansion}", min=1, max=1000) - ``` - - Now, we modify the definition of the part content to dynamically create a *Spiral* instance with a new expansion value when the slider moves: !!! taipy-element diff --git a/docs/refmans/gui/viselements/generic/table.md_template b/docs/refmans/gui/viselements/generic/table.md_template index 992ffaa74..2eafb82ef 100644 --- a/docs/refmans/gui/viselements/generic/table.md_template +++ b/docs/refmans/gui/viselements/generic/table.md_template @@ -1233,21 +1233,7 @@ perform this aggregation. The value of this property, which is a string, can be: This control definition is all it takes to add aggregation functionality to the table: !!! example "Definition" - - === "Markdown" - - ``` - <|{data}|table|group_by[Group column]|apply[Apply column]=count|> - ``` - - === "HTML" - - ```html - {data} - ``` - === "Python" - ```python import taipy.gui.builder as tgb ... @@ -1265,6 +1251,14 @@ This control definition is all it takes to add aggregation functionality to the "apply[Apply column]": "count" } ``` + === "Markdown" + ``` + <|{data}|table|group_by[Group column]|apply[Apply column]=count|> + ``` + === "HTML" + ```html + {data} + ``` ## Cell tooltips @@ -1395,23 +1389,21 @@ rows. Note that the styling function is so simple that we could have made it a lambda, directly in the control definition: !!! example "Alternative definition" + === "Python" + ```python + import taipy.gui.builder as tgb + ... + tgb.table("{data}", row_class_name=lambda _, row: "blue-row" if row % 2 else "red-row", show_all=True) + ``` === "Markdown" ``` <|{data}|table|row_class_name={lambda _, row: "blue-row" if row % 2 else "red-row"}|show_all|> ``` - === "HTML" ```html ``` - === "Python" - ```python - import taipy.gui.builder as tgb - ... - tgb.table("{data}", row_class_name=lambda _, row: "blue-row" if row % 2 else "red-row", show_all=True) - ``` - This definition of the control makes the *even_odd_class()* function useless. ### Styling cells {data-source="gui:doc/examples/controls/table_styling_cells/"} diff --git a/docs/refmans/gui/viselements/generic/tree.md_template b/docs/refmans/gui/viselements/generic/tree.md_template index d9b71c080..25cdfe039 100644 --- a/docs/refmans/gui/viselements/generic/tree.md_template +++ b/docs/refmans/gui/viselements/generic/tree.md_template @@ -51,32 +51,26 @@ the same level, the first node will be automatically collapsed. The [*expanded*](#p-expanded) property can also hold a list of node identifiers that are expanded. !!! example "Definition" - + === "Python" + ```python + import taipy.gui.builder as tgb + ... + tgb.tree("value", lov="Item 1;Item 2;Item 3", expanded=False) + tgb.tree("value", lov="Item 1;Item 2;Item 3", expanded="Item 2") + ``` === "Markdown" - ``` <|{value}|tree|lov=Item 1;Item 2;Item 3|not expanded|> <|{value}|tree|lov=Item 1;Item 2;Item 3|expanded=Item 2|> ``` - === "HTML" - ```html ``` - === "Python" - - ```python - import taipy.gui.builder as tgb - ... - tgb.tree("value", lov="Item 1;Item 2;Item 3", expanded=False) - tgb.tree("value", lov="Item 1;Item 2;Item 3", expanded="Item 2") - ``` - ## Display a tree of dictionary entries The tree control has a predefined adapter that can display the definition of a dictionary diff --git a/docs/tutorials/articles/3rd_party_components/index.md b/docs/tutorials/articles/3rd_party_components/index.md index 5b557d9da..097669b61 100644 --- a/docs/tutorials/articles/3rd_party_components/index.md +++ b/docs/tutorials/articles/3rd_party_components/index.md @@ -93,11 +93,6 @@ Gui.register_content_provider(Map, expose_folium) Finally, we can embed the Folium Map using the following the `part` component: - -=== "Markdown" - ``` - <|part|content={folium_map()}|> - ``` === "Python" ```python import taipy.gui.builder as tgb @@ -106,7 +101,10 @@ Finally, we can embed the Folium Map using the following the `part` component: ... tgb.part(content="{folium_map()}") ``` - +=== "Markdown" + ``` + <|part|content={folium_map()}|> + ``` You can adjust the layout by changing its width and height. This element seamlessly integrates the Folium Map into your web app. diff --git a/docs/tutorials/articles/chatbot/index.md b/docs/tutorials/articles/chatbot/index.md index 48a200eaf..488090b46 100644 --- a/docs/tutorials/articles/chatbot/index.md +++ b/docs/tutorials/articles/chatbot/index.md @@ -137,13 +137,6 @@ In Taipy, one way to define pages is to use Markdown strings. Here we use a the *send_message()* function is triggered. -=== "Markdown" - ```python - page = """ - <|{conversation}|table|show_all|> - <|{current_user_message}|input|label=Write your message here...|on_action=send_message|class_name=fullwidth|> - """ - ``` === "Python" ```python import taipy.gui.builder as tgb @@ -157,6 +150,13 @@ In Taipy, one way to define pages is to use Markdown strings. Here we use a label="Write your message here...", class_name="fullwidth", ) +=== "Markdown" + ```python + page = """ + <|{conversation}|table|show_all|> + <|{current_user_message}|input|label=Write your message here...|on_action=send_message|class_name=fullwidth|> + """ + ``` # Step 7: Run the application diff --git a/docs/tutorials/articles/colab_with_ngrok/index.md b/docs/tutorials/articles/colab_with_ngrok/index.md index e21fdc89b..eca2ee7c7 100644 --- a/docs/tutorials/articles/colab_with_ngrok/index.md +++ b/docs/tutorials/articles/colab_with_ngrok/index.md @@ -116,14 +116,14 @@ To address this issue, you can modify the *change_delay* parameter in one of the - **Locally**: You can make changes to this parameter locally, directly within the Taipy visual element. -=== "Markdown" - ```python - <|{text}|input|change_delay=800|> - ``` === "Python" ```python tgb.input("{text}", change_delay=800) ``` +=== "Markdown" + ```python + <|{text}|input|change_delay=800|> + ``` - **Globally**: To adjust the delay for all of Taipy's visual elements. diff --git a/docs/tutorials/articles/complete_application/step_01/step_01.md b/docs/tutorials/articles/complete_application/step_01/step_01.md index 388402585..bdf8a96ee 100644 --- a/docs/tutorials/articles/complete_application/step_01/step_01.md +++ b/docs/tutorials/articles/complete_application/step_01/step_01.md @@ -33,10 +33,6 @@ interface. You can use various visual elements such as a [here](../../../../refmans/gui/viselements/index.md). The syntax for adding a visual element is as follows: -=== "Markdown" - ``` - <|{variable}|visual_element_name|param_1=param_1|param_2=param_2| ... |> - ``` === "Python" ```python tgb.visual_element_name("{variable}", param_1=param_1, param_2=param_2, ...) @@ -46,57 +42,59 @@ as follows: real-time value of *variable*. Rather than re-executing the entire script, Taipy intelligently adjusts only the necessary elements of the GUI to reflect changes, ensuring a responsive and performance-optimized user experience. - +=== "Markdown" + ``` + <|{variable}|visual_element_name|param_1=param_1|param_2=param_2| ... |> + ``` For example, to add a [slider](../../../../refmans/gui/viselements/generic/slider.md) that modifies the value of the variable *n_week*, use the following syntax: -=== "Markdown" - ```markdown - <|{n_week}|slider|min=1|max=52|> - ``` === "Python" ```python tgb.slider("{n_week}", min=1, max=52) ``` - -To display a chart with the dataset's content, use the following syntax: - === "Markdown" ```markdown - <|{dataset}|chart|type=bar|x=Date|y=Value|> + <|{n_week}|slider|min=1|max=52|> ``` + +To display a chart with the dataset's content, use the following syntax: + === "Python" ```python tgb.chart("{dataset}", type="bar", x="Date", y="Value") ``` - +=== "Markdown" + ```markdown + <|{dataset}|chart|type=bar|x=Date|y=Value|> + ``` You can also use Plotly Python to create a figure object and inject it in the chart: -=== "Markdown" +=== "Python" ```python from taipy.gui import Gui + import taipy.gui.builder as tgb import plotly.graph_objects as go list_to_display = [100/x for x in range(1, 100)] fig = go.Figure(data=go.Scatter(y=list_to_display)) - page = "<|chart|figure={fig}|>" + with tgb.Page() as page: + tgb.chart(figure="{fig}") Gui(page).run() ``` -=== "Python" +=== "Markdown" ```python from taipy.gui import Gui - import taipy.gui.builder as tgb import plotly.graph_objects as go list_to_display = [100/x for x in range(1, 100)] fig = go.Figure(data=go.Scatter(y=list_to_display)) - with tgb.Page() as page: - tgb.chart(figure="{fig}") + page = "<|chart|figure={fig}|>" Gui(page).run() ``` @@ -133,14 +131,14 @@ def slider_moved(state): state.dataset_week = dataset[dataset["Date"].dt.isocalendar().week == state.n_week] ``` -=== "Markdown" - ```markdown - <|{n_week}|slider|min=1|max=52|on_change=slider_moved|> - ``` === "Python" ```python tgb.slider("{n_week}", min=1, max=52, on_change=slider_moved) ``` +=== "Markdown" + ```markdown + <|{n_week}|slider|min=1|max=52|on_change=slider_moved|> + ``` # Markdown diff --git a/docs/tutorials/articles/cycles_scopes/index.md b/docs/tutorials/articles/cycles_scopes/index.md index 096cf3506..0e6e20719 100644 --- a/docs/tutorials/articles/cycles_scopes/index.md +++ b/docs/tutorials/articles/cycles_scopes/index.md @@ -241,16 +241,6 @@ You can use Scenario management visual elements to control Cycles. Cycles can be `scenario_selector` or `data_node_selector`. Additionally, it's possible to designate a scenario as primary directly through the `scenario` visual element. -=== "Markdown" - ```python - data_node = None - scenario = None - - tp.Gui("""<|{scenario}|scenario_selector|> - <|{scenario}|scenario|> - <|{scenario}|scenario_dag|> - <|{data_node}|data_node_selector|>""").run() - ``` === "Python" ```python import taipy.gui.builder as tgb @@ -267,6 +257,16 @@ as primary directly through the `scenario` visual element. tp.Gui(page).run() ``` +=== "Markdown" + ```python + data_node = None + scenario = None + + tp.Gui("""<|{scenario}|scenario_selector|> + <|{scenario}|scenario|> + <|{scenario}|scenario_dag|> + <|{data_node}|data_node_selector|>""").run() + ``` ![Visual Elements](images/visual_elements.png){ width=60% : .tp-image-border } diff --git a/docs/tutorials/articles/dataiku/index.md b/docs/tutorials/articles/dataiku/index.md index 5a6aa97ce..2b7a2df09 100644 --- a/docs/tutorials/articles/dataiku/index.md +++ b/docs/tutorials/articles/dataiku/index.md @@ -106,37 +106,6 @@ Create your own Taipy application to visualize all this information. It can include dynamic selectors for projects and metrics, a table to display data, and a bar chart for visualizing metric values. -=== "Markdown" - ```python - from taipy.gui import Gui - - selected_projects = list(metrics_df['Project'].unique()) - selected_metrics = ["AUC"] # Initially focusing on AUC metrics. - - def show_projects(metrics_df, selected_projects, selected_metrics): - return metrics_df[(metrics_df['Project'].isin(selected_projects)) & - (metrics_df['MetricType'].isin(selected_metrics))] - - md = """ - # Dataiku **Overview**{: .color-primary} - - **Projects** - - <|{selected_projects}|selector|lov={list(metrics_df['Project'].unique())}|dropdown|multiple|class_name=fullwidth|label=Projects|> - - **Metrics** - - <|{selected_metrics}|selector|lov={list(metrics_df['MetricType'].unique())}|dropdown|multiple|class_name=fullwidth|label=Metrics|> - - <|{show_projects(metrics_df, selected_projects, selected_metrics)}|table|filter|> - - <|{show_projects(metrics_df, selected_projects, selected_metrics)}|chart|x=Name|y=Value|type=bar|> - """ - - Gui(md).run() - ``` - - [Download the code](./src/metrics_visualization.py){: .tp-btn target='blank' } === "Python" ```python @@ -195,7 +164,37 @@ data, and a bar chart for visualizing metric values. ``` [Download the code](./src/metrics_visualization_tgb.py){: .tp-btn target='blank' } +=== "Markdown" + ```python + from taipy.gui import Gui + + selected_projects = list(metrics_df['Project'].unique()) + selected_metrics = ["AUC"] # Initially focusing on AUC metrics. + + def show_projects(metrics_df, selected_projects, selected_metrics): + return metrics_df[(metrics_df['Project'].isin(selected_projects)) & + (metrics_df['MetricType'].isin(selected_metrics))] + + md = """ + # Dataiku **Overview**{: .color-primary} + + **Projects** + + <|{selected_projects}|selector|lov={list(metrics_df['Project'].unique())}|dropdown|multiple|class_name=fullwidth|label=Projects|> + **Metrics** + + <|{selected_metrics}|selector|lov={list(metrics_df['MetricType'].unique())}|dropdown|multiple|class_name=fullwidth|label=Metrics|> + + <|{show_projects(metrics_df, selected_projects, selected_metrics)}|table|filter|> + + <|{show_projects(metrics_df, selected_projects, selected_metrics)}|chart|x=Name|y=Value|type=bar|> + """ + + Gui(md).run() + ``` + + [Download the code](./src/metrics_visualization.py){: .tp-btn target='blank' } ![Metrics Visualization](images/metrics_visualization.png){width=90% : .tp-image-border} @@ -436,6 +435,38 @@ To execute the scenario, use Taipy's execution model. This initiates the configu scenario, including autonomous data exchange with Dataiku and triggering the specified scenario: +=== "Python" + ```python + import taipy as tp + + # Create and execute the scenario + if __name__ == "__main__": + tp.Orchestrator().run() + scenario = tp.create_scenario(dataiku_scenario_scenario_cfg) + + scenario = None + with tgb.Page() as scenario_page: + with tgb.layout("1 1"): + tgb.scenario_selector("{scenario}") + tgb.scenario("{scenario}") + tgb.job_selector() + + with tgb.layout("1 1"): + with tgb.part(): + tgb.text("Input Dataset:") + tgb.data_node("{scenario.input_dataiku if scenario else None}") + with tgb.part(): + tgb.text("Output Dataset:") + tgb.data_node("{scenario.output_dataiku if scenario else None}") + + tgb.scenario_dag("{scenario}") + + + tp.Gui(scenario_page).run() + ``` + + [Download the code](./src/scenario_dataiku_tgb.py){: .tp-btn target='blank' } + === "Markdown" ```python import taipy as tp @@ -471,41 +502,6 @@ specified scenario: [Download the code](./src/scenario_dataiku.py){: .tp-btn target='blank' } - -=== "Python" - ```python - import taipy as tp - - # Create and execute the scenario - if __name__ == "__main__": - tp.Orchestrator().run() - scenario = tp.create_scenario(dataiku_scenario_scenario_cfg) - - scenario = None - with tgb.Page() as scenario_page: - with tgb.layout("1 1"): - tgb.scenario_selector("{scenario}") - tgb.scenario("{scenario}") - tgb.job_selector() - - with tgb.layout("1 1"): - with tgb.part(): - tgb.text("Input Dataset:") - tgb.data_node("{scenario.input_dataiku if scenario else None}") - with tgb.part(): - tgb.text("Output Dataset:") - tgb.data_node("{scenario.output_dataiku if scenario else None}") - - tgb.scenario_dag("{scenario}") - - - tp.Gui(scenario_page).run() - ``` - - [Download the code](./src/scenario_dataiku_tgb.py){: .tp-btn target='blank' } - - - ![Dataiku Scenario](images/scenario_dataiku.png){width=90% : .tp-image-border} This approach, where tasks focus on action triggers (like starting diff --git a/docs/tutorials/articles/decimator/index.md b/docs/tutorials/articles/decimator/index.md index 738650481..b57c18e08 100644 --- a/docs/tutorials/articles/decimator/index.md +++ b/docs/tutorials/articles/decimator/index.md @@ -70,37 +70,37 @@ We evaluated three different algorithms: Here is an example of code showing how to use the Min-Max Decimator: -=== "Markdown" +=== "Python" ```python import yfinance as yf from taipy.gui import Gui + import taipy.gui.builder as tgb from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") - df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") + df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) NOP = 500 decimator_instance = MinMaxDecimator(n_out=NOP) - page = "<|{df_AAPL}|chart|x=DATE|y=Open|decimator=decimator_instance|>" + with tgb.Page() as page: + tgb.chart("{df_AAPL}", x="DATE", y="Open", decimator="decimator_instance") Gui(page).run(title="Decimator") ``` -=== "Python" +=== "Markdown" ```python import yfinance as yf from taipy.gui import Gui - import taipy.gui.builder as tgb from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") - df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") + df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) NOP = 500 decimator_instance = MinMaxDecimator(n_out=NOP) - with tgb.Page() as page: - tgb.chart("{df_AAPL}", x="DATE", y="Open", decimator="decimator_instance") + page = "<|{df_AAPL}|chart|x=DATE|y=Open|decimator=decimator_instance|>" Gui(page).run(title="Decimator") ``` @@ -118,37 +118,37 @@ For each segment, only the original dataset's two extreme points (on the second Here is an example of code showing how to use the LTTB Decimator: -=== "Markdown" +=== "Python" ```python import yfinance as yf from taipy.gui import Gui + import taipy.gui.builder as tgb from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") - df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") + df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) NOP = 500 decimator_instance = LTTB(n_out=NOP) - page = "<|{df_AAPL}|chart|x=DATE|y=Open|decimator=decimator_instance|>" + with tgb.Page() as page: + tgb.chart("{df_AAPL}", x="DATE", y="Open", decimator="decimator_instance") Gui(page).run(title="Decimator") ``` -=== "Python" +=== "Markdown" ```python import yfinance as yf from taipy.gui import Gui - import taipy.gui.builder as tgb from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") - df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") + df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) NOP = 500 decimator_instance = LTTB(n_out=NOP) - with tgb.Page() as page: - tgb.chart("{df_AAPL}", x="DATE", y="Open", decimator="decimator_instance") + page = "<|{df_AAPL}|chart|x=DATE|y=Open|decimator=decimator_instance|>" Gui(page).run(title="Decimator") ``` @@ -165,37 +165,37 @@ LTTB implementations are available in Python. Here is an example of code showing how to use the Ramer-Douglas-Peucker Decimator: -=== "Markdown" +=== "Python" ```python import yfinance as yf from taipy.gui import Gui + import taipy.gui.builder as tgb from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") - df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") + df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) NOP = 500 decimator_instance = RDP(n_out=NOP) - page = "<|{df_AAPL}|chart|x=DATE|y=Open|decimator=decimator_instance|>" + with tgb.Page() as page: + tgb.chart("{df_AAPL}", x="DATE", y="Open", decimator="decimator_instance") Gui(page).run(title="Decimator") ``` -=== "Python" +=== "Markdown" ```python import yfinance as yf from taipy.gui import Gui - import taipy.gui.builder as tgb from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") - df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") + df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) NOP = 500 decimator_instance = RDP(n_out=NOP) - with tgb.Page() as page: - tgb.chart("{df_AAPL}", x="DATE", y="Open", decimator="decimator_instance") + page = "<|{df_AAPL}|chart|x=DATE|y=Open|decimator=decimator_instance|>" Gui(page).run(title="Decimator") ``` diff --git a/docs/tutorials/articles/multi_user/index.md b/docs/tutorials/articles/multi_user/index.md index 02f6a08fd..616f86a50 100644 --- a/docs/tutorials/articles/multi_user/index.md +++ b/docs/tutorials/articles/multi_user/index.md @@ -22,17 +22,17 @@ can be changed and accessed by all users ignoring the user's state. For example, the following code creates a two-user chat application. You can run this code in both a browser tab and an incognito window to simulate two users. -=== "Markdown" +=== "Python" ```python {% - include-markdown "./src/main.py" + include-markdown "./src/main_tgb.py" comments=false %} ``` -=== "Python" +=== "Markdown" ```python {% - include-markdown "./src/main_tgb.py" + include-markdown "./src/main.py" comments=false %} ``` diff --git a/docs/tutorials/articles/pyspark/index.md b/docs/tutorials/articles/pyspark/index.md index 723f8f777..4b1d24f2d 100644 --- a/docs/tutorials/articles/pyspark/index.md +++ b/docs/tutorials/articles/pyspark/index.md @@ -408,20 +408,21 @@ If you're unfamiliar with Taipy's GUI capabilities, you can find a quickstart the following code for *app/main.py* since it isn't our focus: -=== "Markdown" +=== "Python" ```python title="app/main.py" {% - include-markdown "./src/app_main.py" + include-markdown "./src/app_main_tgb.py" comments=false %} ``` -=== "Python" +=== "Markdown" ```python title="app/main.py" {% - include-markdown "./src/app_main_tgb.py" + include-markdown "./src/app_main.py" comments=false %} ``` + Then, from the project folder, you can run the main script like so: ``` diff --git a/docs/tutorials/articles/scenario_management_overview/index.md b/docs/tutorials/articles/scenario_management_overview/index.md index 6bc3098ab..1b47f1c5e 100644 --- a/docs/tutorials/articles/scenario_management_overview/index.md +++ b/docs/tutorials/articles/scenario_management_overview/index.md @@ -224,32 +224,6 @@ Add these few lines to the code of your script. This creates a web application, - access their properties. -=== "Markdown" - ```python - def save(state): - # write values of Data Node to submit scenario - state.scenario.historical_temperature.write(data) - state.scenario.date_to_forecast.write(state.date) - state.refresh('scenario') - tp.gui.notify(state, "s", "Saved! Ready to submit") - - date = None - scenario_md = """ - <|{scenario}|scenario_selector|> - - Select a Date - <|{date}|date|on_change=save|active={scenario}|> - - Run the scenario - <|{scenario}|scenario|> - <|{scenario}|scenario_dag|> - - View all the information on your prediction here - <|{scenario.predictions}|data_node|> - """ - - tp.Gui(scenario_md).run() - ``` === "Python" ```python import taipy.gui.builder as tgb @@ -277,6 +251,32 @@ Add these few lines to the code of your script. This creates a web application, tp.Gui(scenario_page).run() ``` +=== "Markdown" + ```python + def save(state): + # write values of Data Node to submit scenario + state.scenario.historical_temperature.write(data) + state.scenario.date_to_forecast.write(state.date) + state.refresh('scenario') + tp.gui.notify(state, "s", "Saved! Ready to submit") + + date = None + scenario_md = """ + <|{scenario}|scenario_selector|> + + Select a Date + <|{date}|date|on_change=save|active={scenario}|> + + Run the scenario + <|{scenario}|scenario|> + <|{scenario}|scenario_dag|> + + View all the information on your prediction here + <|{scenario.predictions}|data_node|> + """ + + tp.Gui(scenario_md).run() + ``` The [Scenario management controls](../../../refmans/gui/viselements/index.md#scenario-and-data-management-controls) @@ -287,17 +287,17 @@ creating a Scenario based application connected to your pipelines has never been # Entire code -=== "Markdown" +=== "Python" ```python {% - include-markdown "./src/scenario_management.py" + include-markdown "./src/scenario_management_tgb.py" comments=false %} ``` -=== "Python" +=== "Markdown" ```python {% - include-markdown "./src/scenario_management_tgb.py" + include-markdown "./src/scenario_management.py" comments=false %} ``` diff --git a/docs/tutorials/articles/scenario_subscription/index.md b/docs/tutorials/articles/scenario_subscription/index.md index cbdcd802b..60fd73868 100644 --- a/docs/tutorials/articles/scenario_subscription/index.md +++ b/docs/tutorials/articles/scenario_subscription/index.md @@ -103,17 +103,16 @@ def on_submission_status_change(state, submittable, details): When creating a GUI for your scenarios, you can associate this function with a visual element for real-time updates. For example: -=== "Markdown" - ``` - <|{scenario}|scenario|on_submission_change=on_submission_status_change|> - ``` === "Python" ```python import taipy.gui.builder as tgb ... tgb.scenario("{scenario}", on_submission_change=on_submission_status_change) ``` - +=== "Markdown" + ``` + <|{scenario}|scenario|on_submission_change=on_submission_status_change|> + ``` This visual element will be updated whenever there is a change in the submission status, providing real-time feedback on the GUI. diff --git a/docs/tutorials/articles/scenarios/index.md b/docs/tutorials/articles/scenarios/index.md index b71f3a897..d1125bab9 100644 --- a/docs/tutorials/articles/scenarios/index.md +++ b/docs/tutorials/articles/scenarios/index.md @@ -120,7 +120,8 @@ if __name__ == "__main__": The primary benefit of having a scenario is to access the Data Nodes of the different scenarios that are made. Accessing a data node is as as simple as `..read()`. -By exploring the data nodes, end users can analyse the results of their data workflow and make decisions upon it. +By exploring the data nodes, end users can analyze the results of their data workflow and make +decisions upon it. ## Scenario management visual elements @@ -137,46 +138,44 @@ that lets you: - Submit them. - View the configuration used by the scenario. - -=== "Markdown" +=== "Python" ```python from taipy import Gui import taipy as tp + import taipy.gui.builder as tgb ... if __name__ == "__main__": scenario = None - scenario_md = """ - <|{scenario}|scenario_selector|> - <|{scenario}|scenario|> - <|{scenario}|scenario_dag|> - """ + with tgb.Page() as page: + tgb.scenario_selector("{scenario}") + tgb.scenario("{scenario}") + tgb.scenario_dag("{scenario}") + tp.Orchestrator().run() - Gui(scenario_md).run() + Gui(page).run() ``` -=== "Python" +=== "Markdown" ```python from taipy import Gui import taipy as tp - import taipy.gui.builder as tgb ... if __name__ == "__main__": scenario = None - with tgb.Page() as page: - tgb.scenario_selector("{scenario}") - tgb.scenario("{scenario}") - tgb.scenario_dag("{scenario}") - + scenario_md = """ + <|{scenario}|scenario_selector|> + <|{scenario}|scenario|> + <|{scenario}|scenario_dag|> + """ tp.Orchestrator().run() - Gui(page).run() + Gui(scenario_md).run() ``` - # Conclusion Taipy scenarios are a strong and adaptable tool that businesses can use to investigate different diff --git a/docs/tutorials/articles/understanding_gui/step_02/step_02.md b/docs/tutorials/articles/understanding_gui/step_02/step_02.md index 625263c02..b01f8bd43 100644 --- a/docs/tutorials/articles/understanding_gui/step_02/step_02.md +++ b/docs/tutorials/articles/understanding_gui/step_02/step_02.md @@ -31,84 +31,82 @@ Check the complete list Every visual element follows a similar syntax: -=== "Markdown" - ``` - <|{variable}|visual_element_name|param_1=param_1|param_2=param_2| ... |> - ``` === "Python" ```python - tgb.visual_element_name("{variable}", param_1=param_1, param_2=param_2, ...) + tgb.visual_element_name("{variable}", param_1=value_1, param_2=value_2, ...) ``` - The inclusion of *variable* within `"{...}"` tells Taipy to show and use the - real-time value of *variable*. Rather than re-executing the entire script, - Taipy intelligently adjusts only the necessary elements of the GUI to reflect - changes, ensuring a responsive and performance-optimized user experience. - -For example, a [slider](../../../../refmans/gui/viselements/generic/slider.md) is written this way : - - + The inclusion of *variable* within `"{...}"` indicates that Taipy should show and use the + real-time value of *variable*. Rather than re-executing the entire script, Taipy intelligently + adjusts only the necessary elements of the GUI to reflect changes, ensuring a responsive and + performance-optimized user experience. === "Markdown" ``` - <|{variable}|slider|min=min_value|max=max_value|> + <|{variable}|visual_element_name|param_1=value_1|param_2=value_2| ... |> ``` + +For example, a [slider](../../../../refmans/gui/viselements/generic/slider.md) is written this way : + === "Python" ```python tgb.slider("{variable}", min=min_value, max=max_value, ...) ``` +=== "Markdown" + ``` + <|{variable}|slider|min=min_value|max=max_value|> + ``` For example, at the beginning of the page, if you want to display: - a Python variable *text* -- an input that "visually" modifies the value of __text__. +- an input that "visually" modifies the value of *text*. Here is the overall syntax: -=== "Markdown" - ``` - <|{text}|> - <|{text}|input|> - ``` === "Python" ```python tgb.text("{text}") tgb.input("{text}") ``` - +=== "Markdown" + ``` + <|{text}|> + <|{text}|input|> + ``` Here is the combined code: -=== "Markdown" +=== "Python" ```python from taipy.gui import Gui + import taipy.gui.builder as tgb if __name__ == "__main__": text = "Original text" - page = """ - # Getting started with Taipy GUI - - My text: <|{text}|> + with tgb.Page() as page: + tgb.text("# Getting started with Taipy GUI", mode="md") + tgb.text("My text: {text}") - <|{text}|input|> - """ + tgb.input("{text}") Gui(page).run(debug=True) ``` -=== "Python" +=== "Markdown" ```python from taipy.gui import Gui - import taipy.gui.builder as tgb if __name__ == "__main__": text = "Original text" - with tgb.Page() as page: - tgb.text("# Getting started with Taipy GUI", mode="md") - tgb.text("My text: {text}") + page = """ + # Getting started with Taipy GUI - tgb.input("{text}") + My text: <|{text}|> + + <|{text}|input|> + """ Gui(page).run(debug=True) ``` diff --git a/docs/tutorials/articles/understanding_gui/step_03/step_03.md b/docs/tutorials/articles/understanding_gui/step_03/step_03.md index 19aa48283..a2b481490 100644 --- a/docs/tutorials/articles/understanding_gui/step_03/step_03.md +++ b/docs/tutorials/articles/understanding_gui/step_03/step_03.md @@ -51,13 +51,14 @@ variable is changed in this function, Taipy propagates this change automatically associated visual elements. Other callbacks specific to visual elements exist. They are named `on_change` or `on_action`. -For example, a button has an _on_action_ property. When the button is pressed, Taipy calls -the callback function referenced in the `on_action` property. +For example, a button has an *on_action* property. When the button is pressed, Taipy calls +the callback function referenced in the *on_action* property. - -=== "Markdown" +=== "Python" ```python + import taipy.gui.builder as tgb from taipy.gui import Gui, notify + import taipy.gui.builder as tgb def on_button_action(state): @@ -73,23 +74,18 @@ the callback function referenced in the `on_action` property. text = "Original text" # Definition of the page - page = """ - # Getting started with Taipy GUI - - My text: <|{text}|> - - <|{text}|input|> + with tgb.Page() as page: + tgb.text("# Getting started with Taipy GUI", mode="md") + tgb.text("My text: {text}") - <|Run local|button|on_action=on_button_action|> - """ + tgb.input("{text}") + tgb.button("Run local", on_action=on_button_action) Gui(page).run(debug=True) ``` -=== "Python" +=== "Markdown" ```python - import taipy.gui.builder as tgb from taipy.gui import Gui, notify - import taipy.gui.builder as tgb def on_button_action(state): @@ -105,17 +101,18 @@ the callback function referenced in the `on_action` property. text = "Original text" # Definition of the page - with tgb.Page() as page: - tgb.text("# Getting started with Taipy GUI", mode="md") - tgb.text("My text: {text}") + page = """ + # Getting started with Taipy GUI - tgb.input("{text}") - tgb.button("Run local", on_action=on_button_action) + My text: <|{text}|> - Gui(page).run(debug=True) - ``` + <|{text}|input|> + <|Run local|button|on_action=on_button_action|> + """ + Gui(page).run(debug=True) + ``` ![Interactive GUI](images/result.png){ width=90% : .tp-image-border } diff --git a/docs/tutorials/articles/understanding_gui/step_04/step_04.md b/docs/tutorials/articles/understanding_gui/step_04/step_04.md index d355497f9..3e62a3bac 100644 --- a/docs/tutorials/articles/understanding_gui/step_04/step_04.md +++ b/docs/tutorials/articles/understanding_gui/step_04/step_04.md @@ -7,53 +7,51 @@ visual element with many properties to customize it. Here is one of the simplest code to create a chart: -=== "Markdown" - ```python - list_to_display = [100/x for x in range(1, 100)] - Gui("<|{list_to_display}|chart|>").run() - ``` === "Python" ```python list_to_display = [100/x for x in range(1, 100)] with tgb.Page() as page: tgb.chart("{list_to_display}") ``` - +=== "Markdown" + ```python + list_to_display = [100/x for x in range(1, 100)] + Gui("<|{list_to_display}|chart|>").run() + ``` Different formats can be passed to a chart element: a list, a Numpy array, or a Pandas Dataframe. You can also use Plotly Python to create a *Figure* object and inject it in the chart: -=== "Markdown" +=== "Python" ```python from taipy.gui import Gui + import taipy.gui.builder as tgb import plotly.graph_objects as go if __name__ == "__main__": list_to_display = [100/x for x in range(1, 100)] fig = go.Figure(data=go.Scatter(y=list_to_display)) - page = "<|chart|figure={fig}|>" + with tgb.Page() as page: + tgb.chart(figure="{fig}") Gui(page).run() ``` -=== "Python" +=== "Markdown" ```python from taipy.gui import Gui - import taipy.gui.builder as tgb import plotly.graph_objects as go if __name__ == "__main__": list_to_display = [100/x for x in range(1, 100)] fig = go.Figure(data=go.Scatter(y=list_to_display)) - with tgb.Page() as page: - tgb.chart(figure="{fig}") + page = "<|chart|figure={fig}|>" Gui(page).run() ``` - ## Useful properties Taipy charts are based on Plotly charts. More than any other visual element, charts have a lot of @@ -62,21 +60,21 @@ properties. Here are a few of the essential properties. You can also look at the [documentation](../../../../refmans/gui/viselements/generic/chart.md) for more information. - - x and y are used to define the chart axis. + - *x* and *y* are used to define the chart axis. -=== "Markdown" - ```python - data = {"x_col": [0, 1, 2], "y_col1": [4, 1, 2]} - Gui("<|{data}|chart|x=x_col|y=y_col1|>").run() - ``` === "Python" ```python data = {"x_col": [0, 1, 2], "y_col1": [4, 1, 2]} with tgb.Page() as page: tgb.chart("{data}", x="x_col", y="y_col1") ``` +=== "Markdown" + ```python + data = {"x_col": [0, 1, 2], "y_col1": [4, 1, 2]} + Gui("<|{data}|chart|x=x_col|y=y_col1|>").run() + ``` - - x and y can be indexed to add more traces to the chart: + - *x* and *y* can be indexed to add more traces to the chart: === "Markdown" ```python @@ -90,19 +88,19 @@ Here are a few of the essential properties. You can also look at the tgb.chart("{data}", x="x_col", y__1="y_col1", y__2="y_col_2") ``` - - Taipy provides a lot of different options to customize graphs. _color_ is one of them: + - Taipy provides a lot of different options to customize graphs. *color* is one of them: -=== "Markdown" - ```python - data = {"x_col": [0, 1, 2], "y_col_1": [4, 2, 1], "y_col_2":[3, 1, 2]} - Gui("<|{data}|chart|x=x_col|y[1]=y_col_1|y[2]=y_col_2|color[1]=green|>").run() - ``` === "Python" ```python data = {"x_col": [0, 1, 2], "y_col1": [4, 1, 2], "y_col_2": [3, 1, 2]} with tgb.Page() as page: tgb.chart("{data}", x="x_col", y__1="y_col1", y__2="y_col_2", color__1="green") ``` +=== "Markdown" + ```python + data = {"x_col": [0, 1, 2], "y_col_1": [4, 2, 1], "y_col_2":[3, 1, 2]} + Gui("<|{data}|chart|x=x_col|y[1]=y_col_1|y[2]=y_col_2|color[1]=green|>").run() + ``` ## Types of charts @@ -112,32 +110,32 @@ know how to use them quickly, types are listed If compatible, two types like *scatter*, *line*, and *bar* can also be used together on the same chart. -=== "Markdown" - ```python - data = {"x_col": [0, 1, 2], "y_col_1": [4, 1, 2], "y_col_2": [3, 1, 2]} - Gui("<|{data}|chart|x=x_col|y[1]=y_col_1|y[2]=y_col_2|type[1]=bar|>").run() - ``` === "Python" ```python data = {"x_col": [0, 1, 2], "y_col1": [4, 1, 2], "y_col_2": [3, 1, 2]} with tgb.Page() as page: tgb.chart("{data}", x="x_col", y__1="y_col1", y__2="y_col_2", type__1="bar") ``` +=== "Markdown" + ```python + data = {"x_col": [0, 1, 2], "y_col_1": [4, 1, 2], "y_col_2": [3, 1, 2]} + Gui("<|{data}|chart|x=x_col|y[1]=y_col_1|y[2]=y_col_2|type[1]=bar|>").run() + ``` ## Code A chart is added to our code to visualize the score given by our NLP algorithm to different lines. -=== "Markdown" +=== "Python" ```python - page = """ - ... put the previous Markdown page here - - <|{dataframe}|table|> + with tgb.Page() as page: + ... - <|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|> - """ + tgb.table("{dataframe}") + tgb.chart("{dataframe}", type="bar", x="Text", + y__1="Score Pos", y__2="Score Neu", y__3="Score Neg", y__4="Overall", + color__1="green", color__2="grey", color__3="red", type__4="line") dataframe = pd.DataFrame({"Text":['Test', 'Other', 'Love'], "Score Pos":[1, 1, 4], @@ -145,16 +143,16 @@ A chart is added to our code to visualize the score given by our NLP algorithm t "Score Neg":[1, 2, 0], "Overall":[0, -1, 4]}) ``` -=== "Python" +=== "Markdown" ```python - with tgb.Page() as page: - ... + page = """ + ... put the previous Markdown page here - tgb.table("{dataframe}") - tgb.chart("{dataframe}", type="bar", x="Text", - y__1="Score Pos", y__2="Score Neu", y__3="Score Neg", y__4="Overall", - color__1="green", color__2="grey", color__3="red", type__4="line") + <|{dataframe}|table|> + + <|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|> + """ dataframe = pd.DataFrame({"Text":['Test', 'Other', 'Love'], "Score Pos":[1, 1, 4], @@ -166,45 +164,36 @@ A chart is added to our code to visualize the score given by our NLP algorithm t ## Quick tip to write visual elements To make coding easier, each visual element has a property called *properties*. You can set -properties directly through it with a Python dictionary of properties. To recreate the -graph shown above, you can to the following: +properties directly through it with a Python dictionary of properties: + +```python +chart_properties = {"type": "bar", + "x": "Text", + "y[1]": "Score Pos", + "y[2]": "Score Neu", + "y[3]": "Score Neg", + "y[4]": "Overall", + "color[1]": "green", + "color[2]": "grey", + "color[3]": "red", + "type[4]": "line" + } +``` + +To recreate the graph shown above, you can to the following: +=== "Python" + ```python + ... + tgb.chart("{dataframe}", properties=chart_properties) + ``` === "Markdown" ```python - property_chart = {"type": "bar", - "x": "Text", - "y[1]": "Score Pos", - "y[2]": "Score Neu", - "y[3]": "Score Neg", - "y[4]": "Overall", - "color[1]": "green", - "color[2]": "grey", - "color[3]": "red", - "type[4]": "line" - } - page = """ ... - <|{dataframe}|chart|properties={property_chart}|> + <|{dataframe}|chart|properties={chart_properties}|> ... """ ``` -=== "Python" - ```python - property_chart = {"type": "bar", - "x": "Text", - "y[1]": "Score Pos", - "y[2]": "Score Neu", - "y[3]": "Score Neg", - "y[4]": "Overall", - "color[1]": "green", - "color[2]": "grey", - "color[3]": "red", - "type[4]": "line" - } - - ... - tgb.chart("{dataframe}", properties=property_chart) - ``` ![Charts](images/result.png){ width=90% : .tp-image-border } diff --git a/docs/tutorials/articles/understanding_gui/step_05/step_05.md b/docs/tutorials/articles/understanding_gui/step_05/step_05.md index 58a2c86b4..1d75e8282 100644 --- a/docs/tutorials/articles/understanding_gui/step_05/step_05.md +++ b/docs/tutorials/articles/understanding_gui/step_05/step_05.md @@ -10,6 +10,17 @@ will show real-time results on the GUI. These changes occur through the `=` assi Any expression containing `xxx` propagates the changes and reloads related elements. It can be simple charts or tables, but it can also be an expression like this: +=== "Python" + ```python + tgb.text("## Positive", mode="md") + tgb.text("{np.mean(dataframe['Score Pos'])}") + + tgb.text("## Neutral", mode="md") + tgb.text("{np.mean(dataframe['Score Neu'])}") + + tgb.text("## Negative", mode="md") + tgb.text("{np.mean(dataframe['Score Neg'])}") + ``` === "Markdown" ```python """ @@ -23,21 +34,9 @@ elements. It can be simple charts or tables, but it can also be an expression l <|{np.mean(dataframe["Score Neg"])}|text|> """ ``` -=== "Python" - ```python - tgb.text("## Positive", mode="md") - tgb.text("{np.mean(dataframe['Score Pos'])}") - - tgb.text("## Neutral", mode="md") - tgb.text("{np.mean(dataframe['Score Neu'])}") - - tgb.text("## Negative", mode="md") - tgb.text("{np.mean(dataframe['Score Neg'])}") - ``` This kind of expression creates direct connections between visual elements without coding anything. - ## A use case for NLP - Part 1 The code for NLP is provided here, although it's not directly related to Taipy. It will come @@ -80,57 +79,6 @@ def analyze_text(text): The code below uses this concept to create metrics on the data frame generated. -=== "Markdown" - ```python - import numpy as np - import pandas as pd - from taipy.gui import Gui, notify - - - def local_callback(state): - notify(state, "Info", f"The text is: {state.text}", True) - temp = state.dataframe.copy() - scores = analyze_text(state.text) - temp.loc[len(temp)] = scores - state.dataframe = temp - state.text = "" - - if __name__ == "__main__": - text = "Original text" - - dataframe = pd.DataFrame({"Text": [""], - "Score Pos": [0.33], - "Score Neu": [0.33], - "Score Neg": [0.33], - "Overall": [0]}) - - page = """ - <|toggle|theme|> - - # Getting started with Taipy GUI - - My text: <|{text}|> - - Enter a word: - <|{text}|input|> - <|Analyze|button|on_action=local_callback|> - - ## Positive - <|{np.mean(dataframe["Score Pos"])}|text|format=%.2f|> - - ## Neutral - <|{np.mean(dataframe["Score Neu"])}|text|format=%.2f|> - - ## Negative - <|{np.mean(dataframe["Score Neg"])}|text|format=%.2f|> - - <|{dataframe}|table|> - - <|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|> - """ - - Gui(page).run(debug=True) - ``` === "Python" ```python import pandas as pd @@ -204,6 +152,56 @@ The code below uses this concept to create metrics on the data frame generated. # Initialize the GUI with the updated dataframe Gui(page).run(debug=True) ``` +=== "Markdown" + ```python + import numpy as np + import pandas as pd + from taipy.gui import Gui, notify + + + def local_callback(state): + notify(state, "Info", f"The text is: {state.text}", True) + temp = state.dataframe.copy() + scores = analyze_text(state.text) + temp.loc[len(temp)] = scores + state.dataframe = temp + state.text = "" + + if __name__ == "__main__": + text = "Original text" + + dataframe = pd.DataFrame({"Text": [""], + "Score Pos": [0.33], + "Score Neu": [0.33], + "Score Neg": [0.33], + "Overall": [0]}) + + page = """ + <|toggle|theme|> + + # Getting started with Taipy GUI + + My text: <|{text}|> + + Enter a word: + <|{text}|input|> + <|Analyze|button|on_action=local_callback|> + ## Positive + <|{np.mean(dataframe["Score Pos"])}|text|format=%.2f|> + + ## Neutral + <|{np.mean(dataframe["Score Neu"])}|text|format=%.2f|> + + ## Negative + <|{np.mean(dataframe["Score Neg"])}|text|format=%.2f|> + + <|{dataframe}|table|> + + <|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|> + """ + + Gui(page).run(debug=True) + ``` ![Python expression](images/result.png){ width=90% : .tp-image-border } diff --git a/docs/tutorials/articles/understanding_gui/step_06/step_06.md b/docs/tutorials/articles/understanding_gui/step_06/step_06.md index b3521073d..d3ac7985a 100644 --- a/docs/tutorials/articles/understanding_gui/step_06/step_06.md +++ b/docs/tutorials/articles/understanding_gui/step_06/step_06.md @@ -8,15 +8,6 @@ We'll introduce three new helpful controls to enhance the page's visual appeal. A useful property of `part` is *render*. If set to False, it will not display the part. This allows the developer to hide a group of visual elements dynamically. - === "Markdown" - - ``` - <|part|render={bool_variable}| - Text - Or visual elements... - |> - ``` - === "Python" ```python @@ -25,23 +16,19 @@ We'll introduce three new helpful controls to enhance the page's visual appeal. tgb.text(...) # Or visual elements... ``` - -- [layout](../../../../refmans/gui/viselements/generic/layout.md): creates invisible columns where you - can put your texts and visual elements. The *columns* property indicates the width and number - of columns. Here, we create three columns of the same width. - === "Markdown" ``` - <|layout|columns=1 1 1| - Button in first column <|Press|button|> - - Second column - - Third column + <|part|render={bool_variable}| + Text + Or visual elements... |> ``` +- [layout](../../../../refmans/gui/viselements/generic/layout.md): creates invisible columns where you + can put your texts and visual elements. The *columns* property indicates the width and number + of columns. Here, we create three columns of the same width. + === "Python" ```python @@ -55,7 +42,20 @@ We'll introduce three new helpful controls to enhance the page's visual appeal. tgb.text("Third column") ``` - ![Layout](images/layout.png){ width=70% : .tp-image-border } + === "Markdown" + + ``` + <|layout|columns=1 1 1| + Button in first column <|Press|button|> + + Second column + + Third column + |> + ``` + + ![Layout](images/layout.png){ width=70% : .tp-image-border } + - [expandable](../../../../refmans/gui/viselements/generic/expandable.md): creates a block that can expand or shrink. @@ -65,6 +65,34 @@ We'll introduce three new helpful controls to enhance the page's visual appeal. Let's get back to the code: +=== "Python" + ```python + with tgb.Page() as page: + with tgb.layout(columns="1 1"): + with tgb.part(): + tgb.text("My text: {text}") + tgb.input("{text}") + tgb.button("Analyze", on_action=local_callback) + + with tgb.expandable("Table"): + tgb.table("{dataframe}", number_format="%.2f") + + with tgb.layout(columns="1 1 1"): + with tgb.part(): + tgb.text("## Positive", mode="md") + tgb.text("{np.mean(dataframe['Score Pos'])}", format="%.2f") + with tgb.part(): + tgb.text("## Neutral", mode="md") + tgb.text("{np.mean(dataframe['Score Neu'])}", format="%.2f") + with tgb.part(): + tgb.text("## Negative", mode="md") + tgb.text("{np.mean(dataframe['Score Neg'])}", format="%.2f") + + tgb.chart("{dataframe}", type="bar", x="Text", + y__1="Score Pos", y__2="Score Neu", y__3="Score Neg", y__4="Overall", + color__1="green", color__2="grey", color__3="red", + type__4="line", + ) ``` === "Markdown" ```python page = """ @@ -98,31 +126,5 @@ Let's get back to the code: <|{dataframe}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|> """ ``` -=== "Python" - ```python - with tgb.Page() as page: - with tgb.layout(columns="1 1"): - with tgb.part(): - tgb.text("My text: {text}") - tgb.input("{text}") - tgb.button("Analyze", on_action=local_callback) - - with tgb.expandable("Table"): - tgb.table("{dataframe}", number_format="%.2f") - - with tgb.layout(columns="1 1 1"): - with tgb.part(): - tgb.text("## Positive", mode="md") - tgb.text("{np.mean(dataframe['Score Pos'])}", format="%.2f") - with tgb.part(): - tgb.text("## Neutral", mode="md") - tgb.text("{np.mean(dataframe['Score Neu'])}", format="%.2f") - with tgb.part(): - tgb.text("## Negative", mode="md") - tgb.text("{np.mean(dataframe['Score Neg'])}", format="%.2f") - - tgb.chart("{dataframe}", type="bar", x="Text", y__1="Score Pos", y__2="Score Neu", y__3="Score Neg", y__4="Overall", - color__1="green", color__2="grey", color__3="red", type__4="line") - ``` ![Layout](images/result.png){ width=90% : .tp-image-border } diff --git a/docs/tutorials/articles/understanding_gui/step_07/step_07.md b/docs/tutorials/articles/understanding_gui/step_07/step_07.md index 3b49061a8..a03186850 100644 --- a/docs/tutorials/articles/understanding_gui/step_07/step_07.md +++ b/docs/tutorials/articles/understanding_gui/step_07/step_07.md @@ -11,26 +11,6 @@ page 1 and page 2. Note that you can create pages differently using Markdown, Python or HTML. You could have one page created with Markdown and another with the Python API. -=== "Markdown" - ```python - from taipy import Gui - - if __name__ == "__main__": - # Add a navbar to switch from one page to the other - root_md = """ - <|navbar|> - # Multi-page application - """ - page1_md = "## This is page 1" - page2_md = "## This is page 2" - - pages = { - "/": root_md, - "page1": page1_md, - "page2": page2_md - } - Gui(pages=pages).run() - ``` === "Python" ```python from taipy import Gui @@ -54,45 +34,43 @@ could have one page created with Markdown and another with the Python API. } Gui(pages=pages).run() ``` +=== "Markdown" + ```python + from taipy import Gui + + if __name__ == "__main__": + # Add a navbar to switch from one page to the other + root_md = """ + <|navbar|> + # Multi-page application + """ + page1_md = "## This is page 1" + page2_md = "## This is page 2" + + pages = { + "/": root_md, + "page1": page1_md, + "page2": page2_md + } + Gui(pages=pages).run() + ``` ## Navigating between pages - [menu](../../../../refmans/gui/viselements/generic/menu.md): creates a menu on the left to navigate through the pages. -=== "Markdown" - ``` - <|menu|label=Menu|lov={lov_pages}|on_action=menu_option_selected|>` - ``` === "Python" ```python tgb.menu(label="Menu", lov=[...], on_action=menu_option_selected) ``` - -For example, this code creates a menu with two options: - === "Markdown" - ```python - from taipy.gui import Gui, navigate - - - def menu_option_selected(state, action, info): - page = info["args"][0] - navigate(state, to=page) - - if __name__ == "__main__": - root_md="<|menu|label=Menu|lov={[('Page-1', 'Page 1'), ('Page-2', 'Page 2')]}|on_action=menu_option_selected|>" - page1_md="## This is page 1" - page2_md="## This is page 2" + ``` + <|menu|label=Menu|lov={lov_pages}|on_action=menu_option_selected|>` + ``` - pages = { - "/": root_md, - "Page-1": page1_md, - "Page-2": page2_md - } +For example, this code creates a menu with two options: - Gui(pages=pages).run() - ``` === "Python" ```python from taipy import Gui @@ -122,29 +100,34 @@ For example, this code creates a menu with two options: } Gui(pages=pages).run() ``` - -![Menu](images/menu.png){ width=40% : .tp-image-border } - -- [navbar](../../../../refmans/gui/viselements/generic/navbar.md): creates an element to navigate -through the Taipy pages by default - === "Markdown" ```python - from taipy import Gui + from taipy.gui import Gui, navigate + + + def menu_option_selected(state, action, info): + page = info["args"][0] + navigate(state, to=page) if __name__ == "__main__": - # Add a navbar to switch from one page to the other - root_md = "<|navbar|>" - page1_md = "## This is page 1" - page2_md = "## This is page 2" + root_md="<|menu|label=Menu|lov={[('Page-1', 'Page 1'), ('Page-2', 'Page 2')]}|on_action=menu_option_selected|>" + page1_md="## This is page 1" + page2_md="## This is page 2" pages = { "/": root_md, - "page1": page1_md, - "page2": page2_md + "Page-1": page1_md, + "Page-2": page2_md } + Gui(pages=pages).run() ``` + +![Menu](images/menu.png){ width=40% : .tp-image-border } + +- [navbar](../../../../refmans/gui/viselements/generic/navbar.md): creates an element to navigate +through the Taipy pages by default + === "Python" ```python from taipy import Gui @@ -168,6 +151,23 @@ through the Taipy pages by default } Gui(pages=pages).run() ``` +=== "Markdown" + ```python + from taipy import Gui + + if __name__ == "__main__": + # Add a navbar to switch from one page to the other + root_md = "<|navbar|>" + page1_md = "## This is page 1" + page2_md = "## This is page 2" + + pages = { + "/": root_md, + "page1": page1_md, + "page2": page2_md + } + Gui(pages=pages).run() + ``` ![Navbar](images/navbar.png){ width=40% : .tp-image-border } @@ -180,7 +180,7 @@ The Markdown created in our previous steps will be the first page (named _page_) Then, let’s create our second page, which contains a page to analyze an entire text. -=== "Markdown" +=== "Python" ```python # Second page @@ -188,17 +188,6 @@ Then, let’s create our second page, which contains a page to analyze an entire path = "" treatment = 0 - page_file = """ - <|{path}|file_selector|extensions=.txt|label=Upload .txt file|on_action=analyze_file|> <|Downloading {treatment}%...|> - - - <|Table|expandable| - <|{dataframe2}|table|> - |> - - <|{dataframe2}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|height=800px|> - """ - def analyze_file(state): state.dataframe2 = dataframe2 state.treatment = 0 @@ -217,8 +206,21 @@ Then, let’s create our second page, which contains a page to analyze an entire state.dataframe2 = temp state.path = None + + with tgb.Page() as page_file: + tgb.file_selector("{path}", extensions=".txt", label="Upload .txt file", + on_action=analyze_file) + tgb.text("Downloading {treatment}%...") + + with tgb.expandable("Table"): + tgb.table("{dataframe2}") + + tgb.chart("{dataframe2}", type="bar", x="Text", + y__1="Score Pos", y__2="Score Neu", y__3="Score Neg", y__4="Overall", + color__1="green", color__2="grey", color__3="red", type__4="line", + height="800px") ``` -=== "Python" +=== "Markdown" ```python # Second page @@ -226,6 +228,17 @@ Then, let’s create our second page, which contains a page to analyze an entire path = "" treatment = 0 + page_file = """ + <|{path}|file_selector|extensions=.txt|label=Upload .txt file|on_action=analyze_file|> <|Downloading {treatment}%...|> + + + <|Table|expandable| + <|{dataframe2}|table|> + |> + + <|{dataframe2}|chart|type=bar|x=Text|y[1]=Score Pos|y[2]=Score Neu|y[3]=Score Neg|y[4]=Overall|color[1]=green|color[2]=grey|color[3]=red|type[4]=line|height=800px|> + """ + def analyze_file(state): state.dataframe2 = dataframe2 state.treatment = 0 @@ -244,31 +257,17 @@ Then, let’s create our second page, which contains a page to analyze an entire state.dataframe2 = temp state.path = None - - with tgb.Page() as page_file: - tgb.file_selector("{path}", extensions=".txt", label="Upload .txt file", - on_action=analyze_file) - tgb.text("Downloading {treatment}%...") - - with tgb.expandable("Table"): - tgb.table("{dataframe2}") - - tgb.chart("{dataframe2}", type="bar", x="Text", - y__1="Score Pos", y__2="Score Neu", y__3="Score Neg", y__4="Overall", - color__1="green", color__2="grey", color__3="red", type__4="line", - height="800px") ``` - This little code below assembles our previous page and this new page. The `navbar` in the root page is also visible on both pages allowing for easy switching between pages. ```python # One root page for common content # The two pages that were created -pages = {"/":"<|toggle|theme|>\n
\n<|navbar|>\n
", - "line":page, - "text":page_file} +pages = {"/": "<|toggle|theme|>\n
\n<|navbar|>\n
", + "line": page, + "text": page_file} Gui(pages=pages).run() ``` diff --git a/docs/tutorials/getting_started/index.md_template b/docs/tutorials/getting_started/index.md_template index a3093f9fd..e430e4c58 100644 --- a/docs/tutorials/getting_started/index.md_template +++ b/docs/tutorials/getting_started/index.md_template @@ -28,67 +28,66 @@ demonstrates how Taipy can be used to create interactive and dynamic web applications. !!! example "GUI creation" + === "Python" - === "Markdown" - - Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is the Markdown representation of the page. + Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is built through + the Page Builder API. ```python linenums="1" from taipy.gui import Gui + import taipy.gui.builder as tgb from math import cos, exp value = 10 - page = """ - # Taipy *Getting Started* - - Value: <|{value}|text|> - - <|{value}|slider|on_change=slider_moved|> - - <|{data}|chart|> - """ + def compute_data(decay:int)->list: + return [cos(i/6) * exp(-i*decay/600) for i in range(100)] def slider_moved(state): state.data = compute_data(state.value) - def compute_data(decay:int)->list: - return [cos(i/6) * exp(-i*decay/600) for i in range(100)] + with tgb.Page() as page: + tgb.text(value="# Taipy Getting Started", mode="md") + tgb.text(value="Value: {value}") + tgb.slider(value="{value}", on_change=slider_moved) + tgb.chart(data="{data}") data = compute_data(value) if __name__ == "__main__": - Gui(page).run(title="Dynamic chart") + Gui(page=page).run(title="Dynamic chart") ``` - === "Python" + === "Markdown" - Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is built through - the Page Builder API. + Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is the Markdown representation of the page. ```python linenums="1" from taipy.gui import Gui - import taipy.gui.builder as tgb from math import cos, exp value = 10 - def compute_data(decay:int)->list: - return [cos(i/6) * exp(-i*decay/600) for i in range(100)] + page = """ + # Taipy *Getting Started* + + Value: <|{value}|text|> + + <|{value}|slider|on_change=slider_moved|> + + <|{data}|chart|> + """ def slider_moved(state): state.data = compute_data(state.value) - with tgb.Page() as page: - tgb.text(value="# Taipy Getting Started", mode="md") - tgb.text(value="Value: {value}") - tgb.slider(value="{value}", on_change=slider_moved) - tgb.chart(data="{data}") + def compute_data(decay:int)->list: + return [cos(i/6) * exp(-i*decay/600) for i in range(100)] data = compute_data(value) if __name__ == "__main__": - Gui(page=page).run(title="Dynamic chart") + Gui(page).run(title="Dynamic chart") ``` Now, let’s explain the key elements of this code: diff --git a/docs/userman/gui/binding.md b/docs/userman/gui/binding.md index 6c9688979..54c7d3cd0 100644 --- a/docs/userman/gui/binding.md +++ b/docs/userman/gui/binding.md @@ -7,18 +7,37 @@ Consider the following application: -```python linenums="1" -from taipy import Gui +=== "Python" + ```python linenums="1" + import taipy.gui.builder as tgb + from taipy import Gui + + x = 1234 + with tgb.Page() as page: + tgb.html("h1", "Hello Taipy") + tgb.html("", "The variable") + tgb.html("tt", "x") + tgb.html("", "is set to") + tgb.text("{x}", inline=True) -if __name__ == "__main__": - x = 1234 + if __name__ == "__main__": + Gui(page=page).run() + ``` +=== "Markdown" + ```python linenums="1" + from taipy import Gui - Gui(page=""" -# Hello Taipy -The variable `x` contains the value <|{x}|>. - """).run() -``` + x = 1234 + page = """ + # Hello Taipy + + The variable `x` is set to <|{x}|>. + """ + + if __name__ == "__main__": + Gui(page=page).run() + ``` When this program runs (and a web browser is directed to the running server), the root page displays the value of the variable *x*, as it was defined in your code. @@ -387,19 +406,6 @@ You can directly use this class as a LoV value in you control.
Here is how you can use the *Color* enumeration class in a [`toggle`](../../refmans/gui/viselements/generic/toggle.md) control: !!! example "Enum as LoV" - - === "Markdown" - - ``` - <|{color}|toggle|lov={Color}|> - ``` - - === "HTML" - - ```html - {color} - ``` - === "Python" ```python @@ -415,6 +421,18 @@ Here is how you can use the *Color* enumeration class in a In this case, the *color* variable will hold the enumeration member's value (e.g., 0, 1, 2) instead of the enumeration member (e.g., the object `Color.RED`). + === "Markdown" + + ``` + <|{color}|toggle|lov={Color}|> + ``` + + === "HTML" + + ```html + {color} + ``` + When this control is used on a page, the *color* variable will be updated to reflect the selected member from the *Color* enumeration class.
If you're using the Page Builder API and have set the *lov* property to the enumeration class @@ -442,7 +460,7 @@ used in 'regular' *LoV*s. The *list of values* is an ordered list of descriptors: - ```py + ```python python_versions=[ { "name": "0.9.0", "date": 1991 }, { "name": "1.0", "date": 1994 }, diff --git a/docs/userman/gui/extension/dynamic_element/index.md b/docs/userman/gui/extension/dynamic_element/index.md index 1185590d4..bedae3c10 100644 --- a/docs/userman/gui/extension/dynamic_element/index.md +++ b/docs/userman/gui/extension/dynamic_element/index.md @@ -355,5 +355,5 @@ Here are the sections that address the different use cases that your custom element may need: - [Scalar properties](scalar_props.md) -- [Tabular data properties](../tabular_data) +- [Tabular data properties](../tabular_data.md) diff --git a/docs/userman/gui/extension/tabular_data.md b/docs/userman/gui/extension/tabular_data.md index f1ee866b6..19f149d5a 100644 --- a/docs/userman/gui/extension/tabular_data.md +++ b/docs/userman/gui/extension/tabular_data.md @@ -151,24 +151,24 @@ export default GameTable; The detailed explanation of the code is as follows: -- We use the [`useDispatch()`](../../refmans/reference_guiext/functions/useDispatch.md) hook +- We use the [`useDispatch()`](../../../refmans/reference_guiext/functions/useDispatch.md) hook to dispatch actions to the store and initiate backend communications. -- Additionally, the [`useModule()`](../../refmans/reference_guiext/functions/useModule.md) +- Additionally, the [`useModule()`](../../../refmans/reference_guiext/functions/useModule.md) hook retrieves the page module, enabling correct execution of backend functions. - To request an update for every dynamic property of an element on initial render, we use the - [`useDispatchRequestUpdateOnFirstRender()`](../../refmans/reference_guiext/functions/useDispatchRequestUpdateOnFirstRender.md) + [`useDispatchRequestUpdateOnFirstRender()`](../../../refmans/reference_guiext/functions/useDispatchRequestUpdateOnFirstRender.md) hook provided by the Taipy GUI Extension API. This hook takes five parameters: - *dispatch*: The React dispatcher associated with the context. - *id*: The identifier of the element. - *context*: The execution context. - *updateVars*: The content of the *updateVars* property. - We also dispatch the - [`createRequestDataUpdateAction()`](../../refmans/reference_guiext/functions/createRequestDataUpdateAction.md) + [`createRequestDataUpdateAction()`](../../../refmans/reference_guiext/functions/createRequestDataUpdateAction.md) hook to create a request data update action, which updates the context by invoking the `(ElementLibrary.)get_data()^` method of the backend library. This invocation triggers an update of front-end elements holding the data. -The [`createRequestDataUpdateAction()`](../../refmans/reference_guiext/functions/createRequestUpdateAction.md) +The [`createRequestDataUpdateAction()`](../../../refmans/reference_guiext/functions/createRequestUpdateAction.md) hook accepts eight parameters: - *name*: The name of the variable containing the requested data, as received in the property. diff --git a/docs/userman/gui/pages/dialog/index.md b/docs/userman/gui/pages/dialog/index.md index 9b04d5268..e805eb5d8 100644 --- a/docs/userman/gui/pages/dialog/index.md +++ b/docs/userman/gui/pages/dialog/index.md @@ -7,8 +7,9 @@ Applications sometimes need to prompt the user to indicate a situation or reques input of some sort. Dialogs are forms that can be displayed on top of the page the user is looking at, prompting for some input. -To create a dialog, you will use a [`dialog`](../../../../refmans/gui/viselements/generic/dialog.md) control in your -page. The dialog holds a page content or a *Partial* (see [Partials](../partial/index.md)). +To create a dialog, you will use a [`dialog`](../../../../refmans/gui/viselements/generic/dialog.md) +control in your page. The dialog holds a page content or a *Partial* (see +[Partials](../partial/index.md)). You can control whether the dialog is visible or not, and what to do when the end-user presses the *Validate* or *Cancel* button, so your application can deal with the @@ -16,9 +17,10 @@ user's response. Here is an example of how you would create a dialog: -=== "Markdown" +=== "Python" ```python from taipy.gui import Gui + import taipy.gui.builder as tgb dialog_is_visible = False @@ -27,23 +29,18 @@ Here is an example of how you would create a dialog: def show_or_hide_dialog(state): state.dialog_is_visible = not state.dialog_is_visible - page = """ - <|Show dialog|button|on_action=show_or_hide_dialog|> - - <|{dialog_is_visible}|dialog|title=Form|on_action=show_or_hide_dialog| - Enter a name: + with tgb.Page() as page: + tgb.button("Show dialog", on_action=show_or_hide_dialog) - <|{name}|input|> - |> - """ + with tgb.dialog(open="{dialog_is_visible}", title="Form", on_action=show_or_hide_dialog): + tgb.text("Enter a name:") + tgb.input("{name}") Gui(page).run() ``` - -=== "Python" +=== "Markdown" ```python from taipy.gui import Gui - import taipy.gui.builder as tgb dialog_is_visible = False @@ -52,16 +49,19 @@ Here is an example of how you would create a dialog: def show_or_hide_dialog(state): state.dialog_is_visible = not state.dialog_is_visible - with tgb.Page() as page: - tgb.button("Show dialog", on_action=show_or_hide_dialog) + page = """ + <|Show dialog|button|on_action=show_or_hide_dialog|> - with tgb.dialog(open="{dialog_is_visible}", title="Form", on_action=show_or_hide_dialog): - tgb.text("Enter a name:") - tgb.input("{name}") + <|{dialog_is_visible}|dialog|title=Form|on_action=show_or_hide_dialog| + Enter a name: + + <|{name}|input|> + |> + """ Gui(page).run() ``` - -Please refer to the documentation page on the [`dialog`](../../../../refmans/gui/viselements/generic/dialog.md) -control for more details and examples. +Please refer to the documentation page on the +[`dialog`](../../../../refmans/gui/viselements/generic/dialog.md) control for more details and +examples. diff --git a/docs/userman/gui/pages/index.md b/docs/userman/gui/pages/index.md index 12de4045f..96276bce6 100644 --- a/docs/userman/gui/pages/index.md +++ b/docs/userman/gui/pages/index.md @@ -8,9 +8,17 @@ Taipy lets you create as many pages as you require with whatever content you nee !!! tip "Choosing how to create pages" - Choosing between the Markdown format, HTML content, or Python code depends on several + Choosing between Python code, the Markdown format, or HTML content, or depends on several parameters: + - Use Python with the [Page Builder API](builder.md) when: + + - You are familiar with the Python language and Python libraries that help build web + applications (like [gradio](https://www.gradio.app/)); + - You need to decide at runtime what elements should be created and how. This usually + involves control of the code flow (using tests or loops), which is more difficult to + achieve using text templates. + - Use [Markdown](markdown.md) when: - You need to create a page in a few minutes; @@ -26,31 +34,23 @@ Taipy lets you create as many pages as you require with whatever content you nee and connect to a Python backend application; - You need a precise page structure. - - Use Python with the [Page Builder API](builder.md) when: - - - You are familiar with the Python language and Python libraries that help build web - applications (like [gradio](https://www.gradio.app/)); - - You need to decide at runtime what elements should be created and how. This usually - involves control of the code flow (using tests or loops), which is more difficult to - achieve using text templates. - - === "Markdown" + === "Python" ```python from taipy import Gui + import taipy.gui.builder as tgb if __name__ == "__main__": - page = "# First page" + with tgb.Page() as page: + tgb.text("# First Page", mode="md") Gui(page).run() ``` - === "Python" + === "Markdown" ```python from taipy import Gui - import taipy.gui.builder as tgb if __name__ == "__main__": - with tgb.Page() as page: - tgb.text("# First Page", mode="md") + page = "# First page" Gui(page).run() ``` @@ -65,55 +65,55 @@ The definition of a page typically consists of: - Setting callbacks to these elements. !!! example "Getting Started example" - === "Markdown" + === "Python" ```python linenums="1" from taipy.gui import Gui + import taipy.gui.builder as tgb from math import cos, exp - def slider_moved(state): - state.data = compute_data(state.value) - def compute_data(decay:int)->list: return [cos(i/6) * exp(-i*decay/600) for i in range(100)] + def slider_moved(state): + state.data = compute_data(state.value) + if __name__ == "__main__": value = 10 - page = """ - # Taipy *Getting Started* - - Value: <|{value}|text|> - - <|{value}|slider|on_change=slider_moved|> - - <|{data}|chart|> - """ + with tgb.Page() as page: + tgb.text(value="# Taipy Getting Started", mode="md") + tgb.text(value="Value: {value}") + tgb.slider(value="{value}", on_change=slider_moved) + tgb.chart(data="{data}") data = compute_data(value) Gui(page).run(title="Dynamic chart") ``` - === "Python" + === "Markdown" ```python linenums="1" from taipy.gui import Gui - import taipy.gui.builder as tgb from math import cos, exp - def compute_data(decay:int)->list: - return [cos(i/6) * exp(-i*decay/600) for i in range(100)] - def slider_moved(state): state.data = compute_data(state.value) + def compute_data(decay:int)->list: + return [cos(i/6) * exp(-i*decay/600) for i in range(100)] + if __name__ == "__main__": value = 10 - with tgb.Page() as page: - tgb.text(value="# Taipy Getting Started", mode="md") - tgb.text(value="Value: {value}") - tgb.slider(value="{value}", on_change=slider_moved) - tgb.chart(data="{data}") + page = """ + # Taipy *Getting Started* + + Value: <|{value}|text|> + + <|{value}|slider|on_change=slider_moved|> + + <|{data}|chart|> + """ data = compute_data(value) @@ -130,23 +130,23 @@ create a new page for you. That would be the easier way to create applications t single page. Here is how you can create and register a page in a Taipy application: -=== "Markdown" +=== "Python" ```python from taipy import Gui + import taipy.gui.builder as tgb if __name__ == "__main__": - page = "# First page" + with tgb.Page() as page: + tgb.text("# First Page", mode="md") Gui(page).run() ``` -=== "Python" +=== "Markdown" ```python from taipy import Gui - import taipy.gui.builder as tgb if __name__ == "__main__": - with tgb.Page() as page: - tgb.text("# First Page", mode="md") + page = "# First page" Gui(page).run() ``` @@ -162,19 +162,25 @@ use `Gui.add_pages()^` or create the `Gui^` instance using the *pages* argument. In those situations, you have to create a Python dictionary that associates a page with its name: -=== "Markdown" +=== "Python" ```python from taipy import Gui + import taipy.gui.builder as tgb if __name__ == "__main__": - root_md = "# Multi-page application" - home_md = "# Home" - about_md = "# About" + with tgb.Page() as root_page: + tgb.text("# Multi-page application", mode="md") + + with tgb.Page() as home_page: + tgb.text("# Home", mode="md") + + with tgb.Page() as about_page: + tgb.text("# About", mode="md") pages = { - "/": root_md, - "home": home_md, - "about": about_md + "/": root_page, + "home": home_page, + "about": about_page } Gui(pages=pages).run() @@ -183,25 +189,19 @@ associates a page with its name: # gui.add_pages(pages) # gui.run() ``` -=== "Python" +=== "Markdown" ```python from taipy import Gui - import taipy.gui.builder as tgb if __name__ == "__main__": - with tgb.Page() as root_page: - tgb.text("# Multi-page application", mode="md") - - with tgb.Page() as home_page: - tgb.text("# Home", mode="md") - - with tgb.Page() as about_page: - tgb.text("# About", mode="md") + root_md = "# Multi-page application" + home_md = "# Home" + about_md = "# About" pages = { - "/": root_page, - "home": home_page, - "about": about_page + "/": root_md, + "home": home_md, + "about": about_md } Gui(pages=pages).run() @@ -236,7 +236,6 @@ root page of your application, and is replaced by the target page content when t runs. !!! example - ```python from taipy import Gui diff --git a/docs/userman/gui/pages/navigate/index.md b/docs/userman/gui/pages/navigate/index.md index 0578bd5df..8746509d2 100644 --- a/docs/userman/gui/pages/navigate/index.md +++ b/docs/userman/gui/pages/navigate/index.md @@ -3,22 +3,6 @@ navigation, the `navigate` function, and the `on_navigate` function for controlling page transitions. !!! example "Multi-page application" - === "Markdown" - ```python - from taipy import Gui - - root_md = "# Multi-page application" - home_md = "# Home" - about_md = "# About" - - pages = { - "/": root_md, - "home": home_md, - "about": about_md - } - - Gui(pages=pages).run() - ``` === "Python" ```python from taipy import Gui @@ -39,6 +23,22 @@ controlling page transitions. "about": about_page } + Gui(pages=pages).run() + ``` + === "Markdown" + ```python + from taipy import Gui + + root_md = "# Multi-page application" + home_md = "# Home" + about_md = "# About" + + pages = { + "/": root_md, + "home": home_md, + "about": about_md + } + Gui(pages=pages).run() ``` @@ -48,26 +48,6 @@ controlling page transitions. by default, lets you navigate between pages. You can customize the navbar with properties like the list of pages you can navigate to. - -=== "Markdown" - ```python - from taipy import Gui - - root_md = """ - <|navbar|> - # Multi-page application - """ - home_md = "# Home" - about_md = "# About" - - pages = { - "/": root_md, - "home": home_md, - "about": about_md - } - - Gui(pages=pages).run() - ``` === "Python" ```python from taipy import Gui @@ -91,41 +71,17 @@ with properties like the list of pages you can navigate to. Gui(pages=pages).run() ``` - -# Using menus - -The [`menu`](../../../../refmans/gui/viselements/generic/menu.md) control displays a menu to the left of the page, -allowing to navigate through the pages. - === "Markdown" - ``` - <|menu|label=Menu|lov={lov_pages}|on_action=menu_option_selected|>` - ``` -=== "Python" ```python - tgb.menu(label="Menu", lov=[...], on_action=menu_option_selected) - ``` - -![Menu](images/menu.png){ width=40% : .tp-image-border } - -For example, this code creates a menu with two options: - -=== "Markdown" - ```python - from taipy import Gui, navigate + from taipy import Gui root_md = """ - <|menu|label=Menu|lov={[('home', 'Home'), ('about', 'About')]}|on_action=menu_option_selected|> + <|navbar|> # Multi-page application """ - home_md = "# Home" about_md = "# About" - def menu_option_selected(state, action, info): - page = info["args"][0] - navigate(state, to=page) - pages = { "/": root_md, "home": home_md, @@ -134,6 +90,25 @@ For example, this code creates a menu with two options: Gui(pages=pages).run() ``` + +# Using menus + +The [`menu`](../../../../refmans/gui/viselements/generic/menu.md) control displays a menu to the +left of the page, allowing to navigate through the pages. + +=== "Python" + ```python + tgb.menu(label="Menu", lov=[...], on_action=menu_option_selected) + ``` +=== "Markdown" + ``` + <|menu|label=Menu|lov={lov_pages}|on_action=menu_option_selected|>` + ``` + +![Menu](images/menu.png){ width=40% : .tp-image-border } + +For example, this code creates a menu with two options: + === "Python" ```python from taipy import Gui, navigate @@ -163,27 +138,21 @@ For example, this code creates a menu with two options: Gui(pages=pages).run() ``` - -# Using the `navigate` function - -The `(Gui.)navigate()^` function allows for programmatically controlling navigation -within callback functions. You can navigate to a page of this application or -an external page. - === "Markdown" ```python from taipy import Gui, navigate root_md = """ - <|Click to go to Page 1|button|on_action=go_home|> + <|menu|label=Menu|lov={[('home', 'Home'), ('about', 'About')]}|on_action=menu_option_selected|> # Multi-page application """ home_md = "# Home" about_md = "# About" - def go_home(state): - navigate(state, "home") + def menu_option_selected(state, action, info): + page = info["args"][0] + navigate(state, to=page) pages = { "/": root_md, @@ -193,6 +162,13 @@ an external page. Gui(pages=pages).run() ``` + +# Using the `navigate` function + +The `(Gui.)navigate()^` function allows for programmatically controlling navigation +within callback functions. You can navigate to a page of this application or +an external page. + === "Python" ```python from taipy import Gui, navigate @@ -219,39 +195,37 @@ an external page. Gui(pages=pages).run() ``` - - -# Using the `on_navigate` callback - -The `on_navigate` callback allows for customizing the control over navigation, such -as redirecting users based on conditions. - -See more information for [`on_navigate`](../../callbacks.md#navigation-callback). - - === "Markdown" ```python - from taipy import Gui, State + from taipy import Gui, navigate - results_ready = False + root_md = """ + <|Click to go to Page 1|button|on_action=go_home|> + # Multi-page application + """ - def on_navigate(state: State, page_name: str): - if page_name == "results" and not state.results_ready: - return "no_results" - return page_name + home_md = "# Home" + about_md = "# About" - root_md = "# Multi-page application" - results_md = "# Results Page" - no_results_md = "# No Results Available" + def go_home(state): + navigate(state, "home") pages = { "/": root_md, - "results": results_md, - "no_results": no_results_md + "home": home_md, + "about": about_md } Gui(pages=pages).run() ``` + +# Using the `on_navigate` callback + +The `on_navigate` callback allows for customizing the control over navigation, such +as redirecting users based on conditions. + +See more information for [`on_navigate`](../../callbacks.md#navigation-callback). + === "Python" ```python from taipy import Gui, State @@ -279,5 +253,28 @@ See more information for [`on_navigate`](../../callbacks.md#navigation-callback) "no_results": no_results_page } + Gui(pages=pages).run() + ``` +=== "Markdown" + ```python + from taipy import Gui, State + + results_ready = False + + def on_navigate(state: State, page_name: str): + if page_name == "results" and not state.results_ready: + return "no_results" + return page_name + + root_md = "# Multi-page application" + results_md = "# Results Page" + no_results_md = "# No Results Available" + + pages = { + "/": root_md, + "results": results_md, + "no_results": no_results_md + } + Gui(pages=pages).run() ``` diff --git a/docs/userman/gui/pages/pane/index.md b/docs/userman/gui/pages/pane/index.md index c219c9921..3f426bf74 100644 --- a/docs/userman/gui/pages/pane/index.md +++ b/docs/userman/gui/pages/pane/index.md @@ -5,16 +5,18 @@ hide: Modern user interfaces also provide small pages that pop out and be removed for temporary use, such as providing specific parameters for the application. Taipy lets -you create such elements using the [pane](../../../../refmans/gui/viselements/generic/pane.md) block. +you create such elements using the [pane](../../../../refmans/gui/viselements/generic/pane.md) +block. A pane can appear from any border of your page, next to or on top of the page, and disappears when the user clicks outside its area. Here is an example of how you would create a pane: -=== "Markdown" +=== "Python" ```python from taipy.gui import Gui + import taipy.gui.builder as tgb pane_is_visible = False @@ -23,23 +25,18 @@ Here is an example of how you would create a pane: def show_or_hide_pane(state): state.pane_is_visible = not state.pane_is_visible - page = """ - <|Show pane|button|on_action=show_or_hide_pane|> - - <|{pane_is_visible}|pane| - Enter a name: + with tgb.Page() as page: + tgb.button("Show pane", on_action=show_or_hide_pane) - <|{name}|input|> - |> - """ + with tgb.pane(open="{pane_is_visible}"): + tgb.text("Enter a name:") + tgb.input("{name}") Gui(page).run() ``` - -=== "Python" +=== "Markdown" ```python from taipy.gui import Gui - import taipy.gui.builder as tgb pane_is_visible = False @@ -48,14 +45,18 @@ Here is an example of how you would create a pane: def show_or_hide_pane(state): state.pane_is_visible = not state.pane_is_visible - with tgb.Page() as page: - tgb.button("Show pane", on_action=show_or_hide_pane) + page = """ + <|Show pane|button|on_action=show_or_hide_pane|> - with tgb.pane(open="{pane_is_visible}"): - tgb.text("Enter a name:") - tgb.input("{name}") + <|{pane_is_visible}|pane| + Enter a name: + + <|{name}|input|> + |> + """ Gui(page).run() ``` -Please refer to the documentation page on the [pane](../../../../refmans/gui/viselements/generic/pane.md) control for more details and examples. +Please refer to the documentation page on the +[pane](../../../../refmans/gui/viselements/generic/pane.md) control for more details and examples. diff --git a/docs/userman/gui/pages/partial/index.md b/docs/userman/gui/pages/partial/index.md index 891511652..bf8fbfdd5 100644 --- a/docs/userman/gui/pages/partial/index.md +++ b/docs/userman/gui/pages/partial/index.md @@ -5,27 +5,27 @@ search: Partials can be used within multiple objects in Taipy: [part](../../../../refmans/gui/viselements/generic/part.md), [dialog](../dialog/index.md) and [pane](../pane/index.md). They can be used as a static resusable component like so. -=== "Markdown" +=== "Python" ```python from taipy.gui import Gui # Define the main page layout - page = """ - <|part|partial={partial}|> - """ + with tgb.Page() as page: + tgb.part(partial="{partial}") # Create and run the Taipy GUI gui = Gui(page) partial = gui.add_partial("Your first partial") gui.run() ``` -=== "Python" +=== "Markdown" ```python from taipy.gui import Gui # Define the main page layout - with tgb.Page() as page: - tgb.part(partial="{partial}") + page = """ + <|part|partial={partial}|> + """ # Create and run the Taipy GUI gui = Gui(page) @@ -48,25 +48,25 @@ state.partial.update_content(state, new_content) The `(Partial.)update_content()^` method expects two arguments: the state object and the new content of the partial. -=== "Markdown" +=== "Python" ```python from taipy.gui import Gui + import taipy.gui.builder as tgb def change_partial(state): state.partial.update_content(state, "Partial is changed!") # Define the main page layout - page = """ - <|part|partial={partial}|> - <|Change partial|button|on_action=change_partial|> - """ + with tgb.Page() as page: + tgb.button('Change partial', on_action=change_partial) + tgb.part(partial="{partial}") # Create and run the Taipy GUI gui = Gui(page) partial = gui.add_partial("Your first partial") gui.run() ``` -=== "Python" +=== "Markdown" ```python from taipy.gui import Gui @@ -74,9 +74,10 @@ content of the partial. state.partial.update_content(state, "Partial is changed!") # Define the main page layout - with tgb.Page() as page: - tgb.button('Change partial', on_action=change_partial) - tgb.part(partial="{partial}") + page = """ + <|part|partial={partial}|> + <|Change partial|button|on_action=change_partial|> + """ # Create and run the Taipy GUI gui = Gui(page) @@ -94,12 +95,6 @@ You might want to create a list of links that can be dynamically updated: Here is the code for the main script: -=== "Markdown" - ```python - {% - include-markdown "./src/example_md.py" - comments=false - %} ``` === "Python" ```python {% @@ -107,6 +102,12 @@ Here is the code for the main script: comments=false %} ``` +=== "Markdown" + ```python + {% + include-markdown "./src/example_md.py" + comments=false + %} ``` This script creates a button that, when clicked, updates the list of links displayed on the page. The links component is encapsulated within a partial, making it reusable and @@ -135,6 +136,12 @@ updated later. The partial needs to be placed within the layout where it will be displayed. You can include it in one or multiple places within your layout. +=== "Python" + ```python + with tgb.Page() as main_page: + tgb.button('Add links', on_action=simulate_adding_more_links) + tgb.part(partial="{link_partial}") + ``` === "Markdown" ```python main_page = """ @@ -142,13 +149,6 @@ include it in one or multiple places within your layout. <|part|partial={link_partial}|> """ ``` -=== "Python" - ```python - with tgb.Page() as main_page: - tgb.button('Add links', on_action=simulate_adding_more_links) - tgb.part(partial="{link_partial}") - ``` - In this code, `tgb.part(partial="{link_partial}")` is where the partial will be shown. You can place this partial in multiple locations within your layout if needed. @@ -158,20 +158,6 @@ You can place this partial in multiple locations within your layout if needed. To dynamically update the partial, you use the `update_content` method. This can be done using either the Markdown syntax or the Python API by providing a page to this method. -=== "Markdown" - ```python - def refresh_links(state): - partial_md = "<|layout|columns=1 1 1|\n" - for link in state.links: - link_name, link_url = link - partial_md += "<|card|\n" - partial_md += f"## {link_name}\n" - partial_md += "Quick description here if you like\n\n" - partial_md += f"[Click here to go to {link_name}]({link_url})\n" - partial_md += "|>\n" - partial_md += "|>\n" - state.link_partial.update_content(state, partial_md) - ``` === "Python" ```python def refresh_links(state): @@ -186,6 +172,20 @@ using either the Markdown syntax or the Python API by providing a page to this m # You could use any visual element you like state.link_partial.update_content(state, link_part) ``` +=== "Markdown" + ```python + def refresh_links(state): + partial_md = "<|layout|columns=1 1 1|\n" + for link in state.links: + link_name, link_url = link + partial_md += "<|card|\n" + partial_md += f"## {link_name}\n" + partial_md += "Quick description here if you like\n\n" + partial_md += f"[Click here to go to {link_name}]({link_url})\n" + partial_md += "|>\n" + partial_md += "|>\n" + state.link_partial.update_content(state, partial_md) + ``` We create a new `link_part` page using the Taipy builder API in this function. We then use `state.link_partial.update_content(state, link_part)` to update the partial content. @@ -207,4 +207,4 @@ layout. The `refresh_links` function generates new content using the builder API. `state.link_partial.update_content(state, link_part)` updates the partial with the new -content. \ No newline at end of file +content. diff --git a/docs/userman/gui/styling/index.md b/docs/userman/gui/styling/index.md index cd314d2da..e32a3a159 100644 --- a/docs/userman/gui/styling/index.md +++ b/docs/userman/gui/styling/index.md @@ -37,32 +37,51 @@ There are two ways you can apply a stylesheet to your application: The parameter to the *style* parameter is a dictionary where keys describe the CSS selector to apply, and the value is the rule declaration, expressed as a dictionary (each key being the CSS property name and each value being the property value).
- Here is an example of defining CSS styling on a page. We will address the `Markdown^` use case, - but the situation is identical in the Page Builder and HTML cases.
- Consider the following definition: - ```python - page = Markdown("... markdown content", - style = { - ".taipy-button": { - "background-color": "red" - } - } - ``` + Here is an example of defining CSS styling on a page: + === "Python" + ```python + with tgb.Page(style = { + ".taipy-button": { + "background-color": "red" + } + }) as page: + # page content + ``` + === "Markdown" + ```python + page = Markdown("... page content", + style = { + ".taipy-button": { + "background-color": "red" + } + } + ``` This style creates a single CSS rule that will apply to all `button` controls of this page, giving them a red background color. Note that [nested CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) is supported: the CSS declaration can be a CSS rule itself. Here is an example: - ```python - page = Markdown("... markdown content", - style = { - ".taipy-slider": { - ".MuiSlider-rail": { + === "Python" + ```python + with tgb.Page(style = { + ".taipy-slider": { + ".MuiSlider-rail": { "background-color": "yellow" - } - } - ``` + } + }) as page: + # page content + ``` + === "Markdown" + ```python + page = Markdown("... page content", + style = { + ".taipy-slider": { + ".MuiSlider-rail": { + "background-color": "yellow" + } + } + ``` This style definition will apply the yellow color to the rail of a `slider` control. It does this by selecting all the elements with the ".MuiSlider-rail" class that are a descendants of elements with the ".taipy-slider" class (`slider` controls). @@ -266,22 +285,32 @@ error_cls = None - *error_cls*: is the name of a CSS class that we apply to the input control and the error message. We don't want to apply the class if the input control is empty, so we set this value to empty. -Here is the Markdown definition of the page: -```py -page = Markdown( - """ -Enter a five-letter word: -<|{word}|input|class_name={error_cls}|><|{error_text}|text|class_name={error_cls}|> - -<|Validate|button|active={valid}|> -""", - style={".invalid-value": {"background-color": "red"}}, -) -``` +Here is the definition of the page: +=== "Python" + ```python + with tgb.Page(style={".invalid-value": {"background-color": "red"}}) as page: + tgb.html("", "Enter a five-letter word:") + tgb.input("{word}", class_name="{error_cls}") + tgb.text("{error_text}", class_name="{error_cls}") + + tgb.button("Validate", active="{valid}") + ``` +=== "Markdown" + ```python + page = Markdown( + """ + Enter a five-letter word: + <|{word}|input|class_name={error_cls}|><|{error_text}|text|class_name={error_cls}|> + + <|Validate|button|active={valid}|> + """, + style={".invalid-value": {"background-color": "red"}}, + ) + ``` You can spot the `input`, `text`, and `button` controls and how we have bound variables to them. -The *style* parameter of the `Markdown^` constructor defines the "invalid-value" class that changes -the background color of the elements it is applied to. +The *style* parameter of the `(taipy.gui.)Page^` constructor defines the "invalid-value" class that +changes the background color of the elements it is applied to. Here is the implementation of the `on_change` callback function that computes the visual feedback to the user: @@ -347,11 +376,15 @@ The button is also disabled to prevent the user from submitting this invalid val You can use the *id* property of all visual elements to generate an HTML id that can be used by CSS styling. -For example, if your Markdown page contains the following control: - -``` -<|Click me|button|id=my_button|> -``` +For example, if your page contains the following control: +=== "Python" + ```python + tgb.button("Click me", id="my_button") + ``` +=== "Markdown" + ``` + <|Click me|button|id=my_button|> + ``` You can change the style of that button using a CSS selector that relies on the id of the button: diff --git a/docs/userman/gui/viselements/introduction.md b/docs/userman/gui/viselements/introduction.md index bfedbe067..2ded4f87a 100644 --- a/docs/userman/gui/viselements/introduction.md +++ b/docs/userman/gui/viselements/introduction.md @@ -32,14 +32,71 @@ names defined in the code, and the value of the property is set to the evaluated new variable value, which might be slow and hit the user experience.
Visual Elements that are costly to render on the browser provide a property called *rebuild* that allows one to explicitly request the render of the component. Please check the relevant - sections for the [`chart`](../../../refmans/gui/viselements/generic/chart.md#the-rebuild-property) and - [`table`](../../../refmans/gui/viselements/generic/table.md#the-rebuild-property) controls for more information. + sections for the + [`chart`](../../../refmans/gui/viselements/generic/chart.md#the-rebuild-property) and + [`table`](../../../refmans/gui/viselements/generic/table.md#the-rebuild-property) controls for + more information. # Syntax Depending on the technique you have used to create your application pages (see the section on [Page](../pages/index.md)), visual elements are created with specific syntaxes: +## Page Builder API + +The [Page Builder](../../../refmans/reference/pkg_taipy/pkg_gui/pkg_builder/index.md) package +provides an API to create and configure visual elements. + +To set a property value, use the property name as a named parameter in the element's +constructor: +```python +import taipy.gui.builder as tgb + +tgb.(=property_value, ...) +``` + +!!! note "Shortcut for the default property" + To specify the value of the default property for this element type, the value can be specified + as the first parameter of the constructor.
+ For instance, since *value* is the default property for the + [`text`](../../../refmans/gui/viselements/generic/text.md) control, the following are + equivalent: + ```python + tgb.text(value="Text content") + ``` + ```python + tgb.text("Text content") + ``` + +!!! note "Binding variables" + When passing a variable as a parameter value, Python uses the variable *value* at the time of + assignment, and not the variable *itself*. This is part of the Python language is specification. + + If you need to bind a variable to an element's property, you therefore cannot use the simple + `property_name=variable` syntax, because it would set, once and for all, the element's property + to the value of the variable. + + In order to *reference* a variable and have Taipy being able to retrieve the variable's value at + run time, and monitor for its changes, you must use a formatted string literal, also known as an + *f-string*, that would return an expression where referenced variables are evaluated:
+ `property_name="expression using {variable}"`. + + To create a bi-directional binding on a variable, which is very common to bind an element's + main value (such as the value of a slider), you would need to create the simplest possible + expression:
+ `property_name="{variable}"`. + + For example, to bind the variable *value* to the main value of a + [`slider`](../../../refmans/gui/viselements/generic/slider.md) control, you would use the + following code: + ```python + import taipy.gui.builder as tgb + + value = 50 # Initialize a variable + + tgb.slider("{value}") # Bind the variable to the slider + ``` + ## Markdown This applies when the page is defined using [Markdown](../pages/markdown.md). @@ -249,17 +306,6 @@ is equivalent to resulting in setting it to 'true', which does respect the HTML specification: `` is equivalent to ``. -## Page Builder API - -If you use Python code to create pages, the -[Page Builder](../../../refmans/reference/pkg_taipy/pkg_gui/pkg_builder/index.md) package provides the API for all the -available visual elements. - -To set a property to a value, you will use the property name as a named parameter to the element's -API.
-Note that to bind variables to an element's property, you must set that property to a string -defining an expression referencing the variables. - # Generic properties Every visual element type has the following properties: @@ -302,8 +348,10 @@ of the variable that holds that dictionary as the value of the *properties* prop !!! example - Say your Markdown content needs the following control: - `<|dialog|title=Select an item in the list|open={show_dialog}|labels=Cancel;Validate|page_id=page|close_label=Cancel|>` + Say your Markdown content needs the following control:
+ ``` + <|dialog|title=Select an item in the list|open={show_dialog}|labels=Cancel;Validate|page_id=page|close_label=Cancel|> + ``` As this syntax can be cumbersome, you might prefer to define a simple Python dictionary: diff --git a/tools/_setup_generation/step_viselements.py b/tools/_setup_generation/step_viselements.py index eee8f2299..30793e2cc 100644 --- a/tools/_setup_generation/step_viselements.py +++ b/tools/_setup_generation/step_viselements.py @@ -400,9 +400,12 @@ def __init__(self, [arguments]) -> None: "corelements" if desc["prefix"] == "core_" else "generic" ) if m := (re.search(r"(\[`(\w+)`\]\()\2\.md\)", short_doc)): + # Replacing links from the doc in the Python source to another element + # At this time, this works only if the source and target elements are in the + # same directory (generic, corelements or blocks). short_doc = ( short_doc[: m.start()] - + f"{m[1]}../../../../../refmans/gui/viselements/{element_md_location}/{m[2]}.md)" + + f"{m[2]}" + short_doc[m.end() :] ) @@ -506,6 +509,49 @@ def __process_element_md_file(self, type: str, documentation: str) -> str: properties.append((p[1], p[3], p[2] if p[2] else "-")) new_documentation += '!!! example "Definition"\n' + # Page Builder syntax + BP_IDX_PROP_RE = re.compile(r"^(.*?)\[([\w\d]+)\]$", re.M) + generate_page_builder_api = True + pb_properties = [] + for n, v, t in properties: + if "[" in n: + if (idx_prop_match := BP_IDX_PROP_RE.match(n)) is None: + print( + f"WARNING - Property '{n}' in examples for {type} prevents Python code generation" + ) + generate_page_builder_api = False + else: + pname = f"{idx_prop_match[1]}__{idx_prop_match[2]}" + pb_properties.append((pname, v, t)) + else: + pb_properties.append((n, v, t)) + if generate_page_builder_api: + new_documentation += ' === "Python"\n' + new_documentation += " ```python\n" + new_documentation += ( + " import taipy.gui.builder as tgb\n ...\n" + ) + new_documentation += f" tgb.{type}(" + + def builder_value(value: str, type: str) -> str: + if type in ["n", "f"]: + return value + if type.startswith("b"): + return value.title() + value = value.replace('"', "'") + return f'"{value}"' + + prefix = "" + if default_property: + new_documentation += f'"{default_property}"' + prefix = ", " + for n, v, t in pb_properties: + new_documentation += f"{prefix}{n}={builder_value(v, t)}" + prefix = ", " + new_documentation += ")\n" + new_documentation += " ```\n" + last_location = definition.end() + # Markdown format def md_property_value(property: str, value: str, type: str) -> str: if type.startswith("b"): @@ -524,7 +570,7 @@ def md_property_value(property: str, value: str, type: str) -> str: return f"{property}={{{value}}}" return f"{property}={value}" - new_documentation += '\n === "Markdown"\n\n' + new_documentation += ' === "Markdown"\n' new_documentation += " ```\n" new_documentation += " <|" if default_property: @@ -547,7 +593,7 @@ def html_value(property: str, value: str, type: str) -> str: value = value.replace('"', "'") return f'{property}="{value}"' - new_documentation += '\n === "HTML"\n\n' + new_documentation += ' === "HTML"\n' new_documentation += " ```html\n" new_documentation += f" str: new_documentation += "\n " new_documentation += f"{html_2}\n ```\n" - # Page Builder syntax - BP_IDX_PROP_RE = re.compile(r"^(.*?)\[([\w\d]+)\]$", re.M) - generate_page_builder_api = True - pb_properties = [] - for n, v, t in properties: - if "[" in n: - if (idx_prop_match := BP_IDX_PROP_RE.match(n)) is None: - print( - f"WARNING - Property '{n}' in examples for {type} prevents Python code generation" - ) - generate_page_builder_api = False - else: - pname = f"{idx_prop_match[1]}__{idx_prop_match[2]}" - pb_properties.append((pname, v, t)) - else: - pb_properties.append((n, v, t)) - if generate_page_builder_api: - new_documentation += '\n === "Python"\n\n' - new_documentation += " ```python\n" - new_documentation += ( - " import taipy.gui.builder as tgb\n ...\n" - ) - new_documentation += f" tgb.{type}(" - - def builder_value(value: str, type: str) -> str: - if type in ["n", "f"]: - return value - if type.startswith("b"): - return value.title() - value = value.replace('"', "'") - return f'"{value}"' - - prefix = "" - if default_property: - new_documentation += f'"{default_property}"' - prefix = ", " - for n, v, t in pb_properties: - new_documentation += f"{prefix}{n}={builder_value(v, t)}" - prefix = ", " - new_documentation += ")\n" - new_documentation += " ```\n" - last_location = definition.end() return ( new_documentation + documentation[last_location:] if documentation From ddb00c642ab3c104dfe453c574a4dfc37e85ef15 Mon Sep 17 00:00:00 2001 From: Fabien Lelaquais Date: Tue, 10 Dec 2024 18:33:07 +0100 Subject: [PATCH 2/2] FJA remarks --- docs/tutorials/articles/decimator/index.md | 8 ++++---- .../articles/understanding_gui/step_03/step_03.md | 3 +-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/tutorials/articles/decimator/index.md b/docs/tutorials/articles/decimator/index.md index b57c18e08..e71d0a6db 100644 --- a/docs/tutorials/articles/decimator/index.md +++ b/docs/tutorials/articles/decimator/index.md @@ -142,8 +142,8 @@ Here is an example of code showing how to use the LTTB Decimator: from taipy.gui import Gui from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") - df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") + df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) NOP = 500 decimator_instance = LTTB(n_out=NOP) @@ -189,8 +189,8 @@ Here is an example of code showing how to use the Ramer-Douglas-Peucker Decimato from taipy.gui import Gui from taipy.gui.data.decimator import MinMaxDecimator, RDP, LTTB - df_AAPL = yf.Ticker("AAPL").history(interval="1d", period = "max") - df_AAPL["DATE"] = df_AAPL.index.astype('int64').astype(float) + df_AAPL = yf.Ticker("AAPL").history(interval="1d", period="max") + df_AAPL["DATE"] = df_AAPL.index.astype("int64").astype(float) NOP = 500 decimator_instance = RDP(n_out=NOP) diff --git a/docs/tutorials/articles/understanding_gui/step_03/step_03.md b/docs/tutorials/articles/understanding_gui/step_03/step_03.md index a2b481490..0951a3c2d 100644 --- a/docs/tutorials/articles/understanding_gui/step_03/step_03.md +++ b/docs/tutorials/articles/understanding_gui/step_03/step_03.md @@ -58,8 +58,7 @@ the callback function referenced in the *on_action* property. ```python import taipy.gui.builder as tgb from taipy.gui import Gui, notify - import taipy.gui.builder as tgb - + def on_button_action(state): notify(state, 'info', f'The text is: {state.text}')