Hello,
I would like to change the font color (the foreground color) for the selected color. I would like that the font color changes to white when you select a color.
Is this possible in the BGColorCalculation, or do you need to make a method somewhere else?
I’m not sure how to do this, can anyone help me?
Hi Eric,
With a rowBGcolor calculation you can set the background color. Such a calculation only works because it gets the Index and Selected argument from the rowBGcolor event.
Any other calculation doesn’t get any arguments about what row/index/etc they are in.
The only way to do this is to use a global field that is filled with the index/pk value of the record you select. This is filled by a onRecordSelection method.
And for the fields you need to use HTML_AREA fields that change the fontcolor (in HTML).
It’s a pain but I think it’s the only way to do it.
Hope this helps.
Exactly as Robert suggests. You can’t switch the foreground color of a field without using a calculation, a global variable and a method attached to the onRecordSelection event. Here is some specific coding to help you along.
1/ Method:
//set selected record to current record ID
globals.DCT_rec_row_selected = id_dictionary;
2/ Calculation field (need to do one for each field in the list). Notice that since you are using html to change the font color, I replace blank spaces with the html non-breaking space character. Here I am also setting the text to bold as well as white for the selected row. Put this calc field on your list and set the display type to html_area. You don’t need the spacer image I am using here (I use it to control indentation).
if (dct_name) {
if (globals.DCT_rec_row_selected == id_dictionary)
{
return '<html><table><tr><td valign="bottom">' +
'<img src= "media:///spacer.gif" width="2" height="15"></img></td>' +
'<td valign="top"><font size="2" face="Verdana" color="ffffff"><b>' +
dct_name.replace(/ /g, ' ') +
'</b></font></td></tr></table></html>';
}
else
{
return '<html><table><tr><td valign="bottom">' +
'<img src= "media:///spacer.gif" width="2" height="15"></img></td>' +
'<td valign="top"><font size="2" face="Verdana" color="000000">' +
dct_name.replace(/ /g, ' ') +
'</font></td></tr></table></html>';
}
}
//return 1;
In the right situation, well worth the effort for the extra pizzazz it adds to list/table views!
Very nice!
Hello David
Your screenshot looks very nice (as iTunes) and I am also trying to make my app look like this. Unfortunatly I don’t fully understand your solution and could not bring it to work. Where (when) is id_dictionary set? And where is dct_name set? If one doesn’t replace space with non-breaking space it doesn’ seem to be necessary?
Is your described action in addition to the normal background color setting?
I only have a calculation field named highlightSelectedRow with this content and set as dataprovider for property rowBGColorCalculation:
var selectedRow = arguments[1];
if (selectedRow == true)
{
return '#b5d5ff';
};
This works for a light blue background of the selected record, but I would like to make it as in your example. BTW, your blue background is an image, I assume?
Thanks a lot for help, Robert
david:
Exactly as Robert suggests. You can’t switch the foreground color of a field without using a calculation, a global variable and a method attached to the onRecordSelection event. Here is some specific coding to help you along.1/ Method:
//set selected record to current record ID
globals.DCT_rec_row_selected = id_dictionary;
2/ Calculation field (need to do one for each field in the list). Notice that since you are using html to change the font color, I replace blank spaces with the html non-breaking space character. Here I am also setting the text to bold as well as white for the selected row. Put this calc field on your list and set the display type to html_area. You don't need the spacer image I am using here (I use it to control indentation).if (dct_name) {
if (globals.DCT_rec_row_selected == id_dictionary)
{
return '<html><table><tr><td valign="bottom">' +
'<img src= "media:///spacer.gif" width="2" height="15"></img></td>' +
'<td valign="top"><font size="2" face="Verdana" color="ffffff"><b>' +
dct_name.replace(/ /g, ' ') +
'</b></font></td></tr></table></html>';
}
else
{
return '<html><table><tr><td valign="bottom">' +
'<img src= "media:///spacer.gif" width="2" height="15"></img></td>' +
'<td valign="top"><font size="2" face="Verdana" color="000000">' +
dct_name.replace(/ /g, ' ') +
'</font></td></tr></table></html>';
}
}
//return 1;
In the right situation, well worth the effort for the extra pizzazz it adds to list/table views! 
Your downfall at the moment is assuming that you use the property “rowBGColorCalculation” to make this technique work. Forget that. As Robert explained above, you can’t retrieve the necessary arguments to tell which row you are on with any calculation other than the one assigned to this property.
So you have to do the “telling” yourself. You do this by storing the currently selected pk value in a global. (Refer to my first method. Run this method when a row is clicked which will store the clicked record pk value in the global.)
Now you can create a calculation that compares the pk value of a record to what is stored in the global field. If they match, do something like flip the typeface color – if they don’t match, do something else. This calculation is the field that you display then, not the original column.
In the second code example I gave you, the column “dct_name” contains the data I want to display. Which means the calculation is on the list layout, not dct_name (so you won’t be using this list layout for data entry). Since I am using html to display the value that is in dct_name (html is the only way you can change a font color on one record in a list and not another) I have to manipulate the value in dct_name a bit to display correctly with html tags around it. This means replacing spaces in dct_name with non-breaking spaces ( ) or else a space will not appear between words. (I suppose it would be better use encode instead…something like “encode(dct_name)” which would html encode all non alphanumeric characters. Um, will test out.)
In this way, you can to some pretty crazy dynamic graphic manipulations in Servoy list views as well by loading graphics stored in Servoy’s media library into a calculation. For example, I am highlighting the selected row background with an image in a calculation field placed across the entire list row. The image is one pixel wide so it loads fast and I let the html width property stretch it across. Why do I use an image? Because it is the only way to display a gradient. You can only use solid colors with the background calculation method. Here is the code for using images in a calculation:
if (globals.nav_row_selected == id_nav_items) {
return '<html><img src= "media:///row_selected.png" width=200 height=20></html>'
}
else {
return null;
}
//return 1;
Using this technique, you can display all kinds of graphics on rows in list view depending on the state of a particular row. In these screen shots the triangle is visible or hidden, and expands and collapses depending on whether or not a row has sub rows and whether or not they are showing (this one is an interesting calculation to be sure). And for the final touch I display an arrow on the currently selected record. (FYI: it takes a number overlapping calc fields to make this all happen!)
As to the background question, yes this is an image and all the fields on the list are transparent to let the image show through. Unfortunately, it’s not as easy as just putting a background image on the body part of a list view when you are showing the list in a tab panel. What if the list doesn’t have enough records to fill up the tab panel viewable space? You get a gap of blank space at the end of the list which you can’t assign a background image to. This is a whole other issue which I can address if you want.
So a bit beyond using the rowbackground calculation but quite useful to have in your repertoire if you want to display different stuff on records in list view based on the state of the record. For example, you could show a list of invoices and have the ones that are past due have a background or a font of red. The possibilities are endless.
Hope this helps.
One other tidbit since you are doing the iTunes thing. Here is the backgroundrow calculation to display the colors iTunes uses for rows in list view:
var index = arguments[0];
var selected = arguments[1];
if (selected)
{
return '#3D80DF';
}
else
{
if (index % 2 == 0)
{
return '#EDF3FE';
}
else
{
return '#ffffff';
}
}
Gives you the alternating colors of light blue and white and the dark blue color for the selected record.
Hello David
Thanks a lot for your description! Now I got it and it works! I made the wrong assumption as you correctly pointed to.
I also tried to put the image in the normal rowBGColorCalculation calculation and although it displays the 1px background image, it’s not displayed in the background so it really doesn’t work, what a pity.
I could not find out about the interaction between style settings and HTML settings, for example font, size, alignment. Are all styles fully valid when using HTML and a HTML_AERA field? Who overrides who if for example the font is set in styles and in HTML as well?
Your example looks very nice. How did you make the engraved font in the Column header?
I also noticed, as you mention, a gap of blank space at the end of the list which one can’t assign a background image to. I would like to come back later when I am starting to do finishing touches but I am still many many months away from that. And may be till then Servoy gives more support for these standard problems, which would be very welcome because all this stuff gives so much more code, calculations etc. to an application and has nothing to do (in its basic form) with business logic.
Again, thanks a lot David and best regards, Robert
david:
Your downfall at the moment is assuming that you use the property “rowBGColorCalculation” to make this technique work. Forget that. As Robert explained above, you can’t retrieve the necessary arguments to tell which row you are on with any calculation other than the one assigned to this property.So you have to do the “telling” yourself. You do this by storing the currently selected pk value in a global. (Refer to my first method. Run this method when a row is clicked which will store the clicked record pk value in the global.)
Now you can create a calculation that compares the pk value of a record to what is stored in the global field. If they match, do something like flip the typeface color – if they don’t match, do something else. This calculation is the field that you display then, not the original column.
In the second code example I gave you, the column “dct_name” contains the data I want to display. Which means the calculation is on the list layout, not dct_name (so you won’t be using this list layout for data entry). Since I am using html to display the value that is in dct_name (html is the only way you can change a font color on one record in a list and not another) I have to manipulate the value in dct_name a bit to display correctly with html tags around it. This means replacing spaces in dct_name with non-breaking spaces ( ) or else a space will not appear between words. (I suppose it would be better use encode instead…something like “encode(dct_name)” which would html encode all non alphanumeric characters. Um, will test out.)
In this way, you can to some pretty crazy dynamic graphic manipulations in Servoy list views as well by loading graphics stored in Servoy’s media library into a calculation. For example, I am highlighting the selected row background with an image in a calculation field placed across the entire list row. The image is one pixel wide so it loads fast and I let the html width property stretch it across. Why do I use an image? Because it is the only way to display a gradient. You can only use solid colors with the background calculation method. Here is the code for using images in a calculation:
if (globals.nav_row_selected == id_nav_items) {
return '<html><img src= "media:///row_selected.png" width=200 height=20></html>'
}
else {
return null;
}
//return 1;
Using this technique, you can display all kinds of graphics on rows in list view depending on the state of a particular row. In these screen shots the triangle is visible or hidden, and expands and collapses depending on whether or not a row has sub rows and whether or not they are showing (this one is an interesting calculation to be sure). And for the final touch I display an arrow on the currently selected record. (FYI: it takes a number overlapping calc fields to make this all happen!) As to the background question, yes this is an image and all the fields on the list are transparent to let the image show through. Unfortunately, it's not as easy as just putting a background image on the body part of a list view when you are showing the list in a tab panel. What if the list doesn't have enough records to fill up the tab panel viewable space? You get a gap of blank space at the end of the list which you can't assign a background image to. This is a whole other issue which I can address if you want. So a bit beyond using the rowbackground calculation but quite useful to have in your repertoire if you want to display different stuff on records in list view based on the state of the record. For example, you could show a list of invoices and have the ones that are past due have a background or a font of red. The possibilities are endless. Hope this helps.
Hi David
Thanks for the code, it helps to see one has done at least a little piece of code right. I also measured and use the same color values!
Best regards, Robert
david:
One other tidbit since you are doing the iTunes thing. Here is the backgroundrow calculation to display the colors iTunes uses for rows in list view:var index = arguments[0];
var selected = arguments[1];
if (selected)
{
return ‘#3D80DF’;
}
else
{
if (index % 2 == 0)
{
return ‘#EDF3FE’;
}
else
{
return ‘#ffffff’;
}
}
Gives you the alternating colors of light blue and white and the dark blue color for the selected record.
I could not find out about the interaction between style settings and HTML settings, for example font, size, alignment. Are all styles fully valid when using HTML and a HTML_AERA field? Who overrides who if for example the font is set in styles and in HTML as well?
I am not sure on this one. I would assume standard html rules apply though.
Your example looks very nice. How did you make the engraved font in the Column header?
Two labels with the same text but different color offset by 1px. Looks like crap though on PCs as font smoothing is handled differently on that platform in Java.
I also noticed, as you mention, a gap of blank space at the end of the list which one can’t assign a background image to.
It would be neat if Servoy’s tab panel could be made transparent. Then you could put the image behind the tab panel and it would show through the record gap that way. But you can’t so when the form shows up I shorten the y axis of the tab panel to match the amount of rows showing and this then will reveal the background image behind the tab panel.
I would like to come back later when I am starting to do finishing touches but I am still many many months away from that. And may be till then Servoy gives more support for these standard problems, which would be very welcome because all this stuff gives so much more code, calculations etc. to an application and has nothing to do (in its basic form) with business logic.
Servoy gives you all the support you need. That’s why the technique I describe here works. It is not a work around! Events, runtime modifiable properties, extensive graphic support, display with html, etc are all tools at your disposal. It’s your expectation that GUI coding should be less work than business logic that is off. Coding an iTunes level GUI takes far more coding skills than business logic does in most languages I am familiar with and Servoy is no exception.
For example, I don’t expect that I’ll use recursive calculations and methods anytime soon solving a business logic problem. However, it is the only way to allow for the possibility of unlimited nesting of sub records in a navigation list.
The cool part is that once you can code a good GUI, business logic coding won’t be a problem at all
Hi David
As I came a bit further in development, I would like to ask you if you would share your knowledge/code in how you programmed the part with sub rows and associated triangles on the left side of the window as I can see in your image of the application? Do you also use tabs within your application? iTunes dowsn’t, but this is a very specialized application for music, so may be it’s not entirely comparable with a more general purpose app.
Best regards, Robert
david:
I could not find out about the interaction between style settings and HTML settings, for example font, size, alignment. Are all styles fully valid when using HTML and a HTML_AERA field? Who overrides who if for example the font is set in styles and in HTML as well?
I am not sure on this one. I would assume standard html rules apply though.
Your example looks very nice. How did you make the engraved font in the Column header?
Two labels with the same text but different color offset by 1px. Looks like crap though on PCs as font smoothing is handled differently on that platform in Java.
I also noticed, as you mention, a gap of blank space at the end of the list which one can’t assign a background image to.
It would be neat if Servoy’s tab panel could be made transparent. Then you could put the image behind the tab panel and it would show through the record gap that way. But you can’t so when the form shows up I shorten the y axis of the tab panel to match the amount of rows showing and this then will reveal the background image behind the tab panel.
I would like to come back later when I am starting to do finishing touches but I am still many many months away from that. And may be till then Servoy gives more support for these standard problems, which would be very welcome because all this stuff gives so much more code, calculations etc. to an application and has nothing to do (in its basic form) with business logic.
Servoy gives you all the support you need. That’s why the technique I describe here works. It is not a work around! Events, runtime modifiable properties, extensive graphic support, display with html, etc are all tools at your disposal. It’s your expectation that GUI coding should be less work than business logic that is off. Coding an iTunes level GUI takes far more coding skills than business logic does in most languages I am familiar with and Servoy is no exception.
For example, I don’t expect that I’ll use recursive calculations and methods anytime soon solving a business logic problem. However, it is the only way to allow for the possibility of unlimited nesting of sub records in a navigation list.
The cool part is that once you can code a good GUI, business logic coding won’t be a problem at all
Robert Huber:
Hi DavidAs I came a bit further in development, I would like to ask you if you would share your knowledge/code in how you programmed the part with sub rows and associated triangles on the left side of the window as I can see in your image of the application? Do you also use tabs within your application? iTunes dowsn’t, but this is a very specialized application for music, so may be it’s not entirely comparable with a more general purpose app.
Best regards, Robert
If it was an easy thing to explain, I would. I will cover this and many other UI techniques in a day long training class the day after Servoy World 2006 in Boston (User Interface Programming in Servoy). Attendees will walk away with a LOT of code. You can register here:
http://www.servoy.com/servoyworld/registration.jsp
A couple of screen shots of our development template in your style is in this Servoy Magazine article. There are so many tab panels in one screen that you would never be able to guess how many without going into design mode (I think there are close to 15 forms making up the first screen shot). Of course we are not using the default tab look:
http://www.servoymagazine.com/home/2006 … nagin.html
So yes, we use tabs
Hi David
Thanks for your info. I am not sure if I can join Servoy World 2006. Will you offer your document (binder) and may be asociated examples to other developers, for a fee?
Best regards, Robert
david:
Robert Huber:
Hi DavidAs I came a bit further in development, I would like to ask you if you would share your knowledge/code in how you programmed the part with sub rows and associated triangles on the left side of the window as I can see in your image of the application? Do you also use tabs within your application? iTunes dowsn’t, but this is a very specialized application for music, so may be it’s not entirely comparable with a more general purpose app.
Best regards, Robert
If it was an easy thing to explain, I would. I will cover this and many other UI techniques in a day long training class the day after Servoy World 2006 in Boston (User Interface Programming in Servoy). Attendees will walk away with a LOT of code. You can register here:
http://www.servoy.com/servoyworld/registration.jsp
A couple of screen shots of our development template in your style is in this Servoy Magazine article. There are so many tab panels in one screen that you would never be able to guess how many without going into design mode (I think there are close to 15 forms making up the first screen shot). Of course we are not using the default tab look:
http://www.servoymagazine.com/home/2006 … nagin.html
So yes, we use tabs
I wish I could say otherwise but I have no idea. We’re just focusing on getting to that point right now!
Thanks David, I understand your point, it’s always a lot of work. All I can say is that I am interested in - the earlier the better
And thanks again for your help in the forum!
Best regards, Robert
david:
I wish I could say otherwise but I have no idea. We’re just focusing on getting to that point right now!
Hello,
Since I won’t be attending Servoy World either, I’d just like to add another vote for a “GUI Jump Start” kit, even if it’s not as organized as you would like.
Regards,
Sean
On a related note, I notice that if I use the “selected” parameter in my RowBGColor calc to set the selected line color to yellow, Servoy is changing the color of the text in that line to white (see image below) which works fine if the selected line color is a dark enough color, but if it’s yellow as in the example below it ends up hiding the text.
This is in a table view. I’m aware that this doesn’t happen in List view - the text stays black in List view - but I prefer to work with table views whenever possible.
Is there some way around this other than switching to List view?
I don’t have Servoy running so this is not a ‘scientific’ answer but can’t you change the foreground color to, let’s say, black?
I tried that - it still switches to white when the row is selected.
That probabley means that Servoy uses the System settings.
You might be able to test that by changing the System highlight color to a very light color and see what the system does to the foreground color.
When that color becomes darker and the same color appears in Servoy i’d say that this is some sort of bug…