Getting AVFP in Step with Cascading Style Sheets

Topics: Developer Forum
Feb 23, 2011 at 2:45 PM
Edited Feb 24, 2011 at 3:30 AM

Learning AVFP requires a mastery of other knowledge domains such as:

Visual Foxpro (a given)
HTML
Cascading Style Sheets ( CSS )
and a little bit of Javascript

Each one of these is a learning challenge to itself.   But in the last year or two I've made great personal
progress with the help of W3Schools.    The site contains great tutorials and Try It Yourself sandboxes
to play in.  They also have some quizes to test your knowledge.   Great stuff.

Now, if you're trying to impress clients (and yourself) with AVFP, the appearance of your websites makes
a huge difference.  And this is where familiarity with CSS is essential.

CSS basically allows you to separate your HTML structure and content from the appearance of that content.

And one of the beauties of the web is that design is totally open.  If someone designs a site that you think
is super cool, you can learn exactly how they did it by viewing all the HTML, stylesheets and javascripts that they
used and adapting (not copying) their techniques to your unique designs.  Often, the toughest challenge here is
merely figuring out where the little GIFs, JPEGs, and CSS text files are located.   To be sure, you can't get
access to the ASP or PHP code, but you can see the end result and figure out your own AVFP way to extract
information from your data tables.

OK, to help get AVFP moving towards better-looking and easier-to-maintain page design, I have rewritten my
version of the default.htm file of the AVFP demo.   Tell me what you think. 

Here are portions of the code to give you an idea how I have simplified things a bit.  Also check out
the websites that I borrowed ideas from. 

* * *

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>ActiveVFP Samples</title>
    <meta name="Description" content="ActiveVP Samples" />
    <link rel="shortcut icon" href="/favicon.ico" />
                                        <!-- Check out this link to see the CSS stylesheet for this page -->
    <link rel="stylesheet" href="http://raround.com/survey/css/golden_style.css" type="text/css" media="screen" />

   <!-- CSS table designs from the CSS Table Gallery: http://www.icant.co.uk/csstablegallery/
                 Contains more than 50 free CSS styles designed by CSS experts from around the world. -->

</head>
<body>
<!-- Floating DIV structure from "Liquid layouts the easy way": http://www.maxdesign.com.au/articles/liquid/
                Notice how a lot of the HTML sections are divided into logical DIVS that mark the various
                sections of the design.   -->

<div id="header"><h2>ActiveVFP Samples</h2></div>
<div id="gutter"></div>
<div id="leftcol"><br></div>
<div id="midcol">
<br>    
<table border="1" cellpadding="2" width="100%">
<!-- Survey  -->
<tr>
  <td width="25%"><a href="<%=oProp.ScriptPath +[?action=survey]%>">Survey</a></td>
  <td width="75">Survey with Radio Buttons under development</td>
</tr>
<!-- Session VFP/HTML table  -->
<tr class="odd">
  <td><a href="<%=oProp.ScriptPath +[?action=sessionlist]%>">SessionList</a></td>
  <td>VFP table listing showing search, sort, and session capabilities.</td>
</tr>
<!-- Simple VFP to HTML table  -->
<tr>
  <td><a href="<%=oProp.ScriptPath +[?action=simplelist]%>">SimpleList</a></td>
  <td>VFP table list showing paging, navigation and simple drill-down.</td>
</tr>
<!-- VFP Scripting  -->
<tr class="odd">
  <td><a href="<%=oProp.ScriptPath +[?action=vfpscript]%>">VFPscript</a></td>
  <td>Use VFP code blocks within HTML for powerful scripting capabilities.</td>
</tr>
<!-- MultiTables on one HTML page  -->
<tr>
  <td><a href="<%=oProp.ScriptPath +[?action=multitable]%>">MultiTable</a></td>
  <td>Multiple VFP and HTML tables on a single page.</td>
</tr>
<!-- HTTP upload  -->
<tr class="odd">
  <td><a href="<%=oProp.ScriptPath +[?action=upload1]%>">Upload1</a></td>
  <td>RFC1867 upload from an HTML form.</td>
</tr>

etc. etc. etc.


</table>
</div> <!-- End of midcol DIV -->

<div id="rightcol">&nbsp;</div>
<div id="footer"></div>
<div class="copyright">
    &copy; Copyright
</div>
</body>
</html>

* * *

I have collected about 20 excellent stylesheets and can make them available to anyone
interested.

Coordinator
Feb 23, 2011 at 3:00 PM

Excellent!  This is what the next version (FoxPress) will be focusing on.  What we need is "theme" support so you can just turn on/off various CSS themes and it works for the WHOLE site instead of individual pages.  You should check out WordPress to get an idea about this. 

My goal/dream is to be able to read in any WordPress theme and use it in a FoxPro web app.  After all, they're mostly just CSS style sheets and a little PHP.  The PHP translation to vfp will probably be the hard part.  Add to this VFP plug-ins and AVFP is well on its way to being a valid PHP/WordPress alternative..

Feb 24, 2011 at 3:28 AM
Edited Feb 24, 2011 at 12:38 PM

I went a little crazy and found a simple javascript to change CSS stylesheets on the fly.

You can see it here: http://raround.com/survey/default.aspx

Here's a section of the code to show what's happening. . .

<head>
<link rel="stylesheet" id="style1" href="http://raround.com/survey/css/azulon.css" type="text/css" media="screen" />
 
<script type="text/javascript">
function changeStyle(url)
{
document.getElementById("style1").href="http://raround.com/survey/css/" + url + ".css";
document.getElementById("stylename").innerHTML=url;
}

</script>
</head>
<body>
<table width="20px">

etc. etc.

<tr>
  <td><center>STYLES</center></td>
</tr>
<tr><td><a href="#" onclick="changeStyle('azulon');return false;"        >Azulon         </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('Blaugrana');return false;"     >Blaugrana      </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('blix_theme');return false;"    >Blix Theme     </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('bluedream');return false;"     >Blue Dream     </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('blue_on_blue');return false;"  >Blue on Blue   </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('clean_n_crisp');return false;" >Clean n Crisp  </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('coffee_n_milk');return false;" >Coffee w/Milk  </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('golden_style');return false;"  >Golden Style   </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('green_life');return false;"    >Green Life     </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('grey_suits');return false;"    >Grey Suits     </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('mintgreen');return false;"     >Mint Green     </a></td></tr>
<tr><td><a href="#" onclick="changeStyle('muted');return false;"         >Muted          </a></td></tr>

</table>

etc. etc.

<div id="midcol">
<p>CSS Style: <span id="stylename">Azulon</span></p>  

Coordinator
Feb 24, 2011 at 12:24 PM

Very cool.  Thanks.

Coordinator
Feb 25, 2011 at 1:40 AM
Edited Feb 25, 2011 at 1:00 PM

Here's how WordPress applies CSS to the whole web site:

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!):