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..d29e1108d 100644 --- a/docs/getting_started/index.md +++ b/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" }