svn commit: r1558719 - in /isis/site/trunk/content: applib-guide/how-tos/how-to-tweak-the-ui-using-css-classes.md documentation.md

[da...@apache.org]

Author: danhaywood
Date: Thu Jan 16 09:03:13 2014
New Revision: 1558719

URL: http://svn.apache.org/r1558719
Log:
tweak UI

Added:
    isis/site/trunk/content/applib-guide/how-tos/how-to-tweak-the-ui-using-css-classes.md
Modified:
    isis/site/trunk/content/documentation.md

Added: isis/site/trunk/content/applib-guide/how-tos/how-to-tweak-the-ui-using-css-classes.md
URL: http://svn.apache.org/viewvc/isis/site/trunk/content/applib-guide/how-tos/how-to-tweak-the-ui-using-css-classes.md?rev=1558719&view=auto
==============================================================================
--- isis/site/trunk/content/applib-guide/how-tos/how-to-tweak-the-ui-using-css-classes.md (added)
+++ isis/site/trunk/content/applib-guide/how-tos/how-to-tweak-the-ui-using-css-classes.md Thu Jan 16 09:03:13 2014
@@ -0,0 +1,76 @@
+How to tweak the UI using CSS classes
+-------------------------------------
+
+> This hint applies to the Wicket viewer
+
+The HTML generated by the Wicket viewer include plenty of CSS classes so that you can tweak the UI if required.
+
+### Targetting individual members
+
+For example, the `ToDoItem` object of the [ToDo app](../../getting-started/quickstart-archetype.html) has a `notes` property.  The HTML for this will be something like:
+
+    <div>
+        <div class="property ToDoItem-notes">
+            <div class="multiLineStringPanel scalarNameAndValueComponentType">
+                <label for="id83" title="">
+                    <span class="scalarName">Notes</span>
+                    <span class="scalarValue">
+                        <textarea
+                            name="middleColumn:memberGroup:1:properties:4:property:scalarIfRegular:scalarValue" 
+                            disabled="disabled" 
+                            id="id83" rows="5" maxlength="400" size="125" 
+                            title="">
+                        </textarea>
+                        <span>
+                        </span>
+                    </span>
+                </label>
+           </div>
+        </div>
+    </div>
+    
+
+The `src/main/webapp/css/application.css` file is the place to add application-specific styles.  By way of an example, if (for some reason) we wanted to completely hide the notes value, we could do so using:
+
+    div.ToDoItem-notes span.scalarValue {
+        display: none;
+    }
+
+You can use a similar approach for collections and actions.
+
+
+### Targetting members through a custom CSS style
+
+The above technique works well if you know the class member to target, but you might instead want to apply a custom style to a set of members.  For this, you can use the `@CssClass`.
+
+For example, in the `ToDoItem` class (as shown [here](https://github.com/apache/isis/blob/prepare/isis-viewer-wicket-1.3.1-RC1/example/application/quickstart_wicket_restful_jdo/dom/src/main/java/dom/todo/ToDoItem.java#L172)) the following annotation (indicating that this is a key, important, property) :
+
+    @CssClass("x-key")
+    public LocalDate getDueBy() {
+        return dueBy;
+    }
+
+would generate the HTML:
+
+    <div>
+        <div class="property ToDoItem-dueBy x-key">
+            ...
+        </div>
+    </div>
+
+This can then be targeted, for example using:
+
+    div.x-key span.scalarName {
+    	color: red;
+    }
+
+
+Note also that instead of using `@CssClass` annotation, you can also specify the CSS style using a [dynamic layout](../../core/dynamic-layouts.html) JSON file:
+
+    ...
+    dueBy: {
+        cssClass: { value: "x-key" }
+    },
+    ...
+
+This is in fact how the `ToDoItem` class has been refactored to, as shown [here](https://github.com/apache/isis/blob/5e5b07c4691cbd651023c6ed8b7b756bc8370e09/example/application/quickstart_wicket_restful_jdo/dom/src/main/java/dom/todo/ToDoItem.layout.json#L94).
\ No newline at end of file

Modified: isis/site/trunk/content/documentation.md
URL: http://svn.apache.org/viewvc/isis/site/trunk/content/documentation.md?rev=1558719&r1=1558718&r2=1558719&view=diff
==============================================================================
--- isis/site/trunk/content/documentation.md (original)
+++ isis/site/trunk/content/documentation.md Thu Jan 16 09:03:13 2014
@@ -194,6 +194,7 @@ For both:
 ### UI layout & hints
 
 * [Static and dynamic layouts](core/dynamic-layouts.html)
+* [Tweaking CSS classes](./applib-guide/how-tos/how-to-tweak-the-ui-using-css-classes.html)
 * [Name/description of an object](./applib-guide/how-tos/how-to-05-010-How-to-specify-a-name-or-description-for-an-object.html)
 * [Name/description of a property](./applib-guide/how-tos/how-to-05-020-How-to-specify-a-name-or-description-for-a-property.html)
 * [Name/description of a collection](./applib-guide/how-tos/how-to-05-030-How-to-specify-a-name-or-description-for-a-collection.html)