Customizing Logic

The default Launcher can be customized to achieve the required functionality. For example, you can modify logic of the Launcher to perform the following:

• Manage availability of interface elements and messages
• Create custom components

Depending on the operating system (or the other conditions) the certain options or messages have to be shown or hidden. To implement such functionality, the UIMess.Defines module is used.

The UIMess.Defines module forms a list of values that includes the following:

• Options specified in the defines section of the launcher.xml
• Operating system name
• Special constant windowsxp, if the application is run under Windows XP

To check availability of the Launcher options, use the following functions:

• someDefine(defines, extraDefine) - checks if at least one of the defines or extraDefine values is included in the list. The extraDefine argument is optional. For example:
  Source code

  if (!UIMess.Defines.someDefine(["macos","linux"])) {
  	alert('The operating system is Windows.'); // displays the specified message
  }
  				

• everyDefine(defines, extraDefine) - checks if all of the defines and extraDefine values are included in the list. The extraDefine argument is optional.

To set availability of the form elements, use the following properties:

• define - at least one of the defined values is included in the list of the Launcher options. For example, the following element is shown if the application is run under Windows or Linux:
  Source code (XML)

  <div define="windows linux">
  	...
  </div>
  

• define-and - all of the defined values are included in the list of the Launcher options. For example, the following element is shown if the application is run under Linux.
  Source code (XML)

  <div define-and="linux">
  	...
  </div>
  

• ndefine - at least one of the defined values isn't included in the list of the Launcher options. For example, the following element is shown if the application is run under Windows.
  Source code (XML)

  <div ndefine="macos linux">
  	...
  </div>
  

The list of the application options can be extended by adding custom components. To create your own component, perform the following:

1. Define a new function in the UIMess.js file:
   Source code

   UIMess.Difficulty = function() {
   	var _my = {};	
   	return _my;
   };
   

   Currently, this function does nothing.
2. Inherit the function from UIMess.BaseComponent by modifying the code as follows:
   Source code

   UIMess.Difficulty = function() {
   	var _my = UIMess.BaseComponent('difficulty');
   	return _my;
   };
   

   Here difficulty is the component name.
3. In the Difficulty function, overload the component initialization function:
   Source code

   _my.setup = function() {
   	_my.options({
   		'value': {
   			'EASY': 'Easy',
   			'MEDIUM': 'Medium',
   			'HARD': 'Hard'
   		},
   		'default': 'MEDIUM'
   	});		
   	_my.value(UIMess.ComponentSettings.getElementValue(_my.name(), _my.options()['default']));
   };
   

   This function defines component options that are added to the select tag of the form element. It also sets the component value specified in the previous launch (if any) or the default value.
4. Specify command-line options that are affected by the difficulty option. In the example, the externDefine options are affected.
   Source code

   _my.getCommandLine = function() {
   	return {
   		'externDefine': _my.value()
   	}
   };
   

5. Localize the custom component by adding the following to the UIMess.Translator.setup() for each supported language:
   Source code

   'keys': {
   	'label_difficulty': {'html': 'Difficulty'},
   	'difficulty_EASY': {'html': 'Easy'},
   	'difficulty_MEDIUM': {'html': 'Medium'},
   	'difficulty_HARD': {'html': 'Hard'}
   }
   					

   IDs of the drop-down list elements are generated automatically.
6. Add the component to UIMess.FormManager. In the project.js file, specify the following:
   Source code

   UIMess.FormManager.addForm([
   	...
   	UIMess.Difficulty(),
   	...
   ]);
   

To make the new component visible, add the corresponding element to the form and bind it to the component.

<div id="element_difficulty" class="form-element">
	<label id="label_difficulty"></label>
	<select id="component_difficulty" data-bind="difficulty"></select>
</div>