From: <tri...@us...> - 2007-11-29 14:39:23
|
Revision: 183 http://equanda.svn.sourceforge.net/equanda/?rev=183&view=rev Author: triathlon98 Date: 2007-11-29 06:39:18 -0800 (Thu, 29 Nov 2007) Log Message: ----------- EQ-92 documentation Modified Paths: -------------- trunk/equanda-tapestry5/src/site/wiki/accordion.wiki trunk/equanda-tapestry5/src/site/wiki/formtraversal.wiki trunk/equanda-tapestry5/src/site/wiki/index.wiki trunk/equanda-tapestry5/src/site/wiki/tabs.wiki Modified: trunk/equanda-tapestry5/src/site/wiki/accordion.wiki =================================================================== --- trunk/equanda-tapestry5/src/site/wiki/accordion.wiki 2007-11-29 13:33:35 UTC (rev 182) +++ trunk/equanda-tapestry5/src/site/wiki/accordion.wiki 2007-11-29 14:39:18 UTC (rev 183) @@ -39,6 +39,14 @@ cursor: pointer; } +.accordion_title a:link, +.accordion_title a:visited, +.accordion_title a:active, +.accordion_title a:hover { + color: black; + text-decoration: none; +} + .accordion_title_active { font-weight: bold; } Modified: trunk/equanda-tapestry5/src/site/wiki/formtraversal.wiki =================================================================== --- trunk/equanda-tapestry5/src/site/wiki/formtraversal.wiki 2007-11-29 13:33:35 UTC (rev 182) +++ trunk/equanda-tapestry5/src/site/wiki/formtraversal.wiki 2007-11-29 14:39:18 UTC (rev 183) @@ -1,6 +1,6 @@ h1. FormTraversal -This component is intended to give consistent uer interface behaviour which allows easy and efficient form completion without using a mouse. +This component is intended to give consistent user interface behaviour which allows easy and efficient form completion without using a mouse. It achieves this by - assuring focus starts in the first editable input element on the page - allow traversing the (useable) form elements using tab or enter @@ -13,11 +13,12 @@ {code} The exact behaviour is influenced by the class on the elements. -- formTraversalSkip : ..... -- formTraversalInvokeForward : ..... -- formTraversalInvokeBackward : ..... -- formTraversalMove : ..... -- formTraversalEnter : ..... +- defaultSubmit : the first element which can be found with this class is "clicked on" when the user presses ctrl-enter. +- equandaTraverseSkip : any element marked with this class never receives focus +- formTraversalInvokeForward : when going forward through the form using tab or enter, and an element with this class is encountered, then the element is "clicked on". This is for example used in the [Tabs|tabs.html] component to automatically move to the next tab. +- formTraversalInvokeBackward : when going backward through the form using shift-tab, and an element with this class is encountered, then the element is "clicked on". This is for example used in the [Tabs|tabs.html] component to automatically move to the next tab. +- equandaTraverseMove : when an element is encountered with this class, then searching the next object continues at the objet with the id given in the "href" attribute for the element (optionally preceded by a hash). +- equandaTraverseEnter : when a textarea is marked using this class, then enter jumps to a new line in the form. h2. ctrl-enter @@ -32,11 +33,13 @@ h2. enter To assure behaviour is consistent, pressing enter is (normally) considered the same as pressing tab. -When inside a textarea (which is not marked with the class "formTraversalEnter"), the user should press shift-enter to go to a new line. +When inside a textarea (which is not marked with the class "equandaTraverseEnter"), the user should press shift-enter to go to a new line. Differences with tab behaviour are - shift-enter does not move backwards -- when pressing enter on an element marked with the class "defaultButton" then that element is clicked on. -- +- when pressing enter on an element marked with the class "defaultButton" then that element is "clicked on". +- when pressing enter in a textarea, focus is still moved to the next element, except when the element is marked using the "equandaTraverseEnter" class. -h2. tab \ No newline at end of file +h2. tab + +This moves forward or backward through the page. It only considers visible, enabled links, buttons and form elements, with the extra handling based on the classes as mentioned above. \ No newline at end of file Modified: trunk/equanda-tapestry5/src/site/wiki/index.wiki =================================================================== --- trunk/equanda-tapestry5/src/site/wiki/index.wiki 2007-11-29 13:33:35 UTC (rev 182) +++ trunk/equanda-tapestry5/src/site/wiki/index.wiki 2007-11-29 14:39:18 UTC (rev 183) @@ -3,6 +3,8 @@ This module contains [tapestry5|http://tapestry.apache.org/tapestry5/] components which are completely independent of the equanda generated stuff. This is done to increase the reusability of these components without pulling in too many dependencies. +There is a [online sample application|http://app.spoon-it.be/t5-equanad-example/] demonstrating these components, the subversion repository is [browsable here|http://equanda.svn.sourceforge.net/viewvc/equanda/t5-equanda-example/]. + The following components are provided - [Accordion|accordion.html] - [Tabs|tabs.html] Modified: trunk/equanda-tapestry5/src/site/wiki/tabs.wiki =================================================================== --- trunk/equanda-tapestry5/src/site/wiki/tabs.wiki 2007-11-29 13:33:35 UTC (rev 182) +++ trunk/equanda-tapestry5/src/site/wiki/tabs.wiki 2007-11-29 14:39:18 UTC (rev 183) @@ -3,7 +3,11 @@ A tabs component which allows grouping objects in tab pages. You have to pass the title and content panes as parameters to the tabs component. There is currently a limitation of fifty panels. Only panels which have both a title and content parameter block are displayed, however the indexes do not need to be sequential (hence the need for a limit). +You can specify a "titleIcon" parameter block which allows display a icon (or something else) on each tab. +Using "contentAll" it is possiblt to have a banner displayed at the top of each tab page. +The component has some built in features to function well in combination with the [FormTraversal|formtraversal.html] component. Specifically, moving between the fields on the form (using tab or enter) will also traverse to the next ir previous tb page when needed. You probably want to use CSS to hide the links which accomplish this. + {code} <span t:type="equanda/Tabs" t:id="tabs"> <t:parameter name="title1">First title</t:parameter> @@ -20,6 +24,9 @@ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero ipsum, volutpat nec, posuere vitae, pulvinar ut, quam. Morbi fringilla pulvinar nisi. Cras luctus leo sed orci. In id mi eget nunc blandit nonummy. Morbi at lacus. Ut sed elit. Donec libero. Sed feugiat tempor erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Nam lorem mi, accumsan id, commodo sit amet, interdum sit amet, augue.</p> <p>Cras massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum accumsan neque vitae odio. Phasellus luctus arcu quis nibh. Maecenas leo. Ut aliquam hendrerit odio. Vestibulum luctus diam nec enim. Nam mi. Etiam eros turpis, ultrices et, ullamcorper nec, posuere sed, nisi. Integer placerat risus sit amet purus. Nulla elit purus, consequat sed, blandit in, feugiat bibendum, quam. In hac habitasse platea dictumst. Ut vel lorem. Ut pharetra leo. Sed sit amet felis. Nunc sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elit metus, euismod sed, laoreet a, aliquam a, enim.</p> </t:parameter> + <t:parameter name="contentAll"> + <p>This banner should be repeated on all pages.</p> + </t:parameter> </span> {code} @@ -44,31 +51,43 @@ .equandaTabsTitles a:visited, .equandaTabsTitles a:active, .equandaTabsTitles a:hover { - width:8em; - padding:.2em 1em; - display:block; - background:lightgray; - color:black; - font-weight:bold; - text-decoration:none; + width: 8em; + padding: .2em 1em; + display: block; + background: lightgray; + color: black; + font-weight: bold; + text-decoration: none; } .equandaTabsTitles a:hover { - background:gray; - color:white; + background: gray; + color: white; } -.equandaTabsPanelContent div { - clear:both; - width:auto; - background:white; - border:solid 1px; - color:black; - padding:1em 3em; +.equandaTabsPanel { + border: solid 1px; } -.equandaTabsActive a:link, -.equandaTabsActivea:visited, -.equandaTabsActive a:active, -.equandaTabsActive a:hover { +.equandaTabsAll { + border-bottom: solid 1px; + background: beige; + padding: 1em; +} +.equandaTabsPanelContent { + background: white; + padding: 1em; +} +.equandaTabs div { + clear: both; + width: auto; +} +a.equandaTabsActive:link, +a.equandaTabsActive:visited, +a.equandaTabsActive:active, +a.equandaTabsActive:hover { background:black; color:white; } +.equandaTraverseForward, +.equandaTraverseBackward { + display: none; +} {code} This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |