Managing Servoy styles

Classic Servoy
1

Hello,

I have tried to clean up my styles (sort them by name, look for duplicates etc.) and found that this was painful. So I made a method that takes a whole style from the clipboard and returns it neatly sorted. If anyone makes changes/optimizations please post that here.

This lead me to the idea, that it would be really cool to be able to let the user manipulate the style. All we would need for that is a application.getStyle(stylename) and application.setStyle(stylename, style). It’d be acceptible in my eyes if making changes woul require a re-login, if such a call would have be done very early in the solution loading process. The method below allows for very simple storage in two tables (styles and style_elements). Actually, we have a table like that already for our own HTML styles. We also have an interface that allows to manipulate those, so all that is missing is application.setStyle(stylename, style).

If anyone else thinks that’d be helpful, I make it a feature request.

Enjoy and share improvements on whatever part of this!

2 
/*
// This method returns all styles that are provided through the clipboard
// and returns a proper Array with the form

[styleName][contentArray[propertyName][propertyValue]]

// This means, that you can loop over its length 
// if you want to loop over all styles in the styles sheet as

for (var i = 0; i < styleArray.length; i ++) {
	var style = styleArray[i];  // the style itself is an arry in the form [name][contentArray]
	var name = styleArray[i][0];  // this is the name of the style
	var contentArray = styleArray[i][1];  // now this is an array in the form [propertyName][propertyValue]
	for (var j = 0; j < contentArray.length; j ++) {  // a loop over the properties
		var propertyName = contentArray[j][0];  // get the name of the single property
		var propertyValue = contentArray[j][1];  // get the value of the single property
	}
}

*/

var vInput = application.getClipboardString();		// a copied style. Hopefully soone possible by application.getStyle(stylename)
var vSortedOutput = arguments[0];												// controls, wether the output is sorted or not
var vGetAsText = arguments[1];													// controls, if the result should be outputted
var vAddGroupingComment = arguments[2];        // controls, an entry like "// ****** tabpanel *****" will be added for each group if sorted is chosen

// DEFAULTS for use without arguments; remove if you want to call this method from elsewher
vSortedOutput = true;
vGetAsText = true;
vAddGroupingComment = true;

var vStylesArray = vInput.split('}'); // Array from the original input
var vResultArray = new Array();		  // Resulting array with the form [styleName][contentArray[propertyName][propertyValue]]

// The business
for ( var i = 0 ; i < vStylesArray.length ; i++ ) {
	var vStyle = vStylesArray[i];
	if (utils.stringTrim(vStyle)) {
		var vContentArray = vStyle.substr(vStyle.indexOf('{', 0) + 1).split(';');
		var vName = vStyle.substr(0, vStyle.indexOf('{', 0) + 1).split('\n');
		for ( var j = 0 ; j < vName.length ; j++ )
		{
			var test = utils.stringTrim(vName[j]).substr(0, 2);
			if (utils.stringTrim(vName[j]) && utils.stringTrim(vName[j]) != '{' && utils.stringTrim(vName[j]).substr(0, 2) != '\/\/') {
				vName = vName[j];
				break;
			}
		}
		
		// fill vResultArray
		if (vName && vContentArray) {
			var vLength = vResultArray.length;
			vResultArray[vLength] = new Array();
			vResultArray[vLength][0] = vName;
			// create and fill new content array
			var vResultContent = new Array();
			
			for ( var j = 0 ; j < vContentArray.length ; j++ )
			{
				if (utils.stringTrim(vContentArray[j])) {
					var vLengthContent = vResultContent.length;
					vResultContent[vLengthContent] = new Array();
					vResultContent[vLengthContent][0] = utils.stringTrim(vContentArray[j].split(':')[0]);
					vResultContent[vLengthContent][1] = utils.stringTrim(vContentArray[j].split(':')[1]);
					if (vSortedOutput) {
						vResultContent.sort();
					}
				}
			}
			vResultArray[vLength][1] = vResultContent;
		}
	}
}

if (vSortedOutput) {
	vResultArray.sort();
}

if (vGetAsText != false) {
	var vOutput = '';
	for ( var i = 0 ; i < vResultArray.length ; i++ )
	{
		if (vAddGroupingComment && (vSortedOutput != false) && vResultArray[i][0][0]) {
			var vHeader = vResultArray[i][0];
			vHeader = vHeader.substring(0, (vResultArray[i][0] + '.').indexOf('.', 0));
			if (vLastHeader != vHeader) {
				vOutput += '\/\/ ******************** ' + vHeader + ' ********************\n\n';
			}
			var vLastHeader = vHeader;
		}
		vOutput += vResultArray[i][0] + '\n{\n';
		var vContent = vResultArray[i][1];
		for ( var j = 0 ; j < vContent.length ; j++ )
		{
			vOutput += '\t' + vContent[j][0] + ': ' + vContent[j][1] + ';\n';
		}
		vOutput += '}\n\n';
	}
	application.output(vOutput);
}

return vResultArray;
3

Before using this, PLEASE TEST it before you loose your style and blame me!

4

One more remark: this method fails (maybe somebody els wants to fix this?) if you have something like

field {
   ...
}

instead of

field
{
   ...
}

And the Servoy CSS parser doesn’t seem to like these:

// ********** ABC **********
5

setStyle allready excist!

//Overrides one style (defined in in a form) with another
// for example overring the default ‘mystyle’ with the ‘mystyle_mac’
application.overrideStyle(‘mystyle’,‘mystyle_mace’)

6

Yes, but the style you use there has to be created inside Servoy (Developer). You cannot FILL the style at runtime. For example, you could not read a file containing the style’s definition and use that.

7

ah oke, now I understand.

yes, that would indeed be wonderfull!