Beautify your tables views with CSS
Genhtml.prg was the first VFP code to build an html table from any table/cursor.this have no colors,no great style (css dont known in this period).
the web table is built with markers. : <table>,<tr>,<td>...
This small code can build an html web view of any table using CSS web technology.
i chose the customer vfp table (located in samples\data) but you cando it with the mechanism of select statement
use any table,selecting fields you want to do the same goal.the code is independent of the table, simple change the cusor in form.load.
i made 5 styles in the demo.you can extend to any style you want (google there is tons of css tables and even css generators online)..
I used the vfp IE browser (emulated ie11) for this purpose.
select the code,CTRL+C, paste into a prg file and then run.
See the 5 demo styles produced by the code in the screenshots below.
*1*
*Begin code
Publi yform
yform=Newobject("ycsstable")
yform.Show
Read Events
*
Define Class ycsstable As Form
Height = 479
Width = 814
ShowWindow = 2
AutoCenter = .T.
Caption = "Beautify vfp Tables with CSS"
Name = "Form1"
Add Object olecontrol1 As OleControl With ;
Oleclass="Shell.explorer.2",;
Top = 0, ;
Left = 0, ;
Height = 480, ;
Width = 816, ;
Anchor = 15, ;
Name = "Olecontrol1"
Procedure ybuild
Lparameters xstyle
If Pcount()=0
xstyle=1
Endi
*set styles can add any style colors (or customize fontname,fontsize dimensiosn in CSS)
With Thisform
Do Case
Case xstyle=1 &&default style fired if not 2,3,4,5
.ycolor1="#d3e9ff" &&hover TD color
.ycolor2="#aad4ff" &&TD background color
.ycolor3="#000000" &&TD forecolor
.ycolor4="#0057af" &&tr:first-child td color
.ycolor5="#ffffff" &&t:first forecolor
.yfontsize="10" &&fontsize
Case xstyle=2
.ycolor1="#DEB887" &&hover TD color
.ycolor2="#FFE4C4" &&TD background color
.ycolor3="#8B0000" &&TD forecolor
.ycolor4="#4B0082" &&tr:first-child td color
.ycolor5="#FFF8DC" &&t:first forecolor
.yfontsize="12" &&fontsize
Case xstyle=3
.ycolor1="#228B22" &&hover TD color
.ycolor2="#FFEBCD" &&TD background color
.ycolor3="#800080" &&TD forecolor
.ycolor4="#AFEEEE" &&tr:first-child td color
.ycolor5="#B22222" &&t:first forecolor
.yfontsize="12" &&fontsize
Case xstyle=4
.ycolor1="#DCDCDC" &&hover TD color
.ycolor2="#F0CECE" &&TD background color
.ycolor3="#4B0082" &&TD forecolor
.ycolor4="#0000FF" &&tr:first-child td color
.ycolor5="#FFE4C4" &&t:first forecolor
.yfontsize="10" &&fontsize
Case xstyle=5
.ycolor1="#FFF3B2" &&hover TD color
.ycolor2="#EFD9A1" &&TD background color
.ycolor3="#00008B" &&TD forecolor
.ycolor4="#8B0000" &&tr:first-child td color
.ycolor5="#FFEBCD" &&t:first forecolor
.yfontsize="11" &&fontsize
Endcase
Endwith
*build the html table with style set.
Local m.xx,m.cr
m.cr=Chr(13)
TEXT to m.xx noshow
<div class="CSSTable" >
<table >
<tr>
ENDTEXT
For i=1 To Fcount()
m.xx=m.xx+"<td>"+Allt(Field(i))+"</td>"
Endfor
m.xx=m.xx+"</tr>"+cr
Scan
m.xx=m.xx+"<tr>"
For i=1 To Fcount()
m.xx=m.xx+"<td>"+Trans(Eval(Allt(Field(i))))+"</td>"
Endfor
m.xx=m.xx+"</tr>"+cr
Endscan
m.xx=m.xx+"</table>"+cr+"</div>"
Local m.myvar
TEXT to m.myvar textmerge noshow
<style>
.CSSTable {
margin:0px;padding:0px;
width:50%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #ffffff;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTable table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:25%;
margin:0px;padding:0px;
}.CSSTable tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTable table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTable table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTable tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTable tr:hover td{
background-color:<<thisform.ycolor1>>;
}
.CSSTable td{
vertical-align:middle;
background-color:<<thisform.ycolor2>>;
border:1px solid #ffffff;
border-width:0px 1px 1px 0px;
text-align:left;
padding:5px;
font-size:<<thisform.yfontsize>>px;
font-family:Arial;
font-weight:normal;
color:<<thisform.ycolor3>>;
}.CSSTable tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTable tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTable tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTable tr:first-child td{
background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af"); background: -o-linear-gradient(top,#0057af,0057af);
background-color:<<thisform.ycolor4>>;
border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:<<thisform.ycolor5>>;
}
.CSSTable tr:first-child:hover td{
background:-o-linear-gradient(bottom, #0057af 5%, #0057af 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0057af), color-stop(1, #0057af) );
background:-moz-linear-gradient( center top, #0057af 5%, #0057af 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0057af", endColorstr="#0057af"); background: -o-linear-gradient(top,#0057af,0057af);
background-color:#0057af;
}
.CSSTable tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTable tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
<<m.xx>>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"ycss_table1.html"
Strtofile(m.myvar, m.lcdest)
Thisform.olecontrol1.Navigate(m.lcdest)
Endproc
Procedure Init
Sele ycurs
Thisform.Caption=Thisform.Caption+" : "+_Screen.ytable+" [Records="+Trans(Reccount())+']'
Local m.xstyle
m.xstyle=Inputbox("Choce a style :1-2-3-4-5","","1")
m.xstyle=Val(m.xstyle)
If !Inlist(m.xstyle,1,2,3,4,5)
m.xstyle=1
Endi
With Thisform
.AddProperty("ycolor1","#d3e9ff") &&hover TD color
.AddProperty("ycolor2","#aad4ff") &&TD background color
.AddProperty("ycolor3","#000000") &&TD forecolor
.AddProperty("ycolor4","#0057af") &&tr:first-child td color
.AddProperty("ycolor5","#ffffff") &&t:first forecolor.....can add other here tocutomize css
.AddProperty("yfontsize","10")
Endwith
Thisform.ybuild(m.xstyle)
Endproc
Procedure Load
Close Data All
_Screen.AddProperty("ytable","Customer.dbf") &&for form caption only
Sele * From Home(1)+"samples\data\customer" Into Cursor ycurs
Endproc
Procedure Destroy
Try
Dele File Addbs(Sys(2023))+"ycss_table1.html"
Catch
Endtry
Close Data All
Set Safe On
Clea Events
Endproc
Procedure olecontrol1.Init
This.silent=.T.
Endproc
Enddefine
*
*End code
*can use td.padding as parameter to interact with the row height or use td.font-size to do same thing.
http://yousfi.over-blog.com/2015/02/vfp-and-internet-explorer-eventhandler.html
to fire the preview (uncomment for print)
#DEFINE OLECMDID_PRINT 6 && print
#DEFINE OLECMDID_PRINTPREVIEW 7 && print/preview
#DEFINE OLECMDEXECOPT_DODEFAULT 0
#DEFINE OLECMDEXECOPT_PROMPTUSER 1
try
local apIE
apIe=thisform.olecontrol1
with apIE
.ExecWB( OLECMDID_PRINTPREVIEW , 0) &&print preview
*.ExecWb( OLECMDID_PRINT,0) &&print
endwith
catch
endtry
-Issue CTRL+F to find any string
Click on code to select [then copy] -click outside to deselect
*2* use of genhtml.prg or _genhmtl public variable (shipped with vfp9).
local lcfile_source,lc_file_output
lcfile_source=home(1)+"samples\data\customer.dbf"
DO (_GENHTML) WITH "" ,m.lcfile_source ,2 &&can be 0,1,2,3,4,5 see foxhelp in Genhtml.prg
*this fires a dialogbox---choose an output html file...it saved and viewed the source table in navigator
*its an old style but using CSS can be as tables obove.
*syntax DO (_GENHTML) WITH [, ][,][,...
*see in help genhtml.prg
*its equivalent of save as html in vfp/file/menu.