Widget component files

A widget consists of several component files. In the development phase, your widget project is just a file system directory, where you create and store the component files. Some of the files are mandatory and must be found in every widget. You must store the mandatory files under the root directory of a widget project. In addition, your widget may have optional component files that you can store either directly under the root directory or in any subfolder under the root directory, except for the icon file.

The following figure illustrates the component files of an example widget.

Figure: Component files of an example widget

The following table lists the typical widget component files and describes their purpose. It also indicates whether a file is mandatory or optional.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

**Table:** Widget component files
File	Use	Location	Description
`info.plist`	Mandatory	Root directory	An XML-formatted file that contains the property and configuration information of a widget, such as the HTML file used as well as the identifier of the widget.
`<name>.html`	Mandatory	Root directory	A standard HTML file that mainly contains information for structuring a widget. The name of the HTML file must be predefined within the `info.plist` properties. Note: A widget package contains only one HTML file.
`icon.png`	Optional	Root directory	A custom icon file that represents a widget on a mobile device when it has been installed. The icon image must be in Portable Networking Graphics (PNG) file format. The recommended size of the icon is 88 x 88 pixels. The icon is scaled automatically, based on the device screen resolution. If the `icon.png` file is omitted from the widget installation package, the widget appears with a default S60 application icon.
`*.css`	Optional	Root or any subfolder	External CSS file that defines the style and layout of widget contents. A widget can have as many individual CSS files as needed. It is also possible to embed the style information within the `<name>.html` file, thereby allowing the CSS file to be omitted. However, it is strongly recommended that you keep the style information separated from the data (markup) elements.
`*.js`	Optional	Root or any subfolder	External JavaScript source code that implements the logic of a widget's operations, such as the construction of the widget UI elements, UI interaction, and communication. A widget can have as many individual `js` files as needed. It is also possible to embed JavaScript codes within the HTML file, thereby allowing the `js` file to be omitted. However, it is recommended that you keep the JavaScript codes in a separate file.
`*.jpg/bmp/gif/png`	Optional	Root or any subfolder	A custom image file that can be used in a widget. A widget can have as many individual image files as needed.