Changing the Stroke Color of Buttons and Fields With Actions

[Peter Jackson]

G'day All,
Have you ever wanted a simple solution to providing mouse over and mouse off effects without having to create individual images for:

1. Normal state (enabled)
2. Invert state (button down)
3. Disabled state (typically Normal by the caption is grey)
4. Mouse over or hover (this is the checked graphic in ToolBook)

Actually this has been a request on the ListServ from several ToolBookers for many years.
Well I finally cracked it and the following is a way that you can add this new feature. It uses the Execute Script Action and we need to add some OpenScript to the book for Native and we also need to add a JavaScript file for the exported project.
If you are not sure about Execute Scripts, please refer to the FreeBee in my News Letter #5

http://www.toolbookdeveloper.com/fre...tters/nl5.html

Scroll down to "Actions - Execute Script"
Another excellent resource to review is ToolBookHelp.com, Denny Dedmore's site where one of the many helpful pages is "ADDITION OF JAVASCRIPT IN TOOLBOOK 2004" go to:

http://www.toolbookhelp.com/help/mis...javascript.htm

OK let's get down and dirty :-)
Create a file called StrokeColor.js, or if you already have a JavaScript file then add the following JavaScript:
If you are unsure what to use to create this file, Notepad will do just fine.

function tbfunction_setStrokeColor(pageOrBackground,objectName,rgb){
	var parentObj=TBK._uc._vc;
	if(pageOrBackground.toLowerCase()=="background"){
		parentObj=parentObj._Bq;
	}
	var tb_js_obj=TBK._hc(objectName,parentObj);
	if(tb_js_obj._sb('_uA')){
		var tb_dom_obj=tb_js_obj._Rd;
	}else{
		var tb_dom_obj=TBK._cf(tb_js_obj._Oe);
	}
	if(tb_dom_obj){
		rgbInt=rgbToInteger(rgb);
		if(rgbInt==rgbInt*1) tb_dom_obj.style.color="#"+toHexString(rgbInt, 6);
	}
}

function rgbToInteger(rgb){
    var tokens=rgb.split(',');
    return((tokens[0]-0)*65536)+((tokens[1]-0)*256)+(tokens[2]-0);
}

function toHexString(number, size){
	var hexString=number.toString(16);
	while ( hexString.length < size ){
		hexString="0" + hexString;
	}
	return hexString;
}

Now that we have our prepared JavaScript files let’s create a new ToolBook project selecting “Blank DHTML book” as we will want to export it later. We need to begin by adding some OpenScript to ensure that we will end up with the same functionality in both the Native and exported versions. Add the following OpenScript to the book script of your new project:

to get tbfunction_setStrokeColor pageOrBackground, objectName, rgb
	if object of target is in "pagebackground" then
		parentObj = target
	else
		if pageOrBackground = "background" then
			parentObj = objectContainer(target,"background")
		else
			parentObj = objectContainer(target,"page")
		end if
	end if
	objList = item 1 of ASYM_ObjectsWhere(parentObj,"button,field", "name of It =" && objectName)
	if isObject(objList) then
		rgbStroke of objList = rgb
	end if
	return null
end tbfunction_setStrokeColor

Of course if you have your own system book then the OpenScript above should be added to the system book

The last step in preparation is to import the JavaScript (see the above mentioned FreeBee reference for details on how to do this).
Set the background color of the book to a light grey and on the page add a button, for the Execute Script to work we MUST have a unique name for the button, in this case we will name it "test" (without the quotes), set the fill color to black and the stroke color to white. Also exclude the button from the Tab order in this instance just to prevent those annoying otted lines from appearing around it when you finally do your export.
Now we are ready to start adding Actions to our test button to change the stroke color, first let me describe what we want to achieve:

1. Normal state of the button is black with white text (caption)
2. Mouse over of the button is white with black text

In other words we want to reverse the colors - simple, and we have all seen this before.
Select the test button and open the Actions Editor, select the "On mouse off" event and add the following Actions:

On mouse off... (Parameters: mouseX,mouseY,shiftDown,ctrlDown)
    If enabled of self
        Set rgbFill of Self to "0,0,0"
        Execute Script setStrokeColor (HTML & Native)
    End if

Note the line "If enabled of self", this means that we only want to change the colors if the button is enabled.
Also, the line "Execute Script setStrokeColor (HTML & Native)" will need to have the parsing parameters set, to do that you need to open the 'Properties for "Execute Script" Action' dialog box and to open this dialog you need to select the line and hit the enter key. The parameters and their values are:

pageOrBackground = "page"
objectName = name of self
rgb = "255,255,255"

Now select the "On mouse over..." event and add the following Actions:

On mouse over... (Parameters: mouseX,mouseY,shiftDown,ctrlDown)
    If enabled of self
        Set rgbFill of Self to "255,255,255"
        Execute Script setStrokeColor (HTML & Native)
    End if

The parameters and their values for the "Execute Script setStrokeColor (HTML & Native)" are:

pageOrBackground = "page"
objectName = name of self
rgb = "0,0,0"

That's it. Now go to reader and test our "test" button.
Save and export the book and test it in the browser.
This works for IE, NS and FireFox too

Inconsistency between Native and Export:
Now that I have explained how to ensure that the mouse over will not change if the button is disabled, there is a difference in the way the mouse on and mouse off Actions work in Native and exported In Native ToolBook the enter and leave mouse messages are sent even if the object (in this case a button) is disabled, when exported, however, the objects are not sent this message. If your ToolBook projects are just for web deployment you may be thinking that it's OK to not include the above "If enabled of self" line because you don't need it - right?
Well that's true for now, will you remember that you need to add this when SumTotal update the export process to be consistent with Native? Anyway, I always advise my customers that it is important to ensure that Native and exported projects need to work the same way, this way you can do most of your testing in Native mode, because it is easier