1# Resource Categories and Access 2 3During application development, you may need to use different resources, such as colors, fonts, spacing, and images, based on the device or configuration. Depending on the resource type, you can achieve this using the following methods: 4 5- Application resources: Configure device- or configuration-specific resources in the resource files. 6 7- System resources: Use the preset resource definitions<!--Del--> (that is, [layered parameters](../../design/ux-design/design-resources.md), with which each resource ID is assigned different values under different configurations, including device types and color modes)<!--DelEnd-->. 8 9## Resource Categories 10 11Resource files used during application development must be stored in specified directories for management. There are two types of resource directories, namely, resource directories and resource group directories. The resource directories are the **base**, qualifiers, **rawfile**, and **resfile** directories. The resource group directories are the **element**, **media**, and **profile** directories. 12 13> **NOTE** 14> 15> The common resource files used across projects in the stage model are stored in the **resources** directory under **AppScope**. 16 17Example of the **resources** directory: 18``` 19resources 20|---base 21| |---element 22| | |---string.json 23| |---media 24| | |---icon.png 25| |---profile 26| | |---test_profile.json 27|---en_US // Default directory. When the device language is en-us, resources in this directory are preferentially matched. 28| |---element 29| | |---string.json 30| |---media 31| | |---icon.png 32| |---profile 33| | |---test_profile.json 34|---zh_CN // Default directory. When the device language is zh-cn, resources in this directory are preferentially matched. 35| |---element 36| | |---string.json 37| |---media 38| | |---icon.png 39| |---profile 40| | |---test_profile.json 41|---en_GB-vertical-car-mdpi // Example of a qualifiers directory, which needs to be created on your own. 42| |---element 43| | |---string.json 44| |---media 45| | |---icon.png 46| |---profile 47| | |---test_profile.json 48|---rawfile // Other types of files are saved as raw files and will not be integrated into the resources.index file. You can customize the file name as needed. 49|---resfile // Other types of files are saved as raw files and will not be integrated into the resources.index file. You can customize the file name as needed. 50``` 51### Resource Directories 52 53#### base Directory 54 55The **base** directory is provided by default. Under this directory, the **element** subdirectory stores basic elements such as strings, colors, and boolean values, and the **media** and **profile** subdirectories store resource files such as media, animations, and layouts.<br> 56Resource files in the subdirectories are compiled into binary files, and each resource file is assigned an ID. Resource files in the subdirectories are referenced based on the resource type and resource name. 57 58#### Qualifiers Directory 59 60**en_US** and **zh_CN** are two default qualifiers directories. You need to create other qualifiers directories on your own. Under this directory, the subdirectories store basic elements such as strings, colors, and boolean values, as well as resource files such as media, animations, and layouts.<br>Resource files in the subdirectories are compiled into binary files, and each resource file is assigned an ID. Resource files in the subdirectories are referenced based on the resource type and resource name. 61 62**Naming Conventions for Qualifiers Directories** 63 64The name of a qualifiers directory consists of one or more qualifiers that represent the application scenarios or device characteristics, covering the mobile country code (MCC), mobile network code (MNC), language, script, country or region, screen orientation, device type, night mode, and screen density. The qualifiers are separated using underscores (\_) or hyphens (\-). Before creating a qualifiers directory, familiarize yourself with the directory naming conventions. 65 66- Qualifiers are ordered in the following sequence: **\_MCC_MNC-language_script_country/region-orientation-device-color mode-density_**. You can select one or multiple qualifiers to name your subdirectory based on your application scenarios and device characteristics. 67 68- Separation between qualifiers: The language, script, and country/region qualifiers are separated using underscores (\_); the MNC and MCC qualifiers are also separated using underscores (\_); other qualifiers are separated using hyphens (\-). For example, **zh_Hant_CN** and **zh_CN-car-ldpi**. 69 70- Value range of qualifiers: The value of each qualifier must meet the requirements specified in the following table. Otherwise, the resource files in the resources directory cannot be matched. 71 72Table 2 Requirements for qualifier values 73 74| Qualifier Type | Description and Value Range | 75| ----------- | ---------------------------------------- | 76| MCC&MNC| Indicates the MCC and MNC, which are obtained from the network where the device is registered.<br>The MCC can be either followed by the MNC with an underscore (_) in between or be used independently. For example, **mcc460** represents China, and **mcc460_mnc00** represents China Mobile.<br>For details about the value range, see [ITU-T E.212](https://www.itu.int/rec/T-REC-E.212) (the international identification plan for public networks and subscriptions).| 77| Language | Indicates the language used by the device. The value consists of two or three lowercase letters. For example, **zh** indicates Chinese, **en** indicates English, and **mai** indicates Maithili.<br>For details about the value range, see [ISO 639](https://www.iso.org/iso-639-language-code) (codes for the representation of names of languages).| 78| Text | Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters. For example, **Hans** indicates simplified Chinese, and **Hant** indicates traditional Chinese.<br>For details about the value range, see [ISO 15924](https://www.iso.org/standard/81905.html) (codes for the representation of names of scripts).| 79| Country/Region | Indicates the country or region where the user is located. The value consists of two or three uppercase letters or three digits. For example, **CN** indicates China, and **GB** indicates the United Kingdom.<br>For details about the value range, see [ISO 3166-1](https://www.iso.org/iso-3166-country-codes.html) (codes for the representation of names of countries and their subdivisions).| 80| Screen orientation | Indicates the screen orientation of the device. The value can be:<br>- **vertical**: portrait orientation<br>- **horizontal**: landscape orientation| 81| Device type | <!--RP1-->Indicates the device type. The value can be:<br>- **car**: head unit<br>- **tablet**: tablet<br>- **tv**: smart TV<br>- **wearable**: smart wearable<!--RP1End--> | 82| Color mode | Indicates the color mode of the device. The value can be:<br>- **dark**: dark mode<br>- **light**: light mode| 83| Screen density | Indicates the screen density of the device, in dpi. The value can be:<br>- **sdpi**: screen density with small-scale dots per inch (SDPI). This value is applicable for devices with a DPI range of (0, 120].<br>- **mdpi**: medium-scale screen density (Medium-scale Dots Per Inch), applicable to DPI whose value is (120, 160] device.<br>- **ldpi**: screen density with large-scale dots per inch (LDPI). This value is applicable for devices with a DPI range of (160, 240].<br>- **xldpi**: screen density with extra-large-scale dots per inch (XLDPI). This value is applicable for devices with a DPI range of (240, 320].<br>- **xxldpi**: screen density with extra-extra-large-scale dots per inch (XXLDPI). This value is applicable for devices with a DPI range of (320, 480].<br>- **xxxldpi**: screen density with extra-extra-extra-large-scale dots per inch (XXXLDPI). This value is applicable for devices with a DPI range of (480, 640].| 84 85#### rawfile Directory 86 87You can create multiple levels of subdirectories with custom names to store various resource files.<br>Resource files in the subdirectories are directly packed into the application without being compiled, and no IDs will be assigned to the resource files. The subdirectories are referenced based on the specified file path and file name. 88 89#### resfile Directory 90 91You can create multiple levels of subdirectories with custom names to store various resource files.<br>Resource files in the subdirectories are directly packed into the application without being compiled, and no IDs will be assigned to the resource files. After an application is installed, the **resfile** directory is decompressed to the application sandbox path. You can obtain the path through the [resourceDir](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis-ability-kit/js-apis-inner-application-context.md#properties) attribute of **Context**. 92 93### Resource Group Directories 94 95Resource group directories include **element**, **media**, and **profile**, which are used to store resources of specific types. 96 97 **Table 3** Resource group directories 98 99| Directory | Description | Resource File | 100| --------- | ---------------------------------------- | ---------------------------------------- | 101| element | Element resources. Each type of data is represented by a JSON file. (Only files are supported in this directory.) The options are as follows:<br>- **boolean**: boolean data<br>- **color**: color data<br>- **float**: floating point number ranging from -2^128 to 2^128<br>- **intarray**: array of integers<br>- **integer**: integer ranging from -2^31 to 2^31-1<!--Del--><br>- **pattern**: style (for system applications only)<!--DelEnd--><br>- **plural**: plural form data<br>- **strarray**: array of strings<br>- **string**: string. [See descriptions for formatting strings.](../reference/apis-localization-kit/js-apis-resource-manager.md#getstringsync10)<!--Del--><br>- **theme**: theme (for system applications only)<!--DelEnd-->| It is recommended that files in the **element** subdirectory be named the same as the following files, each of which can contain only data of the same type:<br>- boolean.json<br>- color.json<br>- float.json<br>- intarray.json<br>- integer.json<!--Del--><br>- pattern.json<!--DelEnd--><br>- plural.json<br>- strarray.json<br>- string.json | 102| media | Indicates media resources, including non-text files such as images, audios, and videos. (Only files are supported in this directory.)<br>Table 4 and Table 5 describe the types of images, audios, and videos. | The file name can be customized, for example, **icon.png**. | 103| profile | Indicates a custom configuration file. You can obtain the file content by using the [getProfileByAbility](../reference/apis-ability-kit/js-apis-bundleManager.md#bundlemanagergetprofilebyability) API. (Only JSON files are supported in this directory.) | The file name can be customized, for example, **test_profile.json**. | 104 105**Media Resource Types** 106 107Table 4 Image resource types 108 109| Format | File Name Extension| 110| ---- | ----- | 111| JPEG | .jpg | 112| PNG | .png | 113| GIF | .gif | 114| SVG | .svg | 115| WEBP | .webp | 116| BMP | .bmp | 117 118Table 5 Audio and video resource types 119 120| Format | File Name Extension | 121| ------------------------------------ | --------------- | 122| H.264 AVC |.3gp | 123| Baseline Profile (BP) | .mp4 | 124 125**Resource File Examples** 126 127The content of the **color.json** file is as follows: 128 129```json 130{ 131 "color": [ 132 { 133 "name": "color_hello", 134 "value": "#ffff0000" 135 }, 136 { 137 "name": "color_world", 138 "value": "#ff0000ff" 139 } 140 ] 141} 142``` 143 144The content of the **float.json** file is as follows: 145 146```json 147{ 148 "float":[ 149 { 150 "name":"font_hello", 151 "value":"28.0fp" 152 }, 153 { 154 "name":"font_world", 155 "value":"20.0fp" 156 } 157 ] 158} 159``` 160 161The content of the **string.json** file is as follows: 162 163```json 164{ 165 "string":[ 166 { 167 "name":"string_hello", 168 "value":"Hello" 169 }, 170 { 171 "name":"string_world", 172 "value":"World" 173 }, 174 { 175 "name":"message_arrive", 176 "value":"We will arrive at %1$s." 177 }, 178 { 179 "name":"message_notification", 180 "value":"Hello, %1$s!,You have %2$d new messages." 181 } 182 ] 183} 184``` 185 186The content of the **plural.json** file is as follows: 187 188```json 189{ 190 "plural":[ 191 { 192 "name":"eat_apple", 193 "value":[ 194 { 195 "quantity":"one", 196 "value":"%d apple" 197 }, 198 { 199 "quantity":"other", 200 "value":"%d apples" 201 } 202 ] 203 } 204 ] 205} 206``` 207 208## Creating a Resource Directory and Resource File 209 210You can create a directory and its files under the **resources** directory based on the preceding descriptions of the qualifiers directories and resource group directories. DevEco Studio provides a wizard for you to create resource directories and resource files. 211 212### Creating a Resource Directory and Resource File 213 214Right-click the **resources** directory and choose **New** > **Resource File**. If no qualifier is selected, the file is created in a resource group directory under **base**. If one or more qualifiers are selected, the system automatically generates a subdirectory and creates the file in this subdirectory. 215 216In **File name**, enter the name of the resource file to create. In **Resource type**, select the type of the resource group, which is **element** by default. In **Root Element**, select a resource type. To select a qualifier, highlight it under **Available qualifiers** and click the right arrow. To deselect a qualifier, highlight it under **Selected qualifiers** and click the left arrow.<br>The created directory is automatically named in the format of *Qualifiers.Resource group type*. For example, if you create a subdirectory by setting **Color Mode** to **Dark** and **Resource type** to **Element**, the system automatically generates a subdirectory named **dark.element**. 217 218  219 220### Creating a Resource Directory 221 222Right-click the **resources** directory and choose **New** > **Resource Directory** to create a directory only. By default, the **base** directory is created. You can create qualifiers directories as required, by specifying the qualifier and resource group type. 223 224  225 226### Creating a Resource File 227 228Right-click a directory under **resources** and choose **New** > **XXX Resource File**. This operation creates a resource file under this directory. For example, you can create an element resource file in the **element** subdirectory. 229 230  231 232## Using the attr Attribute for Resource Translation 233 234### Function Description 235 236You can use the **attr** attribute to specify whether a string should be translated and the translation status. The **attr** attribute is not involved in resource compilation. 237 238If the **attr** attribute is not configured, a string is translated by default. 239``` 240"attr": { 241 "translatable": false|true 242 "priority": "code|translate|LT|customer" 243} 244``` 245**Parameters of attr** 246 247| Name | Type | Description | 248| --------- | ----------------------- | ---- | 249| translatable | boolean | Whether the string needs to be translated.<br> **true**: The string needs to be translated.<br> **false**: The string does not need to be translated.| 250| priority | string | Translation status of the string.<br>**code**: untranslated<br>**translate**: translated but not verified<br>**LT**: translated and verified<br>**customer**: custom | 251 252### Constraints 253The **attr** attribute applies to the string, strarray, and plural resources in the **base** directory. 254``` 255resources 256|---base 257| |---element 258| | |---string.json 259| | |---strarray.json 260| | |---plural.json 261``` 262### Example 263This example sets the **attr** attribute for strings. 264 265```json 266{ 267 "string": [ 268 { 269 "name": "string1", 270 "value": "1", 271 "attr": { 272 "translatable": false 273 } 274 }, 275 { 276 "name": "string2", 277 "value": "Hello world!", 278 "attr": { 279 "translatable": true, 280 "priority": "LT" 281 } 282 } 283 ] 284} 285``` 286 287## Resource Access 288 289### HAP Resources 290 291 - Use **$r** or **$rawfile** to reference resources.<br>To reference resources of the color, float, string, plural, media, or profile type, use the "$r('app.type.name')" format, where **app** indicates the resource defined in the **resources** directory, **type** indicates the resource type or resource save path, and **name** indicates the name you assign to the resource.<br>To reference strings with multiple placeholders in the **string.json** file, use the "$r('app.string.label','aaa','bbb',444)" format.<br>To reference resources in the **rawfile** subdirectory, use the "$rawfile('filename')" format. Wherein **filename** indicates the relative path of a file in the **rawfile** subdirectory, which must contain the file name extension and cannot start with a slash (/). 292 293 > **NOTE** 294 > 295 > For details about how to use native APIs to access raw files, see [Raw File Development](../napi/rawfile-guidelines.md). 296 297 As described in [Resource Group Directories](#resource-group-directories), you can reference .json resource files, including **color.json**, **string.json**, and** plural.json**.<br>The usage is as follows: 298 299 ```ts 300 Text('Hello') 301 .fontColor($r('app.color.ohos_id_color_emphasize')) 302 .fontSize($r('app.float.ohos_id_text_size_headline1')) 303 .fontFamily($r('app.string.ohos_id_text_font_family_medium')) 304 .backgroundColor($r('app.color.ohos_id_color_palette_aux1')) 305 306 Image($r('app.media.ohos_app_icon')) 307 .border({ 308 color: $r('app.color.ohos_id_color_palette_aux1'), 309 radius: $r('app.float.ohos_id_corner_radius_button'), width: 2 310 }) 311 .margin({ 312 top: $r('app.float.ohos_id_elements_margin_horizontal_m'), 313 bottom: $r('app.float.ohos_id_elements_margin_horizontal_l') 314 }) 315 .height(200) 316 .width(300) 317 ``` 318 319- Obtain a **ResourceManager** object through the application context, and then call [resource management APIs](../reference/apis-localization-kit/js-apis-resource-manager.md) to access different resources.<br>For example, call **getContext().resourceManager.getStringByNameSync('test')** to obtain string resources; call **getContext().resourceManager.getRawFd('rawfilepath')** to obtain the descriptor of the HAP where a raw file is located, and then use the descriptor ({fd, offset, length}) to access the raw file. 320 321### Cross-HAP/HSP Resources 322 323<!--Del--> 324#### Cross-Bundle Access (for System Applications Only) 325 326- Call **createModuleContext(bundleName, moduleName)** to obtain the context of the target HAP/HSP module in another application. Obtain a **ResourceManager** object through the context, and then call [resource management APIs](../reference/apis-localization-kit/js-apis-resource-manager.md) to access different resources.<br>Example: **getContext().createModuleContext(bundleName, moduleName).resourceManager.getStringByNameSync('test')**. 327<!--DelEnd--> 328 329#### Inter-Bundle, Cross-Module Access 330 331- Call **createModuleContext(moduleName)** to obtain the context of the target HAP/HSP module in the same application. Obtain a **ResourceManager** object through the context, and then call resource management APIs to access different resources.<br>Example: **getContext().createModuleContext(moduleName).resourceManager.getStringByNameSync('test')**. 332 333- Use **$r** or **$rawfile** to reference resources. Specifically, perform either of the following: 334 335 1. Use *[hsp].type.name*, where **hsp** indicates the HSP module name, **type** indicates the resource type, and **name** indicates the resource name. The following is an example: 336 337 ```ts 338 Text($r('[hsp].string.test_string')) 339 .fontSize($r('[hsp].float.font_size')) 340 .fontColor($r('[hsp].color.font_color')) 341 Image($rawfile('[hsp].icon.png')) 342 ``` 343 2. Use variables. The following is an example: 344 345 ```ts 346 @Entry 347 @Component 348 struct Index { 349 text: string = '[hsp].string.test_string'; 350 fontSize: string = '[hsp].float.font_size'; 351 fontColor: string = '[hsp].color.font_color'; 352 image: string = '[hsp].media.string'; 353 rawfile: string = '[hsp].icon.png'; 354 355 build() { 356 Row() { 357 Text($r(this.text)) 358 .fontSize($r(this.fontSize)) 359 .fontColor($r(this.fontColor)) 360 361 Image($r(this.image)) 362 363 Image($rawfile(this.rawfile)) 364 } 365 } 366 } 367 ``` 368 > **NOTE** 369 > 370 > The HSP module name must be placed in the brackets ([]). If the **rawfile** directory contains multiple levels of folders, the path must start from the first level, for example, **\$rawfile('[hsp].oneFile/twoFile/icon.png')**. When **$r** or **$rawfile** is used for cross-HSP resource access, resource verification is not available at compile time, and you need to manually check that the target resources exist in the corresponding location. 371 372### System Resources 373 374Apart from custom resources, you can use system resources to maintain a consistent visual style throughout your application. <!--Del-->For details about the system resource IDs and their values in different configurations, see [Resources](../../design/ux-design/design-resources.md).<!--DelEnd--> 375 376During development, the usage of layered parameters is basically the same as that of qualifiers. To reference a system resource, use the "$r('sys.type.resource_id')" format. Wherein: **sys** indicates a system resource; **type** indicates the resource type, which can be **color**, **float**, **string**, or **media**; **resource_id** indicates the resource ID. 377 378> **NOTE** 379> 380> - The use of system resources is only supported in the declarative development paradigm. 381> 382> - For preset applications, you are advised to use system resources.<!--Del--> For third-party applications, you can choose to use system resources or custom application resources as required.<!--DelEnd--> 383> 384> - You can view the fonts for the system resources in the **system/etc/fontconfig.json** file. The default font is **'HarmonyOS Sans'**. 385 386```ts 387Text('Hello') 388 .fontColor($r('sys.color.ohos_id_color_emphasize')) 389 .fontSize($r('sys.float.ohos_id_text_size_headline1')) 390 .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) 391 .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) 392 393Image($r('sys.media.ohos_app_icon')) 394 .border({ 395 color: $r('sys.color.ohos_id_color_palette_aux1'), 396 radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2 397 }) 398 .margin({ 399 top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), 400 bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l') 401 }) 402 .height(200) 403 .width(300) 404``` 405 406## Resource Matching 407 408When your application needs to use a resource, the system preferentially searches the qualifiers subdirectories that match the current device state. The system searches the **base** subdirectory for the target resource only when the **resources** directory does not contain any qualifiers subdirectories that match the current device state or the target resource is not found in the qualifiers subdirectories. The **rawfile** directory is not searched for resources. 409 410### Rules for Matching Qualifiers Subdirectories and Device Resources 411 412- Qualifiers are matched with the device resources in the following priorities: MCC&MNC > locale (options: language, language_script, language_country/region, and language_script_country/region) > screen orientation > device type > color mode > screen density 413 414- If the qualifiers subdirectories contain the MCC, MNC, language, script, screen orientation, device type, and color mode qualifiers, their values must be consistent with the current device status so that the subdirectories can be used for matching the device resources. For example, the qualifiers subdirectory **zh_CN-car-ldpi** cannot be used for matching the resource files labeled **en_US**. 415 416- If there are multiple qualifiers subdirectories for the screen density, the closest qualifiers are matched upwards; otherwise, downwards. For example, if qualifiers directories **xldpi** and **xxldpi** exist and the device screen density is **xxldpi**, the qualifier directory **xxldpi** will be matched. 417 418For more information about how resources are loaded in applications, see the internationalization and localization documents. 419 420### Obtaining Resources for a Specific Configuration 421 422#### Background 423 424When using [qualifiers directories](#qualifiers-directory) to apply configuration-specific resources, you may find some resources fail to be obtained due to matching rules of the qualifiers directories. 425 426If this is the case, you can use the following APIs to obtain resources for a specific configuration. 427 428#### Available APIs 429 430| API | Description | 431| ------------------------------------------------------------ | ------------------------------------------------------------ | 432| [getOverrideResourceManager](../reference/apis-localization-kit/js-apis-resource-manager.md#getoverrideresourcemanager12)(configuration?: [Configuration](../reference/apis-localization-kit/js-apis-resource-manager.md#configuration)) : [ResourceManager](../reference/apis-localization-kit/js-apis-resource-manager.md#resourcemanager) | Obtains a **ResourceManager** object for loading resources for a specific configuration. This API returns the result synchronously.| 433| [getOverrideConfiguration](../reference/apis-localization-kit/js-apis-resource-manager.md#getoverrideconfiguration12)() : [Configuration](../reference/apis-localization-kit/js-apis-resource-manager.md#configuration) | Obtains the specified configuration. This API returns the result synchronously. | 434| [updateOverrideConfiguration](../reference/apis-localization-kit/js-apis-resource-manager.md#updateoverrideconfiguration12)(configuration: [Configuration](../reference/apis-localization-kit/js-apis-resource-manager.md#configuration)) : void | Updates the specified configuration. | 435 436#### Example 437 438The following example demonstrates how to obtain the resources for languages other than the one in use. Assume that the following resource files with the same name are defined in the **resources** directories for Chinese, English, and German: 439 440- entry/src/main/resources/zh_CN/element/string.json 441 442```json 443{ 444 "string": [ 445 { 446 "name": "greetings", 447 "value": "你好，世界" 448 } 449 ] 450} 451``` 452 453- entry/src/main/resources/en_US/element/string.json 454 455```json 456{ 457 "string": [ 458 { 459 "name": "greetings", 460 "value": "Hello, world" 461 } 462 ] 463} 464``` 465 466- entry/src/main/resources/de_DE/element/string.json 467 468```json 469{ 470 "string": [ 471 { 472 "name": "greetings", 473 "value": "Hallo, Welt" 474 } 475 ] 476} 477``` 478 479In **Index.ets**, add code to obtain the resources of the three languages and display them in the text box. The current system language is Chinese. The following is sample code in **entry/src/main/ets/pages/Index.ets**: 480 481```ts 482@Entry 483@Component 484struct Index { 485 @State englishString: string = "" 486 @State germanString: string = "" 487 488 getString(): string { 489 let resMgr = getContext().resourceManager 490 let resId = $r('app.string.greetings').id 491 492 // Obtain resources that match the current system configuration, including the color mode and resolution, for the current system language. 493 let currentLanguageString = resMgr.getStringSync(resId) 494 495 // Obtain resources that match the current system configuration, including the color mode and resolution, for the English language. 496 let overrideConfig = resMgr.getOverrideConfiguration() 497 overrideConfig.locale = "en_US" // Set the language to English and locale to US. 498 let overrideResMgr = resMgr.getOverrideResourceManager(overrideConfig) 499 this.englishString = overrideResMgr.getStringSync(resId) 500 501 // Obtain resources that match the current system configuration, including the color mode and resolution, for the German language. 502 overrideConfig.locale = "de_DE" // Set the language to German and locale to DE. 503 overrideResMgr.updateOverrideConfiguration(overrideConfig) // Equivalent to resMgr.updateOverrideConfiguration(overrideConfig). 504 this.germanString = overrideResMgr.getStringSync(resId) 505 506 return currentLanguageString 507 } 508 509 build() { 510 Row() { 511 Column() { 512 Text(this.getString()) 513 .fontSize(50) 514 .fontWeight(FontWeight.Bold) 515 Text(this.englishString) 516 .fontSize(50) 517 .fontWeight(FontWeight.Bold) 518 Text(this.germanString) 519 .fontSize(50) 520 .fontWeight(FontWeight.Bold) 521 } 522 .width('100%') 523 } 524 .height('100%') 525 } 526} 527``` 528 529### Overlay Mechanism 530 531Overlay is a resource replacement mechanism. With overlay resource packages, you enable your application GUI to adapt to different styles of various brands and products, without having to repack your application HAPs. The overlay mechanism works in dynamic and static modes. Overlay resource packages contain only resource files, resource index files, and configuration files. 532 533- Using overlay in dynamic mode 534 5351. Place the overlay resource package in the target application installation path and install the package using **hdc install**. For example, for the com.example.overlay application, place the overlay resource package in **data/app/el1/bundle/public/com.example.overlay/**. 536 5372. The application uses [addResource(path)](../reference/apis-localization-kit/js-apis-resource-manager.md#addresource10) to load overlay resources and uses [removeResource(path)](../reference/apis-localization-kit/js-apis-resource-manager.md#removeresource10) to remove overlay resources. The path to an overlay resource consists of the application's sandbox root directory (obtained through **getContext().BundleCodeDir**) and the overlay resource package name. For example, **let path = getContext().bundleCodeDir + "Overlay resource package name"**, such as **/data/storage/el1/bundle/overlayResourcePackageName**. 538 539- Using overlay in static mode 540 541The **module.json5** file in the inter-application overlay resource package supports the following fields: 542```{ 543 "app":{ 544 "bundleName": "com.example.myapplication.overlay", 545 "vendor" : "example", 546 "versinCode": "1000000", 547 "versionName": "1.0.0.1", 548 "icon": "$media:app_icon", 549 "label": "$string:app_name", 550 }, 551 "module":{ 552 "name": "entry_overlay_module_name", 553 "type": "shared", 554 "description": "$string:entry_overlay_desc", 555 "deviceTypes": [ 556 "default", 557 "tablet", 558 ], 559 "deliverywithInstall": true, 560 561 "targetModuleName": "entry_module_name", 562 "targetPriority": 1, 563 } 564} 565``` 566<!--Del--> 567The **module.json5** file in the cross-application overlay resource package supports the following fields, which are available for system applications only: 568```{ 569 "app":{ 570 "bundleName": "com.example.myapplication.overlay", 571 "vendor" : "example", 572 "versinCode": "1000000", 573 "versionName": "1.0.0.1", 574 "icon": "$media:app_icon", 575 "label": "$string:app_name", 576 "targetBundleName": "com.example.myapplication", 577 "targetPariority": 1, 578 }, 579 "module":{ 580 "name": "entry_overlay_module_name", 581 "type": "shared", 582 "description": "$string:entry_overlay_desc", 583 "deviceTypes": [ 584 "default", 585 "tablet", 586 ], 587 "deliverywithInstall": true, 588 589 "targetModuleName": "entry_module_name", 590 "targetPriority": 1, 591 } 592} 593``` 594<!--DelEnd--> 595 596> **NOTE** 597> - **targetBundleName**: name of the target application to apply the overlay feature. The value is a string. 598> 599> - **targetModuleName**: name of the target module to apply the overlay feature. The value is a string. 600> 601> - **targetPriority**: overlay priority. The value is an integer. 602> 603> - Other fields such as **Ability**, **ExtensionAbility**, and **Permission** are not supported. 604> 605> - The overlay feature does not support JSON images. 606 607If the **module.json5** file of a module contains the **targetModuleName** and **targetPriority** fields during project creation on DevEco Studio, the module is identified as a module with the overlay feature in the installation phase. Modules with the overlay feature generally provide an overlay resource file for other modules on the device, so that the module specified by **targetModuleName** can display different colors, labels, themes, and the like by using the overlay resource file in a running phase. 608 609The overlay feature is enabled by default. For details about how to enable and disable this feature, see [@ohos.bundle.overlay (overlay)](../reference/apis-ability-kit/js-apis-overlay.md). 610 611<!--no_check-->
