February 05th 2016 08:00:26am

Welcome to episode 19 in the Free Function Friday series, showHideControls. This is a handy function for when you are dealing with ScriptUI elements. If you’ve ever dealt with buttons, checkboxes, radio buttons, or dropdown lists that trigger a change in the UI appearance, then you’ve dealt with the visibility of control elements before. This function allows for multiple controls to be hidden or shown by supplying an array of control objects. Normally you would use the .visible attribute of a control to change it’s visibility. This is easy enough if only dealing with a small handful of controls, but if you start building larger UI’s then there can be quite a lot to deal with. If for example you needed to make four controls hidden, you would need to code the visibility for four elements individually like so…

controlOne.visible = false;
controlTwo.visible = false;
controlThree.visible = false;
controlFour.visible = false;

showHideControls will condense this down into this…

showHideControls([controlOne, controlTwo, controlThree, controlFour], "false");

This makes for cleaner, readable code. Plus it’s less to type. So this video will go over making the showHideControls function and some ScriptUI code, but mostly focuses on the function part. You can copy and paste the code below as a starting point for a GUI. It contains a lot of the GUI controls you can use. Good to use as a template for building your own GUI too.

Dockable panel base code:

{
function myScript(thisObj) {
	function myScript_buildUI(thisObj) {
		var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Panel Name", [0, 0, 300, 300]);
		if(myPanel != null){
			res="group{orientation:'row', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
				grp1: Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
					myStaticText: StaticText{text:'StaticText Text', justify:'center', alignment:['fill', 'top']},\
					myEditText: EditText{text:'EditText text', alignment:['fill', 'top']},\
					myEditTextML: EditText{text:'EditText text Multi-line', properties:{multiline:true}},\
					myButton: Button{text:'Button Name'},\
					myCheckbox: Checkbox{text:'Checkbox Name'},\
					myRadioButton: RadioButton{text:'RadioButton Name'},\
					myDropDownList: DropDownList{properties:{items:['Item 1 Name', 'Item 2 Name', 'Item 3 Name', 'Item 4 Name']}},\
					myListBox: ListBox{properties:{items:['Item 1 Name', 'Item 2 Name', 'Item 3 Name', 'Item 4 Name']}},\
					myGroup: Group{orientation:'row', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
						myGroupItem1: Button{text:'Hi'},\
						myGroupItem2: Button{text:'Hello'},\
						myGroupItem3: Button{text:'Goodbye'},\
					},\
				},\
				grp2: Group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
					myPanel: Panel{text:'Panel Name', orientation:'column', alignment:['fill', 'top'], alignChildren:['right', 'top'],\
						myPanelItem1: Button{text:'One'},\
						myPanelItem2: Button{text:'Two'},\
						myPanelItem3: Button{text:'Three'},\
					},\
					myTabbedPanel: Panel{type:'tabbedpanel', text:'Tabbed Panel Name', orientation:'column', alignment:['fill', 'top'], alignChildren:['right', 'fill'],\
						myTab1: Panel{type:'tab', text:'Tab 1', orientation:'column', alignChildren:['right', 'center'],\
							aButton1: Button{text:'Button1'},\
						},\
						myTab2: Panel{type:'tab', text:'Tab 2', orientation:'column', alignChildren:['left', 'center'],\
							aButton2: Button{text:'Button2'},\
						},\
					},\
					myProgressBar: Progressbar{text:'Progressbar Name', minvalue:0, maxvalue:100, value:50, alignment:['fill', 'top']},\
				},\
			}";
 
			myPanel.grp = myPanel.add(res);
	 
			//Assign control variables
			var text = myPanel.grp.grp1.myStaticText;
			var button = myPanel.grp.grp1.myButton;
			var list = myPanel.grp.grp1.myListBox;
			var dropdown = myPanel.grp.grp1.myDropDownList;
			var edittextMultiline = myPanel.grp.grp1.myEditTextML;

			//Colorize text
			var w = myPanel.graphics;
			var green = w.newPen(w.BrushType.SOLID_COLOR, [0, 1, 0], 1);
			text.foregroundColor = green;
			
			//Assign onClick functionality to myButton UI element
			button.onClick = function(){
				alert(myPanel.grp.grp1.myListBox.items.length);
			}
		
			//Assign onChange functionality to myListBox UI element
			list.onChange = function(){
				alert("List index# " + this.selection.index + " = " + this.selection.text);
			}
		
			//Assign default dropdown selection
			dropdown.selection = 2;

			//Assign the preferred size box of the multiline edittext element
			edittextMultiline.preferredSize = [-1, 200];
			
			//Define GUI panel settings
			myPanel.layout.layout(true);
			myPanel.grp.minimumSize = myPanel.grp.size;
			myPanel.layout.resize();
			myPanel.onResizing = myPanel.onResize = function () {this.layout.resize();}
		}
		return myPanel;
		
	}

	//Check to see if script should be floating window instead of dockable
	var myScriptPal = myScript_buildUI(thisObj);
	if ((myScriptPal != null) && (myScriptPal instanceof Window)) {
		myScriptPal.center();
		myScriptPal.show();
		}
	}
	myScript(this);
}

Source Code:

function showHideControls(controlAry, showHide){
	try{
		for(var i = 0; i < controlAry.length; i++){
			if(showHide == "Show"){
				controlAry[i].visible = true;
			}else if(showHide == "Hide"){
				controlAry[i].visible = false;
			}
		}
	}catch(err){alert("showHideControls()\n"+err.toString());};
}