sylvain 2003/09/05 10:11:49
Modified: src/blocks/woody/samples/forms form1_template_action.xml
form1_template_flow.xml
src/blocks/woody/samples/resources woody-page-layout.xsl
Log:
New tab layout using a <select>
Revision Changes Path
1.5 +8 -9
cocoon-2.1/src/blocks/woody/samples/forms/form1_template_action.xml
Index: form1_template_action.xml
===================================================================
RCS file:
/home/cvs/cocoon-2.1/src/blocks/woody/samples/forms/form1_template_action.xml,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -r1.4 -r1.5
--- form1_template_action.xml 4 Sep 2003 16:07:45 -0000 1.4
+++ form1_template_action.xml 5 Sep 2003 17:11:49 -0000 1.5
@@ -8,15 +8,14 @@
<table align="center">
<tr>
<td>
-
- <!-- artificial widget needed to keep tab state. Work still
needed on that -->
- <wt:widget id="tab-state">
- <wi:styling type="hidden"/>
- </wt:widget>
-
+
<!-- group with tabs. Each of the children of <items> will
constitute a tab -->
- <wi:group state-widget="tab-state">
+ <wi:group>
<wi:styling type="tabs"/>
+ <wi:label>Choose a panel: </wi:label>
+ <wi:state>
+ <wt:widget id="tab-state"/>
+ </wi:state>
<wi:items>
<!-- group with automatic two-column layout -->
@@ -56,7 +55,7 @@
</wi:items>
</wi:group>
- <br/>
+ <p>Checkout the <a href="form1.flow">form1 flow page</a> for
another way of formatting panels</p>
<!-- Group of type 'fieldset' will have a surrounding frame -->
<wi:group>
@@ -65,10 +64,10 @@
<wi:items>
<wt:widget id="visa"/>
<wt:widget id="ipaddress"/>
+ <wt:widget id="altbirthdate"/>
<wt:widget id="birthdate">
<wi:styling type="date" format="dd/MM/yyyy"/>
</wt:widget>
- <wt:widget id="altbirthdate"/>
<wt:widget id="dieselprice"/>
</wi:items>
</wi:group>
1.5 +48 -38
cocoon-2.1/src/blocks/woody/samples/forms/form1_template_flow.xml
Index: form1_template_flow.xml
===================================================================
RCS file:
/home/cvs/cocoon-2.1/src/blocks/woody/samples/forms/form1_template_flow.xml,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -r1.4 -r1.5
--- form1_template_flow.xml 4 Sep 2003 16:07:45 -0000 1.4
+++ form1_template_flow.xml 5 Sep 2003 17:11:49 -0000 1.5
@@ -8,51 +8,61 @@
<table align="center">
<tr><td>
- <!-- a wi:group produces a columnized layout of fields, along with a
<fieldset>
- frame if there is a <wi:label> -->
- <wi:group>
- <wi:label>String fields</wi:label>
- <wi:styling type="fieldset" layout="columns"/>
- <wi:items>
- <wt:widget id="email"/>
- <wt:widget id="fourchars">
- <!-- particular styling for the enumeration -->
- <wi:styling list-type="listbox" listbox-size="4"/>
- </wt:widget>
- </wi:items>
- </wi:group>
-
- <wi:group>
- <wi:label>Number fields</wi:label>
- <wi:styling type="fieldset" layout="columns"/>
- <wi:items>
- <wt:widget id="number1"/>
- <wt:widget id="number2"/>
- <wt:widget id="account"/>
- <wt:widget id="cowheight">
- <wi:styling list-type="radio"/>
- </wt:widget>
- </wi:items>
- </wi:group>
-
- <!-- wi:group with no label : columnized layout without a surrounding
frame -->
- <wi:group>
- <wi:label>Boolean fields</wi:label>
- <wi:styling type="fieldset" layout="columns"/>
- <wi:items>
- <wt:widget id="somebool"/>
- <wt:widget id="drinks"/>
- </wi:items>
- </wi:group>
-
+ <!-- group with tabs. Each of the children of <items> will
constitute a tab -->
+ <wi:group>
+ <wi:styling type="choice"/>
+ <wi:label>Choose a panel: </wi:label>
+ <wi:state>
+ <wt:widget id="tab-state"/>
+ </wi:state>
+
+ <wi:items>
+ <!-- group with automatic two-column layout -->
+ <wi:group>
+ <wi:label>String fields</wi:label>
+ <wi:styling layout="columns"/>
+ <wi:items>
+ <wt:widget id="email"/>
+ <wt:widget id="fourchars">
+ <!-- particular styling for the enumeration -->
+ <wi:styling list-type="listbox" listbox-size="4"/>
+ </wt:widget>
+ </wi:items>
+ </wi:group>
+
+ <wi:group>
+ <wi:label>Number fields</wi:label>
+ <wi:styling layout="columns"/>
+ <wi:items>
+ <wt:widget id="number1"/>
+ <wt:widget id="number2"/>
+ <wt:widget id="account"/>
+ <wt:widget id="cowheight">
+ <wi:styling list-type="radio"/>
+ </wt:widget>
+ </wi:items>
+ </wi:group>
+
+ <wi:group>
+ <wi:styling layout="columns"/>
+ <wi:label>Boolean fields</wi:label>
+ <wi:items>
+ <wt:widget id="somebool"/>
+ <wt:widget id="drinks"/>
+ </wi:items>
+ </wi:group>
+ </wi:items>
+ </wi:group>
+
+ <p>Checkout the <a href="form1">form1 action page</a> for
another way of formatting panels</p>
<wi:group>
<wi:styling layout="columns"/>
<wi:items>
<wt:widget id="visa"/>
<wt:widget id="ipaddress"/>
- <wt:widget id="birthdate"><wi:styling type="date"
format="dd/MM/yyyy"/></wt:widget>
<wt:widget id="altbirthdate"/>
+ <wt:widget id="birthdate"><wi:styling type="date"
format="dd/MM/yyyy"/></wt:widget>
<wt:widget id="dieselprice"/>
</wi:items>
</wi:group>
1.3 +84 -6
cocoon-2.1/src/blocks/woody/samples/resources/woody-page-layout.xsl
Index: woody-page-layout.xsl
===================================================================
RCS file:
/home/cvs/cocoon-2.1/src/blocks/woody/samples/resources/woody-page-layout.xsl,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -r1.2 -r1.3
--- woody-page-layout.xsl 4 Sep 2003 16:07:45 -0000 1.2
+++ woody-page-layout.xsl 5 Sep 2003 17:11:49 -0000 1.3
@@ -13,13 +13,20 @@
<script language="JavaScript">
function showWoodyTab(tabgroup, idx, length, state) {
+ //alert(tabgroup + " - " + idx);
for (var i = 0; i < length; i++) {
+ // Change tab status (selected/unselected)
var tab = document.getElementById(tabgroup + "_tab_" + i);
- tab.className = (i == idx) ? 'woody-tab woody-activeTab':
'woody-tab';
-
+ if (tab != null) {
+ tab.className = (i == idx) ? 'woody-tab woody-activeTab':
'woody-tab';
+ }
+ // Change tab content visibilty
var tabitems = document.getElementById(tabgroup + "_items_" + i);
- tabitems.style.display = (i == idx) ? '' : 'none';
+ if (tabitems != null) {
+ tabitems.style.display = (i == idx) ? '' : 'none';
+ }
}
+ // Change state value
if (state.length > 0) {
document.forms[0][state].value = idx;
}
@@ -51,8 +58,8 @@
-->
<xsl:variable name="active">
<xsl:choose>
- <xsl:when test="@state-widget">
- <xsl:variable name="value" select="string(//wi:[EMAIL PROTECTED] =
current()/@state-widget]/wi:value)"/>
+ <xsl:when test="wi:state">
+ <xsl:variable name="value" select="wi:state/wi:*/wi:value"/>
<xsl:choose>
<xsl:when test="string-length($value) > 0"><xsl:value-of
select="$value"/></xsl:when>
<xsl:otherwise>0</xsl:otherwise>
@@ -63,11 +70,16 @@
</xsl:variable>
<!-- copy the "state-widget" attribute for use in for-each -->
- <xsl:variable name="state-widget" select="@state-widget"/>
+ <xsl:variable name="state-widget" select="wi:state/wi:*/@id"/>
<xsl:variable name="id" select="generate-id()"/>
<div id="{$id}">
+ <!-- add an hidden input for the state -->
+ <xsl:if test="$state-widget">
+ <input type="hidden" name="{$state-widget}" value="{$active}"/>
+ </xsl:if>
+
<!-- div containing the tabs -->
<div class="woody-tabArea">
<xsl:for-each select="wi:items/wi:*">
@@ -99,6 +111,72 @@
</div>
</xsl:for-each>
</div>
+ </xsl:template>
+
+
+ <!--
+ wi:group of type choice : a popup is used instead of tabs
+ -->
+ <xsl:template match="wi:group[wi:styling/@type='choice']">
+ <!-- find the currently selected tab.
+ Thoughts still needed here, such as autogenerating a field in the
woodytransformer
+ to hold this state.
+ -->
+ <xsl:variable name="active">
+ <xsl:choose>
+ <xsl:when test="wi:state">
+ <xsl:variable name="value" select="wi:state/wi:*/wi:value"/>
+ <xsl:choose>
+ <xsl:when test="string-length($value) > 0"><xsl:value-of
select="$value"/></xsl:when>
+ <xsl:otherwise>0</xsl:otherwise>
+ </xsl:choose>
+ </xsl:when>
+ <xsl:otherwise>0</xsl:otherwise>
+ </xsl:choose>
+ </xsl:variable>
+
+ <!-- copy the "state-widget" attribute for use in for-each -->
+ <xsl:variable name="state-widget" select="wi:state/wi:*/@id"/>
+
+ <xsl:variable name="id" select="generate-id()"/>
+ <fieldset id="{$id}">
+ <legend>
+ <xsl:apply-templates select="wi:label/node()"/>
+ <select name="{$state-widget}" onchange="showWoodyTab('{$id}',
this.selectedIndex, {count(wi:items/*)}, '{$state-widget}')">
+ <xsl:for-each select="wi:items/wi:*">
+ <option>
+ <xsl:attribute name="value">
+ <xsl:choose>
+ <xsl:when test="wi:value">
+ <xsl:value-of select="wi:value"/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:value-of select="position() - 1"/>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:attribute>
+ <xsl:if test="$active = (position() - 1)">
+ <xsl:attribute name="selected">selected</xsl:attribute>
+ </xsl:if>
+ <xsl:copy-of select="wi:label"/>
+ </option>
+ </xsl:for-each>
+ </select>
+ <xsl:if test="wi:items/*//wi:validation-message">
+ <span style="color:red; font-weight: bold"> ! </span>
+ </xsl:if>
+ </legend>
+
+ <!-- a div for each of the items -->
+ <xsl:for-each select="wi:items/wi:*">
+ <div id="{$id}_items_{position() - 1}">
+ <xsl:if test="$active != position() - 1">
+ <xsl:attribute name="style">display:none</xsl:attribute>
+ </xsl:if>
+ <xsl:apply-templates select="."/>
+ </div>
+ </xsl:for-each>
+ </fieldset>
</xsl:template>
<!--
