Change Border Colour when Field is Selected

Questions and answers for designing and implementing forms in Servoy

Change Border Colour when Field is Selected

Postby james.doonan » Mon Jun 27, 2016 4:23 pm

Hi there,

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

Thanks
james.doonan
 
Posts: 14
Joined: Tue Jan 13, 2015 5:16 pm

Re: Change Border Colour when Field is Selected

Postby Peter de Groot » Tue Jun 28, 2016 7:25 am

Hi,

try

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

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


2016-06-28_0722.png
2016-06-28_0722.png (839 Bytes) Viewed 6550 times


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

Regards
User avatar
Peter de Groot
 
Posts: 215
Joined: Thu Jan 10, 2008 8:38 pm
Location: Not sure...

Re: Change Border Colour when Field is Selected

Postby pbakker » Tue Jun 28, 2016 1:28 pm

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
pbakker
 
Posts: 2822
Joined: Wed Oct 01, 2003 8:12 pm
Location: Amsterdam, the Netherlands

Re: Change Border Colour when Field is Selected

Postby james.doonan » Mon Aug 01, 2016 1:09 pm

Thanks for the replies guys.
james.doonan
 
Posts: 14
Joined: Tue Jan 13, 2015 5:16 pm

Re: Change Border Colour when Field is Selected

Postby james.doonan » Tue Aug 02, 2016 3:27 pm

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.

Code: Select all
forms.frm_main_ag.elements['btn_' + globals.g_current_section_id].border = 'SpecialMatteBorder,0,0,5,1,#3c9be9,#3c9be9,#3c9be9,#e0e0e0,2.0,';
james.doonan
 
Posts: 14
Joined: Tue Jan 13, 2015 5:16 pm

Re: Change Border Colour when Field is Selected

Postby HEKUCH » Tue Aug 30, 2016 1:33 pm

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!

Code: Select all

/**
* @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')
}


Hendrick Kurland

DataBit GmbH
CH-9217 Neukirch an der Thur
HEKUCH
 
Posts: 13
Joined: Thu May 05, 2011 8:02 am

Re: Change Border Colour when Field is Selected

Postby james.doonan » Tue Aug 30, 2016 1:50 pm

Thanks Hendrick.
james.doonan
 
Posts: 14
Joined: Tue Jan 13, 2015 5:16 pm


Return to Forms

Who is online

Users browsing this forum: No registered users and 8 guests

cron