This is an automated email from the ASF dual-hosted git repository.

danhaywood pushed a commit to branch CAUSEWAY-2485
in repository https://gitbox.apache.org/repos/asf/causeway.git

commit 5608398e591304c386fe1344f31875239fbd4391
Author: danhaywood <[email protected]>
AuthorDate: Sun Apr 30 10:19:59 2023 +0100

    CAUSEWAY-2485: fleshes out @CollectionLayout#cssClass
---
 .../ActionChoicesFromPage-description.adoc         |  2 -
 .../CollectionLayout/CollectionLayoutMenu.java     | 22 ++++++++-
 .../CollectionLayoutCssClassPage-description.adoc  | 53 ++++++++++++++++++++--
 .../cssClass/CollectionLayoutCssClassPage.java     | 35 ++++++++++----
 .../CollectionLayoutCssClassPage.layout.xml        | 12 ++++-
 ...llectionLayoutCssClassChildVm-description.adoc} |  6 +--
 .../CollectionLayoutCssClassChildVm.java}          | 41 ++++++++---------
 .../CollectionLayoutCssClassChildVm.layout.xml}    | 15 ++++--
 .../PropertyLayoutCssClassPage-description.adoc    |  8 +---
 .../cssClass/PropertyLayoutCssClassPage.layout.xml |  4 +-
 .../src/main/resources/static/css/application.css  | 17 +++++++
 11 files changed, 156 insertions(+), 59 deletions(-)

diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/Action/choicesFrom/ActionChoicesFromPage-description.adoc
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/Action/choicesFrom/ActionChoicesFromPage-description.adoc
index 71cd4d951b..3601fa5162 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/Action/choicesFrom/ActionChoicesFromPage-description.adoc
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/Action/choicesFrom/ActionChoicesFromPage-description.adoc
@@ -1,7 +1,5 @@
 :Notice: Licensed to the Apache Software Foundation (ASF) under one or more 
contributor license agreements. See the NOTICE file distributed with this work 
for additional information regarding copyright ownership. The ASF licenses this 
file to you under the Apache License, Version 2.0 (the "License"); you may not 
use this file except in compliance with the License. You may obtain a copy of 
the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by 
applicable law or ag [...]
 
-CAUTION: this feature is currently broken in the demo (though it will work in 
most apps); see 
link:https://issues.apache.org/jira/browse/CAUSEWAY-3418[CAUSEWAY-3418].
-
 Actions parameters can be either value types or reference types (typically 
entities), and can be either for  single-valued (a scalar) or multi-valued (a 
list).
 Scalar values can be entered directly, but other combinations require a 
supporting method or other mechanism to provide a list of candidates for the 
end-user to select:
 
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/CollectionLayoutMenu.java
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/CollectionLayoutMenu.java
index 74700859d2..8365219672 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/CollectionLayoutMenu.java
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/CollectionLayoutMenu.java
@@ -18,6 +18,7 @@
  */
 package demoapp.dom.domain.collections.CollectionLayout;
 
+import javax.inject.Inject;
 import javax.inject.Named;
 
 import org.apache.causeway.applib.annotation.Action;
@@ -27,7 +28,10 @@ import org.apache.causeway.applib.annotation.NatureOfService;
 import org.apache.causeway.applib.annotation.PriorityPrecedence;
 import org.apache.causeway.applib.annotation.SemanticsOf;
 
+import demoapp.dom._infra.samples.NameSamples;
+import 
demoapp.dom.domain.collections.Collection.typeOf.child.CollectionTypeOfChildVm;
 import 
demoapp.dom.domain.collections.CollectionLayout.cssClass.CollectionLayoutCssClassPage;
+import 
demoapp.dom.domain.collections.CollectionLayout.cssClass.child.CollectionLayoutCssClassChildVm;
 import 
demoapp.dom.domain.collections.CollectionLayout.defaultView.CollectionLayoutDefaultViewPage;
 import 
demoapp.dom.domain.collections.CollectionLayout.describedAs.CollectionLayoutDescribedAsPage;
 import 
demoapp.dom.domain.collections.CollectionLayout.hidden.CollectionLayoutHiddenPage;
@@ -37,19 +41,34 @@ import 
demoapp.dom.domain.collections.CollectionLayout.sequence.CollectionLayout
 import 
demoapp.dom.domain.collections.CollectionLayout.sortedBy.CollectionLayoutSortedByPage;
 import 
demoapp.dom.domain.collections.CollectionLayout.tableDecorator.CollectionLayoutTableDecoratorPage;
 
+import lombok.RequiredArgsConstructor;
+import lombok.val;
+
 @Named("demo.CollectionLayoutMenu")
 @DomainService(
         nature=NatureOfService.VIEW
 )
 @javax.annotation.Priority(PriorityPrecedence.EARLY)
+@RequiredArgsConstructor(onConstructor_ = {@Inject})
 //@Log4j2
 public class CollectionLayoutMenu {
 
+    final NameSamples samples;
+
     @Action(semantics = SemanticsOf.SAFE)
     @ActionLayout(cssClassFa="fa-pen-nib",
         describedAs = "CSS class to wrap the UI component representing this 
collection")
     public CollectionLayoutCssClassPage cssClass(){
-        return new CollectionLayoutCssClassPage();
+        val page = new CollectionLayoutCssClassPage();
+        samples.stream()
+                .map(CollectionLayoutCssClassChildVm::new
+                )
+                .forEach(e -> page.getChildren().add(e));
+        samples.stream()
+                .map(CollectionLayoutCssClassChildVm::new)
+                .forEach(e -> page.getMoreChildren().add(e));
+
+        return page;
     }
 
     @Action(semantics = SemanticsOf.SAFE)
@@ -108,4 +127,5 @@ public class CollectionLayoutMenu {
         return new CollectionLayoutTableDecoratorPage();
     }
 
+
 }
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage-description.adoc
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage-description.adoc
index 5ce6020672..bd77bd4dd9 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage-description.adoc
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage-description.adoc
@@ -1,8 +1,51 @@
 :Notice: Licensed to the Apache Software Foundation (ASF) under one or more 
contributor license agreements. See the NOTICE file distributed with this work 
for additional information regarding copyright ownership. The ASF licenses this 
file to you under the Apache License, Version 2.0 (the "License"); you may not 
use this file except in compliance with the License. You may obtain a copy of 
the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by 
applicable law or ag [...]
 
-The `cssClass` attribute indicates the CSS class 
-that a collection should have, 
-to allow more targeted styling in application.css.
+To highlight certain information on the page, it can sometimes be helpful to 
style individual collections.
+
+The `cssClass` attribute indicates the CSS class that a collection should have.
+This can be set using either the 
link:https://causeway.apache.org/refguide/2.0.0-RC1/applib/index/annotation/CollectionLayout.html#cssclass[@CollectionLayout#cssClass]
 annotation, or by using the 
link:https://causeway.apache.org/userguide/2.0.0-RC1/fun/ui.html#by-example[.layout.xml]
 layout file.
+
+The `application.css` file is then be used to apply styling to that CSS class.
+
+== How this demo works
+
+This page contains two properties.
+The `children` property uses `@CollectionLayout#cssClass` to specify a custom 
CSS class of "red", while the `childrenUsingLayout` collection specifies a 
custom CSS class using the `layout.xml` file.
+
+In terms of code:
+
+* the `children` property is defined as:
++
+[source,java,indent=0]
+----
+include::CollectionLayoutCssClassPage.java[tags=children]
+----
+<.> explicitly specifies the CSS class to apply for the children `<div>`
+
+
+* the `moreChildren` collection defines a CSS class hint using the 
`Xxx.layout.xml` file:
++
+[source,xml,indent=0,tabsize=4]
+.CollectionLayoutCssClassPage.layout.xml
+----
+<cpt:collection id="moreChildren" cssClass="blue"/>
+----
+
+* the `application.css` contains these styles:
++
+[source,css]
+.application.css
+----
+.collections .red .card .card-header {
+    background-color: red;
+    color: white;
+}
+
+.collections .blue .card .card-header {
+    background-color: dodgerblue;
+    color: white;
+}
+----
+
+One advantage of the layout file over the annotation is that the layout file 
is dynamic: it can be modified and the changes reloaded in a running 
application.
 
-For the purpose of demonstration,
-the _Bootstrap_ predefined CSS class `bg-dark` is shown here.
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.java
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.java
index b0c73e0684..2bef2eeab8 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.java
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.java
@@ -24,6 +24,8 @@ import java.util.List;
 import javax.inject.Named;
 import javax.xml.bind.annotation.XmlAccessType;
 import javax.xml.bind.annotation.XmlAccessorType;
+import javax.xml.bind.annotation.XmlElement;
+import javax.xml.bind.annotation.XmlElementWrapper;
 import javax.xml.bind.annotation.XmlRootElement;
 import javax.xml.bind.annotation.XmlTransient;
 import javax.xml.bind.annotation.XmlType;
@@ -34,6 +36,11 @@ import org.apache.causeway.applib.annotation.DomainObject;
 import org.apache.causeway.applib.annotation.Nature;
 import org.apache.causeway.applib.annotation.ObjectSupport;
 
+import 
demoapp.dom.domain.collections.Collection.domainEvent.CollectionDomainEventPage;
+import 
demoapp.dom.domain.collections.Collection.domainEvent.child.CollectionDomainEventChildVm;
+
+import 
demoapp.dom.domain.collections.CollectionLayout.cssClass.child.CollectionLayoutCssClassChildVm;
+
 import lombok.Getter;
 import lombok.Setter;
 
@@ -41,9 +48,8 @@ import demoapp.dom._infra.asciidocdesc.HasAsciiDocDescription;
 import demoapp.dom.domain._entities.DemoEntity;
 
 //tag::class[]
-@DomainObject(
-        nature=Nature.VIEW_MODEL)
-@Named("demo.CollectionLayoutCssClassVm")
+@Named("demo.CollectionLayoutCssClassPage")
+@DomainObject(nature=Nature.VIEW_MODEL)
 @XmlRootElement(name = "root")
 @XmlType
 @XmlAccessorType(XmlAccessType.FIELD)
@@ -53,14 +59,23 @@ public class CollectionLayoutCssClassPage implements 
HasAsciiDocDescription {
         return "@CollectionLayout#cssClass";
     }
 
-//tag::collection[]
-    @Collection
-    @CollectionLayout(
-        cssClass = "bg-dark")
-    @XmlTransient
+//tag::children[]
+    @Collection()
+    @CollectionLayout(cssClass = "red")             // <.>
+    @XmlElementWrapper(name = "children")
+    @XmlElement(name = "child")
+    @Getter @Setter
+    private List<CollectionLayoutCssClassChildVm> children = new ArrayList<>();
+//end::children[]
+
+//tag::more-children[]
+    @Collection()
+    @CollectionLayout()                             // <.>
+    @XmlElementWrapper(name = "moreChildren")
+    @XmlElement(name = "child")
     @Getter @Setter
-    private List<DemoEntity> collection = new ArrayList<>();
-//end::collection[]
+    private List<CollectionLayoutCssClassChildVm> moreChildren = new 
ArrayList<>();
+//end::more-children[]
 
 }
 //end::class[]
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.layout.xml
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.layout.xml
index 9e55f97df5..dcbbdf1498 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.layout.xml
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.layout.xml
@@ -26,7 +26,17 @@
 
        <bs3:row>
                <bs3:col span="6">
-                       <cpt:fieldSet name="Other" id="other" 
unreferencedProperties="true"/>
+                       <bs3:row>
+                               <bs3:col span="12">
+                                       <cpt:collection id="children"/>
+                                       <cpt:collection id="moreChildren" 
cssClass="blue"/>
+                               </bs3:col>
+                       </bs3:row>
+                       <bs3:row>
+                               <bs3:col span="12">
+                    <cpt:fieldSet name="Other" id="other" 
unreferencedProperties="true"/>
+                </bs3:col>
+                       </bs3:row>
                </bs3:col>
                <bs3:col span="6">
                        <cpt:fieldSet name="Description" id="description" >
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage-description.adoc
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm-description.adoc
similarity index 76%
copy from 
examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage-description.adoc
copy to 
examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm-description.adoc
index 5ce6020672..b647845933 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage-description.adoc
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm-description.adoc
@@ -1,8 +1,4 @@
 :Notice: Licensed to the Apache Software Foundation (ASF) under one or more 
contributor license agreements. See the NOTICE file distributed with this work 
for additional information regarding copyright ownership. The ASF licenses this 
file to you under the Apache License, Version 2.0 (the "License"); you may not 
use this file except in compliance with the License. You may obtain a copy of 
the License at. http://www.apache.org/licenses/LICENSE-2.0 . Unless required by 
applicable law or ag [...]
 
-The `cssClass` attribute indicates the CSS class 
-that a collection should have, 
-to allow more targeted styling in application.css.
+This is a child object used in the demonstration of 
`CollectionLayout#cssClass()`.
 
-For the purpose of demonstration,
-the _Bootstrap_ predefined CSS class `bg-dark` is shown here.
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.java
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm.java
similarity index 64%
copy from 
examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.java
copy to 
examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm.java
index b0c73e0684..3be73c137d 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.java
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm.java
@@ -16,51 +16,46 @@
  *  specific language governing permissions and limitations
  *  under the License.
  */
-package demoapp.dom.domain.collections.CollectionLayout.cssClass;
-
-import java.util.ArrayList;
-import java.util.List;
+package demoapp.dom.domain.collections.CollectionLayout.cssClass.child;
 
 import javax.inject.Named;
 import javax.xml.bind.annotation.XmlAccessType;
 import javax.xml.bind.annotation.XmlAccessorType;
+import javax.xml.bind.annotation.XmlElement;
 import javax.xml.bind.annotation.XmlRootElement;
-import javax.xml.bind.annotation.XmlTransient;
 import javax.xml.bind.annotation.XmlType;
 
-import org.apache.causeway.applib.annotation.Collection;
-import org.apache.causeway.applib.annotation.CollectionLayout;
 import org.apache.causeway.applib.annotation.DomainObject;
 import org.apache.causeway.applib.annotation.Nature;
-import org.apache.causeway.applib.annotation.ObjectSupport;
+import org.apache.causeway.applib.annotation.Property;
+import org.apache.causeway.applib.annotation.Title;
 
 import lombok.Getter;
+import lombok.NoArgsConstructor;
 import lombok.Setter;
 
 import demoapp.dom._infra.asciidocdesc.HasAsciiDocDescription;
-import demoapp.dom.domain._entities.DemoEntity;
 
 //tag::class[]
-@DomainObject(
-        nature=Nature.VIEW_MODEL)
-@Named("demo.CollectionLayoutCssClassVm")
-@XmlRootElement(name = "root")
+@XmlRootElement(name = "demo.CollectionLayoutCssClassChildVm")
 @XmlType
 @XmlAccessorType(XmlAccessType.FIELD)
-public class CollectionLayoutCssClassPage implements HasAsciiDocDescription {
+@Named("demo.CollectionLayoutCssClassChildVm")
+@DomainObject(nature=Nature.VIEW_MODEL)
+@NoArgsConstructor
+public class CollectionLayoutCssClassChildVm implements HasAsciiDocDescription 
{
 
-    @ObjectSupport public String title() {
-        return "@CollectionLayout#cssClass";
+//end::class[]
+    public CollectionLayoutCssClassChildVm(final String value) {
+        this.value = value;
     }
 
-//tag::collection[]
-    @Collection
-    @CollectionLayout(
-        cssClass = "bg-dark")
-    @XmlTransient
+//tag::class[]
+    @Title
+    @Property()
+    @XmlElement(required = true)
     @Getter @Setter
-    private List<DemoEntity> collection = new ArrayList<>();
-//end::collection[]
+    private String value;
 
 }
 //end::class[]
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.layout.xml
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm.layout.xml
similarity index 82%
copy from 
examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.layout.xml
copy to 
examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm.layout.xml
index 9e55f97df5..a5d295bce2 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/CollectionLayoutCssClassPage.layout.xml
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/collections/CollectionLayout/cssClass/child/CollectionLayoutCssClassChildVm.layout.xml
@@ -26,7 +26,14 @@
 
        <bs3:row>
                <bs3:col span="6">
-                       <cpt:fieldSet name="Other" id="other" 
unreferencedProperties="true"/>
+                       <bs3:row>
+                               <bs3:col span="12">
+                                       <cpt:fieldSet name="Properties" 
id="properties">
+                                               <cpt:property id="value"/>
+                                       </cpt:fieldSet>
+                                       <cpt:fieldSet name="Other" id="other" 
unreferencedProperties="true"/>
+                               </bs3:col>
+                       </bs3:row>
                </bs3:col>
                <bs3:col span="6">
                        <cpt:fieldSet name="Description" id="description" >
@@ -36,9 +43,9 @@
                                <cpt:action id="inspectMetamodel"  
position="PANEL_DROPDOWN"/>
                                <cpt:action id="downloadMetamodelXml"  
position="PANEL_DROPDOWN"/>
                                <cpt:action id="downloadJdoMetamodel"  
position="PANEL_DROPDOWN"/>
-                               <cpt:action id="recentCommands"  
position="PANEL_DROPDOWN"/>
-                               <cpt:action id="recentExecutions"  
position="PANEL_DROPDOWN"/>
-                               <cpt:action id="recentAuditTrailEntries"  
position="PANEL_DROPDOWN"/>
+                <cpt:action id="recentCommands"  position="PANEL_DROPDOWN"/>
+                <cpt:action id="recentExecutions"  position="PANEL_DROPDOWN"/>
+                <cpt:action id="recentAuditTrailEntries"  
position="PANEL_DROPDOWN"/>
                                <cpt:action id="impersonateWithRoles"  
position="PANEL_DROPDOWN"/>
                                <cpt:action id="openRestApi" 
position="PANEL_DROPDOWN" />
                                <cpt:property id="description"/>
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage-description.adoc
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage-description.adoc
index b12f277a98..0f5ad164db 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage-description.adoc
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage-description.adoc
@@ -8,7 +8,7 @@ The `cssClass` attribute indicates that the `<div>` containing 
the property or p
 
 * for parameters, the attribute can be specified using the 
link:https://causeway.apache.org/refguide/2.0.0-RC1/applib/index/annotation/ParameterLayout.html#cssclass[@PropertyLayout#cssClass]
 annotation
 
-The `application.css` file can then be used to apply styling to that CSS class
+The `application.css` file is then be used to apply styling to that CSS class.
 
 == How this demo works
 
@@ -40,7 +40,7 @@ 
include::PropertyLayoutCssClassPage_updateName.java[tags=annotation]
 [source,xml,indent=0,tabsize=4]
 .PropertyLayoutCssClassPage.layout.xml
 ----
-<cpt:property id="propertyUsingLayout" cssClass="red"/>
+<cpt:property id="notes" cssClass="blue"/>
 ----
 
 * the `application.css` contains these styles:
@@ -71,7 +71,3 @@ 
include::PropertyLayoutCssClassPage_updateName.java[tags=annotation]
 
 One advantage of the layout file over the annotation is that the layout file 
is dynamic: it can be modified and the changes reloaded in a running 
application.
 
-
-TIP: It is sometimes necessary to invoke the `Rebuild Metamodel` action to see 
this take effect.
-
-
diff --git 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage.layout.xml
 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage.layout.xml
index 64faac9ee9..7eba319438 100644
--- 
a/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage.layout.xml
+++ 
b/examples/demo/domain/src/main/java/demoapp/dom/domain/properties/PropertyLayout/cssClass/PropertyLayoutCssClassPage.layout.xml
@@ -30,9 +30,9 @@
                 <cpt:property id="name"/>
             </cpt:fieldSet>
                        <cpt:fieldSet name="Layout File" id="layout-file">
-<!-- tag::layout-file[] -->
+<!--tag::layout-file[] -->
                                <cpt:property id="notes" cssClass="blue"/>
-<!-- end::layout-file[] -->
+<!--end::layout-file[] -->
                        </cpt:fieldSet>
                        <cpt:fieldSet name="Contributed" id="contributed"/>
                        <cpt:fieldSet name="Meta-annotated" 
id="meta-annotated"/>
diff --git a/examples/demo/domain/src/main/resources/static/css/application.css 
b/examples/demo/domain/src/main/resources/static/css/application.css
index bd64c5c956..ba441dea35 100644
--- a/examples/demo/domain/src/main/resources/static/css/application.css
+++ b/examples/demo/domain/src/main/resources/static/css/application.css
@@ -18,6 +18,23 @@
  *
  */
 
+/*
+ * Demonstrates use of @CollectionLayout(cssClass='red')
+ */
+.collections .red .card .card-header {
+    background-color: red;
+    color: white;
+}
+
+/*
+ * Demonstrates use of @CollectionLayout(cssClass='blue')
+ */
+.collections .blue .card .card-header {
+    background-color: dodgerblue;
+    color: white;
+}
+
+
 /*
  * Demonstrates use of @PropertyLayout(cssClass='red')
  */

Reply via email to