Add builder examples in all documented elements

.gitignore

@@ -117,6 +117,7 @@ docs/manuals/gui/controls.md
 docs/manuals/gui/blocks.md
 docs/manuals/gui/viselements/*.md
 !docs/manuals/gui/viselements/index.md
+docs/manuals/gui/viselements/charts/*.md
 docs/manuals/gui/corelements/*.md
 docs/manuals/xrefs
 !docs/manuals/gui/gui_example.ipynb

docs/contributing/contributing.md

@@ -53,7 +53,7 @@ sprint is attached to the `current sprint`. Please, do not work on it, the Taipy
 
 # Code organization
 
-The Taipy source code is located in the is organized [taipy](https://github.com/Avaiga/taipy)
+The Taipy source code is located in the [taipy](https://github.com/Avaiga/taipy)
 repository, in the `taipy` directory.
 
 Packages sources are organized in sub-directories from there:

docs/manuals/gui/corelements/job_selector.md_template

@@ -103,19 +103,10 @@ selector control displays.
 
 We can define our control so the job identifiers and the submission dates are not shown, to have a
 more compact display:
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|{job}|job_selector|don't show_id|don't show_date|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:job_selector show_id="false" show_date"false">{job}</taipy:job_selector>
-        ```
+!!! taipy-element
+    default={job}
+    show_id:b_dont=False
+    show_date:b_dont=False
 
 Here is what the control would look like:
 <figure class="tp-center">

docs/manuals/gui/corelements/scenario.md_template

@@ -63,21 +63,11 @@ A few properties (namely [*show_submit*](#p-show_submit), [*show_delete*](#p-sho
 
 Here is the definition of such a control where the *tags*, *properties* and *sequences* sections
 are hidden:
-
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|{scenario}|scenario|don't show_tags|don't show_properties|don't show_sequences|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:scenario show_tags="false" show_properties"false" show_sequences"false">{scenario}
-        </taipy:scenario>
-        ```
+!!! taipy-element
+    default={scenario}
+    show_tags:b_dont=False
+    show_properties:b_dont=False
+    show_sequences:b_dont=False
 
 The control appears as follows, in a more compact manner:
 <figure>

docs/manuals/gui/corelements/scenario_selector.md_template

@@ -123,7 +123,7 @@ code will check that the value is valid and replace it with a string representat
 minus one, prefixed with the sharp ('#') sign.<br/>
 Here is the code for the creation callback function:
 
-```py linenums="1"
+```python linenums="1"
 def check_index(state, id, payload):
   # Retrieve the custom properties
     properties = payload.get("properties", None)
@@ -167,16 +167,6 @@ This scenario is returned by the callback function to let Taipy know it was crea
 
 The scenario selector control definition needs to have the [*on_creation*](#p-on_creation) property
 set to the function:
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|{scenario}|scenario_selector|on_creation=check_index|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:scenario_selector on_creation="check_index">{scenario}</taipy:scenario_selector>
-        ```
+!!! taipy-element
+    default={scenario}
+    on_creation:f=check_index

docs/manuals/gui/extension/index.md

@@ -219,7 +219,7 @@ A complete example of a custom extension library that holds both a static elemen
 dynamic elements is accessible with its entire source code and build process in
 the `doc/extension` directory under the root directory of the Taipy GUI installation.<br/>
 You can also take a look at this extension library example directly on
-[GitHub](https://github.com/Avaiga/taipy-gui/tree/[BRANCH]/doc/extension).
+[GitHub](https://github.com/Avaiga/taipy/tree/[BRANCH]/doc/gui/extension).
 
 This example defines a subclass of `ElementLibrary^` called `ExampleLibrary` that
 holds several examples of custom elements.

docs/manuals/gui/viselements/button.md_template

@@ -52,19 +52,8 @@ The [Stylekit](../styling/stylekit.md) provides specific classes that you can us
 The button label, which is the button control's default property, is simply displayed as the button
 text.
 
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|Button Label|button|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:button>Button Label</taipy:button>
-        ```
+!!! taipy-element
+    default=Button Label
 
 <figure>
     <img src="../button-simple-d.png" class="visible-dark" />
@@ -86,17 +75,6 @@ def button_pressed(state):
 Then refer to this function in the definition of the control, as the value of the button's
 [*on_action*](#p-on_action) property:
 
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|Button Label|button|on_action=button_pressed|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:button on_action="button_pressed">Button Label</taipy:button>
-        ```
-
+!!! taipy-element
+    default=Button Label
+    on_action:f=button_pressed

docs/manuals/gui/viselements/charts/advanced.md → docs/manuals/gui/viselements/charts/advanced.md_template

@@ -36,7 +36,7 @@ represent the same function (x squared) on two different intervals.
   on the interval [-4, 4].
 
 Here is the code that does just that:
-```py
+```python
 # The first data set uses the x interval [-10..10],
 # with one point at every other unit
 x1_range = [x*2 for x in range(-5, 6)]
@@ -75,21 +75,12 @@ As you can see, the array *data* has two elements:
 To use these series in the chart control, the [*x*](../chart.md#p-x) and
 [*y*](../chart.md#p-y) properties must indicate which trace they refer to and be
 set with the indexed data set syntax as shown below:
-
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|{data}|chart|x[1]=0/x|y[1]=0/Coarse|x[2]=1/x|y[2]=1/Fine|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:chart x[1]="0/x" y[1]="0/Coarse" x[2]="1/x" y[2]="1/Fine">
-            {data}</taipy:chart>
-        ```
+!!! taipy-element
+    default={data}
+    x[1]=0/x
+    y[1]=0/Coarse
+    x[2]=1/x
+    y[2]=1/Fine
 
 Trace number 1 (the Coarse trace) is defined by *x[1]* and *y[1]*, and uses
 the series *data[0]\["x"\]* and *data[0]\["Coarse"\]*;<br/>
@@ -115,7 +106,7 @@ look at the documentation on the
 page on Plotly's website.
 
 Here is an example demonstrating how you can add annotations to your chart controls:
-```py
+```python
 # Function to plot: x^3/3 - x
 def f(x):
     return x*x*x/3-x
@@ -163,20 +154,9 @@ text information, location, font setting, etc.
 
 Adding the annotations to the chart control is a matter of setting the
 [*layout*](../chart.md#p-layout) property of the chart control to that object:
-
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|{data}|chart|layout={layout}|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:chart layout="{layout}">{data}</taipy:chart>
-        ```
+!!! taipy-element
+    default={data}
+    layout={layout}
 
 Here is how the annotated chart control shows on the page:
 <figure>
@@ -196,7 +176,7 @@ The documentation for shape descriptors can be found in the
 page on Plotly's website.
 
 Here is some code that creates shapes on top of a chart control:
-```py
+```python
 # Function to plot: x^3/3-x
 def f(x):
     return x*x*x/3-x
@@ -242,20 +222,9 @@ the parameters that configure how and where to render it.<br/>
 Note how we indicate the size of the shape, using the *shape_size* variable.
 
 Here is the definition of the chart control:
-
-!!! example "Page content"
-
-    === "Markdown"
-
-        ```
-        <|{data}|chart|layout={layout}|>
-        ```
-
-    === "HTML"
-
-        ```html
-        <taipy:chart layout="{layout}">{data}</taipy:chart>
-        ```
+!!! taipy-element
+    default={data}
+    layout={layout}
 
 And here is what the resulting chart looks like:
 <figure>
@@ -273,7 +242,7 @@ indexes. It is updated when the user selects points on the chart.
 
 Here is some code that calculates the mean of the values of the selected points of
 a chart control:
-```py
+```python
 # x = [0..20]
 x = list(range(0, 21))
 
@@ -313,7 +282,7 @@ bar above the chart and force the Box select tool.
 
 Here is the definition of the chart and text controls:
 
-!!! example "Page content"
+!!! example "Definition"
 
     === "Markdown"
 
@@ -336,6 +305,14 @@ Here is the definition of the chart and text controls:
             plot_config="{config}">{data}</taipy:chart>
         ```
 
+    === "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:
 <figure>
     <img src="../advanced-selection-d.png" class="visible-dark" />