Commits

Mike Orr committed 67e94c0

New helpers title() and required_legend(), plus WebHelpers' first stylesheet.

Comments (0)

Files changed (3)

 WebHelpers ChangeLog
 
-0.6.3 (tip)
+0.6.4 (tip)
+
+0.6.3 (10/7/2008)
 * Bugfix in distribute() found by Randy Syring.
+* New helpers title() and required_legend() in webhelpers.html.tags.
+* New directory webhelpers/public for static files
+* Suggested stylesheet webhelpers/public/stylesheets/webhelpers.css
+  (You'll have to manually add this to your application.)
 
 0.6.2 (10/2/2008)
 * nl2br() and format-paragraphs were not literal-safe.

webhelpers/html/tags.py

            "text", "textarea", "hidden", "file", "password", 
            "checkbox", "radio", "submit",
            "select", "Options", "Option",
-           "ModelTags",
+           "ModelTags", "title", "required_legend",
            # hyperlinks
            "link_to", "link_to_if", "link_to_unless",
            # Table tags
         """Iterate the label element of each pair."""
         return (x.label for x in self)
 
+def title(title, required=False, label_for=None):
+    """Format the user-visible title for a form field.
+
+    Use this for forms that have a text title above or next to each
+    field.
+
+    ``title`` -- the name of the field; e.g., "First Name".
+
+    ``required `` -- if true, append a "*" to the title and use the
+    'required' HTML format (see example); otherwise use the 'not
+    required' format.
+
+    ``label_for`` -- if provided, put ``<label for="ID">`` around the
+    title.  The value should be the HTML ID of the input field related
+    to this title.  Per the HTML standard, the ID should point to a
+    single control (input, select, textarea), not to multiple controls
+    (fieldset, group of checkboxes, group of radio buttons).  ID's are
+    set by passing the keyword arg ``id`` to the appropriate helper.
+    
+    Note that checkboxes and radio buttions typically have their own
+    individual labels in addition to the title.  You can set these with
+    the ``label`` argument to ``checkbox()`` and ``radio()``.
+
+    This helper does not accept other keyword arguments.
+
+    See webhepers/public/stylesheets/webhelpers.css for suggested styles.
+
+    >>> title("First Name")
+    literal(u'<span class="not-required">First Name</span>')
+    >>> title("Last Name", True)
+    literal(u'<span class="required">Last Name <span class="required-symbol">*</span></span>')
+    >>> title("First Name", False, "fname")
+    literal(u'<span class="not-required"><label for="fname">First Name</label></span>')
+    >>> title("Last Name", True, label_for="lname")
+    literal(u'<span class="required"><label for="lname">Last Name</label> <span class="required-symbol">*</span></span>')
+    """
+    title_html = title
+    required_html = literal("")
+    if label_for:
+        title_html = HTML.label(title_html, for_=label_for)
+    if required:
+        required_symbol = HTML.span("*", class_="required-symbol")
+        return HTML.span(
+            title_html, 
+            " ",
+            required_symbol,
+            class_="required")
+    else:
+        return HTML.span(title_html, class_="not-required")
+
+def required_legend():
+    """Return an inline HTML snippet explaining which fields are required.
+    
+    See webhepers/public/stylesheets/webhelpers.css for suggested styles.
+
+    >>> required_legend()
+    literal(u'<span class="required required-symbol">*</span> = required')
+    """
+    return HTML(
+        HTML.span("*", class_="required required-symbol"), 
+        " = required",
+        )
+        
 
 #### Hyperlink tags
 

webhelpers/public/stylesheets/webhelpers.css

+/* Sample stylesheet for WebHelpers */
+
+/* === STYLES FOR webhelpers.html.tags === */
+
+/* Display the required symbol "*" in red.
+ * Used by title() and required_legend().
+ */
+span.required-symbol {
+    color: red;
+    }
+
+/* Display the title for required fields in boldface.
+ * Used by title() and required_legend().
+ */
+span.required {
+    font-weight: bold;
+    }
+
+/* Display the title for non-required fields in normal type.
+ * (Some sites may prefer to set this to boldface too.)
+ * Used by title().
+ */
+span.not-required {
+    }
+
+/* === EXTRA STYLES (not currently produced by any helpers) === */
+
+/* Make field error messages highly visible:
+ * big and red on a light red background.
+ * 'error-message' is the default class used by ``formencode.htmlfill``
+ * and by any future field helper.
+ */
+.error-message {
+    color: #cc0000;
+    background-color: #ffeeee;
+    font-size: large;
+    font-weight: bold;
+    font-style: italic;
+    }
+
+/* Make field help text green italic. */
+.hint {
+    color: #006400;
+    font-style: italic;
+    }
+
+/* Standard forms have a distinct background and space around them. */
+form.standard {
+    background-color: #F2F2F2;
+    margin: 1em 0;
+    padding: 0.5em 1em 1em 1em;
+    }
+
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.