• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# File Organization
2
3
4## Directory Structure
5
6Below is the typical directory structure (**entry/src/main/js/Widget**) of a JS service widget.
7
8```
9├─widget
10│   ├─common
11│   │   └─widget.png
12│   ├─i18n
13│   │   ├─en-US.json
14│   │   └─zh-CN.json
15│   └─pages
16│       └─index
17│           ├─index.css
18│           ├─index.hml
19│           └─index.json
20```
21
22Functions of the files are as follows:
23
24- **.hml** files describe the widget template layout.
25
26- **.css** files describe the page style.
27
28- **.json** files define variables and action events used for a service widget.
29
30Functions of the folders are as follows:
31
32- The **pages** folder stores template pages.
33
34- The **common** folder stores public resource files, such as images.
35
36- The **i18n** folder stores resources in different languages, for example, UI strings and image paths.
37
38## File Access Rules
39
40Application resources can be accessed via an absolute or relative path. In this development framework, an absolute path starts with a slash (/), and a relative path starts with **./** or **../**. The rules are as follows:
41
42- To reference a code file, use a relative path, for example, **../common/style.css**.
43
44- To reference a resource file, use an absolute path, for example, **/common/test.png**.
45
46- Store code files and resource files in the **common** directory and access them in the required fashion.
47
48- In a **.css** file, use the **url()** function to create a URL, for example, **url(/common/test.png)**.
49
50> **NOTE**
51>
52> When code file A needs to reference code file B:
53>
54> - If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
55>
56> - If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files. The reason is that the directory of code file B changes during Webpack packaging.
57>
58> - When defining data in a **.json** file, use absolute paths for resource files.
59
60## Configuration Files
61
62If you are developing a widget in the FA model, configure the **config.json** file. For details, see [Configuring the Widget Configuration File in FA Model](../../application-models/widget-development-fa.md#configuring-the-widget-configuration-file).
63
64If you are developing a widget in the stage model, configure **ExtensionAbility** under **extensionAbilities** in the **module.json5** file. For details, see [Configuring the Widget Configuration File in Stage Model](../../application-models/js-ui-widget-development.md#configuring-the-widget-configuration-files).
65