Use new API with content for 3rd party components

docs/knowledge_base/tips/3rd_party_components/example.py

@@ -1,7 +1,15 @@
 import tempfile
 import folium
+from folium.folium import Map
 import pandas as pd
-from taipy.gui import Gui, get_user_content_url
+from taipy.gui import Gui
+
+
+def expose_folium(fol_map: Map):
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as temp_file:
+        fol_map.save(temp_file.name)
+        with open(temp_file.name, "rb") as f:
+            return f.read()
 
 
 eco_footprints = pd.read_csv("footprint.csv")
@@ -13,7 +21,7 @@
 
 def folium_map():
     # Create the folium map
-    map = folium.Map(location=(30, 10), zoom_start=3, tiles="cartodb positron")
+    fol_map = folium.Map(location=(30, 10), zoom_start=3, tiles="cartodb positron")
     folium.Choropleth(
         geo_data=political_countries_url,
         data=eco_footprints,
@@ -26,24 +34,11 @@ def folium_map():
         nan_fill_color="white",
         legend_name="Ecological footprint per capita",
         name="Countries by ecological footprint per capita",
-    ).add_to(map)
-    folium.LayerControl().add_to(map)
-
-    return map
-
-def expose_folium(map):
-    with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as temp_file:
-        map.save(temp_file.name)
-        with open(temp_file.name, "rb") as f:
-            return f.read()
-
-
-uc_url = None
-
-def on_user_content(state, path: str, query: dict):
-    return expose_folium(folium_map())
+    ).add_to(fol_map)
+    folium.LayerControl().add_to(fol_map)
 
-def on_init(state):
-    state.uc_url = get_user_content_url(state, "val", {"name": "param"})
+    return fol_map
 
-Gui("<|part|page={uc_url}|height=600px|>").run(port=2534, debug=True)
+
+Gui.register_content_provider(Map, expose_folium)
+Gui("<|part|content={folium_map()}|height=600px|>").run()

docs/knowledge_base/tips/3rd_party_components/index.md

@@ -7,15 +7,16 @@ external resources, focusing on embedding a Folium Map into a web application.
 
 ## Example: Embedding a Folium Map
 
-Let's delve into a practical example of how to integrate a Folium Map into a web 
-application. Folium is a powerful visualization tool used for representing various maps, 
+Let's explore a practical example of integrating a Folium Map into a web 
+application. Folium is a powerful visualization tool for representing various maps, 
 finding applications in energy studies, cost analysis, and network analysis.
 
 ![Folium Map](folium_map.png){width=100%}
 
 In our scenario, we have a Python application that processes recruitment data, performs 
 analysis, and generates a Folium Map using 
-[Folium](https://python-visualization.github.io/folium/), a Python library for creating interactive maps.
+[Folium](https://python-visualization.github.io/folium/), a Python library for creating 
+interactive maps.
 
 Here's a code snippet creating a Folium object:
 
@@ -71,28 +72,20 @@ def expose_folium(map):
 In this code, the function *expose_folium()* converts a Folium object (*map*) to HTML, a 
 mandatory step in integrating any third-party component into your application.
 
-The *map* object is transformed into HTML, and then we proceed to define two callback 
-functions, namely, *on_user_content()* and *on_init()*. The *on_init()* callback serves 
-as a fundamental Taipy callback that is triggered when a new user connects to the 
-application. On the other hand, the *on_user_content()* function is designed to return 
-the HTML content to be rendered, while the *get_user_content_url()* function is invoked 
-to obtain the URL for rendering the HTML content.
+We now proceed to register a function for the object type we want to display. The code below 
+means that when Taipy encounters a *Map* type in the *content* property, it will use the 
+*expose_folium* function to convert it to HTML and display it on the page.
 
 ```python
-uc_url = None
+from folium.folium import Map
 
-def on_user_content(state, path: str, query: dict):
-    return expose_folium(folium_map())
-
-def on_init(state):
-    state.uc_url = get_user_content_url(state, "val", {"name": "param"})
+Gui.register_content_provider(Map, expose_folium)
 ```
 
-Finally, we can embed the Folium Map within our web application using the following 
-`part` component:
+Finally, we can embed the Folium Map using the following the `part` component:
 
 ```
-<|part|page={uc_url}|>
+<|part|content={folium_map()}|>
 ```
 
 You can adjust the layout by changing its width and height. This element seamlessly 
@@ -103,7 +96,7 @@ integrates the Folium Map into your web app.
 ## Conclusion
 
 Incorporating third-party components into your web applications is a powerful technique 
-that can greatly enhance user experience. You can achieve this by converting external 
+to enhance user experience significantly. You can achieve this by converting external 
 content into HTML and seamlessly integrating it into your web app.
 
 This article demonstrated how to embed a Folium Map using this method. This approach 
@@ -113,53 +106,9 @@ secure user experience.
 # Entire Code
 
 ```python
-import tempfile
-import folium
-import pandas as pd
-from taipy.gui import Gui, get_user_content_url
-
-eco_footprints = pd.read_csv("footprint.csv")
-max_eco_footprint = eco_footprints["Ecological footprint"].max()
-political_countries_url = (
-    "http://geojson.xyz/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson"
-)
-
-def folium_map():
-    # Create the folium map
-    map = folium.Map(location=(30, 10), zoom_start=3, tiles="cartodb positron")
-    folium.Choropleth(
-        geo_data=political_countries_url,
-        data=eco_footprints,
-        columns=("Country/region", "Ecological footprint"),
-        key_on="feature.properties.name",
-        bins=(0, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, max_eco_footprint),
-        fill_color="RdYlGn_r",
-        fill_opacity=0.8,
-        line_opacity=0.3,
-        nan_fill_color="white",
-        legend_name="Ecological footprint per capita",
-        name="Countries by ecological footprint per capita",
-    ).add_to(map)
-    folium.LayerControl().add_to(map)
-
-    return map
-
-def expose_folium(map):
-    with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as temp_file:
-        map.save(temp_file.name)
-        with open(temp_file.name, "rb") as f:
-            return f.read()
-
-
-uc_url = None
-
-def on_user_content(state, path: str, query: dict):
-    return expose_folium(folium_map())
-
-def on_init(state):
-    state.uc_url = get_user_content_url(state, "val", {"name": "param"})
-
-example = "<|part|page={uc_url}|height=800px|>"
+{%
+include-markdown "./example.py"
+comments=false
+%}
+```
 
-Gui(example).run()
-```