working example on ComponentUI

diff --git a/lib/ComponentUI/Controller/TestModel/Bar.pm b/lib/ComponentUI/Controller/TestModel/Bar.pm
index 4859b7d..c649d78 100644 (file)
--- a/lib/ComponentUI/Controller/TestModel/Bar.pm
+++ b/lib/ComponentUI/Controller/TestModel/Bar.pm
@@ -12,6 +12,9 @@ __PACKAGE__->config(
       ViewPort => {
         enable_order_by => [qw/name foo published_at/],
         coerce_order_by => { foo => ['foo.last_name', 'foo.first_name'] },
+        layout => 'bar/collection',
+        member_class => 'Reaction::UI::ViewPort::Object',
+        Member => { layout => 'bar/member' }
       }
     }
   },

diff --git a/share/skin/componentui/layout/bar/collection.tt b/share/skin/componentui/layout/bar/collection.tt
new file mode 100644 (file)
index 0000000..9c8f5bd
--- /dev/null
+++ b/share/skin/componentui/layout/bar/collection.tt
@@ -0,0 +1,51 @@
+=widget ListView
+
+=extends collection
+
+=for layout header
+
+[% pager_fragment %]
+
+=for layout footer
+
+[% pager_fragment %]
+
+[% actions %]
+
+=for layout actions
+
+<ul class="collection_actions">
+  [% call_next %]
+</ul>
+
+=for layout action
+
+<li>[% call_next %]</li>
+
+=for layout pager
+
+<ul class="pager">
+  [% first_page %]
+  [% previous_page %]
+  [% page_list %]
+  [% next_page %]
+  [% last_page %]
+</ul>
+
+=for layout numbered_page_this_page
+
+<li> [% page_number %] </li>
+
+=for layout numbered_page
+
+<li> <a href="[% page_uri %]">[% page_number %]</a> </li>
+
+=for layout named_page
+
+<li> <a href="[% page_uri %]">[% page_name %]</a> </li>
+
+=for layout named_page_no_page
+
+<li> [% page_name %] </li>
+
+=cut

diff --git a/share/skin/componentui/layout/bar/member.tt b/share/skin/componentui/layout/bar/member.tt
new file mode 100644 (file)
index 0000000..6d18c95
--- /dev/null
+++ b/share/skin/componentui/layout/bar/member.tt
@@ -0,0 +1,21 @@
+=widget Collection::Grid::Member::WithActions
+
+=for layout widget
+
+<fieldset style="width:50%; border:1px solid black; margin-bottom:4px; display:inline;">
+  <div style="width:100%; text-align:right;">
+     [% actions %]
+  </div>
+   [% field_list %]
+</fieldset><br>
+
+=for layout field
+[% call_next %] <br>
+
+=for layout action
+
+<span style="border:1px solid black; margin-right:3px; padding:2px;">
+  [% call_next %]
+</span>
+
+=cut