You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by bu...@apache.org on 2015/04/15 23:40:09 UTC

svn commit: r947786 [25/30] - in /websites/staging/isis/trunk: cgi-bin/ content/ content/docs/ content/docs/css/asciidoctor/ content/docs/css/font-awesome/4.3.0/css/ content/docs/css/font-awesome/4.3.0/fonts/ content/docs/css/font-awesome/4.3.0/less/ c...

Added: websites/staging/isis/trunk/content/docs/user-guide/user-guide-how-tos-triggering-events.html
==============================================================================
--- websites/staging/isis/trunk/content/docs/user-guide/user-guide-how-tos-triggering-events.html (added)
+++ websites/staging/isis/trunk/content/docs/user-guide/user-guide-how-tos-triggering-events.html Wed Apr 15 21:40:06 2015
@@ -0,0 +1,972 @@
+<!doctype html>
+
+<html class="no-js" lang="en">
+
+<head>
+
+    <meta charset="utf-8"/>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+
+
+    <title>User Guide: How-tos: Triggering Events</title>
+
+
+
+    <!--
+
+        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 agreed to in writing,
+
+        software distributed under the License is distributed on an
+
+        "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+
+        KIND, either express or implied.  See the License for the
+
+        specific language governing permissions and limitations
+
+        under the License.
+
+    -->
+
+
+
+    <!-- No caching headers -->
+
+    <meta http-equiv="cache-control" content="no-cache" />
+
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta http-equiv="expires" content="-1" />
+
+
+
+
+
+    <link rel="stylesheet" href="../css/foundation/5.5.1/foundation.css"/>
+
+    <script src="../js/foundation/5.5.1/vendor/modernizr.js"></script>
+
+
+
+    <link href="../css/asciidoctor/stylesheets/foundation-potion.css" rel="stylesheet">
+
+
+
+    <link href="../css/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
+
+
+
+    <style type="text/css">
+
+        #forkongithub a{
+
+            display: none;
+
+            background:#090;
+
+            color:#fff;
+
+            text-decoration:none;
+
+            font-family:arial, sans-serif;
+
+            text-align:center;
+
+            font-weight:bold;
+
+            padding:5px 40px;
+
+            font-size:1rem;
+
+            line-height:2rem;
+
+            position:relative;
+
+            transition:0.5s;
+
+        }
+
+        #forkongithub a:hover{
+
+            background:#0D0;
+
+            color:#fff;
+
+        }
+
+        #forkongithub a::before,
+
+        #forkongithub a::after{
+
+            content:"";width:100%;
+
+            display:block;
+
+            position:fixed;
+
+            top:1px;
+
+            left:0;
+
+            height:1px;
+
+            background:#fff;
+
+            z-index: 9999;
+
+        }
+
+        #forkongithub a::after{
+
+            bottom:1px;
+
+            top:auto;
+
+        }
+
+        @media screen and (min-width:768px){
+
+            #forkongithub{
+
+                position:fixed;
+
+                display:block;
+
+                top:0;
+
+                right:0;
+
+                width:250px;
+
+                overflow:hidden;
+
+                height:250px;
+
+                z-index: 9999;
+
+            }
+
+            #forkongithub a{
+
+                display:inherit;
+
+                width:250px;
+
+                position:fixed;
+
+                font-size:small;
+
+                top:40px;
+
+                right:-60px;
+
+                transform:rotate(45deg);
+
+                -webkit-transform:rotate(45deg);
+
+                -ms-transform:rotate(45deg);
+
+                box-shadow:4px 4px 10px rgba(0,0,0,0.8);
+
+            }
+
+        }
+
+    </style>
+
+
+
+    <style>
+
+        body {
+
+          position: relative;
+
+        }
+
+
+
+        body div#toc li,
+
+        body div#toc2 li {
+
+            list-style-type: none;
+
+        }
+
+
+
+        div#doc-content {
+
+            margin-top: 30px;
+
+        }
+
+
+
+        body div#toc li.active-region:before,
+
+        body div#toc2 li.active-region:before {
+
+            content: "\00BB \0020";
+
+            margin-left: -12px;
+
+        }
+
+
+
+        body div#toc li a.active,
+
+        body div#toc2 li a.active {
+
+            color: red;
+
+        }
+
+
+
+        body div#toc.toc,
+
+        body div#toc.toc2 {
+
+            position: fixed;
+
+            left: auto;
+
+            padding-top: 120px;
+
+            z-index: auto;
+
+            background-color: white;
+
+            border-left-color: #eee;
+
+            border-left-style: solid;
+
+            border-right: none;
+
+        }
+
+    </style>
+
+
+
+</head>
+
+<body>
+
+
+
+    <span id="forkongithub">
+
+        <a href="https://github.com/apache/isis">Fork me on GitHub</a>
+
+    </span>
+
+
+
+<div class="row">
+
+
+
+    <div class="fixed contain-to-grid">
+
+        <nav class="top-bar" data-topbar role="navigation">
+
+            <ul class="title-area">
+
+                <li class="name">
+
+                    <h1>
+
+                        <a href="/index.html">Apache Isis&trade;</a>
+
+                    </h1>
+
+                </li>
+
+                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+
+                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+
+            </ul>
+
+
+
+            <section class="top-bar-section">
+
+                <ul class="right">
+
+
+
+                    <li class="has-form">
+
+                       <FORM class="searchbox navbar-form navbar-right" id="searchbox_012614087480249044419:dn-q5gtwxya" action="http://www.google.com/cse">
+
+                        <div class="row collapse">
+
+                            <input type="hidden" name="cx" value="012614087480249044419:dn-q5gtwxya">
+
+                            <INPUT type="hidden" name="cof" value="FORID:0">
+
+                            <INPUT class="form-control" name="q" type="text" placeholder="Search">
+
+                        </div>
+
+                    </FORM>
+
+                     </li>
+
+
+
+                </ul>
+
+
+
+                <!-- Left Nav Section -->
+
+                <ul class="left">
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#" >Demos</b></a>
+
+                      <ul class="dropdown">
+
+                        <li><a href="/intro/elevator-pitch/isis-in-pictures.html">Screenshots</a></li>
+
+                        <li><a href="/intro/tutorials/screencasts.html">Screencasts&nbsp;<img src="/images/tv_show-25.png"></a></li>
+
+                        <li><a href="/intro/powered-by/powered-by.html">Powered by</a></li>
+
+                        <li><a href="http://isisdemo.mmyco.co.uk/" target="_blank">Online Demo</a></li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                    <li><a href="/documentation">Documentation</a></li>
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#">Downloads</a>
+
+                      <ul class="dropdown">
+
+                        <li><a href="/intro/getting-started/simpleapp-archetype.html">Isis (Maven archetype)</a></li>
+
+                        <li><a href="/download.html">Isis (downloads)</a></li>
+
+                        <li><a href="http://www.isisaddons.org" target="_blank">Isis Add-ons (not ASF)</a></li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#">Help</a>
+
+                      <ul class="dropdown">
+
+                        <li><a href="/support.html">Mailing Lists</a></li>
+
+                        <li><a href="http://isis.markmail.org/search/?q=" target="_blank">Mailing List Archives</a></li>
+
+                        <li><a href="https://issues.apache.org/jira/browse/ISIS" target="_blank">JIRA</a></li>
+
+                        <li><a href="http://github.com/apache/isis" target="_blank">Github mirror</a></li>
+
+                        <li><a href="http://stackoverflow.com/questions/tagged/isis" target="_blank">Stack Overflow</a></li>
+
+                        <li><a href="/contributors/contributing.html">How to contribute</a></li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#" >@ASF</a>
+
+                      <ul class="dropdown">
+
+                        <li>
+
+                          <a href="http://www.apache.org/" target="_blank">Apache Homepage <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/licenses/" target="_blank">Licenses <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/security/" target="_blank">Security <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/foundation/thanks.html">Thanks <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="{{base}}more-thanks.html">More thanks <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                </ul>
+
+
+
+            </section>
+
+        </nav>
+
+    </div>
+
+</div>
+
+
+
+<div class="row">
+
+    <div class="large-8 medium-8 columns">
+
+
+
+        <div id="doc-content">
+
+          <div id="preamble">
+<div class="sectionbody">
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+TODO
+</td>
+</tr>
+</table>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_publishing_and_subscribing_to_events_pulling_changes">Publishing and Subscribing to Events (Pulling Changes)</h2>
+<div class="sectionbody">
+
+</div>
+</div>
+<div class="sect1">
+<h2 id="_pushing_changes">Pushing Changes</h2>
+<div class="sectionbody">
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+this technique is much less powerful than the event bus described in <a href="#_publishing_and_subscribing_to_events_pulling_changes">Publishing and Subscribing to Events (Pulling Changes)</a>).  We present it mostly for completeness.
+</td>
+</tr>
+</table>
+</div>
+<div class="sect2">
+<h3 id="_when_a_property_is_changed">When a property is changed</h3>
+<div class="paragraph">
+<p>If you want to invoke functionality whenever a property is changed by the user, then you should create a supporting <code>modifyXxx()</code> method and include the functionality within that. The syntax is:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">void</span> modifyPropertyName(PropertyType param) { ... }</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>Why not just put this functionality in the setter? Well, the setter is used by the object store to recreate the state of an already persisted object. Putting additional behaviour in the setter would cause it to be triggered incorrectly.</p>
+</div>
+<div class="paragraph">
+<p>For example:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">Order</span>() {
+    <span class="directive">public</span> <span class="predefined-type">Integer</span> getAmount() { ... }
+    <span class="directive">public</span> <span class="type">void</span> setAmount(<span class="predefined-type">Integer</span> amount) { ... }
+    <span class="directive">public</span> <span class="type">void</span> modifyAmount(<span class="predefined-type">Integer</span> amount) { <i class="conum" data-value="1"></i><b>(1)</b>
+        setAmount(amount);  <i class="conum" data-value="3"></i><b>(3)</b>
+        addToTotal(amount); <i class="conum" data-value="2"></i><b>(2)</b>
+    }
+    ...
+}</code></pre>
+</div>
+</div>
+<div class="colist arabic">
+<table>
+<tr>
+<td><i class="conum" data-value="1"></i><b>1</b></td>
+<td>The <code>modifyAmount()</code> method calls &#8230;&#8203;</td>
+</tr>
+<tr>
+<td><i class="conum" data-value="2"></i><b>2</b></td>
+<td>&#8230;&#8203; the <code>addToTotal()</code> (not shown) to maintain some running total.</td>
+</tr>
+</table>
+</div>
+<div class="paragraph">
+<p>We don&#8217;t want this <code>addToCall()</code> method to be called when pulling the object back from the object store, so we put it into the modify, not the setter.</p>
+</div>
+<div class="paragraph">
+<p>You may optionally also specify a <code>clearXxx()</code> which works the same way as modify <code>modify Xxx()</code> but is called when the property is cleared by the user (i.e. the current value replaced by nothing). The syntax is:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">void</span> clearPropertyName() { ... }</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>To extend the above example:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">Order</span>() {
+    <span class="directive">public</span> <span class="predefined-type">Integer</span> getAmount() { ... }
+    <span class="directive">public</span> <span class="type">void</span> setAmount(<span class="predefined-type">Integer</span> amount) { ... }
+    <span class="directive">public</span> <span class="type">void</span> modifyAmount(<span class="predefined-type">Integer</span> amount) { ... }
+    <span class="directive">public</span> <span class="type">void</span> clearAmount() {
+        removeFromTotal(<span class="local-variable">this</span>.amount);
+        setAmount(<span class="predefined-constant">null</span>);
+    }
+    ...
+}</code></pre>
+</div>
+</div>
+</div>
+<div class="sect2">
+<h3 id="_when_a_collection_is_added_to_or_removed_from">When a collection is added to or removed from</h3>
+<div class="paragraph">
+<p>A collection may have a corresponding <code>addToXxx()</code> and/or
+<code>removeFromXxx()</code> method. If present, and direct manipulation of the
+contents of the connection has not been disabled (see ?), then they will
+be called (instead of adding/removing an object directly to the
+collection returned by the accessor).</p>
+</div>
+<div class="paragraph">
+<p>The reason for this behaviour is to allow other behaviour to be
+triggered when the contents of the collection is altered. That is, it is
+directly equivalent to the supporting <code>modifyXxx()</code> and <code>clearXxx()</code>
+methods for properties (see ?).</p>
+</div>
+<div class="paragraph">
+<p>The syntax is:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">void</span> addTo&lt;CollectionName&gt;(EntityType param) { ... }</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>and</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">void</span> removeFromCollectionName(EntityType param) { ... }</code></pre>
+</div>
+</div>
+<div class="paragraph">
+<p>where <code>EntityType</code> is the same type as the generic collection type.</p>
+</div>
+<div class="paragraph">
+<p>For example:</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">Employee</span> { ... }
+
+<span class="directive">public</span> <span class="type">class</span> <span class="class">Department</span> {
+
+    <span class="directive">private</span> <span class="type">int</span> numMaleEmployees;  <i class="conum" data-value="1"></i><b>(1)</b>
+    <span class="directive">private</span> <span class="type">int</span> numFemaleEmployees; <i class="conum" data-value="1"></i><b>(1)</b>
+
+    <span class="directive">private</span> <span class="predefined-type">Set</span>&lt;Employee&gt; employees = <span class="keyword">new</span> <span class="predefined-type">TreeSet</span>&lt;Employee&gt;();
+    <span class="directive">public</span> <span class="predefined-type">Set</span>&lt;Employee&gt; getEmployees() {
+        <span class="keyword">return</span> employees;
+    }
+    <span class="directive">private</span> <span class="type">void</span> setEmployees(<span class="predefined-type">Set</span>&lt;Employee&gt; employees) {
+        <span class="local-variable">this</span>.employees = employees;
+    }
+    <span class="directive">public</span> <span class="type">void</span> addToEmployees(Employee employee) {
+        numMaleEmployees += countOneMale(employee);     <i class="conum" data-value="2"></i><b>(2)</b>
+        numFemaleEmployees += countOneFemale(employee); <i class="conum" data-value="2"></i><b>(2)</b>
+        employees.add(employee);
+    }
+    <span class="directive">public</span> <span class="type">void</span> removeFromEmployees(Employee employee) {
+        numMaleEmployees -= countOneMale(employee);     <i class="conum" data-value="3"></i><b>(3)</b>
+        numFemaleEmployees -= countOneFemale(employee); <i class="conum" data-value="3"></i><b>(3)</b>
+        employees.remove(employee);
+    }
+    <span class="directive">private</span> <span class="type">int</span> countOneMale(Employee employee) { <span class="keyword">return</span> employee.isMale()?<span class="integer">1</span>:<span class="integer">0</span>; }
+    <span class="directive">private</span> <span class="type">int</span> countOneFemale(Employee employee) { <span class="keyword">return</span> employee.isFemale()?<span class="integer">1</span>:<span class="integer">0</span>; }
+
+    ...
+}</code></pre>
+</div>
+</div>
+<div class="colist arabic">
+<table>
+<tr>
+<td><i class="conum" data-value="1"></i><b>1</b></td>
+<td>maintain a count of the number of male and female employees (getters and setters omitted)</td>
+</tr>
+<tr>
+<td><i class="conum" data-value="2"></i><b>2</b></td>
+<td>the <code>addTo&#8230;&#8203;()</code> method increments the derived properties</td>
+</tr>
+<tr>
+<td><i class="conum" data-value="3"></i><b>3</b></td>
+<td>the <code>removeTo&#8230;&#8203;()</code> method similarly decrements the derived properties</td>
+</tr>
+</table>
+</div>
+</div>
+</div>
+</div>
+
+        </div>
+
+
+
+        <hr>
+
+        <footer>
+
+          <p class="small">
+
+          Copyright &copy; 2010~2015 The Apache&nbsp;Software&nbsp;Foundation, licensed under the Apache&nbsp;License,&nbsp;v2.0.
+
+          <br/>
+
+          Apache, the Apache feather logo, Apache&nbsp;Isis, and the Apache&nbsp;Isis project logo are all trademarks of The&nbsp;Apache&nbsp;Software&nbsp;Foundation.
+
+          </p>
+
+        </footer>
+
+
+
+    </div>
+
+
+
+    <div class="large-4 medium-4 columns">
+
+        <!-- the 'hide' class is removed by Javascript -->
+
+        <div id="toc" class="toc2 hide">
+
+          <ul class="sectlevel1">
+<li><a href="#_publishing_and_subscribing_to_events_pulling_changes">Publishing and Subscribing to Events (Pulling Changes)</a></li>
+<li><a href="#_pushing_changes">Pushing Changes</a>
+<ul class="sectlevel2">
+<li><a href="#_when_a_property_is_changed">When a property is changed</a></li>
+<li><a href="#_when_a_collection_is_added_to_or_removed_from">When a collection is added to or removed from</a></li>
+</ul>
+</li>
+</ul>
+
+        </div>
+
+    </div>
+
+</div>
+
+
+
+
+
+    <script src="../js/foundation/5.5.1/vendor/jquery.js"></script>
+
+    <script src="../js/foundation/5.5.1/foundation.min.js"></script>
+
+
+
+
+
+<script type="text/javascript">
+
+      $(document).foundation();
+
+
+
+      $(document).ready(function(){
+
+        // Cache selectors
+
+        var lastId,
+
+            topMenu = $("div#toc ul"),
+
+            topMenuHeight = 70,
+
+
+
+            menuItems = topMenu.find("a"),
+
+            menuItemsHrefs = menuItems.map(function(){
+
+              var item = $($(this).attr("href"));
+
+              if (item.length) { return item; }
+
+            });
+
+
+
+        // Bind click handler to menu items to scroll animation
+
+        menuItems.click(function(e){
+
+          var href = $(this).attr("href"),
+
+              offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
+
+          $('html, body').stop().animate({
+
+              scrollTop: offsetTop
+
+          }, 300);
+
+
+
+          e.preventDefault();
+
+        });
+
+
+
+        // Bind to scroll of window
+
+        $(  window ).scroll(function(){
+
+
+
+           // Get container scroll position
+
+           var fromTop = $(this).scrollTop()+topMenuHeight;
+
+
+
+           var cur = menuItemsHrefs.map(function(){
+
+             if ($(this).offset().top < fromTop)
+
+               return this;
+
+           });
+
+
+
+           // Get the id of the current element
+
+           cur = cur[cur.length-1];
+
+
+
+           var id = cur && cur.length ? cur[0].id : "";
+
+
+
+           //console.log("id = " + id + ", lastId = "  + lastId);
+
+
+
+           if (lastId !== id && id) {
+
+               scrollTo(id);
+
+           }
+
+        });
+
+
+
+        scrollTo = function(id) {
+
+              lastId = id;
+
+
+
+              menuItems
+
+                .removeClass("active");
+
+
+
+              menuItems
+
+                .parents()
+
+                .removeClass("active-region");
+
+
+
+              menuItems
+
+                .parents("ul").hide();
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .addClass("active");
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .parents("ul").show();
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .parent().children("ul").show();
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .parents("li").addClass("active-region");
+
+
+
+        }
+
+      menuItems
+
+        .removeClass("active");
+
+
+
+      menuItems
+
+        .parents()
+
+        .removeClass("active-region");
+
+
+
+        var syncMenuItem;
+
+        if(window.location.hash!=="") {
+
+            var menuItemFor = $.grep(menuItems, function(e) {
+
+                return e.hash === window.location.hash;
+
+            });
+
+            console.log(menuItemFor);
+
+            if(menuItemFor.length === 1) {
+
+                syncMenuItem = menuItemFor[0];
+
+            }
+
+        }
+
+
+
+        if(!syncMenuItem){
+
+            syncMenuItem = menuItems[0];
+
+        }
+
+
+
+        $("#toc").removeClass("hide");
+
+
+
+        $(syncMenuItem).click();
+
+
+
+      });
+
+
+
+
+
+</script>
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file

Added: websites/staging/isis/trunk/content/docs/user-guide/user-guide-how-tos-ui-hints.html
==============================================================================
--- websites/staging/isis/trunk/content/docs/user-guide/user-guide-how-tos-ui-hints.html (added)
+++ websites/staging/isis/trunk/content/docs/user-guide/user-guide-how-tos-ui-hints.html Wed Apr 15 21:40:06 2015
@@ -0,0 +1,906 @@
+<!doctype html>
+
+<html class="no-js" lang="en">
+
+<head>
+
+    <meta charset="utf-8"/>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+
+
+    <title>User Guide: How-tos: UI Hints</title>
+
+
+
+    <!--
+
+        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 agreed to in writing,
+
+        software distributed under the License is distributed on an
+
+        "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+
+        KIND, either express or implied.  See the License for the
+
+        specific language governing permissions and limitations
+
+        under the License.
+
+    -->
+
+
+
+    <!-- No caching headers -->
+
+    <meta http-equiv="cache-control" content="no-cache" />
+
+    <meta http-equiv="pragma" content="no-cache" />
+
+    <meta http-equiv="expires" content="-1" />
+
+
+
+
+
+    <link rel="stylesheet" href="../css/foundation/5.5.1/foundation.css"/>
+
+    <script src="../js/foundation/5.5.1/vendor/modernizr.js"></script>
+
+
+
+    <link href="../css/asciidoctor/stylesheets/foundation-potion.css" rel="stylesheet">
+
+
+
+    <link href="../css/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
+
+
+
+    <style type="text/css">
+
+        #forkongithub a{
+
+            display: none;
+
+            background:#090;
+
+            color:#fff;
+
+            text-decoration:none;
+
+            font-family:arial, sans-serif;
+
+            text-align:center;
+
+            font-weight:bold;
+
+            padding:5px 40px;
+
+            font-size:1rem;
+
+            line-height:2rem;
+
+            position:relative;
+
+            transition:0.5s;
+
+        }
+
+        #forkongithub a:hover{
+
+            background:#0D0;
+
+            color:#fff;
+
+        }
+
+        #forkongithub a::before,
+
+        #forkongithub a::after{
+
+            content:"";width:100%;
+
+            display:block;
+
+            position:fixed;
+
+            top:1px;
+
+            left:0;
+
+            height:1px;
+
+            background:#fff;
+
+            z-index: 9999;
+
+        }
+
+        #forkongithub a::after{
+
+            bottom:1px;
+
+            top:auto;
+
+        }
+
+        @media screen and (min-width:768px){
+
+            #forkongithub{
+
+                position:fixed;
+
+                display:block;
+
+                top:0;
+
+                right:0;
+
+                width:250px;
+
+                overflow:hidden;
+
+                height:250px;
+
+                z-index: 9999;
+
+            }
+
+            #forkongithub a{
+
+                display:inherit;
+
+                width:250px;
+
+                position:fixed;
+
+                font-size:small;
+
+                top:40px;
+
+                right:-60px;
+
+                transform:rotate(45deg);
+
+                -webkit-transform:rotate(45deg);
+
+                -ms-transform:rotate(45deg);
+
+                box-shadow:4px 4px 10px rgba(0,0,0,0.8);
+
+            }
+
+        }
+
+    </style>
+
+
+
+    <style>
+
+        body {
+
+          position: relative;
+
+        }
+
+
+
+        body div#toc li,
+
+        body div#toc2 li {
+
+            list-style-type: none;
+
+        }
+
+
+
+        div#doc-content {
+
+            margin-top: 30px;
+
+        }
+
+
+
+        body div#toc li.active-region:before,
+
+        body div#toc2 li.active-region:before {
+
+            content: "\00BB \0020";
+
+            margin-left: -12px;
+
+        }
+
+
+
+        body div#toc li a.active,
+
+        body div#toc2 li a.active {
+
+            color: red;
+
+        }
+
+
+
+        body div#toc.toc,
+
+        body div#toc.toc2 {
+
+            position: fixed;
+
+            left: auto;
+
+            padding-top: 120px;
+
+            z-index: auto;
+
+            background-color: white;
+
+            border-left-color: #eee;
+
+            border-left-style: solid;
+
+            border-right: none;
+
+        }
+
+    </style>
+
+
+
+</head>
+
+<body>
+
+
+
+    <span id="forkongithub">
+
+        <a href="https://github.com/apache/isis">Fork me on GitHub</a>
+
+    </span>
+
+
+
+<div class="row">
+
+
+
+    <div class="fixed contain-to-grid">
+
+        <nav class="top-bar" data-topbar role="navigation">
+
+            <ul class="title-area">
+
+                <li class="name">
+
+                    <h1>
+
+                        <a href="/index.html">Apache Isis&trade;</a>
+
+                    </h1>
+
+                </li>
+
+                <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+
+                <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+
+            </ul>
+
+
+
+            <section class="top-bar-section">
+
+                <ul class="right">
+
+
+
+                    <li class="has-form">
+
+                       <FORM class="searchbox navbar-form navbar-right" id="searchbox_012614087480249044419:dn-q5gtwxya" action="http://www.google.com/cse">
+
+                        <div class="row collapse">
+
+                            <input type="hidden" name="cx" value="012614087480249044419:dn-q5gtwxya">
+
+                            <INPUT type="hidden" name="cof" value="FORID:0">
+
+                            <INPUT class="form-control" name="q" type="text" placeholder="Search">
+
+                        </div>
+
+                    </FORM>
+
+                     </li>
+
+
+
+                </ul>
+
+
+
+                <!-- Left Nav Section -->
+
+                <ul class="left">
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#" >Demos</b></a>
+
+                      <ul class="dropdown">
+
+                        <li><a href="/intro/elevator-pitch/isis-in-pictures.html">Screenshots</a></li>
+
+                        <li><a href="/intro/tutorials/screencasts.html">Screencasts&nbsp;<img src="/images/tv_show-25.png"></a></li>
+
+                        <li><a href="/intro/powered-by/powered-by.html">Powered by</a></li>
+
+                        <li><a href="http://isisdemo.mmyco.co.uk/" target="_blank">Online Demo</a></li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                    <li><a href="/documentation">Documentation</a></li>
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#">Downloads</a>
+
+                      <ul class="dropdown">
+
+                        <li><a href="/intro/getting-started/simpleapp-archetype.html">Isis (Maven archetype)</a></li>
+
+                        <li><a href="/download.html">Isis (downloads)</a></li>
+
+                        <li><a href="http://www.isisaddons.org" target="_blank">Isis Add-ons (not ASF)</a></li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#">Help</a>
+
+                      <ul class="dropdown">
+
+                        <li><a href="/support.html">Mailing Lists</a></li>
+
+                        <li><a href="http://isis.markmail.org/search/?q=" target="_blank">Mailing List Archives</a></li>
+
+                        <li><a href="https://issues.apache.org/jira/browse/ISIS" target="_blank">JIRA</a></li>
+
+                        <li><a href="http://github.com/apache/isis" target="_blank">Github mirror</a></li>
+
+                        <li><a href="http://stackoverflow.com/questions/tagged/isis" target="_blank">Stack Overflow</a></li>
+
+                        <li><a href="/contributors/contributing.html">How to contribute</a></li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                    <li class="has-dropdown">
+
+                      <a href="#" >@ASF</a>
+
+                      <ul class="dropdown">
+
+                        <li>
+
+                          <a href="http://www.apache.org/" target="_blank">Apache Homepage <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/licenses/" target="_blank">Licenses <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/security/" target="_blank">Security <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="http://www.apache.org/foundation/thanks.html">Thanks <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                        <li>
+
+                          <a href="{{base}}more-thanks.html">More thanks <i class="icon-share-alt"></i></a>
+
+                        </li>
+
+                      </ul>
+
+                    </li>
+
+
+
+                </ul>
+
+
+
+            </section>
+
+        </nav>
+
+    </div>
+
+</div>
+
+
+
+<div class="row">
+
+    <div class="large-8 medium-8 columns">
+
+
+
+        <div id="doc-content">
+
+          <div id="preamble">
+<div class="sectionbody">
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+TODO
+</td>
+</tr>
+</table>
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_icons_and_titles">Icons and Titles</h2>
+<div class="sectionbody">
+<div class="sect2">
+<h3 id="_object_title">Object Title</h3>
+<div class="sect3">
+<h4 id="_titles_in_tables">Titles in Tables</h4>
+
+</div>
+<div class="sect3">
+<h4 id="_hide_part_of_a_title">Hide part of a title</h4>
+
+</div>
+</div>
+<div class="sect2">
+<h3 id="_object_icon">Object Icon</h3>
+
+</div>
+<div class="sect2">
+<h3 id="_object_css_styling">Object CSS Styling</h3>
+
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_names_and_descriptions">Names and Descriptions</h2>
+<div class="sectionbody">
+<div class="admonitionblock note">
+<table>
+<tr>
+<td class="icon">
+<i class="fa icon-note" title="Note"></i>
+</td>
+<td class="content">
+see also i18n (TODO: convert to link)
+</td>
+</tr>
+</table>
+</div>
+<div class="sect2">
+<h3 id="_name_descr_of_an_object">Name/descr. of an object</h3>
+
+</div>
+<div class="sect2">
+<h3 id="_name_descr_of_a_property">Name/descr. of a property</h3>
+
+</div>
+<div class="sect2">
+<h3 id="_name_descr_of_a_collection">Name/descr. of a collection</h3>
+
+</div>
+<div class="sect2">
+<h3 id="_name_descr_of_an_action">Name/descr. of an action</h3>
+
+</div>
+<div class="sect2">
+<h3 id="_action_parameters">Action Parameters</h3>
+
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_layout">Layout</h2>
+<div class="sectionbody">
+<div class="sect2">
+<h3 id="_layout_using_annotations">Layout using annotations</h3>
+
+</div>
+<div class="sect2">
+<h3 id="_dynamic_layouts">Dynamic layouts</h3>
+
+</div>
+<div class="sect2">
+<h3 id="_application_menu_layout">Application menu layout</h3>
+
+</div>
+</div>
+</div>
+<div class="sect1">
+<h2 id="_standardized_font_awesome_icons_and_css">Standardized font-awesome icons and CSS</h2>
+<div class="sectionbody">
+<div class="paragraph">
+<p>Use the following settings in isis.properties to apply CSS and font-awesome icons to object members (properties, collections and actions) based on their names.</p>
+</div>
+<div class="listingblock">
+<div class="content">
+<pre class="CodeRay highlight"><code>isis.reflector.facet.cssClassFa.patterns=\
+isis.reflector.facet.cssClass.patterns=\</code></pre>
+</div>
+</div>
+</div>
+</div>
+
+        </div>
+
+
+
+        <hr>
+
+        <footer>
+
+          <p class="small">
+
+          Copyright &copy; 2010~2015 The Apache&nbsp;Software&nbsp;Foundation, licensed under the Apache&nbsp;License,&nbsp;v2.0.
+
+          <br/>
+
+          Apache, the Apache feather logo, Apache&nbsp;Isis, and the Apache&nbsp;Isis project logo are all trademarks of The&nbsp;Apache&nbsp;Software&nbsp;Foundation.
+
+          </p>
+
+        </footer>
+
+
+
+    </div>
+
+
+
+    <div class="large-4 medium-4 columns">
+
+        <!-- the 'hide' class is removed by Javascript -->
+
+        <div id="toc" class="toc2 hide">
+
+          <ul class="sectlevel1">
+<li><a href="#_icons_and_titles">Icons and Titles</a>
+<ul class="sectlevel2">
+<li><a href="#_object_title">Object Title</a>
+<ul class="sectlevel3">
+<li><a href="#_titles_in_tables">Titles in Tables</a></li>
+<li><a href="#_hide_part_of_a_title">Hide part of a title</a></li>
+</ul>
+</li>
+<li><a href="#_object_icon">Object Icon</a></li>
+<li><a href="#_object_css_styling">Object CSS Styling</a></li>
+</ul>
+</li>
+<li><a href="#_names_and_descriptions">Names and Descriptions</a>
+<ul class="sectlevel2">
+<li><a href="#_name_descr_of_an_object">Name/descr. of an object</a></li>
+<li><a href="#_name_descr_of_a_property">Name/descr. of a property</a></li>
+<li><a href="#_name_descr_of_a_collection">Name/descr. of a collection</a></li>
+<li><a href="#_name_descr_of_an_action">Name/descr. of an action</a></li>
+<li><a href="#_action_parameters">Action Parameters</a></li>
+</ul>
+</li>
+<li><a href="#_layout">Layout</a>
+<ul class="sectlevel2">
+<li><a href="#_layout_using_annotations">Layout using annotations</a></li>
+<li><a href="#_dynamic_layouts">Dynamic layouts</a></li>
+<li><a href="#_application_menu_layout">Application menu layout</a></li>
+</ul>
+</li>
+<li><a href="#_standardized_font_awesome_icons_and_css">Standardized font-awesome icons and CSS</a></li>
+</ul>
+
+        </div>
+
+    </div>
+
+</div>
+
+
+
+
+
+    <script src="../js/foundation/5.5.1/vendor/jquery.js"></script>
+
+    <script src="../js/foundation/5.5.1/foundation.min.js"></script>
+
+
+
+
+
+<script type="text/javascript">
+
+      $(document).foundation();
+
+
+
+      $(document).ready(function(){
+
+        // Cache selectors
+
+        var lastId,
+
+            topMenu = $("div#toc ul"),
+
+            topMenuHeight = 70,
+
+
+
+            menuItems = topMenu.find("a"),
+
+            menuItemsHrefs = menuItems.map(function(){
+
+              var item = $($(this).attr("href"));
+
+              if (item.length) { return item; }
+
+            });
+
+
+
+        // Bind click handler to menu items to scroll animation
+
+        menuItems.click(function(e){
+
+          var href = $(this).attr("href"),
+
+              offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
+
+          $('html, body').stop().animate({
+
+              scrollTop: offsetTop
+
+          }, 300);
+
+
+
+          e.preventDefault();
+
+        });
+
+
+
+        // Bind to scroll of window
+
+        $(  window ).scroll(function(){
+
+
+
+           // Get container scroll position
+
+           var fromTop = $(this).scrollTop()+topMenuHeight;
+
+
+
+           var cur = menuItemsHrefs.map(function(){
+
+             if ($(this).offset().top < fromTop)
+
+               return this;
+
+           });
+
+
+
+           // Get the id of the current element
+
+           cur = cur[cur.length-1];
+
+
+
+           var id = cur && cur.length ? cur[0].id : "";
+
+
+
+           //console.log("id = " + id + ", lastId = "  + lastId);
+
+
+
+           if (lastId !== id && id) {
+
+               scrollTo(id);
+
+           }
+
+        });
+
+
+
+        scrollTo = function(id) {
+
+              lastId = id;
+
+
+
+              menuItems
+
+                .removeClass("active");
+
+
+
+              menuItems
+
+                .parents()
+
+                .removeClass("active-region");
+
+
+
+              menuItems
+
+                .parents("ul").hide();
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .addClass("active");
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .parents("ul").show();
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .parent().children("ul").show();
+
+
+
+              menuItems
+
+                .filter("[href=#"+id+"]")
+
+                .parents("li").addClass("active-region");
+
+
+
+        }
+
+      menuItems
+
+        .removeClass("active");
+
+
+
+      menuItems
+
+        .parents()
+
+        .removeClass("active-region");
+
+
+
+        var syncMenuItem;
+
+        if(window.location.hash!=="") {
+
+            var menuItemFor = $.grep(menuItems, function(e) {
+
+                return e.hash === window.location.hash;
+
+            });
+
+            console.log(menuItemFor);
+
+            if(menuItemFor.length === 1) {
+
+                syncMenuItem = menuItemFor[0];
+
+            }
+
+        }
+
+
+
+        if(!syncMenuItem){
+
+            syncMenuItem = menuItems[0];
+
+        }
+
+
+
+        $("#toc").removeClass("hide");
+
+
+
+        $(syncMenuItem).click();
+
+
+
+      });
+
+
+
+
+
+</script>
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file