diff --git a/en/application-dev/ui/ts-application-resource-access.md b/en/application-dev/ui/ts-application-resource-access.md index 33dee0468c7905ea10d202e347dbb937a2ad2137..64e2f0be82fe0c761fdd63c5d47dc6ad98c0bc99 100644 --- a/en/application-dev/ui/ts-application-resource-access.md +++ b/en/application-dev/ui/ts-application-resource-access.md @@ -3,7 +3,7 @@ ## Resource Definition -Application resources are defined by in the project's resources directory, which is organized as follows: +Application resources are defined in the project's resources directory, which is organized as follows: - Level-1: base sub-directory, qualifiers sub-directories, and rawfile sub-directory - The base sub-directory is a default directory. If no qualifiers sub-directories in the resources directory of the application match the device status, the resource file in the base sub-directory will be automatically referenced. @@ -13,25 +13,27 @@ Application resources are defined by in the project's resources directory, which - Level-2: resource sub-directories - Resource sub-directories store basic elements such as character strings, colors, and floating point numbers, and resource files such as media files. - Supported files and resource types are listed in the table below: - | File Name | Resource Type | + | File Name | Resource Type | | -------- | -------- | - | color.json | Color resource. | - | float.json | Resources such as spacing, rounded corners, and fonts. | - | string.json | String resource. | - | plural.json | String resource. | - | media directory | Image resource. | + | color.json | Color resource. | + | float.json | Resources such as spacing, rounded corners, and fonts. | + | string.json | String resource. | + | plural.json | String resource. | + | media directory | Image resource. | ## Referencing Resources -To reference an application resource in a project, use the "$r('app.type.name')" format. app indicates the resource defined in the resources directory of the application. type indicates the resource type (or the location where the resource is stored). The value can be color, float, string, plural, or media. name indicates the resource name, which you set when defining the resource. +To reference an application resource in a project, use the ```"$r('app.type.name')"``` format. **app** indicates the resource defined in the resources directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be color, float, string, plural, or media. **name** indicates the resource name, which you set when defining the resource. -When referencing resources in the rawfile sub-directory, use the "$rawfile('filename')" format. Currently, $rawfile allows only the component to reference image resources. In the format, filename indicates the relative path of a file in the rawfile directory, and the file name must contain the file name extension. **NOTE** that the relative path cannot start with a slash (/). +When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` format. Currently, **$rawfile** allows only the **\** component to reference image resources. In the format, **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/). +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> Resource descriptors cannot be combined. ## Example -Some custom resources in the base sub-directory are as follows: +Some custom resources in the **base** sub-directory are as follows: ``` @@ -130,7 +132,7 @@ The content of the plural.json file is as follows: } ``` - In the ets file, you can use the resources defined in the resources directory. + In the .ets file, you can use the resources defined in the resources directory. ``` Text($r('app.string.string_hello')) diff --git a/en/application-dev/ui/ts-component-based-preview.md b/en/application-dev/ui/ts-component-based-preview.md index 703e4d41a434d66d32a25ab941c1a98da977a7e0..c0fffb15c2772842dfb1ac223abc848a1496e458 100644 --- a/en/application-dev/ui/ts-component-based-preview.md +++ b/en/application-dev/ui/ts-component-based-preview.md @@ -1,10 +1,10 @@ # @Preview -Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. +You can use @Preview to decorate a custom component so that it can be previewed in DevEco Studio. This component is created and displayed when the page where it is located is loaded. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**: +> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > In a source file, at most one custom component can be decorated by @Preview.