Change Border Colour when Field is Selected

Classic Servoy
1

Hi there,

Is there a way that I can change the border colour of a text when when it is selected?

Thanks

2

Hi,

try

function onFocusGained_fld1(event) {
	elements.fld1.border = 'LineBorder,1,#ff0000';
}

function onFocusLost_fld1(event) {
	elements.fld1.border = 'LineBorder,1,#000000';
}

[attachment=0]2016-06-28_0722.png[/attachment]

You can create a generic global method to set the border color.

Regards

2016-06-28_0722.png

3

The answer really depends on which client you’re using. If NGClient, you can make use of CSS pseudo classes to style elements depending on their state

4

Thanks for the replies guys.

5

Another question if you don’t mind.

I am using this code to highlight a button on both the SC and the WC. Is there a way i can use similar code when the mouse hovers over the buttons? much like a rolloverImageMedia effect.

forms.frm_main_ag.elements['btn_' + globals.g_current_section_id].border = 'SpecialMatteBorder,0,0,5,1,#3c9be9,#3c9be9,#3c9be9,#e0e0e0,2.0,';
6

Hi James,

Here is an example to hightlight a button while Mouse-Over. Works only with SmartClient

instructions:

  • create a Servoy-Form
  • Set “onLoad” and “onUnload” Events in the form (see the follow Code-Example)
  • Add a Button to the Form
  • Add a UserProperty in the Button withe Name “MouseOver” and set value to “true”
  • Set the Events “onAction” in the Button to the Method “onAction”

I hope ist work!

/**
 * @type {String}
 *
 * @properties={typeid:35,uuid:"D9CEE8C4-03DD-4948-AB10-09597970AC0A"}
 */
var lcDefaultColor = '#004080' ;
/**
 * @type {String}
 *
 * @properties={typeid:35,uuid:"21240210-F89D-41E5-B460-040FFE757E80"}
 */
var lcHighlightColor = '#ff8000' ; //  '#0058b0' ;
/**
 * @type {String}
 *
 * @properties={typeid:35,uuid:"ACC19154-BE34-4608-9B48-BB3382BAE7B3"}
 */
var lcSelectedColor = '#cee7ff'

/**
 *
 * @properties={typeid:35,uuid:"7187A76E-B719-4B1F-A81E-9B257AA43825",variableType:-4}
 */
var loListener = new Packages.java.awt.event.MouseListener({mouseEntered: mouseEntered,mouseExited:mouseExited,mousePressed:mousePressed});


/**
 * @type {String}
 *
 * @properties={typeid:35,uuid:"8577D4BE-74B9-4BB8-8E6C-74258D37B730"}
 */
var lcText = '' ;

/**
 * Callback method when form is (re)loaded.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 *
 * @properties={typeid:24,uuid:"C8D2659D-233E-4A23-BAA8-895B22FDA340"}
 */
function onLoad(event) {	
	
	var laElements = elements.allnames ;
	for ( var i = 0 ; i < laElements.length ; i++ )	{
		var loElement = elements[laElements[i]] ;
		try{
			if (loElement.getDesignTimeProperty('MouseOver')==true){
				addListener(loElement) ;
			}
		} catch(e){
			
		}
	}
}

/**
 * Callback method when form is destroyed.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"6B9B18F0-76A9-4DCB-A6A1-EF5030A4AF09"}
 */
function onUnload(event) {	
	var laElements = elements.allnames ;
	for ( var i = 0 ; i < laElements.length ; i++ )	{
		var loElement = elements[laElements[i]] ;
		if (loElement.getDesignTimeProperty('MouseOver')==true){
			removeListener(loElement) ;
		}
	}
}



/**
 * Event mouseEntered
 * @param event
 *
 * @properties={typeid:24,uuid:"83B3AEAA-213D-4916-9CE4-526BC99C6615"}
 */
function mouseEntered(event){	
	var loColor = new Packages.java.awt.Color.decode(lcHighlightColor); 
	event.getComponent().setBackground(loColor) ;
}


/**
 * Event mouseExited
 * @param event
 *
 * @properties={typeid:24,uuid:"7C084DA7-5064-4B2E-9C02-EAA0EAC18782"}
 */
function mouseExited(event){
	var loColor = new Packages.java.awt.Color.decode(lcDefaultColor);	
	event.getComponent().setBackground(loColor) ;
}

/**
 * Event mousePressed
 * @param event
 *
 * @properties={typeid:24,uuid:"BFE6869E-580B-4AAE-B3A7-CC340948CFE1"}
 */
function mousePressed(event){	
	var loColor = new Packages.java.awt.Color.decode(lcSelectedColor);	
	event.getComponent().setBackground(loColor) ;
	
	application.updateUI() ;
	
	loColor = new Packages.java.awt.Color.decode(lcDefaultColor);	
	event.getComponent().setBackground(loColor) ;
}



/**
 * Get a reference to JavaSwingComp 
 * @param {RuntimeComponent} element 
 * @return {Packages.javax.swing.JComponent} 
 *
 * @properties={typeid:24,uuid:"DBD22784-4DF8-4FAE-A1F5-9DC05495E727"}
 */
function unwrapElement(element) { 
	var list = new Packages.java.util.ArrayList(); 
	list.add(element) 
	/**@type {Packages.javax.swing.JComponent}*/ 
	var unwrappedElement = list.get(0)  	
	return unwrappedElement ;
} 


/**
 * Perform the element default action.
 * @param {RuntimeComponent} loRuntimeElement
 * @properties={typeid:24,uuid:"965D0E08-F711-4E50-81A3-4AEFF06B2D67"}
 */
function removeListener(loRuntimeElement) {
	var loElement = unwrapElement(loRuntimeElement) ;
	loElement.removeMouseListener(loListener) ;
}

/**
 * Perform the element default action.
 * @param {RuntimeComponent} loRuntimeElement
 *
 * @properties={typeid:24,uuid:"0B44C617-A067-460C-BB02-AD8AF4401B45"}
 */
function addListener(loRuntimeElement) {
	var loElement = unwrapElement(loRuntimeElement) ;
	loElement.addMouseListener(loListener) ;
}


/**
 * Perform the element default action.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"B934A559-C39E-4758-9D49-8B5925780E92"}
 */
function onAction(event) {
	scopes.svyCustomDialogs.showInfoDialog('Click','Hallo World')
}
7

Thanks Hendrick.