This is an automated email from the ASF dual-hosted git repository. danhaywood pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/causeway.git
commit abafa5d6721d67df99b2d3cd2d4335c13fc784c5 Author: danhaywood <[email protected]> AuthorDate: Thu Apr 13 09:33:40 2023 +0100 CAUSEWAY-2485: reworks @Action#cssClassFa --- .../ActionLayoutCssClassPage-description.adoc | 2 +- .../ActionLayoutCssClassFaPage-description.adoc | 43 ++++++++++++++++------ .../cssClassFa/ActionLayoutCssClassFaPage.java | 32 ++++++++++------ 3 files changed, 54 insertions(+), 23 deletions(-) diff --git a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClass/ActionLayoutCssClassPage-description.adoc b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClass/ActionLayoutCssClassPage-description.adoc index c841833134..049a1f06f4 100644 --- a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClass/ActionLayoutCssClassPage-description.adoc +++ b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClass/ActionLayoutCssClassPage-description.adoc @@ -100,7 +100,7 @@ This is because it picks up the global configuration property, as described in t Rather than styling each action individually, it's possible to use a configuration property which defines styles globally. -It works by specifying a set of `regex:CSS` pairs; if the action's identifier matches the regex, then the CSS is applied. +It works by specifying a set of `regex:cssClass` pairs; if the action's identifier matches the regex, then the CSS class is applied. This is a great way to ensure that actions with similar semantics have similar names; they will then pick up the same visual cues. The following is taken from this demo app: diff --git a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage-description.adoc b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage-description.adoc index 214b72da36..b7a8323e1f 100644 --- a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage-description.adoc +++ b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage-description.adoc @@ -1,26 +1,46 @@ :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 [...] -It's quite common for user interfaces to include an icon for each action or menu item as a visual clue as to the purpose of that action. +To help the end-user navigate a page, it can sometimes be helpful to decorate individual actions within icons so that their purpose is more obvious. + The link:https://causeway.apache.org/refguide/2.0.0-SNAPSHOT/applib/index/annotation/ActionLayout.html#cssclassfa[@ActionLayout#cssClassFa] element allows this to be done by specifying the _Font Awesome_ CSS class (or classes) with which to decorate an action. This is used for whether the action is rendered as a button or as a menu item. === How this demo works -This page includes two actinos +This page has a `name` property and two actions, both of which can be used to update that property. +The two actions have different fa icons +* `updateNameWithFaIconOnTheLeft` ++ [source,java,indent=0] ---- -include::ActionLayoutCssClassFaPage.java[tags=actLeftAndRight] +include::ActionLayoutCssClassFaPage.java[tags=updateNameWithFaIconOnTheLeft] ---- +<.> uses the `bus` icon for this action + +* `updateNameWithFaIconOnTheRight` ++ +[source,java,indent=0] +---- +include::ActionLayoutCssClassFaPage.java[tags=updateNameWithFaIconOnTheRight] +---- +<.> use the `car` icon for this action +<.> and place the icon on the right (by default it is placed on the left) -<.> in effect uses the `bus` icon for this action -<.> the `cssClassFaPosition` attribute indicates the position of the _Font Awesome_ icon; in effect the icon is rendered on the _right_ of the action button ==== Related configuration property +Rather than styling each action individually, it's possible to use a configuration property which defines styles globally. + +It works by specifying a set of `regex:cssClassFa` pairs; if the action's identifier matches the regex, then the fa icon is applied. +This is a great way to ensure that actions with similar semantics have similar names; they will then pick up the same visual cues. + +The following is taken from this demo app: + + [source,yaml] .application.yml ---- @@ -28,9 +48,6 @@ causeway: applib: annotation: - action: - execution-publishing: none - command-publishing: none action-layout: css-class-fa: patterns: @@ -44,7 +61,11 @@ causeway: all.*:fa-list, export.*:fa-file-export, import.*:fa-file-import - css-class: - patterns: - delete.*:btn-danger ---- + + +=== .layout.xml + +Instead of using `@ActionLayout#cssClassFa`, it is also possible to specify the fa icon class using the `<action id="..." cssClass="...">` in the link:https://causeway.apache.org/userguide/2.0.0-RC1/fun/ui.html#by-example[.layout.xml] file. + +One advantage of using the `.layout.xml` file is that changes can be picked up without having to restart the application. diff --git a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage.java b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage.java index 6afb263ee4..c56bd2376e 100644 --- a/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage.java +++ b/examples/demo/domain/src/main/java/demoapp/dom/domain/actions/ActionLayout/cssClassFa/ActionLayoutCssClassFaPage.java @@ -48,28 +48,38 @@ public class ActionLayoutCssClassFaPage implements HasAsciiDocDescription { private String name; -//tag::actLeftAndRight[] +//tag::updateNameWithFaIconOnTheLeft[] @Action @ActionLayout( - cssClassFa = "fa-bus" // <.> + cssClassFa = "fa-bus", // <.> + associateWith = "name", + sequence = "1" ) - public Object actionWithFaIconOnTheLeft(final String arg) { + public Object updateNameWithFaIconOnTheLeft(final String arg) { + setName(arg); return this; } + public String default0UpdateNameWithFaIconOnTheLeft() { + return "bus !!!"; + } +//end::updateNameWithFaIconOnTheLeft[] +//tag::updateNameWithFaIconOnTheRight[] @Action @ActionLayout( - cssClassFa = "fa-bus", - cssClassFaPosition = CssClassFaPosition.RIGHT // <.> -//end::actLeftAndRight[] - ,describedAs = "@ActionLayout(cssClassFa = \"fa-bus\", \n" - + "cssClassFaPosition = CssClassFaPosition.RIGHT)" -//tag::actLeftAndRight[] + cssClassFa = "fa-car", // <.> + cssClassFaPosition = CssClassFaPosition.RIGHT, // <.> + associateWith = "name", + sequence = "2" ) - public Object actRight(final String arg) { + public Object updateNameWithFaIconOnTheRight(final String arg) { + setName(arg); return this; } -//end::actLeftAndRight[] + public String default0UpdateNameWithFaIconOnTheRight() { + return "car !!!"; + } +//end::updateNameWithFaIconOnTheRight[] } //end::class[]
