Merge pull request #773 from Avaiga/doc/GS-with-tgb

Add TGB in GS

docs/getting_started/hello_world_tgb.py

@@ -0,0 +1,58 @@
+import taipy as tp
+from taipy import Config, Core, Gui
+import taipy.gui.builder as tgb
+
+
+################################################################
+#            Configure application                             #
+################################################################
+def build_message(name):
+    return f"Hello {name}!"
+
+
+# A first data node configuration to model an input name.
+input_name_data_node_cfg = Config.configure_data_node(id="input_name")
+# A second data node configuration to model the message to display.
+message_data_node_cfg = Config.configure_data_node(id="message")
+# A task configuration to model the build_message function.
+build_msg_task_cfg = Config.configure_task("build_msg", build_message, input_name_data_node_cfg, message_data_node_cfg)
+# The scenario configuration represents the whole execution graph.
+scenario_cfg = Config.configure_scenario("scenario", task_configs=[build_msg_task_cfg])
+
+################################################################
+#            Design graphical interface                        #
+################################################################
+
+input_name = "Taipy"
+message = None
+
+
+def submit_scenario(state):
+    state.scenario.input_name.write(state.input_name)
+    state.scenario.submit()
+    state.message = scenario.message.read()
+
+with tgb.Page() as page:
+    tgb.text("Name:")
+    tgb.input("{input_name}")
+    tgb.button("Submit", on_action=submit_scenario)
+
+    tgb.text("Message {message}")
+
+if __name__ == "__main__":
+    ################################################################
+    #            Instantiate and run Core service                  #
+    ################################################################
+    Core().run()
+
+    ################################################################
+    #            Manage scenarios and data nodes                   #
+    ################################################################
+    scenario = tp.create_scenario(scenario_cfg)
+
+    ################################################################
+    #            Instantiate and run Gui service                   #
+    ################################################################
+
+    Gui(page).run()
+

docs/getting_started/index.md

@@ -116,62 +116,114 @@ While we've used Taipy's Python APIs to handle our scenario, it usually works se
 graphical interface, also created using Taipy, to provide a more user-friendly experience. 
 Here's a simple GUI set up for our "Hello World" scenario:
 
-```python linenums="1"
-import taipy as tp
+!!! example "GUI creation"
 
-# Previous configuration of scenario
-...
+    === "Markdown"
 
-page = """
-Name: <|{input_name}|input|>
-<|submit|button|on_action=submit_scenario|>
+        Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is the Markdown representation of the page.
 
-Message: <|{message}|text|>
-"""
+        ```python linenums="1"
+        import taipy as tp
 
-input_name = "Taipy"
-message = None
+        # Previous configuration of scenario
+        ...
 
+        page = """
+        Name: <|{input_name}|input|>
+        <|submit|button|on_action=submit_scenario|>
 
-def submit_scenario(state):
-    state.scenario.input_name.write(state.input_name)
-    state.scenario.submit(wait=True)
-    state.message = scenario.message.read()
+        Message: <|{message}|text|>
+        """
 
+        input_name = "Taipy"
+        message = None
 
-if __name__ == "__main__":
-    tp.Core().run()
-    scenario = tp.create_scenario(scenario_cfg)
-    tp.Gui(page).run()
-```
 
-[Get the whole code](./hello_world.py){: .tp-btn target='blank'}
+        def submit_scenario(state):
+            state.scenario.input_name.write(state.input_name)
+            state.scenario.submit(wait=True)
+            state.message = scenario.message.read()
 
-Now, let’s explain the key elements of this code:
 
-```python
-import taipy as tp
+        if __name__ == "__main__":
+            tp.Core().run()
+            scenario = tp.create_scenario(scenario_cfg)
+            tp.Gui(page).run()
+        ```
 
+        [Get the whole code](./hello_world_md.py){: .tp-btn target='blank'}
+
+        Now, let’s explain the key elements of this code:
+
+        ```python
+        import taipy as tp
+
+
+        page = """
+        Name: <|{input_name}|input|>
+        <|submit|button|on_action=submit_scenario|>
+        Message: <|{message}|text|>
+        """
+        ```
+
+    === "Python"
+
+        Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is built through 
+        the Page Builder API.
+
+        ```python linenums="1"
+        import taipy as tp
+        import taipy.gui.builder as tgb
+
+        # Previous configuration of scenario
+        ...
+
+        with tgb.Page() as page:
+            tgb.text("Name:")
+            tgb.input("{input_name}")
+            tgb.button("Submit", on_action=submit_scenario)
+            tgb.text("Message {message}")
+
+
+        input_name = "Taipy"
+        message = None
+
+
+        def submit_scenario(state):
+            state.scenario.input_name.write(state.input_name)
+            state.scenario.submit(wait=True)
+            state.message = scenario.message.read()
+
+
+        if __name__ == "__main__":
+            tp.Core().run()
+            scenario = tp.create_scenario(scenario_cfg)
+            tp.Gui(page).run()
+        ```
+
+        [Get the whole code](./hello_world_tgb.py){: .tp-btn target='blank'}
+
+        Now, let’s explain the key elements of this code:
+
+        ```python
+        import taipy as tp
 
-page = """
-Name: <|{input_name}|input|>
-<|submit|button|on_action=submit_scenario|>
-Message: <|{message}|text|>
-"""
-```
 
-**Pages**
+        with tgb.Page() as page:
+            tgb.text("Name:")
+            tgb.input("{input_name}")
+            tgb.button("Submit", on_action=submit_scenario)
+            tgb.text("Message {message}")
+        ```
 
-Taipy pages can be defined in multiple ways: Markdown, Html or Python. The *page* 
-variable is a Markdown representation of the user interface. 
-It uses standard Markdown syntax as well as visual elements.
 
 **Visual elements**
 
 Taipy offers various visual elements that can interact with your Python variables and 
 environment. It allows you to display variables, modify them, and interact with the application.
 
-Here is a generic example of one: `<|{variable}|visual_element_type|...|>`. *variable* is 
+Here is a generic example of one: `<|{variable}|visual_element_type|...|>` with Markdown or 
+`tgb.visual_element_type("{variable}", ...)` with the Python API. *variable* is 
 the main property of the visual element and is usually what is displayed or modified through the 
 visual element.
 
@@ -185,7 +237,7 @@ In our initial example:
 ## Interactivity Through Actions
 
 Actions, like `on_action=submit_scenario`, allow visual elements like buttons to trigger 
-specific functions, enhancing the interactivity of the application.
+specific functions.
 
 ```python
 def submit_scenario(state):
@@ -218,7 +270,7 @@ if __name__ == "__main__":
 ```
 
 The main part of the application starts by setting up the Core service, generating a scenario, 
-and starting the GUI, which makes the interactive interface active and functional.
+and starting the GUI, which makes the interface active and functional.
 
 ![GUI Result](result.png){width=50% style="margin:auto;display:block;border: 4px solid rgb(210,210,210);border-radius:7px" }