From 607dbd21129bf97395d82fe513b75e9cf0a38397 Mon Sep 17 00:00:00 2001 From: namnguyen Date: Thu, 5 Dec 2024 16:40:03 +0700 Subject: [PATCH] per Fab --- .../dynamic_element/list_of_value_props.md | 15 ++++++++------- docs/userman/gui/extension/extension_assets.md | 6 +++--- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/userman/gui/extension/dynamic_element/list_of_value_props.md b/docs/userman/gui/extension/dynamic_element/list_of_value_props.md index 49a2cf031..f26f747b5 100644 --- a/docs/userman/gui/extension/dynamic_element/list_of_value_props.md +++ b/docs/userman/gui/extension/dynamic_element/list_of_value_props.md @@ -5,16 +5,17 @@ that any changes to the list automatically refresh the display. # Using list of values -In this section, we will expand the dynamic element library by adding a new dynamic custom element. +In this section, we'll design a visual component that represents a list of programming languages. Each language will be +displayed with its name and an icon. -This dynamic element will accept a property containing a list of values and display it within a list. When a Python -variable is bound to this property, updates to the variable will immediately reflect in the list content shown on the -page, ensuring real-time synchronization. +This dynamic component will take a property containing a list of values and render them as a list. +When a Python variable is bound to this property, +any updates to the variable will instantly reflect in the displayed list, enabling real-time synchronization. ## Declaring a dynamic element {data-source="gui:doc/extension/example_library/example_library.py#L45"} Starting from the code mentioned above, here is how you would declare this new element: -```py title="example_library.py" +```python title="example_library.py" from taipy.gui.extension import Element, ElementLibrary, ElementProperty, PropertyType class ExampleLibrary(ElementLibrary): @@ -39,7 +40,7 @@ The detailed explanation of the code is as follows: - The *lov* property has the type `PropertyType.lov^`, meaning it holds a list of values and is dynamic. - The *sort* property has the type `PropertyType.string^`, meaning it holds a string value. Because this property is static, it is not updated automatically should the bound variable be changed. -- get_name() and get_elements() remain the same as in the previous stages of building the extension library example. +- *get_name()* and *get_elements()* remain the same as in the previous stages of building the extension library example. ## Creating the React component {data-source="gui:doc/extension/example_library/front-end/src/VisualLabelList.tsx"} @@ -109,7 +110,7 @@ The detailed explanation of the code is as follows: ## Exporting the React component {data-source="gui:doc/extension/example_library/front-end/src/index.ts"} -When the component is entirely defined, it must be exported by the JavaScript library. +When the component is entirely defined, it must be exported by the library's JavaScript bundle. This is done by adding the export directive in the file */front-end/src/index.ts*. ```js title="index.ts" diff --git a/docs/userman/gui/extension/extension_assets.md b/docs/userman/gui/extension/extension_assets.md index f8808197e..0d3372ce9 100644 --- a/docs/userman/gui/extension/extension_assets.md +++ b/docs/userman/gui/extension/extension_assets.md @@ -4,11 +4,11 @@ In certain scenarios, you might want to enrich your user interface by displaying For example, when using a caption control to represent a company name along with its logo, adding an image can enhance visual context and usability. -Traditionally, in HTML, you would use an img tag with the src attribute pointing to the image’s file path. +Traditionally, in HTML, you would use an `img` tag with the src attribute pointing to the image’s file path. However, directly referencing resources in this way can expose your application to potential security vulnerabilities, such as unauthorized access or malicious resource requests. -To mitigate these risks, Taipy introduces the ElementLibrary.get_resource() method. +To mitigate these risks, Taipy introduces the `ElementLibrary.get_resource()^` method. This method acts as a secure gateway for resource handling, allowing the application to validate and filter resource requests based on predefined settings. It ensures that only authorized and properly configured files are served, protecting your application while maintaining @@ -16,7 +16,7 @@ functionality. ## Declaring element {data-source="gui:doc/extension/example_library/example_library.py#L62"} -```py title="example_library.py" +```python title="example_library.py" import base64 from taipy.gui.extension import Element, ElementLibrary, ElementProperty, PropertyType