[Zope3-checkins] SVN: Zope3/trunk/src/zope/app/styleguide/form/
Added initial content for views, froms and widgets style guide
Roger Ineichen
roger at projekt01.ch
Thu Feb 17 15:41:59 EST 2005
Log message for revision 29182:
Added initial content for views, froms and widgets style guide
Changed:
A Zope3/trunk/src/zope/app/styleguide/form/README.txt
A Zope3/trunk/src/zope/app/styleguide/form/__init__.py
A Zope3/trunk/src/zope/app/styleguide/form/configure.zcml
A Zope3/trunk/src/zope/app/styleguide/form/doctype.txt
A Zope3/trunk/src/zope/app/styleguide/form/index.html
A Zope3/trunk/src/zope/app/styleguide/form/pagetemplate.txt
-=-
Added: Zope3/trunk/src/zope/app/styleguide/form/README.txt
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/form/README.txt 2005-02-17 20:41:14 UTC (rev 29181)
+++ Zope3/trunk/src/zope/app/styleguide/form/README.txt 2005-02-17 20:41:59 UTC (rev 29182)
@@ -0,0 +1,5 @@
+========================
+Views, Forms and Widgets
+========================
+
+Explains how we write views and which tags should be used ...
Property changes on: Zope3/trunk/src/zope/app/styleguide/form/README.txt
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/styleguide/form/__init__.py
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/form/__init__.py 2005-02-17 20:41:14 UTC (rev 29181)
+++ Zope3/trunk/src/zope/app/styleguide/form/__init__.py 2005-02-17 20:41:59 UTC (rev 29182)
@@ -0,0 +1,17 @@
+##############################################################################
+#
+# Copyright (c) 2002 - 2005 Zope Corporation and Contributors.
+# All Rights Reserved.
+#
+# This software is subject to the provisions of the Zope Public License,
+# Version 2.1 (ZPL). A copy of the ZPL should accompany this distribution.
+# THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
+# WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+# WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
+# FOR A PARTICULAR PURPOSE.
+#
+##############################################################################
+"""Zope3 views, forms and widgets styleguide
+
+$Id$
+"""
Property changes on: Zope3/trunk/src/zope/app/styleguide/form/__init__.py
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/styleguide/form/configure.zcml
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/form/configure.zcml 2005-02-17 20:41:14 UTC (rev 29181)
+++ Zope3/trunk/src/zope/app/styleguide/form/configure.zcml 2005-02-17 20:41:59 UTC (rev 29182)
@@ -0,0 +1,39 @@
+<configure
+ xmlns="http://namespaces.zope.org/zope"
+ xmlns:browser="http://namespaces.zope.org/browser"
+ xmlns:help="http://namespaces.zope.org/help"
+ i18n_domain="zope">
+
+ <help:register
+ id="form"
+ parent="styleguide"
+ title="Views, Forms and Widgets"
+ doc_path="README.txt"
+ class="zope.app.onlinehelp.onlinehelptopic.RESTOnlineHelpTopic"
+ />
+
+ <help:register
+ id="css"
+ parent="styleguide/form"
+ title="CSS"
+ doc_path="index.html"
+ class="zope.app.onlinehelp.onlinehelptopic.ZPTOnlineHelpTopic"
+ />
+
+ <help:register
+ id="doctype"
+ parent="styleguide/form"
+ title="Doctype"
+ doc_path="doctype.txt"
+ class="zope.app.onlinehelp.onlinehelptopic.RESTOnlineHelpTopic"
+ />
+
+ <help:register
+ id="pagetemplate"
+ parent="styleguide/from"
+ title="Page template"
+ doc_path="pagetemplate.txt"
+ class="zope.app.onlinehelp.onlinehelptopic.RESTOnlineHelpTopic"
+ />
+
+</configure>
Property changes on: Zope3/trunk/src/zope/app/styleguide/form/configure.zcml
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/styleguide/form/doctype.txt
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/form/doctype.txt 2005-02-17 20:41:14 UTC (rev 29181)
+++ Zope3/trunk/src/zope/app/styleguide/form/doctype.txt 2005-02-17 20:41:59 UTC (rev 29182)
@@ -0,0 +1,22 @@
+=======
+Doctype
+=======
+
+The Zope3 default skin follows the XHTML 1.0 Transitional DTD
+
+::
+
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+
+But Zope3 is already almost XHTML Strict
+
+::
+
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+So developers and web designers should code as if CPS follows already XHTML
+Strict.
+
+The doctype has to be at the first line of the page template. Without any
+other tag. Don't use encoding tags in front of a doctype.
Property changes on: Zope3/trunk/src/zope/app/styleguide/form/doctype.txt
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/styleguide/form/index.html
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/form/index.html 2005-02-17 20:41:14 UTC (rev 29181)
+++ Zope3/trunk/src/zope/app/styleguide/form/index.html 2005-02-17 20:41:59 UTC (rev 29182)
@@ -0,0 +1,245 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
+ metal:use-macro="views/onlinehelp_macros/page">
+
+<head>
+<title metal:fill-slot="title"
+ i18n:translate="">Z3 CSS: Styles</title>
+
+<!-- load styles in onlinehelp -->
+<metal:block fill-slot="style_slot">
+<style type="text/css" media="all"
+ tal:content="string:@import url(${context/++resource++zope3.css});">
+ @import url(../../css/zope3.css);
+</style>
+<style type="text/css" media="all"
+ tal:content="string:@import url(${context/++resource++styleguide.css});">
+ @import url("../styleguide.css");
+</style>
+</metal:block>
+
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+</head>
+<body metal:fill-slot="body" tal:omit-tag="">
+<!-- we have to define the styles here because the get lost in the header in online help -->
+
+
+<h1>Zope3 - Cascading Style Sheets - Style Guide</h1>
+<h2>Introduction</h2>
+<p>
+See the proposal at: <a href="http://dev.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/CascadingStyleSheetStyleGuide" target="_blank"><br />
+ http://dev.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/CascadingStyleSheetStyleGuide</a></p>
+<h2> Used styles in forms and widgets</h2>
+<table class="samples" border="0" cellspacing="0" cellpadding="0">
+ <tr>
+ <th class="number">No.</th>
+ <th>Tag</th>
+ <th>Class</th>
+ <th>Description</th>
+ <th>Sample HTM code</th>
+ <th>Rendered result</th>
+ </tr>
+ <tr>
+ <td colspan="6" class="header">HTML elements</td>
+ </tr>
+ <tr>
+ <td colspan="6" class="abstract">This elements are declared for useing in standard page templates used in ZCML directives. Schema widgets useing also this styles.</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">1</td>
+ <td class="tag">a</td>
+ <td class="class">--</td>
+ <td class="description">Link</td>
+ <td nowrap="nowrap" class="sample"><a href="#">a link</a></td>
+ <td class="code"><a href="#">a link</a></td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2</td>
+ <td class="tag">p</td>
+ <td class="class">--</td>
+ <td class="description">Block text</td>
+ <td nowrap="nowrap" class="sample"><p>block text</p></td>
+ <td class="code">
+ <p>block text</p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="6" class="header">Form elements</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">1</td>
+ <td class="tag">form</td>
+ <td class="class">--</td>
+ <td class="description">form</td>
+ <td nowrap="nowrap" class="sample"><form>some text</form></td>
+ <td class="code">
+ <form>
+ some text
+ </form>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2</td>
+ <td class="tag">div</td>
+ <td class="class">row</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ label and input field<br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ label and input field</div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2.1</td>
+ <td class="tag">div</td>
+ <td class="class">row div.label</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="label"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ </div><br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ <div class="label">
+ <label for="yx" title="xy">
+ Label text
+ </label>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2.2</td>
+ <td class="tag">div</td>
+ <td class="class">row div.field</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="field"><br />
+ <input type=text" id="xy"><br />
+ </div><br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ <div class="field">
+ <input type="text" id="xy" />
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number">2.3</td>
+ <td class="tag">div</td>
+ <td class="class">row div.label div.field</td>
+ <td class="description">Contains a input field with label</td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="field"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ <input type=text" id="xy"><br />
+ </div><br />
+ </div>
+ </td>
+ <td class="code">
+ <div class="row">
+ <div class="label">
+ <label for="yx" title="xy">
+ Label text
+ </label>
+ </div>
+ <div class="field">
+ <input type="text" id="xy" />
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr valign="top">
+ <td class="number"> </td>
+ <td class="tag"> </td>
+ <td class="class"> </td>
+ <td class="description"> </td>
+ <td nowrap="nowrap" class="sample"> </td>
+ <td class="code"> </td>
+ </tr>
+
+</table>
+<h2>Formating rules</h2>
+<table class="samples" border="0" cellspacing="0" cellpadding="0">
+ <tr>
+ <th class="number">No.</th>
+ <th>Description</th>
+ <th>Sample HTML code</th>
+ </tr>
+ <tr>
+ <td colspan="3" class="header">Form rules</td>
+ </tr>
+ <tr>
+ <td colspan="3" class="abstract">Form fields</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">1</td>
+ <td class="description">
+ <p>Use the following coding style to define form fields and labels.</p>
+ </td>
+ <td nowrap="nowrap" class="sample">
+ <div class="row"><br />
+ <div class="label"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ </div><br />
+ <div class="field"><br />
+ <input type=text" id="xy"...><br />
+ </div><br />
+ </div><br />
+ </td>
+ </tr>
+ <tr>
+ <td colspan="3" class="abstract">Associate labels explicitly with their controls</td>
+ </tr>
+ <tr valign="top">
+ <td class="number">3</td>
+ <td class="description">
+ <p><br />
+ In other words it means: use <label> along with your <input type="text"/>,
+ your <input type="checkbox"/> and your <input type="radio"/> elements.</p>
+ <p>
+ Using labels makes it possible to use the pointer on the label
+ (clicking on the label) to active the input, so that it is easier to select a
+ text input, a check box or a radio box, just like it is in heavy client
+ applications such as Firefox.
+ </p>
+ <p>Mor information about "Labeling form controls":<br />
+ <a href="http://www.w3.org/tr/wcag10-html-techs/#forms-labels" target="_blank">http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels</a></p>
+ <p> </p>
+ </td>
+ <td nowrap="nowrap" class="sample">
+ <p><div class="row"><br />
+ <div class="label"><br />
+ <label for="yx" title="xy"><br />
+ Label text<br />
+ </label><br />
+ </div><br />
+ <div class="field"><br />
+ <input type=text" id="xy"...><br />
+ </div><br />
+ </div></p>
+ </td>
+ </tr>
+
+</table>
+</body>
+</html>
Property changes on: Zope3/trunk/src/zope/app/styleguide/form/index.html
___________________________________________________________________
Name: svn:eol-style
+ native
Added: Zope3/trunk/src/zope/app/styleguide/form/pagetemplate.txt
===================================================================
--- Zope3/trunk/src/zope/app/styleguide/form/pagetemplate.txt 2005-02-17 20:41:14 UTC (rev 29181)
+++ Zope3/trunk/src/zope/app/styleguide/form/pagetemplate.txt 2005-02-17 20:41:59 UTC (rev 29182)
@@ -0,0 +1,57 @@
+=============
+Page template
+=============
+
+Associate labels explicitly with their controls
+-----------------------------------------------
+
+In other words it means: use <label> along with your <input type="text"/>,
+your <input type="checkbox"/> and your <input type="radio"/> elements.
+Using labels makes it possible to use the pointer on the label
+(clicking on the label) to active the input, so that it is easier to select a
+text input, a check box or a radio box, just like it is in heavy client
+applications such as Firefox.
+
+Example::
+
+<label for="firstName">First name:
+ <input type="text" name="firstname" id="firstName"/>
+</label>
+
+cf. "Labeling form controls"
+http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels
+
+
+Element ID
+----------
+
+Use the "id" attribute to provide relative location URL instead of the old
+<a name="xxx"/> markup. This is needed to do the transition to XHTML1.1.
+Example::
+
+ <p>
+ Check the <a href="#subject">subject headings</a>.
+ </p>
+
+ <h3 id="subject">Subject</h3>
+ <p>
+ Blah blah.
+ </p>
+
+Structure your text into paragraphs using <p>.
+----------------------------------------------
+To create paragraphs do not use <br/><br/>.
+
+ Example::
+
+ <p>
+ Blablah
+ </p>
+ <p>
+ Blablah
+ </p>
+ <p>
+ <input type="checkbox" name="item1" id="item1" value="xxx"/><label for="item1">Item1</label><br/>
+ <input type="checkbox" name="item2" id="item2" value="yyy"/><label for="item2">Item2</label><br/>
+ <input type="checkbox" name="item3" id="item3" value="zzz"/><label for="item3">Item3</label><br/>
+ </p>
Property changes on: Zope3/trunk/src/zope/app/styleguide/form/pagetemplate.txt
___________________________________________________________________
Name: svn:eol-style
+ native
More information about the Zope3-Checkins
mailing list