The following figure shows the typical directory structure of the JavaScript module \(entry/src/main/js/module\) for an application with feature abilities \(FA\) using JavaScript APIs.
The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs.
**Figure1** Directory structure
**Figure1** Directory structure
.png)
**Figure2** Directory structure for resource sharing <sup>5+</sup>
**Figure 2** Directory structure for resource sharing<sup>5+</sup>
@@ -16,32 +16,33 @@ Functions of the files are as follows:
- .hml files describe the page layout.
- .css files describe the page style.
- .js files process the interactions between pages and users.
- .js files process the page logic and user interactions .
Functions of the folders are as follows:
- The app.js file manages global JavaScript logics and application lifecycle. For details, see [app.js](js-framework-js-file.md).
- The pages directory stores all component pages.
- The common directory stores public resource files, such as media resources, custom components, and .js files.
- The resources directory stores resource configuration files, for example, for multi-resolution loading. For details, see [Resource Limitations and Access](js-framework-resource-restriction.md).
- The share directory<sup>5+</sup> is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by default1 and default2 instances.
- The **app.js** file manages global JavaScript logics and application lifecycle. For details, see [app.js](js-framework-js-file.md).
- The **pages** directory stores all component pages.
- The **common** directory stores public resource files, such as media resources, custom components, and .js files.
- The **resources** directory stores resource configuration files, for example, for multi-resolution loading. For details, see [Resource Limitations and Access](js-framework-resource-restriction.md).
- The **share** directory<sup>5+</sup> is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances.
>- Reserved folders \(i18n and resources\) cannot be renamed.
>- If the same resource name and directory are used under the share directory and the instance \(default\) directory, the resource in the instance directory will be used when you reference the directory.
>- The share directory does not support i18n.
> **NOTE**
>- Reserved folders \(**i18n** and **resources**\) cannot be renamed.
>- If the same resource name and directory are used under the share directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory.
>- The **share** directory does not support **i18n**.
>- You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio.
## File Access Rules
Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with ./ or ../. The rules are as follows:
- To reference a code file, use a relative path, for example, ../common/utils.js.
- To reference a resource file, use an absolute path, for example, /common/xxx.png.
- To reference a code file, use a relative path, for example, **../common/utils.js**.
- To reference a resource file, use an absolute path, for example, **/common/xxx.png**.
- Store code files and resource files in the common directory and access the files in a required fashion.
- In a .css file, use the url\(\) function to create a URL, for example, url\(/common/xxx.png\).
- In a .css file, use the url\(\) function to create a URL, for example, **url\(/common/xxx.png\)**.
@@ -12,10 +12,11 @@ Two-way binding can be established between the @Link decorated variable and the
- Two-way binding: When a child component changes the @Link decorated variable, the @State decorated variable of its parent component is also changed.
- Support for initialization with the variable reference passed to the @Link decorated variable: When creating a new instance of the component, you must use the naming parameter to initialize all @Link decorated variables. The @Link decorated variable can be initialized by using the reference of the @State or @Link decorated variable. Wherein, the @State decorated variable can be referenced using the '$' operator.
- Support for initialization with the variable reference passed to the @Link decorated variable: When creating a new instance of the component, you must use the naming parameter to initialize all @Link decorated variables. The @Link decorated variable can be initialized by using the reference of the @State or @Link decorated variable. Wherein, the @State decorated variable can be referenced using the ` '$' ` operator.
> The @Link decorated variable cannot be initialized within the component.
...
...
@@ -50,7 +51,7 @@ struct PlayButton {
}
```
The @Link semantics are derived from the '$' operator. In other words, $isPlaying is the two-way binding of the internal state this.isPlaying. When you click PlayButton, the <Image> and <Text> components of PlayButton are refreshed at the same time.
The @Link semantics are derived from the ` '$' ` operator. In other words, ` $isPlaying ` is the two-way binding of the internal state ` this.isPlaying ` . When you click **PlayButton**, the **\<Image>** and **\<Text>** components of **PlayButton** are refreshed at the same time.
## Complex Type Example
...
...
@@ -91,7 +92,7 @@ struct Child {
}
```
In the example above, click Button1 and Button2 to change the list of text items displayed in the parent component.
In the example above, click **Button1** and **Button2** to change the list of text items displayed in the parent component.
## Example of Using @Link, @State, and @Prop Together
@@ -60,21 +60,23 @@ ColorStop is used to describe the progressive color stop.
The Resource type is used to reference resources for setting the value of a component attribute.
You can use $r or $rawfile to create a Resource object. For details, see [Resource Access](ts-application-resource-access.md).
You can use ` $r ` or ` $rawfile ` to create a Resource object. For details, see [Resource Access](ts-application-resource-access.md).
- $r('belonging.type.name')
belonging: system or application resource. The value can be 'sys' or 'app'.
-` $r('belonging.type.name') `
type: resource type, which can be 'color', 'float', 'string', or 'media'.
` belonging ` : system or application resource. The value can be 'sys' or 'app'.
name: resource name, which is determined during resource definition.
` type ` : resource type, which can be 'color', 'float', 'string', or 'media'.
- $rawfile('filename')
filename: name of the file in resources/rawfile of the project.
` name ` : resource name, which is determined during resource definition.
-` $rawfile('filename') `
` filename ` : name of the file in resources/rawfile of the project.
| Name| Type| Description|
| -------- | -------- | -------- |
| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | id: resource ID.<br>type: resource type (enumerated value).<br>params: optional parameters.<br>After a Resource object is created using $r or $rawfile, modifying attribute values of the object is prohibited.|
| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | **id**: resource ID.<br>**type**: resource type (enumerated value).<br>**params**: optional parameters.<br>After a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited. |
## ResourceStr Type<sup>8+</sup>
...
...
@@ -94,7 +96,7 @@ You can use $r or $rawfile to create a Resource object. For details, see [Resour
| Name| Type| Description|
| -------- | -------- | -------- |
| Font | {<br>size?: Length;<br>weight?: FontWeight \| number \| string;<br>family?: string \| Resource;<br>style?: FontStyle;<br>} | Text style.<br>size: font size. For the number type, use the unit fp.<br>weight: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.<br>family: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is 'Arial, sans-serif'.<br>style: font style.|
| Font | {<br>size?: Length;<br>weight?: FontWeight \| number \| string;<br>family?: string \| Resource;<br>style?: FontStyle;<br>} | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>weight: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.<br>**family**: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.<br>**style**: font style. |
