Alternating row styles & colors using VFP scripting

Topics: Developer Forum
Feb 26, 2011 at 4:22 AM
Edited Feb 26, 2011 at 4:24 AM

In my previous post on cascading style sheets, I showed a default.aspx page with various CSS styles to click.

Now most of those styles came with unique colors for odd and even rows in a table, so I manually inserted
the CSS class "odd" to achieve that effect.  Here's the CSS stylesheet code that sets the colors of the alternating rows

tbody tr        {  background: #dfedf3;  font-size: 13px; }
tbody tr.odd {  background: #F0FFFF; }

And here's what the HTML output looks like

*****                             Name                            Address                              Phone           

  <tr class='odd'> && odd row (1)
      <td>Antonio Moreno Taquerías </td><td>Mataderos </td> <td>(5) 555-3932</td>
  </tr>                   
  <tr >                  && even row (2)
     <td>Around the Baker</td> <td>120 Hanover Sq.</td><td>(71) 555-7788</td>
  </tr>
  <tr class='odd'> && odd row (3)
     <td>Berglunds </td>          <td>Berguvsvägen 8;</td> <td>0921-12 34 65</td>
   </tr>
   <tr >                && even row (4)
     <td>Blauer See Delikatessenz</td><td>Forsterstr. 57</td><td>0621-08460&nbsp;</td>
   </tr>

So the next logical thing to do was to allow you to code the alternating row colors dynamically.
Here's a solution for that using VFP scripting.  The code replaces the main body table in vfpscript.htm

<!-- Body Table -->
<table border=1 width="100%" style="border-collapse:collapse" cellpadding="0" cellspacing="0">
<!-- Header -->
<tr>
  <th>Company</th>
  <th>Address</th>
  <th>Phone</th>
</tr>
<!-- Detail -->
<% j = 0 %>
<% SCAN %>
% j = j + 1 %>
<tr <%= IIF(MOD(j,2)=0,[class='odd'],[]) %>>     <!-- Here's where the action happens -->
    <td><%= TRIM( tCursor.Company ) %>&nbsp;</td>
    <td><%= IIF(EMPTY( tCursor.Address ),[<br>],TRIM( tCursor.Address )) %>&nbsp;</td>
    <td><%= IIF(EMPTY( tCursor.Phone ),[<br>],   TRIM( tCursor.Phone )) %>   &nbsp;</td>
</tr>
<% ENDSCAN %>
</table> <!-- Body Table -->

Note: in case you are wondering what &nbsp; is, it's a non-breaking space explained here

Coordinator
Feb 26, 2011 at 9:55 AM

Thanks.  You can also do this in the HTMLtable method like so:

lcHTMLout= oHTML.htmlTable('customers',lcHTMLout,10,5,'#E5E5E5',.F.;
        ,VAL(oRequest.querystring("page")),oRequest.querystring("nav"))

where the '#E5E5E5' specifies the color of the alternating row.

Feb 26, 2011 at 4:37 PM
Edited Feb 26, 2011 at 4:38 PM

Yes, Claude.   Both solutions are useful.   If you need to change the style of a row beyond changing the color, then
this new method would be good.  For instance, to change the color of the text when the mouse hovers over it.  

Question for you: I want to make a selected CSS stylesheet carry over from one webpage to the next.

How can we do that?   Do we create a new oSession.VALUE object that is seen by each new page?   What do you
recommend?

Coordinator
Feb 26, 2011 at 6:27 PM
Edited Feb 26, 2011 at 7:06 PM

>>Question for you: I want to make a selected CSS stylesheet carry over from one webpage to the next.
>>How can we do that?   Do we create a new oSession.VALUE object that is seen by each new page?   What do you
recommend?

You can try with the oSession as a quick and dirty solution. 

However, like I said in the other thread, the way to do this to accommodate the most possibilities is like WordPress does it with themes (this is the way I'll do it unless someone else does or comes up with a better idea):

Here's how WordPress applies CSS to the whole web site (and, yes, this would have to be redone from PHP to VFP - I never said it would be a piece of cake!!):

http://codex.wordpress.org/Theme_Development

Here's an example of the WordPress Theme management panel (you just pick out the theme you want for the whole site - 1 click!):

Coordinator
Mar 6, 2011 at 3:58 PM
Question for you: I want to make a selected CSS stylesheet carry over from one webpage to the next.

How can we do that?   Do we create a new oSession.VALUE object that is seen by each new page?   What do you
recommend?

Yes, you were right about using the Session object if you want to dynamically change these style sheets. 

I went ahead and tested the solution and it worked.  Here's what I did:

     1.)  In the Header.htm, add the following to the stylesheet section

<%=IIF(!ISNULL(oSession.VALUE("style")),[<link rel="stylesheet" id="style1" href="http://raround.com/survey/css/]+oSession.VALUE("style")+[.css" type="text/css" media="screen" />],[])%>

     2.)   Also in the Header.htm, change your JavaScript to do the following:

<SCRIPT LANGUAGE="JavaScript"><!--
function changeStyle(url)
{
location.href= '/survey/default.aspx?stylesheet='+url;
}

3.)Put this at the top of main.prg:

***********************************
* Mainline entry point of the app
***********************************
LOCAL lchtmlfile,lchtmlout
AVFPinit() && set data and HTML paths
* process the request from the URL
oProp.Action=oRequest.querystring("action")
IF !ISNULL(oRequest.querystring("stylesheet"))
   oSession.VALUE("style",oRequest.querystring("stylesheet"))
ENDIF

4.) Put this at the top of each HTML page:
<%= include("header.htm") %>


* Of course, if you didn't want to change these dynamically, you could just put your one chosen style in the header.htm and be done..

Mar 7, 2011 at 6:59 PM

Wow.   A major capability enabled by four lines of code in the HTML template.   That's elegant!  Thanks.