How to Work with Screens > Editing the Style of a Control > Editing and Creating the SoftKey Style

Overview

The following presents the options available (A, B and C) to create/edit a SoftKey control's style.

Option A

Click the “Change Style” option located in the control's right-click menu (see Editing and Creating Styles). The resulting window displays the following options:

Details of the "Select a Style" window

	It is possible to filter the displayed styles. Select one of the following options from the drop-down: All – Displays all the styles available. Internal – Displays MCL-Designer V4's standard styles. Custom – Displays the styles you have created.
	Opens a “Style Properties” window to create a new style.
	Duplicates the selected style. It also enables the edition of the duplicated style in the “Style Properties” window.
	Only removes a style that you have created (custom style).
	Opens a “Style Properties” window, but only the styles you have created can be modified/edited.
	Sets the selected style as the default style ("Def:" is added to the style's designation). Once set, the default style will be adopted by all SoftKey controls dragged from the “Control” tab onto the screen.

Some of these options can also be accessed by right-clicking any style in the "Select a Style" window and opening a menu as shown below:


Right-click a style	Right-click a blank space in the "Select a Style" window

	Opens a “Style Properties” window to create a new style.
	Duplicates the selected style and enables its edition in the “Style Properties” window.
	Opens a “Style Properties” window to display the selected style’s properties. Only the styles you have created can be modified/edited.
	Only becomes active if you select a custom style. It deletes styles that you have created.
	Defines the selected style as the default style for any SoftKey controls that are dragged from the “Control” tab onto the screen.

Option B

Right-click the Style Preview section (located below the “Control” tab). This opens a menu list with the following options:

	New	Opens the “Style Properties” window to create a new style.
	Duplicate	Duplicates the selected style and enables its edition in the “Style Properties” window.
	Properties	Opens a “Style Properties” window to display the selected style’s properties.
	remove	Option only available if you select a custom style (standard styles cannot be removed).
	Set as default	Defines the selected style as the default style for any SoftKey controls that are dragged from the “Control” tab onto the screen.

Whichever the option used (A or B), the creation of a new style occurs in the "Style Properties" window. Take the following steps to fill in/adjust the available options in this window:

Step-by-step

1. Open the "Style Properties" window.

2. Enter a name for the new style in the "Name" box.

3. Check the appropriate option (“Classic”, "Image" or “Advanced”). The "Classic" option is checked by default.

4. Fill in the options according to the project's requirements.

When selecting the “Classic” option, follow these instructions:

a. If you want to have this new style also available for the Button and/or the Menu Button control, check the corresponding "Available for Button" and/or "Available for Menu Button" option.

This is mandatory, meaning, at least one of the options must be checked.

b. Select a font from the drop-down.

c. Define a character size.

d. Select font properties (BOLD, ITALIC, UNDERLINE or STRIKETHROUGH).

e. Select the text color from the drop-down OR click and customize a color in the resulting window.

f. Select a background color from the drop-down OR click and customize a color in the resulting window.

g. Select the SoftKey's border color from the drop-down OR click and customize a color in the resulting window.

h. Select a shape type for the SoftKey box from the drop-down.

All these options are displayed in the preview box.

i. Click to apply these choices (step 5).

When checking the “Image” option, follow these instructions:

Define the settings for the following Softkey states:

Enabled	State is visible while the button is not pressed, and if focus is on another object in case tab stop is enabled. The state can be changed using the set state process.
Pressed	State is visible if button is enabled and while pressing the button, until it is released.
Selected	State is visible when button is highlighted. This is possible when the Softkey's Tab Stop property is enabled. And it is visible when the user puts the focus in the button (via Tab button press).
Disabled	No special considerations.

a. Edit the font settings of each SoftKey state's text (“A- Enabled”; “B-Pressed”; “C-Selected” and “D-Disabled”) by clicking each tab:

I. Select a font from the drop-down.

II. Define a character size.

III. Select font properties (BOLD, ITALIC, UNDERLINE or STRIKETHROUGH).

IV. Select the text color from the drop-down OR click and customize a color in the resulting window.

b. Select an image for each SoftKey state by clicking and browsing for it. The chosen images are displayed in the preview box.

All these font/image options are displayed in the preview box.

c. The "Advanced" tab allows you to decide if the new style will be available to the Button control and/or the Menu Button control. Check "Available for Button" or "Available for Menu Button" or both.

This is mandatory, meaning, at least one of the options must be checked.

d. To apply these choices, click (step 5).

When selecting the “Advanced” option, you can substitute the Softkey's default image (step a) or simply edit the control further (go to step c).

If the project’s target device is an Android device and you have selected “Advanced”, defining an image is mandatory (step a).

a. Click to select an image from the available list.

b. Click to apply the image addition OR to abort the operation.

The chosen image is displayed in the preview box.

c. Edit the font settings of each SoftKey state (“A- Enabled”; “B-Pressed”; “C-Selected” and “D-Disabled”) by clicking each tab:

I. Select a font from the drop-down.

II. Define a character size.

III. Select font properties (BOLD, ITALIC, UNDERLINE or STRIKETHROUGH).

IV. Select the text color from the drop-down OR click and customize a color in the resulting window.

d. If required, select an image to replace the one selected in step a. Click and browse for it. The chosen image is displayed in the preview box.

e. Use the "Advanced" tab to decide the new style's availability and define the control's margins:

I. Decide if the "Button" and/or the "Menu Button" will have the new style available. Check "Available for Button" or "Available for Menu Button" or both. This is mandatory, meaning, at least one of the options must be checked.

II. Define the margins for the image frame in the "Frame Image Margin" section. Enter the required values.

III. Define the margins for the text/icon (inside the Softkey) in the "Text/Icon Area Margin" section. Enter the required values.

When defining the image/text margins, make sure that they do NOT exceed the source image's dimensions.

All these options are displayed in the preview box.

f. To apply these choices, continue to step 5.

5. To finish the creating/editing of the SoftKey's style, click in the "Style Properties" window.

Option C

Option C can only be used to transform controls that have already been dragged onto the screen:

•Select the appropriate style displayed in the Style Preview section (below the "Control" tab) and drag-and-drop it over the control you want to modify. The control will automatically adopt the new style.

Keep in mind that the styles displayed in the Style Preview section - standard styles - cannot be edited/deleted, their features are locked in (the is displayed on the upper right corner of the "Style Properties" window).