Looking at the MCL-Designer V4 Work Area > The Project Modules Area

The Resources module includes all the resources that are available to be used in the project. It consists of five sections: "Splash", "App Icons","Images", "Sound" and "Others".

Detail of the Resources module

This is a general view of the "Resources" module with its default sections.

Double-click a section to expand its content and view the related resources.

Double-clicking an expanded section hides its content.

	Splash	The "Splash" is only available if you have defined a splash screen for the current project in the "Splash Screen" tab. It includes the splash screen (the image that is displayed after the device's application icon is clicked and before the application is launched).
	App Icons	The "App Icons" section displays the default project icons provided by MCL-Designer V4 to be used throughout the project.
	Images	This section contains the images that are added to the project. Use jpeg,jpg and/or png files for project development.
	Sound	This section includes added sounds. Use wav files for project development.
	Others	The "Others" section groups all the non-image/non-sound resources.

Use the right-click menu to access options that are related to the selected section/resource.

These are the available right-click menu options:

Splash Section

Not Applicable. There are no right-click options available. The only way to edit the splash screen is in the "Project Properties" - "Splash Screen" tab. See Splash Screen.

App Icons Section

This section includes project default images that cannot be removed (all added images go to the "Images" section below). Check the "Project Properties" - "Application Info" - if you want to edit the selected icon. See Application Info.

It is only possible to right-click the default app icons ("App Icon 48X48", "App Icon 128X128", "App Icon 512X512").

The right-click menu consists of the "Search" option. Clicking it opens a search window which you can use to search the selected icon's occurrences within the project. See Detail of Search.

Images Section

If you right-click the "Images" section, you access the "New Resource" option.

This option allows you to add any type of resource, regardless of the section you right-click - MCL-Designer will identify the newly added resource's type and store it in the appropriate section. See To Add a Resource.

The "New Resource" option is also available if you right-click an empty space in the "Resources" module or the module's title.

If you right-click an added an image resource, you access the following menu:

	Edit Resource	Click this option if you want to edit the selected image resource - it opens your default PC editor.
	Transform	Use this option to rotate (90o, 180o or 270o) or flip (horizontal or vertically) the selected image file. This option is only active for image resources.
	Duplicate Resource	Click it to duplicate the selected image resource. The result is a duplicate resource with the same name as the original resource with an incremented number.
	Rename Resource	Use it to rename the selected image resource: a. Click the "Rename Resource" option in the selected resource's right-click menu. b. Once the resource's name is set to "edit mode", enter the new name. c. Click <ENTER> in your PC keyboard. d. Click in the confirmation window.
	Delete Resource	This option removes the selected resource from your current project.
	Search	Click this option to open a search window and search the selected resource's occurrences within the project. See Detail of Search.

Sound Section

Right-click the "Sound" section to access the "New Resource" option.

This option allows you to add any type of resource, regardless of the section you right-click - MCL-Designer will identify the type of the newly added resource and store it in the appropriate section. See To Add a Resource.

The "New Resource" option is also available if you right-click an empty space in the "Resources" module or the module's title.

If you right-click an added sound resource, you access the following menu:

	Edit Resource	Click this option if you want to edit the selected sound resource. Use the appropriate edition tool.
	Duplicate Resource	Click it to duplicate the selected sound resource. The result is a duplicate resource with the same name as the original resource with an incremented number.
	Rename Resource	Use it to rename the selected sound resource: a. Click the "Rename Resource" option in the selected resource's right-click menu. b. Once the resource's name is set to "edit mode", enter the new name. c. Click <ENTER> in your PC keyboard. d. Click in the confirmation window.
	Delete Resource	This option removes the selected resource from your current project.
	Search	Click this option to open a search window and search the selected resource's occurrences within the project. See Detail of Search.

Others Section

If you right-click the "Others" section, you access the "New Resource" option.

The "New Resource" option is also available if you right-click an empty space in the "Resources" module or the module's title.

If you right-click an added resource, you access the following menu:

	Edit Resource	Click this option if you want to edit the selected resource. Use the appropriate edition tool for the resource.
	Duplicate Resource	Click it to duplicate the selected resource. The result is a duplicate resource with the same name as the original resource with an incremented number.
	Rename Resource	Use it to rename the selected resource: a. Click the "Rename Resource" option in the selected resource's right-click menu. b. Once the resource's name is set to "edit mode", enter the new name. c. Click <ENTER> in your PC keyboard. d. Click in the confirmation window.
	Delete Resource	This option removes the selected resource from your current project.
	Search	Click this option to open a search window and search the selected resource's occurrences within the project. See Detail of Search.

Image Type Resource Information

Preview some properties of an image resource file (name, dimensions and size) by setting the mouse over it.

This is only available for image type resources - the "Splash Screen", the resources of the "Images" and the "App Icons" sections.

To Add a Resource

Use one of the following to add a resource to the "Resources" module:

•The Right-click menu:

a. Right-click the Images, Sound or Others section, the empty space of the"Resources" module or its title.

b.Click .

c. In the resulting OS browse window, browse and select the required resource.

Regardless of the section you right-click to access the "New Resource" option, the added resource will be identified and placed in the compatible section.

•Use the “Drag-and-Drop” mechanism – drag a resource file from an OS browse window and drop it in the Resources area.

MCL-Designer will identify the type of the resource being added and include it in the appropriate section.

Any added image is always sent backward in relation to any other control in the screen.

If the added control and the control already on the screen are both image resources, you can alternate their position and send one of the image resources forward/backward, as required.

Accepted image/sound resource formats:

Image resources - jpeg,jpg and/or png files.

Sound resources - wav files, preferably, with a 22050 Hz frequency.

When selecting an image, consider its resolution, its purpose and the target device.

We recommend the use of an image with a resolution that matches the resolution of the control it is inserted in.

To Apply an Image Resource to a Control

Image resources can be added to a screen but also to controls that allow for images (ex: a "Button", a "Menu Button"). In this case, the image resource is NOT added from the "Resources" module, it is applied to the control's corresponding properties window. Regarding the "Display Image" control, there are other ways to add an image resource (see Adding a "Display Image" Control to a Screen).

Step-by-step

1. Use one of the following options, available in a control's properties window, to access the image intended for the selected control:

a. Click , located next to the "image" option, whenever available.

b. Right-click the "image" option's box and select the "Resource Select" option in the resulting window.

This opens a window with tabs that contain image resources ("Theme", "Designer Resources", "Project Resources", My Pictures" and a tab representing the folder you previously used as a source for an image import.

In the case of the image below, it is the "C:\...\Pictures\" tab).

2. This window allows you to control the displayed images and provides further options:

a. Click and select the most appropriate view ("Large Icons", "Medium Icons" and "Small Icons").

b. Use to filter the image display according to the defined resolution.

c. Right-click an existing image resource to open a menu with several options. The available options vary according to the resource's location (the tab that includes the selected image).

Below are all the possible options:

	New Resource	Opens an OS browse window. Browse for an image, select it and import it into the tab that is currently open.
	Edit Resource	Opens your default image editor. Edit the selected image.
	Transform	Allows you to rotate (90o, 180o or 270o) or flip (horizontal or vertically) the selected image file.
	Duplicate Resource	Duplicates the selected image. The duplicate has the same name as the original resource plus an incremented number.
	Rename Resource	Sets the image's name into "edit" mode. Enter the new name and click <Enter> in your PC keyboard.
	Delete Resource	Deletes the selected image. Click in the resulting delete confirmation window.

3. Open the tab that contains the image you want to use.

4. Select the image.

To avoid image display issues, make sure that the dimension of the selected image resource and the target control's area are almost the same.

5. Click to save your image choice and return to the properties window.

To Import an Image Resource

Instead of selecting an image from the available tabs, you can import the required image from an outside source (the image resource will be displayed in the "Project Resources" tab and the "Resources" module).

Step-by-step

1. In the "Image" window, click (located on the lower left) to open an OS browse window.

2. Select the image you want to import and click .

No matter which tab you had open when you clicked , the imported image is placed in the "Project Resources" tab.

3. If you want to add the imported image to the selected control, select it (in the "Project Resources" tab) and click to apply.

To Delete a Resource

Use one of the following to remove a resource from the "Resources" module:

a. Select the resource you want to delete.

b. Click <Delete> in your PC keyboard.

c. Click to confirm the delete operation.

a. Right-click the resource you want to delete.

b.Click .

c. Click to confirm the delete operation.