Nested Table example using CXP

Message

#1 Post by **rdonnay** » Wed Nov 12, 2014 5:31 pm

Here is a sample program that uses 20 nested tables to create a visual gradient on the screen.
It is done by changing the background color to a lighter shade for each nested table.
There are 2 programming methods being shown here. One uses DC* commands and Parent/Child relationships.
The other uses HTML tags and recursion.

Click here to run the sample program that uses DC* commands :

http://donnay-software.com/ds/tabletest.cxp

Here is the source code. It resides in 2 files:

TABLETEST.CXP:

Code: Select all

<%#Code locality="page-render"%>

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
   <link rel="stylesheet" type="text/css" href="donnay.css" />
</head>

<body>

@RenderGradientTables(self)

</body>
</html>

<%#Code locality="page-global"%>

FUNCTION RenderGradientTables( self )

FOR j := 1 TO 3
  FOR i := 1 TO 200 STEP 16
    IF j = 1
      aColor := { i+10, 0, 0 }
    ELSEIF j = 2
      aColor := { 0, i+10, 0 }
    ELSE
      aColor := { 0, 0, i+10 }
    ENDIF
    ::renderPage('.\TableGradient.cxp', 10, aColor )
  NEXT
NEXT

RETURN nil

TABLEGRADIENT.CXP :

Code: Select all

<%#Code locality="page-global"%>
<%
#include 'dcdialog.ch'
#include 'dccxp.ch'
%>

<%#Code locality="page-render"%>

<%

aColor := PValue(2)
nTableSize := PValue(1)

GetList := {}

aTable := Array(nTableSize)
aTD := Array(nTableSize)

FOR i := 2 TO Len(aTable)

  aColor[1] += 5
  aColor[2] += 5
  aColor[3] += 5
  cColor := DC_XbpToHtmlColor(aColor)

  @ 1,1 DCTABLE OBJECT aTable[i] ROWS 1 COLUMNS 1 PARENT aTD[i-1] ;
        STYLE "border-width: 0px; width: 100%; border-collapse: collapse" ;
        TDSTYLE "padding: 10px; text-align: center; color: #FFFFFF; background-color: " + cColor

  @ 1,1 DCHTML IIF(i==Len(aTable),'This is a set of nested tables. Click on View Source!','') ;
        OBJECT aTD[i] PARENT aTable[i]

NEXT

DCREAD HTML TO cHtml

? cHtml

%>

Click here to run the sample program that uses HTML <table>, <tr> <td> tags :

http://donnay-software.com/ds/tabletest2.cxp

Here is the source code. It resides in 2 files:

TABLETEST2.CXP

Code: Select all

<%#Code locality="page-render"%>

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
   <link rel="stylesheet" type="text/css" href="donnay.css" />
</head>

<body>

<%

RenderGradientTables(self)

%>

</body>

</html>

<%#Code locality="page-global"%>

STATIC FUNCTION RenderGradientTables( self )

FOR j := 1 TO 3
  FOR i := 1 TO 20 STEP 20
    IF j = 1
      aColor := { i+20, 0, 0 }
    ELSEIF j = 2
      aColor := { 0, i+20, 0 }
    ELSE
      aColor := { 0, 0, i+20 }
    ENDIF
    ::renderPage('.\TableGradient2.cxp', 1, aColor )
  NEXT
NEXT

RETURN nil

TABLEGRADIENT2.CXP:

Code: Select all

<%#Code locality="page-render"%>

<%

nLevel := PValue(1)
aColor := PValue(2)

IF nLevel > 20
  RETURN nil
ENDIF

aColor[1] += 5
aColor[2] += 5
aColor[3] += 5
cColor := DC_XbpToHtmlColor(aColor)

%>

@(Space(nLevel+1))<table style="border-width: 0px; width: 100%; border-collapse: collapse">
@(Space(nLevel+2))<tr>
@(Space(nLevel+3))<td STYLE="padding: 10px; text-align: center; color: #FFFFFF; background-color: @(cColor)" >

@IF nLevel+1 > 20
  This is a set of nested tables. Click on View Source!
@ENDIF

@::renderPage('.\TableGradient2.cxp', ++nLevel, aColor )

@(Space(nLevel+3))</td>
@(Space(nLevel+2))</tr>
@(Space(nLevel+1))</table>