Author: tim Date: Wed Nov 10 12:49:18 2004 New Revision: 57365 Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_binding.xml cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_model.xml cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_template.xml cocoon/trunk/src/blocks/forms/samples/swan/forms/model_binding.xml cocoon/trunk/src/blocks/forms/samples/swan/forms/model_template.xml cocoon/trunk/src/blocks/forms/samples/swan/forms/template_binding.xml cocoon/trunk/src/blocks/forms/samples/swan/forms/template_model.xml cocoon/trunk/src/blocks/forms/samples/swan/forms/template_template.xml Log: Swan: Update to use widget states.
Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_binding.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_binding.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_binding.xml Wed Nov 10 12:49:18 2004 @@ -16,7 +16,7 @@ --> <!-- -Binding for example CForms form binding GUI. +Binding for Swan form binding editor. @version CVS $Id$ --> @@ -34,8 +34,10 @@ <fb:insert-node><fb:aggregate/> </fb:insert-node> <fb:struct id="aggregate" path="fd:aggregate"> - <fb:new id="id-class"/> - <fb:new id="path-class"/> + <fb:struct id="stuff" path="."> + <fb:new id="id-class"/> + <fb:new id="path-class"/> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -46,7 +48,9 @@ <fb:insert-node><fb:class/> </fb:insert-node> <fb:struct id="class" path="fb:class"> - <fb:new id="id-class"/> + <fb:struct id="stuff" path="."> + <fb:new id="id-class"/> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -57,7 +61,9 @@ <fb:insert-node><fb:javascript/> </fb:insert-node> <fb:struct id="javascript" path="fb:javascript"> - <fb:new id="text-class"/> + <fb:struct id="stuff" path="."> + <fb:new id="text-class"/> + </fb:struct> </fb:struct> </fb:case> </fb:class> @@ -67,7 +73,9 @@ <fb:insert-node><fb:new/> </fb:insert-node> <fb:struct id="new" path="fb:new"> - <fb:new id="id-class"/> + <fb:struct id="stuff" path="."> + <fb:new id="id-class"/> + </fb:struct> </fb:struct> </fb:case> </fb:class> @@ -77,11 +85,13 @@ <fb:insert-node><fb:repeater/> </fb:insert-node> <fb:struct id="repeater" path="fb:repeater"> - <fb:insert-node> + <fb:struct id="stuff" path="."> + <fb:insert-node> <fb:on-bind/> </fb:insert-node> - <fb:new id="id-class"/> - <fb:new id="parent-path-class"/> + <fb:new id="id-class"/> + <fb:new id="parent-path-class"/> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -92,11 +102,13 @@ <fb:insert-node><fb:temp-repeater/> </fb:insert-node> <fb:struct id="temp-repeater" path="fb:temp-repeater"> - <fb:new id="id-class"/> - <fb:new id="parent-path-class"/> - <fb:insert-node> + <fb:struct id="stuff" path="."> + <fb:new id="id-class"/> + <fb:new id="parent-path-class"/> + <fb:insert-node> <fb:on-bind/> </fb:insert-node> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -107,11 +119,13 @@ <fb:insert-node><fb:union/> </fb:insert-node> <fb:struct id="union" path="fb:union"> - <fb:new id="id-class"/> - <fb:new id="path-class"/> - <fb:insert-node> + <fb:struct id="stuff" path="."> + <fb:new id="id-class"/> + <fb:new id="path-class"/> + <fb:insert-node> <fd:widgets/> </fb:insert-node> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -122,8 +136,10 @@ <fb:insert-node><fb:value/> </fb:insert-node> <fb:struct id="value" path="fb:value"> - <fb:new id="id-class"/> - <fb:value id="path" path="@path"/> + <fb:struct id="stuff" path="."> + <fb:new id="id-class"/> + <fb:value id="path" path="@path"/> + </fb:struct> </fb:struct> </fb:case> </fb:class> @@ -133,8 +149,10 @@ <fb:insert-node><fd:struct/> </fb:insert-node> <fb:struct id="struct" path="fd:struct"> - <fb:new id="id-class"/> - <fb:new id="label-class"/> + <fb:struct id="stuff" path="."> + <fb:new id="id-class"/> + <fb:new id="label-class"/> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -178,14 +196,9 @@ </fb:class> <fb:class id="item-row-class"> - <fb:new id="view-selector-class"/> <fb:javascript id="type-selector" path="." direction="load"> <fb:load-form> widget.setValue(jxpathPointer.getNode().getFirstChild().getLocalName()); - if("view".equals(widget.lookupWidget("../view-selector").getValue())) { - widget.setProcessRequests(false); - widget.lookupWidget("../union").setProcessRequests(false); - } </fb:load-form> </fb:javascript> <fb:union id="union" path="."> @@ -198,6 +211,12 @@ <fb:new id="union-class"/> <fb:new id="value-class"/> </fb:union> + <!-- + The view-selector binding must happen last, + so that all the widgets will exist that the + view-selector's on-value-changed handler needs. + --> + <fb:new id="view-selector-class"/> </fb:class> </fb:context> Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_model.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_model.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_model.xml Wed Nov 10 12:49:18 2004 @@ -23,36 +23,34 @@ CVS $Id$ --> - <!-- - TODO: - Add features to "items-class" (e.g. move-up, move-down, add-before, add-after). - --> + <fd:messages id="messages"/> <fd:new id="items-class"/> <fd:class id="items-class"> <fd:widgets> - <fd:repeater id="items" initial-size="1"> - <fd:label>Widgets</fd:label> + <fd:repeater id="items" initial-size="0"> + <fd:label>Items</fd:label> <fd:widgets> - <fd:new id="widget-row-class"/> + <fd:new id="item-row-class"/> </fd:widgets> </fd:repeater> <fd:repeater-action id="addItem" action-command="add-row" repeater="items"> - <fd:label>New</fd:label> - </fd:repeater-action> - <fd:repeater-action id="removeItems" action-command="delete-rows" repeater="items" select="select"> - <fd:label>Delete</fd:label> + <fd:label>Add Child</fd:label> + <fd:hint>Add child</fd:hint> + <fd:on-action> + <javascript> + var repeater = event.getSourceWidget().lookupWidget("../items"); + var view = repeater.getRow(repeater.getSize() - 1).getChild("view-selector"); + view.setValue("edit"); + // View is selected by buttons. + view.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + </javascript> + </fd:on-action> </fd:repeater-action> </fd:widgets> </fd:class> - <fd:class id="select-class"> - <fd:widgets> - <fd:booleanfield id="select"><fd:label>Select</fd:label></fd:booleanfield> - </fd:widgets> - </fd:class> - <fd:class id="view-selector-class"> <fd:widgets> <fd:field id="view-selector"> @@ -66,39 +64,74 @@ <fd:on-value-changed> <javascript> var widget = event.getSourceWidget(); - //var parent = widget.getParent(); - //var union = parent.getChild("union"); - //var type = parent.getChild("type-selector"); var union = widget.lookupWidget("../union"); var type = widget.lookupWidget("../type-selector"); - if(widget.getValue().equals("edit")) { - union.setProcessRequests(true); - type.setProcessRequests(true); + var stuff = union.lookupWidget(union.getValue() + "/stuff"); + if("edit".equals(widget.getValue())) { + union.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + if(stuff != null) { + stuff.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + } + type.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + } else if("view".equals(widget.getValue())){ + union.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + if(stuff != null) { + stuff.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + } + type.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); } else { - union.setProcessRequests(false); - type.setProcessRequests(false); + union.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + type.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); } </javascript> </fd:on-value-changed> </fd:field> + <fd:action id="fold-view" action-command="fold-view"> + <fd:label>F</fd:label> + <fd:hint>Fold</fd:hint> + <fd:on-action> + <javascript> + var view = event.getSourceWidget().lookupWidget("../view-selector"); + view.value="fold"; + </javascript> + </fd:on-action> + </fd:action> + <fd:action id="view-view" action-command="view-view"> + <fd:label>V</fd:label> + <fd:hint>View</fd:hint> + <fd:on-action> + <javascript> + var view = event.getSourceWidget().lookupWidget("../view-selector"); + view.value="view"; + </javascript> + </fd:on-action> + </fd:action> + <fd:action id="edit-view" action-command="edit-view"> + <fd:label>E</fd:label> + <fd:hint>Edit</fd:hint> + <fd:on-action> + <javascript> + var view = event.getSourceWidget().lookupWidget("../view-selector"); + view.value="edit"; + </javascript> + </fd:on-action> + </fd:action> </fd:widgets> </fd:class> <fd:class id="type-selector-class"> <fd:widgets> <fd:field id="type-selector"> - <fd:label>Widget Type</fd:label> + <fd:label>Type</fd:label> <fd:datatype base="string"/> <fd:selection-list> <fd:item value=""><fd:label>Nothing</fd:label></fd:item> - <fd:item value="class"><fd:label>Class</fd:label></fd:item> - <fd:item value="new"><fd:label>New</fd:label></fd:item> - <fd:item value="value"><fd:label>Value</fd:label></fd:item> - <fd:item value="action"><fd:label>Action</fd:label></fd:item> <fd:item value="aggregatefield"><fd:label>AggregateField</fd:label></fd:item> <fd:item value="booleanfield"><fd:label>BooleanField</fd:label></fd:item> + <fd:item value="class"><fd:label>Class</fd:label></fd:item> <fd:item value="field"><fd:label>Field</fd:label></fd:item> + <fd:item value="new"><fd:label>New</fd:label></fd:item> <fd:item value="output"><fd:label>Output</fd:label></fd:item> <fd:item value="repeater"><fd:label>Repeater</fd:label></fd:item> <fd:item value="temp-repeater"><fd:label>Repeater</fd:label></fd:item> @@ -106,25 +139,62 @@ <fd:item value="struct"><fd:label>Struct</fd:label></fd:item> <fd:item value="submit"><fd:label>Submit</fd:label></fd:item> <fd:item value="union"><fd:label>Union</fd:label></fd:item> + <fd:item value="value"><fd:label>Value</fd:label></fd:item> </fd:selection-list> </fd:field> </fd:widgets> </fd:class> - <fd:class id="widget-row-class"> + <fd:class id="item-row-class"> <fd:widgets> - <fd:new id="select-class"/> + + <fd:row-action id="up" action-command="move-up"> + <fd:label>^</fd:label> + <fd:hint>Move up</fd:hint> + </fd:row-action> + + <fd:row-action id="down" action-command="move-down"> + <fd:label>v</fd:label> + <fd:hint>Move down</fd:hint> + </fd:row-action> + + <fd:row-action id="add" action-command="add-after"> + <fd:label>+</fd:label> + <fd:hint>Add after</fd:hint> + <fd:on-action> + <javascript> + var cur_row = Packages.org.apache.cocoon.forms.formmodel.Repeater.getParentRow(event.getSourceWidget()); + var repeater = cur_row.getParent(); + var new_row = repeater.getChild(repeater.indexOf(cur_row)+1); + var view = new_row.getChild("view-selector"); + view.setValue("edit"); + // View is selected by buttons. + view.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + </javascript> + </fd:on-action> + </fd:row-action> + + <fd:row-action id="delete" action-command="delete"> + <fd:label>X</fd:label> + <fd:hint>Delete</fd:hint> + </fd:row-action> + <fd:new id="view-selector-class"/> + <fd:new id="type-selector-class"/> + <fd:union id="union" default="" case="type-selector"> - <fd:datatype base="string"/> <fd:label>Type</fd:label> <fd:widgets> <fd:struct id="class"> <fd:label>Class</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -132,23 +202,35 @@ <fd:struct id="javascript"> <fd:label>Javascript</fd:label> <fd:widgets> - <fd:new id="text-class"/> - <fd:new id="path-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="text-class"/> + <fd:new id="path-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="new"> <fd:label>New</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="union"> <fd:label>Union</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="path-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="path-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -156,8 +238,12 @@ <fd:struct id="value"> <fd:label>Value</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="path-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="path-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> @@ -165,17 +251,25 @@ <fd:struct id="action"> <fd:label>Action</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="aggregatefield"> <fd:label>AggregateField</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> - <fd:new id="required-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + <fd:new id="required-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -183,34 +277,50 @@ <fd:struct id="booleanfield"> <fd:label>BooleanField</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="field"> <fd:label>Field</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> - <fd:new id="required-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + <fd:new id="required-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="output"> <fd:label>Output</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="repeater"> <fd:label>Repeater</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> - <fd:new id="initial-size-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + <fd:new id="initial-size-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -218,8 +328,12 @@ <fd:struct id="temp-repeater"> <fd:label>Repeater</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="parent-path-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="parent-path-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -227,16 +341,24 @@ <fd:struct id="row-action"> <fd:label>RowAction</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="struct"> <fd:label>Struct</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -244,8 +366,12 @@ <fd:struct id="submit"> <fd:label>Submit</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_template.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_template.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/binding_template.xml Wed Nov 10 12:49:18 2004 @@ -18,20 +18,50 @@ xmlns:ft="http://apache.org/cocoon/forms/1.0#template" xmlns:fi="http://apache.org/cocoon/forms/1.0#instance"> - <!-- - CVS $Id: form_model_gui_template.xml,v 1.2 2004/04/12 14:05:09 tim Exp $ - --> - - <!-- - TODO: Add features to "items-class" (e.g. move-up, move-down, add-before, add-after). - --> + <!-- + CVS $Id$ + --> + + <style type="text/css"> + li { + list-style-type: none + } + + /* The actions buttons, placed on the right */ + .actions { + float: right; + padding-top: 0.2em; + } + + /* A "section" contains stuff, related actions and substuff */ + div.section { + padding-top: 0.4em; + padding-bottom: 0.4em; + padding-left: 0.4em; + border: 1px dotted black; + mmargin-top: 0.4em; + margin-bottom: -1px; + } + + /* Indent sub-sections (recursively) */ + div.section div.section { + margin-left: 3em; + border-right: none; + } + + /* Change bg color depending on nesting depth */ + div.section div.section { background-color: #F0F0F0; } + div.section div.section div.section { background-color: #E0E0E0; } + div.section div.section div.section div.section { background-color: #D0D0D0; } + div.section div.section div.section div.section div.section { background-color: #C0C0C0; } + </style> - <title>Form Binding Editor</title> + <title>Swan Form Binding Editor</title> <content> <ft:form-template action="#{$continuation/id}.continue" method="POST"> - <ft:class id="output-id-class"> + <ft:class id="out-id-class"> <b><ft:widget-label id="id"/>:</b> <ft:widget id="id"> <fi:styling type="output"/> @@ -67,13 +97,19 @@ <ft:class id="std-id-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -81,14 +117,20 @@ <ft:class id="std-id-items-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> </ft:choose> @@ -97,15 +139,21 @@ <ft:class id="std-id-label-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> - <ft:new id="output-label-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-label-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> - <ft:new id="label-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + <ft:new id="label-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -113,16 +161,22 @@ <ft:class id="std-id-label-items-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> - <ft:new id="output-label-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-label-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> - <ft:new id="label-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + <ft:new id="label-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> </ft:choose> @@ -131,16 +185,22 @@ <ft:class id="std-id-path-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> - <ft:new id="output-path-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-path-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> - <ft:new id="output-path-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-path-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> - <ft:new id="path-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + <ft:new id="path-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -148,17 +208,23 @@ <ft:class id="std-id-path-items-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> - <ft:new id="output-path-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-path-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> - <ft:new id="output-path-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-path-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> - <ft:new id="path-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + <ft:new id="path-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> </ft:choose> @@ -167,13 +233,19 @@ <ft:class id="std-javascript-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-text-class"/> + <ft:struct id="stuff"> + <ft:new id="output-text-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-text-class"/> + <ft:struct id="stuff"> + <ft:new id="output-text-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="text-class"/> + <ft:struct id="stuff"> + <ft:new id="text-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -181,15 +253,21 @@ <ft:class id="std-path-items-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-path-class"/> + <ft:struct id="stuff"> + <ft:new id="output-path-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-path-class"/> - <ft:new id="items-class"/> + <ft:struct id="stuff"> + <ft:new id="output-path-class"/> + <ft:new id="items-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="path-class"/> - <ft:new id="items-class"/> + <ft:struct id="stuff"> + <ft:new id="path-class"/> + <ft:new id="items-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -197,18 +275,24 @@ <ft:class id="std-repeater-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> - <ft:new id="output-path-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-path-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> - <ft:new id="output-parent-path-class"/> - <ft:new id="items-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-parent-path-class"/> + <ft:new id="items-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> - <ft:new id="parent-path-class"/> - <ft:new id="items-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + <ft:new id="parent-path-class"/> + <ft:new id="items-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -216,17 +300,23 @@ <ft:class id="std-temp-repeater-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> - <ft:new id="output-parent-path-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-parent-path-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> - <ft:new id="output-parent-path-class"/> + <ft:struct id="stuff"> + <ft:new id="out-id-class"/> + <ft:new id="output-parent-path-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> - <ft:new id="parent-path-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + <ft:new id="parent-path-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> </ft:choose> @@ -318,37 +408,47 @@ </ft:class> <ft:class id="view-selector-class"> - <ft:widget id="view-selector"> - <fi:styling list-type="dropdown" submit-on-change="true"/> - </ft:widget> + <ft:choose path="view-selector"> + <ft:when value="fold"> + <ft:widget id="view-view"><fi:styling type="image" src="resources/view.gif"/></ft:widget> + <ft:widget id="edit-view"><fi:styling type="image" src="resources/edit.gif"/></ft:widget> + </ft:when> + <ft:when value="view"> + <ft:widget id="fold-view"><fi:styling type="image" src="resources/fold.gif"/></ft:widget> + <ft:widget id="edit-view"><fi:styling type="image" src="resources/edit.gif"/></ft:widget> + </ft:when> + <ft:when value="edit"> + <ft:widget id="fold-view"><fi:styling type="image" src="resources/fold.gif"/></ft:widget> + <ft:widget id="view-view"><fi:styling type="image" src="resources/view.gif"/></ft:widget> + </ft:when> + </ft:choose> + </ft:class> + + <ft:class id="item-row-class"> + <span class="actions"> + <ft:widget id="up"><fi:styling type="image" src="resources/move_up.gif"/></ft:widget> + <ft:widget id="down"><fi:styling type="image" src="resources/move_down.gif"/></ft:widget> + <ft:widget id="add"><fi:styling type="image" src="resources/new.gif"/></ft:widget> +  <ft:widget id="delete"><fi:styling type="image" src="resources/delete.gif"/></ft:widget> + </span> + <ft:new id="view-selector-class"/> + <ft:new id="type-selector-class"/> + <ft:new id="union-class"/> </ft:class> <ft:class id="items-class"> + <ft:widget id="addItem"><fi:styling type="image" src="resources/new_child.gif"/></ft:widget> <ft:repeater-size id="items"/> - <ul> - <ft:repeater-widget id="items"> - <li> - <ft:widget id="select"/> - <ft:new id="view-selector-class"/> - <ft:new id="type-selector-class"/> - <ft:new id="union-class"/> - </li> - </ft:repeater-widget> - </ul> - <ft:widget id="addItem"/> - <ft:widget id="removeItems"/><br/> - </ft:class> - - <table border="3"> - <tr> - <td> - <p> - <ft:new id="items-class"/> - </p> - <input type="submit"/> - </td> - </tr> - </table> + <ft:repeater-widget id="items"> + <div class="section"><ft:new id="item-row-class"/></div> + </ft:repeater-widget> + </ft:class> + + <p> + <ft:new id="items-class"/> + </p> + <ft:widget id="messages"/><br/> + <input type="submit"/> </ft:form-template> </content> Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/model_binding.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/model_binding.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/model_binding.xml Wed Nov 10 12:49:18 2004 @@ -16,7 +16,7 @@ --> <!-- -Binding for example CForms form model GUI. +Binding for Swan form model editor. @version CVS $Id: form_model_gui_binding.xml,v 1.3 2004/04/12 14:05:09 tim Exp $ --> @@ -232,7 +232,8 @@ <fb:class id="item-row-class"> <fb:javascript id="type-selector" path="." direction="load"> <fb:load-form> - widget.setValue(jxpathPointer.getNode().getFirstChild().getLocalName()); + var node = jxpathPointer.getNode().getFirstChild(); + widget.setValue(node.getLocalName()); </fb:load-form> </fb:javascript> <fb:union id="union" path="."> @@ -258,7 +259,7 @@ </fb:class> <fb:class id="label-class"> - <fb:value id="label" path="fd:label"/> + <fb:value id="label" path="fd:label"/> </fb:class> </fb:context> Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/model_template.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/model_template.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/model_template.xml Wed Nov 10 12:49:18 2004 @@ -56,7 +56,7 @@ div.section div.section div.section div.section div.section { background-color: #C0C0C0; } </style> - <title>Form Model Editor</title> + <title>Swam Form Model Editor</title> <content> <ft:form-template action="#{$continuation/id}.continue" method="POST"> Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/template_binding.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/template_binding.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/template_binding.xml Wed Nov 10 12:49:18 2004 @@ -16,7 +16,7 @@ --> <!-- -Binding for CForms form template editor. +Binding for Swan form template editor. @version CVS $Id$ --> @@ -34,7 +34,9 @@ <fb:insert-node><ft:case/> </fb:insert-node> <fb:struct id="case" path="ft:case"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -45,7 +47,9 @@ <fb:insert-node><ft:class/> </fb:insert-node> <fb:struct id="class" path="ft:class"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -56,6 +60,8 @@ <fb:insert-node><ft:form-template/> </fb:insert-node> <fb:struct id="form-template" path="ft:form-template"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -66,7 +72,9 @@ <fb:insert-node><ft:new/> </fb:insert-node> <fb:struct id="new" path="ft:new"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> </fb:struct> </fb:case> </fb:class> @@ -76,7 +84,9 @@ <fb:insert-node><ft:repeater-size/> </fb:insert-node> <fb:struct id="repeater-size" path="ft:repeater-size"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> </fb:struct> </fb:case> </fb:class> @@ -86,8 +96,10 @@ <fb:insert-node><ft:repeater-widget/> </fb:insert-node> <fb:struct id="repeater-widget" path="ft:repeater-widget"> - <fb:value id="id" path="@id"/> - <fb:insert-node></fb:insert-node> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + <fb:insert-node></fb:insert-node> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -98,11 +110,13 @@ <fb:insert-node><ft:struct/> </fb:insert-node> <fb:struct id="struct" path="ft:struct"> - <fb:value id="id" path="@id"/> - <fb:new id="label-class"/> - <fb:insert-node> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + <fb:new id="label-class"/> + <fb:insert-node> <ft:widgets/> </fb:insert-node> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -113,7 +127,9 @@ <fb:insert-node><ft:union/> </fb:insert-node> <fb:struct id="union" path="ft:union"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> <!--<ft:new id="label-class"/>--> <fb:new id="items-class"/> </fb:struct> @@ -125,7 +141,9 @@ <fb:insert-node><ft:widget/> </fb:insert-node> <fb:struct id="widget" path="ft:widget"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> </fb:struct> </fb:case> </fb:class> @@ -135,7 +153,9 @@ <fb:insert-node><ft:widget-label/> </fb:insert-node> <fb:struct id="widget-label" path="ft:widget-label"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> </fb:struct> </fb:case> </fb:class> @@ -145,6 +165,8 @@ <fb:case id="table" path="."> <fb:insert-node><table/></fb:insert-node> <fb:struct id="table" path="table"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -152,6 +174,8 @@ <fb:case id="tr" path="."> <fb:insert-node><tr/></fb:insert-node> <fb:struct id="tr" path="tr"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -159,6 +183,8 @@ <fb:case id="td" path="."> <fb:insert-node><td/></fb:insert-node> <fb:struct id="td" path="td"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -166,6 +192,8 @@ <fb:case id="p" path="."> <fb:insert-node><p/></fb:insert-node> <fb:struct id="p" path="p"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -173,13 +201,17 @@ <fb:case id="input" path="."> <fb:insert-node><input/></fb:insert-node> <fb:struct id="input" path="input"> - <fb:value id="id" path="@id"/> + <fb:struct id="stuff" path="."> + <fb:value id="id" path="@id"/> + </fb:struct> </fb:struct> </fb:case> <fb:case id="content" path="."> <fb:insert-node><content/></fb:insert-node> <fb:struct id="content" path="content"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -187,6 +219,8 @@ <fb:case id="title" path="."> <fb:insert-node><title/></fb:insert-node> <fb:struct id="title" path="title"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> @@ -194,20 +228,20 @@ <fb:case id="page" path="."> <fb:insert-node><page/></fb:insert-node> <fb:struct id="page" path="page"> + <fb:struct id="stuff" path="."> + </fb:struct> <fb:new id="items-class"/> </fb:struct> </fb:case> </fb:class> - <fb:class id="label-class"> - <fb:value id="label" path="ft:label"/> - </fb:class> - <fb:class id="view-selector-class"> <fb:javascript id="view-selector" path="." direction="load"> <fb:load-form> - widget.setValue("edit"); + widget.setValue("view"); + // View is selected by buttons. + widget.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); </fb:load-form> </fb:javascript> </fb:class> @@ -222,14 +256,11 @@ </fb:class> <fb:class id="item-row-class"> - <fb:new id="view-selector-class"/> - <fb:javascript id="type-selector" path="."> + <fb:javascript id="type-selector" path="." direction="load"> <fb:load-form> var node = jxpathPointer.getNode().getFirstChild(); widget.setValue(node.getLocalName()); </fb:load-form> - <fb:save-form> - </fb:save-form> </fb:javascript> <fb:union id="union" path="."> <fb:new id="case-class"/> @@ -244,6 +275,16 @@ <fb:new id="widget-label-class"/> <fb:new id="default-class"/> </fb:union> + <!-- + The view-selector binding must happen last, + so that all the widgets will exist that the + view-selector's on-value-changed handler needs. + --> + <fb:new id="view-selector-class"/> + </fb:class> + + <fb:class id="label-class"> + <fb:value id="label" path="ft:label"/> </fb:class> </fb:context> Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/template_model.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/template_model.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/template_model.xml Wed Nov 10 12:49:18 2004 @@ -23,36 +23,34 @@ CVS $Id$ --> - <!-- - TODO: - Add features to "items-class" (e.g. move-up, move-down, add-before, add-after). - --> + <fd:messages id="messages"/> <fd:new id="items-class"/> <fd:class id="items-class"> <fd:widgets> <fd:repeater id="items" initial-size="0"> - <fd:label>Widget Templates</fd:label> + <fd:label>Items</fd:label> <fd:widgets> <fd:new id="item-row-class"/> </fd:widgets> </fd:repeater> <fd:repeater-action id="addItem" action-command="add-row" repeater="items"> - <fd:label>New</fd:label> - </fd:repeater-action> - <fd:repeater-action id="removeItems" action-command="delete-rows" repeater="items" select="select"> - <fd:label>Delete</fd:label> + <fd:label>Add Child</fd:label> + <fd:hint>Add child</fd:hint> + <fd:on-action> + <javascript> + var repeater = event.getSourceWidget().lookupWidget("../items"); + var view = repeater.getRow(repeater.getSize() - 1).getChild("view-selector"); + view.setValue("edit"); + // View is selected by buttons. + view.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + </javascript> + </fd:on-action> </fd:repeater-action> </fd:widgets> </fd:class> - <fd:class id="select-class"> - <fd:widgets> - <fd:booleanfield id="select"><fd:label>Select</fd:label></fd:booleanfield> - </fd:widgets> - </fd:class> - <fd:class id="view-selector-class"> <fd:widgets> <fd:field id="view-selector"> @@ -66,21 +64,58 @@ <fd:on-value-changed> <javascript> var widget = event.getSourceWidget(); - //var parent = widget.getParent(); - //var union = parent.getChild("union"); - //var type = parent.getChild("type-selector"); var union = widget.lookupWidget("../union"); var type = widget.lookupWidget("../type-selector"); - if("edit".equals(event.getNewValue())) { - union.setProcessRequests(true); - type.setProcessRequests(true); + var stuff = union.lookupWidget(union.getValue() + "/stuff"); + if("edit".equals(widget.getValue())) { + union.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + if(stuff != null) { + stuff.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + } + type.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + } else if("view".equals(widget.getValue())){ + union.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.ACTIVE); + if(stuff != null) { + stuff.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + } + type.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); } else { - union.setProcessRequests(false); - type.setProcessRequests(false); + union.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + type.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); } </javascript> </fd:on-value-changed> </fd:field> + <fd:action id="fold-view" action-command="fold-view"> + <fd:label>F</fd:label> + <fd:hint>Fold</fd:hint> + <fd:on-action> + <javascript> + var view = event.getSourceWidget().lookupWidget("../view-selector"); + view.value="fold"; + </javascript> + </fd:on-action> + </fd:action> + <fd:action id="view-view" action-command="view-view"> + <fd:label>V</fd:label> + <fd:hint>View</fd:hint> + <fd:on-action> + <javascript> + var view = event.getSourceWidget().lookupWidget("../view-selector"); + view.value="view"; + </javascript> + </fd:on-action> + </fd:action> + <fd:action id="edit-view" action-command="edit-view"> + <fd:label>E</fd:label> + <fd:hint>Edit</fd:hint> + <fd:on-action> + <javascript> + var view = event.getSourceWidget().lookupWidget("../view-selector"); + view.value="edit"; + </javascript> + </fd:on-action> + </fd:action> </fd:widgets> </fd:class> @@ -118,18 +153,54 @@ <fd:class id="item-row-class"> <fd:widgets> - <fd:new id="select-class"/> + + <fd:row-action id="up" action-command="move-up"> + <fd:label>^</fd:label> + <fd:hint>Move up</fd:hint> + </fd:row-action> + + <fd:row-action id="down" action-command="move-down"> + <fd:label>v</fd:label> + <fd:hint>Move down</fd:hint> + </fd:row-action> + + <fd:row-action id="add" action-command="add-after"> + <fd:label>+</fd:label> + <fd:hint>Add after</fd:hint> + <fd:on-action> + <javascript> + var cur_row = Packages.org.apache.cocoon.forms.formmodel.Repeater.getParentRow(event.getSourceWidget()); + var repeater = cur_row.getParent(); + var new_row = repeater.getChild(repeater.indexOf(cur_row)+1); + var view = new_row.getChild("view-selector"); + view.setValue("edit"); + // View is selected by buttons. + view.setState(Packages.org.apache.cocoon.forms.formmodel.WidgetState.DISABLED); + </javascript> + </fd:on-action> + </fd:row-action> + + <fd:row-action id="delete" action-command="delete"> + <fd:label>X</fd:label> + <fd:hint>Delete</fd:hint> + </fd:row-action> + <fd:new id="view-selector-class"/> + <fd:new id="type-selector-class"/> + <fd:union id="union" default="" case="type-selector"> - <fd:datatype base="string"/> <fd:label>Type</fd:label> <fd:widgets> <fd:struct id="case"> <fd:label>Case</fd:label> <fd:widgets> - <fd:new id="id-not-req-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-not-req-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -137,7 +208,11 @@ <fd:struct id="class"> <fd:label>Class</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -145,6 +220,10 @@ <fd:struct id="form-template"> <fd:label>Form Template</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -152,21 +231,33 @@ <fd:struct id="new"> <fd:label>New</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="repeater-size"> <fd:label>Repeater Size</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="repeater-widget"> <fd:label>Repeater Widget</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -174,8 +265,12 @@ <fd:struct id="struct"> <fd:label>Struct</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -183,8 +278,12 @@ <fd:struct id="union"> <fd:label>Union</fd:label> <fd:widgets> - <fd:new id="id-class"/> - <fd:new id="label-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + <fd:new id="label-class"/> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -192,27 +291,43 @@ <fd:struct id="widget"> <fd:label>Widget</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="widget-label"> <fd:label>Widget Label</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="default"> <fd:label>Default</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="table"> <fd:label>Table</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -220,6 +335,10 @@ <fd:struct id="tr"> <fd:label>Table Row</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -227,6 +346,10 @@ <fd:struct id="td"> <fd:label>Table Data</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -234,6 +357,10 @@ <fd:struct id="p"> <fd:label>Paragraph</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -241,13 +368,21 @@ <fd:struct id="input"> <fd:label>Input</fd:label> <fd:widgets> - <fd:new id="id-class"/> + <fd:struct id="stuff"> + <fd:widgets> + <fd:new id="id-class"/> + </fd:widgets> + </fd:struct> </fd:widgets> </fd:struct> <fd:struct id="content"> <fd:label>Content</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -255,6 +390,10 @@ <fd:struct id="title"> <fd:label>Title</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> @@ -262,6 +401,10 @@ <fd:struct id="page"> <fd:label>Page</fd:label> <fd:widgets> + <fd:struct id="stuff"> + <fd:widgets> + </fd:widgets> + </fd:struct> <fd:new id="items-class"/> </fd:widgets> </fd:struct> Modified: cocoon/trunk/src/blocks/forms/samples/swan/forms/template_template.xml ============================================================================== --- cocoon/trunk/src/blocks/forms/samples/swan/forms/template_template.xml (original) +++ cocoon/trunk/src/blocks/forms/samples/swan/forms/template_template.xml Wed Nov 10 12:49:18 2004 @@ -18,15 +18,45 @@ xmlns:ft="http://apache.org/cocoon/forms/1.0#template" xmlns:fi="http://apache.org/cocoon/forms/1.0#instance"> - <!-- - CVS $Id$ - --> - - <!-- - TODO: Add features to "items-class" (e.g. move-up, move-down, add-before, add-after). - --> + <!-- + CVS $Id$ + --> + + <style type="text/css"> + li { + list-style-type: none + } + + /* The actions buttons, placed on the right */ + .actions { + float: right; + padding-top: 0.2em; + } + + /* A "section" contains stuff, related actions and substuff */ + div.section { + padding-top: 0.4em; + padding-bottom: 0.4em; + padding-left: 0.4em; + border: 1px dotted black; + mmargin-top: 0.4em; + margin-bottom: -1px; + } + + /* Indent sub-sections (recursively) */ + div.section div.section { + margin-left: 3em; + border-right: none; + } + + /* Change bg color depending on nesting depth */ + div.section div.section { background-color: #F0F0F0; } + div.section div.section div.section { background-color: #E0E0E0; } + div.section div.section div.section div.section { background-color: #D0D0D0; } + div.section div.section div.section div.section div.section { background-color: #C0C0C0; } + </style> - <title>Form Template Editor</title> + <title>Swan Form Template Editor</title> <content> <ft:form-template action="#{$continuation/id}.continue" method="POST"> @@ -56,13 +86,19 @@ <ft:class id="std-id-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="output-id-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="output-id-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -70,13 +106,19 @@ <ft:class id="std-label-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-label-class"/> + <ft:struct id="stuff"> + <ft:new id="output-label-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-label-class"/> + <ft:struct id="stuff"> + <ft:new id="output-label-class"/> + </ft:struct> </ft:when> <ft:when value="edit"> - <ft:new id="label-class"/> + <ft:struct id="stuff"> + <ft:new id="label-class"/> + </ft:struct> </ft:when> </ft:choose> </ft:class> @@ -84,11 +126,17 @@ <ft:class id="std-items-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> + <ft:struct id="stuff"> + </ft:struct> </ft:when> <ft:when value="view"> + <ft:struct id="stuff"> + </ft:struct> <ft:new id="items-class"/> </ft:when> <ft:when value="edit"> + <ft:struct id="stuff"> + </ft:struct> <ft:new id="items-class"/> </ft:when> </ft:choose> @@ -97,14 +145,20 @@ <ft:class id="std-id-items-class"> <ft:choose path="../../view-selector"> <ft:when value="fold"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="output-id-class"/> + </ft:struct> </ft:when> <ft:when value="view"> - <ft:new id="output-id-class"/> + <ft:struct id="stuff"> + <ft:new id="output-id-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> <ft:when value="edit"> - <ft:new id="id-class"/> + <ft:struct id="stuff"> + <ft:new id="id-class"/> + </ft:struct> <ft:new id="items-class"/> </ft:when> </ft:choose> @@ -251,42 +305,48 @@ </ft:choose> </ft:class> - <!-- DEBUG --> - <!-- - <fi:styling list-type="dropdown" submit-on-change="true"/> - --> <ft:class id="view-selector-class"> - <ft:widget id="view-selector"> - <fi:styling submit-on-change="true"/> - </ft:widget> + <ft:choose path="view-selector"> + <ft:when value="fold"> + <ft:widget id="view-view"><fi:styling type="image" src="resources/view.gif"/></ft:widget> + <ft:widget id="edit-view"><fi:styling type="image" src="resources/edit.gif"/></ft:widget> + </ft:when> + <ft:when value="view"> + <ft:widget id="fold-view"><fi:styling type="image" src="resources/fold.gif"/></ft:widget> + <ft:widget id="edit-view"><fi:styling type="image" src="resources/edit.gif"/></ft:widget> + </ft:when> + <ft:when value="edit"> + <ft:widget id="fold-view"><fi:styling type="image" src="resources/fold.gif"/></ft:widget> + <ft:widget id="view-view"><fi:styling type="image" src="resources/view.gif"/></ft:widget> + </ft:when> + </ft:choose> + </ft:class> + + <ft:class id="item-row-class"> + <span class="actions"> + <ft:widget id="up"><fi:styling type="image" src="resources/move_up.gif"/></ft:widget> + <ft:widget id="down"><fi:styling type="image" src="resources/move_down.gif"/></ft:widget> + <ft:widget id="add"><fi:styling type="image" src="resources/new.gif"/></ft:widget> +  <ft:widget id="delete"><fi:styling type="image" src="resources/delete.gif"/></ft:widget> + </span> + <ft:new id="view-selector-class"/> + <ft:new id="type-selector-class"/> + <ft:new id="union-class"/> </ft:class> <ft:class id="items-class"> + <ft:widget id="addItem"><fi:styling type="image" src="resources/new_child.gif"/></ft:widget> <ft:repeater-size id="items"/> - <ul> - <ft:repeater-widget id="items"> - <li> - <ft:new id="view-selector-class"/> - <ft:new id="type-selector-class"/> - <ft:new id="union-class"/> - </li> - </ft:repeater-widget> - </ul> - <ft:widget id="addItem"/> - <ft:widget id="removeItems"/><br/> - </ft:class> - - <table border="3"> - <tr> - <td> - <p> - <ft:new id="items-class"/> - </p> - <fi:validation-errors/> - <input type="submit"/> - </td> - </tr> - </table> + <ft:repeater-widget id="items"> + <div class="section"><ft:new id="item-row-class"/></div> + </ft:repeater-widget> + </ft:class> + + <p> + <ft:new id="items-class"/> + </p> + <ft:widget id="messages"/><br/> + <input type="submit"/> </ft:form-template> </content>