Repository: Avaiga/taipy

Issue:
Convert templates from Markdown to TGB
### Description

We want to push the Python API instead of the Markdown API.

### Acceptance Criteria




### Code of Conduct

- [x] I have checked the [existing issues](https://github.com/Avaiga/taipy/issues?q=is%3Aissue+).
- [ ] I am willing to work on this issue (optional)

Discussion:
@Ujj1225: hey @jrobinAV  Can you describe more? 
Correct me if i am wrong but as per this issue you want to conver all of the markdown to taipy graphical builder. 
But here, I dont see much of markdown code.
![image](https://github.com/user-attachments/assets/c58c5b55-1727-4195-8d72-a5f632b6c323)

If i am searching for it in the wrong place then where can i see the markdown code which is to be converted?@jrobinAV: Hello @Ujj1225,

Indeed, there is not much to convert. 

On the default template: 
- In `pages/root.py`. Instead of using a Markdown page from `pages/root.md`, we want to use the GUI builder.
- The Same in `pages/page_example/page_example.py`, where we don't want to use the `pages/page_example/page_example.md` anymore.
 
On the default template:
- In `pages/root.py`. Instead of using a Markdown page from `pages/root.md`, we want to use the GUI builder.
- The Same in `pages/scenario_page/scenario_page.py`. We no longer want to use `pages/scenario_page/scenario_page.md`.
- - The Same in `pages/job_page/job_page.py`. We no longer want to use `pages/job_page/job_page.md`.

Do you want to be assigned to the issue?

Solution patch:
diff --git a/taipy/templates/default/hooks/post_gen_project.py b/taipy/templates/default/hooks/post_gen_project.py
index 0774c9319..45253b0dd 100644
--- a/taipy/templates/default/hooks/post_gen_project.py
+++ b/taipy/templates/default/hooks/post_gen_project.py
@@ -77,33 +77,29 @@ def handle_single_page_app():
         main_file.write("\n")
         main_file.write("    gui = Gui(page=page)\n")
 
+    with open(os.path.join(os.getcwd(), "sections", "import.txt"), "a") as import_file:
+        import_file.write("import taipy.gui.builder as tgb\n")
+
     handle_run_service()
 
     with open(os.path.join(os.getcwd(), "sections", "page_content.txt"), "a") as page_content_file:
         page_content_file.write(
-            '''
-page = """
-<center>
-<|navbar|lov={[("home", "Homepage")]}|>
-</center>
+            """
+with tgb.Page() as page:
+    tgb.navbar(lov="{[('home', 'Homepage')]}")
 
 """
-'''
         )
 
 
 def handle_multi_page_app(pages):
     for page_name in pages:
         os.mkdir(os.path.join(os.getcwd(), "pages", page_name))
-        with open(os.path.join(os.getcwd(), "pages", "page_example", "page_example.md"), "r") as page_md_file:
-            page_md_content = page_md_file.read()
-        page_md_content = page_md_content.replace("Page example", page_name.replace("_", " ").title())
-        with open(os.path.join(os.getcwd(), "pages", page_name, page_name + ".md"), "w") as page_md_file:
-            page_md_file.write(page_md_content)
 
         with open(os.path.join(os.getcwd(), "pages", "page_example", "page_example.py"), "r") as page_content_file:
             page_py_content = page_content_file.read()
         page_py_content = page_py_content.replace("page_example", page_name)
+        page_py_content = page_py_content.replace("Page example", page_name.replace("_", " ").title())
         with open(os.path.join(os.getcwd(), "pages", page_name, page_name + ".py"), "w") as page_content_file:
             page_content_file.write(page_py_content)
 
diff --git a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/page_example/page_example.md b/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/page_example/page_example.md
deleted file mode 100644
index dc0bea2fd..000000000
--- a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/page_example/page_example.md
+++ /dev/null
@@ -1 +0,0 @@
-# Page example
diff --git a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/page_example/page_example.py b/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/page_example/page_example.py
index 15dcc8346..ac1a6b94b 100644
--- a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/page_example/page_example.py
+++ b/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/page_example/page_example.py
@@ -11,11 +11,12 @@
 
 """
 A page of the application.
-Page content is imported from the page_example.md file.
+Page content is built using the Page builder API.
 
-Please refer to https://docs.taipy.io/en/latest/manuals/userman/gui/pages for more details.
+Please refer to https://docs.taipy.io/en/latest/userman/gui/pages/builder/ for more details.
 """
 
-from taipy.gui import Markdown
+import taipy.gui.builder as tgb
 
-page_example = Markdown("pages/page_example/page_example.md")
+with tgb.Page() as page_example:
+    tgb.text("# Page example", mode="md")
diff --git a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/root.md b/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/root.md
deleted file mode 100644
index 0216ecc45..000000000
--- a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/root.md
+++ /dev/null
@@ -1,3 +0,0 @@
-<center>
-

-</center>
diff --git a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/root.py b/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/root.py
index c06b1fae6..ac91eaffa 100644
--- a/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/root.py
+++ b/taipy/templates/default/{{cookiecutter.__root_folder}}/pages/root.py
@@ -11,11 +11,12 @@
 
 """
 The root page of the application.
-Page content is imported from the root.md file.
+Page content is built using the Page builder API.
 
-Please refer to https://docs.taipy.io/en/latest/manuals/userman/gui/pages for more details.
+Please refer to https://docs.taipy.io/en/latest/userman/gui/pages/builder/ for more details.
 """
 
-from taipy.gui import Markdown
+import taipy.gui.builder as tgb
 
-root_page = Markdown("pages/root.md")
+with tgb.Page() as root_page:
+    tgb.navbar()
diff --git a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/job_page/job_page.md b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/job_page/job_page.md
deleted file mode 100644
index b498167e9..000000000
--- a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/job_page/job_page.md
+++ /dev/null
@@ -1 +0,0 @@
-

diff --git a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/job_page/job_page.py b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/job_page/job_page.py
index d3d7f527d..fb50ed5e3 100644
--- a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/job_page/job_page.py
+++ b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/job_page/job_page.py
@@ -9,6 +9,7 @@
 # an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 # specific language governing permissions and limitations under the License.
 
-from taipy.gui import Markdown
+import taipy.gui.builder as tgb
 
-job_page = Markdown("pages/job_page/job_page.md")
+with tgb.Page() as job_page:
+    tgb.job_selector()
diff --git a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/root.md b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/root.md
deleted file mode 100644
index 994124b8f..000000000
--- a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/root.md
+++ /dev/null
@@ -1,21 +0,0 @@
-<|layout|columns=1 5|
-
-<|sidebar|
-
-<|{selected_scenario}|scenario_selector|>
-
-<|part|render={selected_scenario}|
-<|{selected_data_node}|data_node_selector|not display_cycles|>
-|>
-|>
-
-<|part|class_name=main|
-
-

-
-<|part|class_name=main|
-

-|>
-
-|>
-|>
diff --git a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/root.py b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/root.py
index f82dd0bce..62b5838ed 100644
--- a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/root.py
+++ b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/root.py
@@ -9,10 +9,23 @@
 # an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 # specific language governing permissions and limitations under the License.
 
-from taipy.gui import Markdown
+import taipy.gui.builder as tgb
 
 selected_scenario = None
 selected_data_node = None
 content = ""
 
-root = Markdown("pages/root.md")
+
+with tgb.Page() as root:
+    with tgb.layout(columns="1, 5"):
+        with tgb.part(class_name="sidebar"):
+            tgb.scenario_selector("{selected_scenario}")
+
+            with tgb.part(render="{selected_scenario}"):
+                tgb.data_node_selector("{selected_data_node}", display_cycles=False)
+
+        with tgb.part(class_name="main"):
+            tgb.navbar()
+
+            with tgb.part(class_name="main"):
+                tgb.text("{content}")
diff --git a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/scenario_page/scenario_page.md b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/scenario_page/scenario_page.md
deleted file mode 100644
index 6c26000f8..000000000
--- a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/scenario_page/scenario_page.md
+++ /dev/null
@@ -1,12 +0,0 @@
-<|layout|columns=1 1|
-
-<|part|render={selected_scenario}|
-
-<|{selected_scenario}|scenario|not expandable|expanded|on_submission_change=notify_on_submission|>
-
-<|{selected_scenario}|scenario_dag|>
-|>
-
-<|part|partial={data_node_partial}|render={selected_data_node}|>
-
-|>
diff --git a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/scenario_page/scenario_page.py b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/scenario_page/scenario_page.py
index 3e791b180..2ae27ca26 100644
--- a/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/scenario_page/scenario_page.py
+++ b/taipy/templates/sdm/{{cookiecutter.__root_folder}}/pages/scenario_page/scenario_page.py
@@ -9,7 +9,8 @@
 # an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 # specific language governing permissions and limitations under the License.
 
-from taipy.gui import Markdown, notify
+import taipy.gui.builder as tgb
+from taipy.gui import notify
 
 from .data_node_management import manage_partial
 
@@ -27,4 +28,16 @@ def manage_data_node_partial(state):
     manage_partial(state)
 
 
-scenario_page = Markdown("pages/scenario_page/scenario_page.md")
+with tgb.Page() as scenario_page:
+    with tgb.layout(columns="1, 1"):
+        with tgb.part(render="{selected_scenario}"):
+            tgb.scenario(
+                "{selected_scenario}",
+                expandable=False,
+                expanded=True,
+                on_submission_change=notify_on_submission,
+            )
+
+            tgb.scenario_dag("{selected_scenario}")
+
+        tgb.part(partial="{data_node_partial}", render="{selected_data_node}")


Test patch:
diff --git a/tests/templates/test_default_template.py b/tests/templates/test_default_template.py
index 61fef9902..5574a084c 100644
--- a/tests/templates/test_default_template.py
+++ b/tests/templates/test_default_template.py
@@ -145,7 +145,7 @@ def test_multipage_gui_template(tmpdir):
 
     assert sorted(os.listdir(os.path.join(tmpdir, "foo_app"))) == sorted(["requirements.txt", "main.py", "pages"])
     assert sorted(os.listdir(os.path.join(tmpdir, "foo_app", "pages"))) == sorted(
-        ["name_1", "name_2", "name_3", "root.md", "root.py", "__init__.py"]
+        ["name_1", "name_2", "name_3", "root.py", "__init__.py"]
     )
 
     taipy_path = os.getcwd()