Author: vmolotkov Date: 2007-11-22 12:04:20 -0500 (Thu, 22 Nov 2007) New Revision: 4197 Modified: branches/3.1.x/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx Log: listShuttle functionality Modified: branches/3.1.x/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx =================================================================== --- branches/3.1.x/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx 2007-11-22 17:02:42 UTC (rev 4196) +++ branches/3.1.x/sandbox/ui/listShuttle/src/main/templates/org/richfaces/htmlListShuttle.jspx 2007-11-22 17:04:20 UTC (rev 4197) @@ -25,79 +25,78 @@ <f:clientId var="clientId"/> <vcp:body> <f:clientId var="clientId"/> - <div id="#{clientId}" x:passThruWithExclusions="id"> - <input id="#{clientId}focusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" name="focusKeeper"/> - <input id="#{clientId}valueKeeper" type="hidden" name="#{clientId}" value="#{component.submittedString}"/> - - <table id="#{clientId}table" cellpadding="0" cellspacing="0" class="ol_body"> - <tbody> - <tr> - <td class="ol_caption"> - <f:call name="encodeSLCaption"/> - </td> - </tr> - <tr> - <td> - <div id="#{clientId}headerBox" class="ol_list ol_outputlist"> - <div class="ol_list_header" style="width: #{component.attributes['listWidth']}px;"> - <table id="#{clientId}internal_header_tab" class="ol_internal_header_tab rich-ordering-list-items" cellpadding="0" cellspacing="0"> - <f:call name="encodeSLHeader"/> - </table> + <div id="#{clientId}" style="display:inline;"> + <div id="#{clientId}sourceList" x:passThruWithExclusions="id"> + <input id="#{clientId}focusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" name="focusKeeper"/> + <input id="#{clientId}valueKeeper" type="hidden" name="#{clientId}" value="#{component.submittedString}"/> + + <table id="#{clientId}table" cellpadding="0" cellspacing="0" class="ol_body"> + <tbody> + <tr> + <td class="ol_caption"> + <f:call name="encodeSLCaption"/> + </td> + </tr> + <tr> + <td> + <div id="#{clientId}headerBox" class="ol_list ol_outputlist"> + <div class="ol_list_header" style="width: #{component.attributes['listWidth']}px;"> + <table id="#{clientId}internal_header_tab" class="ol_internal_header_tab rich-ordering-list-items" cellpadding="0" cellspacing="0"> + <f:call name="encodeSLHeader"/> + </table> + </div> + <div id="#{clientId}contentBox" class="ol_list_content" style="width: #{component.attributes['listWidth']}px; height:#{component.attributes['listHeight']}px;"> + <table id="#{clientId}internal_tab" class="ol_internal_tab" cellpadding="0" cellspacing="0"> + <tbody id="#{clientId}tbody"> + <f:call name="encodeSLRows" /> + </tbody> + </table> + </div> </div> - <div id="#{clientId}contentBox" class="ol_list_content" style="width: #{component.attributes['listWidth']}px; height:#{component.attributes['listHeight']}px;"> - <table id="#{clientId}internal_tab" class="ol_internal_tab" cellpadding="0" cellspacing="0"> - <tbody id="#{clientId}tbody"> - <f:call name="encodeSLRows" /> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> - </table> - <a id="#{clientId}sortLabel" href="#">Header</a> - </div> - - <div id="#{clientId}" x:passThruWithExclusions="id"> - <input id="#{clientId}tlFocusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" name="focusKeeper"/> - <input id="#{clientId}tlValueKeeper" type="hidden" name="#{clientId}" value="#{component.submittedString}"/> + </td> + </tr> + </tbody> + </table> + </div> - <table id="#{clientId}tlTable" cellpadding="0" cellspacing="0" class="ol_body"> - <tbody> - <tr> - <td colspan="2" class="ol_caption"> - <f:call name="encodeTLCaption"/> - </td> - </tr> - <tr> - <td> - <div id="#{clientId}tlHeaderBox" class="ol_list ol_outputlist"> - <div class="ol_list_header" style="width: #{component.attributes['listWidth']}px;"> - <table id="#{clientId}tlInternal_header_tab" class="ol_internal_header_tab rich-ordering-list-items" cellpadding="0" cellspacing="0"> - <f:call name="encodeTLHeader"/> - </table> + <div id="#{clientId}targetList" x:passThruWithExclusions="id"> + <input id="#{clientId}tlFocusKeeper" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" name="focusKeeper"/> + <input id="#{clientId}tlValueKeeper" type="hidden" name="#{clientId}" value="#{component.submittedString}"/> + + <table id="#{clientId}tlTable" cellpadding="0" cellspacing="0" class="ol_body"> + <tbody> + <tr> + <td colspan="2" class="ol_caption"> + <f:call name="encodeTLCaption"/> + </td> + </tr> + <tr> + <td> + <div id="#{clientId}tlHeaderBox" class="ol_list ol_outputlist"> + <div class="ol_list_header" style="width: #{component.attributes['listWidth']}px;"> + <table id="#{clientId}tlInternal_header_tab" class="ol_internal_header_tab rich-ordering-list-items" cellpadding="0" cellspacing="0"> + <f:call name="encodeTLHeader"/> + </table> + </div> + <div id="#{clientId}tlContentBox" class="ol_list_content" style="width: #{component.attributes['listWidth']}px; height:#{component.attributes['listHeight']}px;"> + <table id="#{clientId}tlInternal_tab" class="ol_internal_tab" cellpadding="0" cellspacing="0"> + <tbody id="#{clientId}tlTbody"> + <f:call name="encodeTLRows" /> + </tbody> + </table> + </div> </div> - <div id="#{clientId}tlContentBox" class="ol_list_content" style="width: #{component.attributes['listWidth']}px; height:#{component.attributes['listHeight']}px;"> - <table id="#{clientId}tlInternal_tab" class="ol_internal_tab" cellpadding="0" cellspacing="0"> - <tbody id="#{clientId}tlTbody"> - <f:call name="encodeTLRows" /> - </tbody> - </table> + </td> + <td class="ol_center_button_col_valign"> + <div class="ol_button_layout"> + <f:call name="encodeTLControlsFacets" /> </div> - </div> - </td> - <td class="ol_center_button_col_valign"> - <div class="ol_button_layout"> - <f:call name="encodeTLControlsFacets" /> - </div> - </td> - </tr> - </tbody> - </table> - <a id="#{clientId}sortLabel" href="#">Header</a> - - </div> + </td> + </tr> + </tbody> + </table> + </div> + </div> </vcp:body> <f:clientId var="cId"/> <script type="text/javascript"> @@ -111,8 +110,8 @@ document.body.className = "body"; function init() { var cotrolsIdPrefix = [['up', 'disup'], ['down', 'disdown'], ['last', 'dislast'], ['first','disfirst']]; - var listShuttle = new Richfaces.ListShuttle(new Richfaces.OrderingList('#{cId}', '#{cId}internal_tab', '#{cId}internal_header_tab', '#{cId}focusKeeper', '#{cId}valueKeeper', cotrolsIdPrefix, '#{cId}sortLabel', function() {#{component.attributes['onorderchanged']}}), - new Richfaces.ListBase('#{cId}', '#{cId}tlInternal_tab', '#{cId}tlInternal_header_tab', '#{cId}tlFocusKeeper', '#{cId}tlValueKeeper', cotrolsIdPrefix, '#{cId}tlSortLabel', function() {#{component.attributes['onorderchanged']}}), + var listShuttle = new Richfaces.ListShuttle(new Richfaces.OrderingList('#{cId}targetList', '#{cId}internal_tab', '#{cId}internal_header_tab', '#{cId}focusKeeper', '#{cId}valueKeeper', cotrolsIdPrefix, '#{cId}sortLabel', function() {#{component.attributes['onorderchanged']}}), + new Richfaces.ListBase('#{cId}sourceList', '#{cId}tlInternal_tab', '#{cId}tlInternal_header_tab', '#{cId}tlFocusKeeper', '#{cId}tlValueKeeper', cotrolsIdPrefix, '#{cId}tlSortLabel', function() {#{component.attributes['onorderchanged']}}), "#{cId}", cotrolsIdPrefix); var sourceLayoutManager = new LayoutManager('#{cId}internal_header_tab', '#{cId}internal_tab'); var targetLayoutManager = new LayoutManager('#{cId}tlInternal_header_tab', '#{cId}tlInternal_tab');