1# Accessing Application Resources 2 3 4## Accessing Application Resources 5 6To 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. 7 8When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` 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 (/). 9 10> **NOTE** 11> 12> Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined. 13> 14> `$r` returns a **Resource** object. To obtain the corresponding string, use [getString](../reference/apis/js-apis-resource-manager.md#getstring). 15 16 In the **.ets** file, you can use the resources defined in the **resources** directory. 17 18```ts 19Text($r('app.string.string_hello')) 20 .fontColor($r('app.color.color_hello')) 21 .fontSize($r('app.float.font_hello')) 22} 23 24Text($r('app.string.string_world')) 25 .fontColor($r('app.color.color_world')) 26 .fontSize($r('app.float.font_world')) 27} 28 29Text($r('app.string.message_arrive', "five of the clock")) // Reference string resources. The second parameter of $r is used to replace %s. 30 .fontColor($r('app.color.color_hello')) 31 .fontSize($r('app.float.font_hello')) 32} 33 34Text($r('app.plural.eat_apple', 5, 5)) // Reference plural resources. The first parameter indicates the plural resource, and the second parameter indicates the number of plural resources. The third parameter indicates the substitute of %d. 35 .fontColor($r('app.color.color_world')) 36 .fontSize($r('app.float.font_world')) 37} 38 39Image($r('app.media.my_background_image')) // Reference media resources. 40 41Image($rawfile('test.png')) // Reference an image in the rawfile directory. 42 43Image($rawfile('newDir/newTest.png')) // Reference an image in the rawfile directory. 44``` 45 46 47## Accessing System Resources 48 49 50System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style. 51 52 53To 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. 54 55```ts 56Text('Hello') 57 .fontColor($r('sys.color.ohos_id_color_emphasize')) 58 .fontSize($r('sys.float.ohos_id_text_size_headline1')) 59 .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) 60 .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) 61Image($r('sys.media.ohos_app_icon')) 62 .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2}) 63 .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) 64 .height(200) 65 .width(300) 66``` 67## Resource File Examples 68 69The content of the **color.json** file is as follows: 70 71 72```json 73{ 74 "color": [ 75 { 76 "name": "color_hello", 77 "value": "#ffff0000" 78 }, 79 { 80 "name": "color_world", 81 "value": "#ff0000ff" 82 } 83 ] 84} 85``` 86 87The content of the **float.json** file is as follows: 88 89 90```json 91{ 92 "float":[ 93 { 94 "name":"font_hello", 95 "value":"28.0fp" 96 }, 97 { 98 "name":"font_world", 99 "value":"20.0fp" 100 } 101 ] 102} 103``` 104 105The content of the **string.json** file is as follows: 106 107 108```json 109{ 110 "string":[ 111 { 112 "name":"string_hello", 113 "value":"Hello" 114 }, 115 { 116 "name":"string_world", 117 "value":"World" 118 }, 119 { 120 "name":"message_arrive", 121 "value":"We will arrive at %s." 122 } 123 ] 124} 125``` 126 127The content of the **plural.json** file is as follows: 128 129 130```json 131{ 132 "plural":[ 133 { 134 "name":"eat_apple", 135 "value":[ 136 { 137 "quantity":"one", 138 "value":"%d apple" 139 }, 140 { 141 "quantity":"other", 142 "value":"%d apples" 143 } 144 ] 145 } 146 ] 147} 148``` 149
