Difference between revisions of "S2 Cookbook: A Testbed Layout"

From Dreamwidth Notes
Jump to: navigation, search
(Created page with 'This layout is meant to give you a clean testbed to explore examples with. It gives ONLY the barest basics to get a blank HTML page to load, ensuring your test code is at the fo…')
 
(add an example of using this testbed layout to code)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
This layout is meant to give you a clean testbed to explore examples with.  It gives ONLY the barest basics to get a blank HTML page to load, ensuring your test code is at the forefront of attention.  It is NOT a good start to creating a new layout--it's missing key information a functional layout needs.  For examples about making layouts, please see [[S2 Cookbook: Converting a CSS design to a layout]].
+
This layout is meant to give you a clean testbed to explore S2 examples with.  It gives ONLY the barest basics to get a blank HTML page to load, ensuring your test code is at the forefront of attention.  It is NOT a good start to creating a new layout--it's missing key information a functional layout needs.  For examples about making layouts, please see [[S2 Cookbook: Converting a CSS design to a layout]].
  
 
To use it, make a new layout layer containing the code below, and then a style that uses that layout.  If you need more information on how to do that, please see [[S2_Guide:_Style_System_Overview#Creating_and_managing_layers| S2 Guide: Style System Overview: Creating and managing layers]], as well as the section on creating and managing styles.
 
To use it, make a new layout layer containing the code below, and then a style that uses that layout.  If you need more information on how to do that, please see [[S2_Guide:_Style_System_Overview#Creating_and_managing_layers| S2 Guide: Style System Overview: Creating and managing layers]], as well as the section on creating and managing styles.
Line 6: Line 6:
  
 
<syntaxhighlight lang="s2">layerinfo "type" = "layout";
 
<syntaxhighlight lang="s2">layerinfo "type" = "layout";
−
layerinfo "type" = "layout";
 
 
layerinfo "name" = "S2 Testbed Layout";
 
layerinfo "name" = "S2 Testbed Layout";
  
Line 12: Line 11:
 
"This is a skeleton page function, for testing."
 
"This is a skeleton page function, for testing."
 
{
 
{
−
     """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n""";
+
     """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" """;
 +
    """"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n""";
 
     """<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n""";
 
     """<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n""";
 +
    """<head>\n""";
 
     """<title>S2 Testbed Layout</title>\n""";
 
     """<title>S2 Testbed Layout</title>\n""";
−
     """</head>""";
+
     """</head>\n""";
−
     """<body>""";
+
     """<body>\n""";
  
 
     # Code you want to test goes here
 
     # Code you want to test goes here
 
      
 
      
−
     """</body>""";
+
     """</body>\n""";
−
     """</html>""";
+
     """</html>\n""";
 
}
 
}
 +
</syntaxhighlight>
  
 +
== Examples ==
 +
 +
Here are some simple examples of how to use this testbed layout to test out code:
 +
 +
=== Hello world ===
 +
 +
<syntaxhighlight lang="s2">layerinfo "type" = "layout";
 +
layerinfo "name" = "S2 Testbed Layout";
 +
 +
function Page::print()
 +
"This is a skeleton page function, for testing."
 +
{
 +
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" """;
 +
    """"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n""";
 +
    """<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n""";
 +
    """<head>\n""";
 +
    """<title>S2 Testbed Layout</title>\n""";
 +
    """</head>\n""";
 +
    """<body>\n""";
 +
 +
    # Code you want to test goes here
 +
    """Hello world!""";   
 +
 +
    """</body>\n""";
 +
    """</html>\n""";
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
 +
=== Print out all items in an array ===
 +
 +
<syntaxhighlight lang="s2">layerinfo "type" = "layout";
 +
layerinfo "name" = "S2 Testbed Layout";
 +
 +
function Page::print()
 +
"This is a skeleton page function, for testing."
 +
{
 +
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" """;
 +
    """"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n""";
 +
    """<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n""";
 +
    """<head>\n""";
 +
    """<title>S2 Testbed Layout</title>\n""";
 +
    """</head>\n""";
 +
    """<body>\n""";
 +
 +
    # Code you want to test goes here
 +
    """<pre>""";  # useful to make newlines show on HTML
 +
    var string[] colors = ["blue", "red", "yellow", "purple", "orange", "green"];
 +
 +
    foreach var string color ( $colors ) {
 +
        print $color + "\n";
 +
    }
 +
 +
    """</pre>""";   
 +
 +
    """</body>\n""";
 +
    """</html>\n""";
 +
}
 +
</syntaxhighlight>
 +
 +
[[Category: S2 Cookbook]]

Latest revision as of 19:26, 6 June 2011

This layout is meant to give you a clean testbed to explore S2 examples with. It gives ONLY the barest basics to get a blank HTML page to load, ensuring your test code is at the forefront of attention. It is NOT a good start to creating a new layout--it's missing key information a functional layout needs. For examples about making layouts, please see S2 Cookbook: Converting a CSS design to a layout.

To use it, make a new layout layer containing the code below, and then a style that uses that layout. If you need more information on how to do that, please see S2 Guide: Style System Overview: Creating and managing layers, as well as the section on creating and managing styles.

S2 Testbed Layout

layerinfo "type" = "layout";
layerinfo "name" = "S2 Testbed Layout";
 
function Page::print()
"This is a skeleton page function, for testing."
{
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" """;
    """"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n""";
    """<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n""";
    """<head>\n""";
    """<title>S2 Testbed Layout</title>\n""";
    """</head>\n""";
    """<body>\n""";
 
    # Code you want to test goes here
    
    """</body>\n""";
    """</html>\n""";
}

Examples

Here are some simple examples of how to use this testbed layout to test out code:

Hello world

layerinfo "type" = "layout";
layerinfo "name" = "S2 Testbed Layout";
 
function Page::print()
"This is a skeleton page function, for testing."
{
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" """;
    """"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n""";
    """<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n""";
    """<head>\n""";
    """<title>S2 Testbed Layout</title>\n""";
    """</head>\n""";
    """<body>\n""";
 
    # Code you want to test goes here
    """Hello world!""";     
 
    """</body>\n""";
    """</html>\n""";
}


Print out all items in an array

layerinfo "type" = "layout";
layerinfo "name" = "S2 Testbed Layout";
 
function Page::print()
"This is a skeleton page function, for testing."
{
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" """;
    """"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n""";
    """<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n""";
    """<head>\n""";
    """<title>S2 Testbed Layout</title>\n""";
    """</head>\n""";
    """<body>\n""";
 
    # Code you want to test goes here
    """<pre>""";  # useful to make newlines show on HTML
    var string[] colors = ["blue", "red", "yellow", "purple", "orange", "green"];
 
    foreach var string color ( $colors ) {
        print $color + "\n";
    }
 
    """</pre>""";     
 
    """</body>\n""";
    """</html>\n""";
}
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_Cookbook:_A_Testbed_Layout&oldid=9854"