From 06e79bfc4d354c55df50e934bcc21f754dcb7f65 Mon Sep 17 00:00:00 2001
From: FlorianJacta <98709993+FlorianJacta@users.noreply.github.com>
Date: Mon, 8 Jan 2024 10:03:57 +0100
Subject: [PATCH 1/4] Add TGB in GS

---
 .../{hello_world.py => hello_world_md.py}     |   0
 docs/getting_started/hello_world_tgb.py       |  58 ++++++++
 docs/getting_started/index.md                 | 124 ++++++++++++------
 3 files changed, 145 insertions(+), 37 deletions(-)
 rename docs/getting_started/{hello_world.py => hello_world_md.py} (100%)
 create mode 100644 docs/getting_started/hello_world_tgb.py

diff --git a/docs/getting_started/hello_world.py b/docs/getting_started/hello_world_md.py
similarity index 100%
rename from docs/getting_started/hello_world.py
rename to docs/getting_started/hello_world_md.py
diff --git a/docs/getting_started/hello_world_tgb.py b/docs/getting_started/hello_world_tgb.py
new file mode 100644
index 000000000..614535d53
--- /dev/null
+++ b/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()
+
diff --git a/docs/getting_started/index.md b/docs/getting_started/index.md
index b142ace7b..c5a2d7009 100644
--- a/docs/getting_started/index.md
+++ b/docs/getting_started/index.md
@@ -116,62 +116,112 @@ 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 Taipy Gui Builder.
+
+        ```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 +235,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 +268,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" }
 

From 329dae00db2b7b38cc5f8dd421456a8eaea48d04 Mon Sep 17 00:00:00 2001
From: FlorianJacta <98709993+FlorianJacta@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:55:50 +0100
Subject: [PATCH 2/4] Integrate new feature and break lines

---
 docs/getting_started/hello_world_tgb.py |  2 +-
 docs/getting_started/index.md           | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/getting_started/hello_world_tgb.py b/docs/getting_started/hello_world_tgb.py
index 614535d53..42e1f49f0 100644
--- a/docs/getting_started/hello_world_tgb.py
+++ b/docs/getting_started/hello_world_tgb.py
@@ -34,7 +34,7 @@ def submit_scenario(state):
 
 with tgb.Page() as page:
     tgb.text("Name:")
-    tgb.input("{input_name}")
+    tgb.input(input_name)
     tgb.button("Submit", on_action=submit_scenario)
 
     tgb.text("Message {message}")
diff --git a/docs/getting_started/index.md b/docs/getting_started/index.md
index c5a2d7009..11b764b4f 100644
--- a/docs/getting_started/index.md
+++ b/docs/getting_started/index.md
@@ -168,7 +168,8 @@ Here's a simple GUI set up for our "Hello World" scenario:
 
     === "Python"
 
-        Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is built through the Taipy Gui Builder.
+        Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is built through 
+        the Taipy Gui Builder.
 
         ```python linenums="1"
         import taipy as tp
@@ -179,7 +180,7 @@ Here's a simple GUI set up for our "Hello World" scenario:
 
         with tgb.Page() as page:
             tgb.text("Name:")
-            tgb.input("{input_name}")
+            tgb.input(input_name)
             tgb.button("Submit", on_action=submit_scenario)
             tgb.text("Message {message}")
 
@@ -210,7 +211,7 @@ Here's a simple GUI set up for our "Hello World" scenario:
 
         with tgb.Page() as page:
             tgb.text("Name:")
-            tgb.input("{input_name}")
+            tgb.input(input_name)
             tgb.button("Submit", on_action=submit_scenario)
             tgb.text("Message {message}")
         ```
@@ -221,7 +222,8 @@ Here's a simple GUI set up for our "Hello World" scenario:
 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|...|>` with Markdown or `tgb.visual_element_type("{variable}", ...)` with the Python API. *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.
 

From 05c5e634633bcdd3500197cfb70828e68eae77c4 Mon Sep 17 00:00:00 2001
From: FlorianJacta <98709993+FlorianJacta@users.noreply.github.com>
Date: Mon, 8 Jan 2024 18:02:11 +0100
Subject: [PATCH 3/4] No Taipy Gui Builder

---
 docs/getting_started/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/getting_started/index.md b/docs/getting_started/index.md
index 11b764b4f..0d91c3ab7 100644
--- a/docs/getting_started/index.md
+++ b/docs/getting_started/index.md
@@ -169,7 +169,7 @@ Here's a simple GUI set up for our "Hello World" scenario:
     === "Python"
 
         Taipy pages can be defined in multiple ways: Markdown, Html or Python. *page* is built through 
-        the Taipy Gui Builder.
+        the Page Builder API.
 
         ```python linenums="1"
         import taipy as tp

From 71522c6f6772cfd0695aca780485ae47e9fa175d Mon Sep 17 00:00:00 2001
From: FlorianJacta <98709993+FlorianJacta@users.noreply.github.com>
Date: Mon, 8 Jan 2024 18:04:20 +0100
Subject: [PATCH 4/4] Adding quotes waiting for 3.1

We will change it later on when 3.1 is here.
---
 docs/getting_started/hello_world_tgb.py | 2 +-
 docs/getting_started/index.md           | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/getting_started/hello_world_tgb.py b/docs/getting_started/hello_world_tgb.py
index 42e1f49f0..614535d53 100644
--- a/docs/getting_started/hello_world_tgb.py
+++ b/docs/getting_started/hello_world_tgb.py
@@ -34,7 +34,7 @@ def submit_scenario(state):
 
 with tgb.Page() as page:
     tgb.text("Name:")
-    tgb.input(input_name)
+    tgb.input("{input_name}")
     tgb.button("Submit", on_action=submit_scenario)
 
     tgb.text("Message {message}")
diff --git a/docs/getting_started/index.md b/docs/getting_started/index.md
index 0d91c3ab7..d29e1108d 100644
--- a/docs/getting_started/index.md
+++ b/docs/getting_started/index.md
@@ -180,7 +180,7 @@ Here's a simple GUI set up for our "Hello World" scenario:
 
         with tgb.Page() as page:
             tgb.text("Name:")
-            tgb.input(input_name)
+            tgb.input("{input_name}")
             tgb.button("Submit", on_action=submit_scenario)
             tgb.text("Message {message}")
 
@@ -211,7 +211,7 @@ Here's a simple GUI set up for our "Hello World" scenario:
 
         with tgb.Page() as page:
             tgb.text("Name:")
-            tgb.input(input_name)
+            tgb.input("{input_name}")
             tgb.button("Submit", on_action=submit_scenario)
             tgb.text("Message {message}")
         ```
@@ -223,7 +223,7 @@ Taipy offers various visual elements that can interact with your Python variable
 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|...|>` with Markdown or 
-`tgb.visual_element_type(variable, ...)` with the Python API. *variable* is 
+`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.