You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by da...@apache.org on 2015/06/16 00:37:48 UTC

[09/11] isis git commit: ISIS-1133: user guide, documentation website

http://git-wip-us.apache.org/repos/asf/isis/blob/461e51b7/adocs/documentation/src/main/asciidoc/index.html
----------------------------------------------------------------------
diff --git a/adocs/documentation/src/main/asciidoc/index.html b/adocs/documentation/src/main/asciidoc/index.html
new file mode 100644
index 0000000..7e7dd83
--- /dev/null
+++ b/adocs/documentation/src/main/asciidoc/index.html
@@ -0,0 +1,949 @@
+<!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>Apache Isis</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" />
+
+
+    <!-- TODO: need to (re)instate CDN in the future (not using for now just so can develop off-line -->
+    <link href="./css/foundation/5.5.1/foundation.css" rel="stylesheet" />
+    <script src="./js/foundation/5.5.1/vendor/modernizr.js"></script>
+    <link href="./css/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="./css/slick/1.5.0/slick.css" rel="stylesheet">
+    <link href="./css/slick/1.5.0/slick-theme.css" rel="stylesheet">
+
+
+
+
+    <link href="./css/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.css" rel="stylesheet" />
+    <!--[if lt IE 9]>
+      <link href="./css/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.css" rel="stylesheet" />
+    <![endif]-->
+
+
+    <style type="text/css">
+        <%= ::Asciidoctor::Stylesheets.instance.coderay_stylesheet_data %>
+
+        pre.CodeRay code {
+            background-color: inherit;
+            border-style: none;
+        }
+
+        pre.CodeRay code > span:first-child {
+            margin-left: -5px;
+        }
+
+        .literalblock pre,
+        .listingblock pre:not(.highlight),
+        .listingblock pre[class="highlight"],
+        .listingblock pre[class^="highlight "],
+        .listingblock pre.CodeRay,
+        .listingblock pre.prettyprint {
+            background: rgb(253, 250, 246);
+         }
+        .sidebarblock .literalblock pre,
+        .sidebarblock .listingblock pre:not(.highlight),
+        .sidebarblock .listingblock pre[class="highlight"],
+        .sidebarblock .listingblock pre[class^="highlight "],
+        .sidebarblock .listingblock pre.CodeRay,
+        .sidebarblock .listingblock pre.prettyprint {
+            background: rgb(253, 250, 246);
+         }
+    </style>
+
+    <style>
+        small {
+            font-size: 90%;
+        }
+    </style>
+    <style>
+        .slick-slide img {
+            padding:30px;
+        }
+        .slick-slide.slick-active img {
+            padding: 10px;
+        }
+
+        .slick-prev:before, .slick-next:before {
+            color: #AA3633;
+        }
+    </style>
+
+    <style>
+    .github-fork-ribbon-wrapper.right {
+        position: fixed;
+    }
+    .github-fork-ribbon {
+        background: #090;
+    }
+    .github-fork-ribbon a:hover {
+        background:#0D0;
+        color:#fff;
+        font-size: 1.1em;
+    }
+    </style>
+
+    <style>
+        @media only screen and (min-width: 40.063em) {
+          .top-bar {
+            .contain-to-grid .top-bar {
+                max-width: 80rem;
+            }
+          }
+        }
+        .row {
+            max-width: 80rem;
+        }
+    </style>
+
+    <style>
+        .extended-quote,
+        .extended-quote-first {
+            margin-left: 40px;
+            margin-right: 40px;
+            font-style: italic;
+        }
+        .extended-quote-attribution {
+            text-align: right;
+            margin-right: 100px;
+            color: #10B061;
+        }
+
+        .extended-quote-first:before {
+            content: "\201c";
+            float: left;
+            font-size: 2.75em;
+            font-weight: bold;
+            line-height: 0.6em;
+            margin-left: -0.6em;
+            color: #003b6b;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+
+    <style>
+        body {
+          position: relative;
+        }
+
+        *:not(pre) a > code {
+            color: #210DDC;
+        }
+
+        *:not(pre) > code {
+            background-color: inherit;
+            border: none;
+            font-weight: normal;
+        }
+
+        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: 60px;
+            z-index: auto;
+            background-color: white;
+            border-left-color: #eee;
+            border-left-style: solid;
+            border-right: none;
+            min-height: 2000px;
+        }
+
+    </style>
+
+    <style>
+
+        @media only screen and (min-width: 768px) {
+          #toc.toc2 ul ul { margin-left: -10px; }
+        }
+
+
+        body div#toc .tocify-subheader ul {
+            margin-bottom: 0px;
+        }
+
+        body div#toc .tocify-subheader li {
+            font-size: 14px;
+        }
+        .tocify li.tocify-item, .tocify ul.tocify-item {
+            line-height: 24px;
+        }
+
+        body div#toc li.tocify-item.active:before,
+        body div#toc2 li.tocify-item.active:before {
+            content: "\00BB \0020";
+            margin-left: -12px;
+        }
+
+        body div#toc li.tocify-item.active a,
+        body div#toc2 li.tocify-item.active a {
+            color: red;
+        }
+    </style>
+
+
+        <style>
+            footer {
+            margin-top: 200px;
+            }
+        </style>
+
+        <style>
+        /* overriding colony.css stylesheet */
+        .literalblock pre, .literalblock pre[class], .listingblock pre, .listingblock pre[class] {
+           /*padding: 1.25em 1.5625em 1.125em 1.5625em;*/
+           padding: 0.3em 0.6em 0.25em 0.6em;
+        }
+        @media only screen and (min-width: 1280px)
+        #toc.toc2 {
+          /*width: 20em;*/
+          width: 25em;
+        }
+
+        #doc-content a {
+          color: #210DDC;
+        }
+
+        .top-bar h1 {
+            border-bottom: inherit;
+        }
+
+        h2 {
+          margin-top: 80px;
+        }
+        h3 {
+          margin-top: 40px;
+        }
+        h4,h5 {
+          margin-top: 30px;
+        }
+
+        .admonitionblock.tip > table td.content {
+            color: #10B061;
+        }
+        .admonitionblock.note > table td.content {
+            color: #B509AB;
+        }
+        .admonitionblock.important > table td.content {
+            color: #D5810A;
+        }
+
+        .admonitionblock .title {
+            font-size: larger;
+            font-style: italic;
+        }
+
+        .imageblock img {
+            margin-bottom: 10px;
+        }
+    </style>
+
+    <style>
+        /* from http://ben.balter.com/2014/03/13/pages-anchor-links/ */
+        .header-link {
+          position: absolute;
+          left: -0.5em;
+          opacity: 0;
+
+          /*
+          -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+          -moz-transition: opacity 0.2s ease-in-out 0.1s;
+          -ms-transition: opacity 0.2s ease-in-out 0.1s;
+          */
+        }
+
+        h2:hover .header-link,
+        h3:hover .header-link,
+        h4:hover .header-link,
+        h5:hover .header-link,
+        h6:hover .header-link {
+          opacity: 1;
+        }
+    </style>
+
+    <style>
+        .top-bar
+        {
+            -webkit-transition-duration: .5s;
+            transition-duration: .5s;
+
+            -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
+            transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
+
+            -webkit-transition-property: -webkit-transform;
+            transition-property: transform;
+        }
+
+        /*
+        http://osvaldas.info/auto-hide-sticky-header
+        MIT license
+        */
+        .header--hidden
+        {
+            -webkit-transform: translateY( -100% );
+            -ms-transform: translateY( -100% );
+            transform: translateY( -100% );
+
+            transition-duration: .5s;
+            transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
+            -webkit-transition-property: -webkit-transform;
+            transition-property: transform;
+        }
+    </style>
+
+    <style>
+        .tocify {
+            margin-top: 80px;
+        }
+    </style>
+
+
+</script>
+
+</head>
+<body>
+
+<div class="github-fork-ribbon-wrapper right" style="position: fixed;">
+    <div class="github-fork-ribbon">
+        <a href="https://github.com/apache/isis/fork">Fork me on GitHub</a>
+    </div>
+</div>
+
+<div class="homepage">
+    <div class="row">
+
+        <div class="fixed contain-to-grid header">
+            <nav class="top-bar" data-topbar role="navigation" style="max-width: 80rem">
+                <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><a href="./documentation.html">Documentation</a></li>
+                        <li><a href="./downloads.html">Downloads</a></li>
+                        <li><a href="./help.html">Help</a></li>
+                        <li><a href="./asf.html">@ASF</a></li>
+
+                    </ul>
+
+                </section>
+            </nav>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="large-12 medium-12 columns">
+
+            <br/>
+            <br/>
+            <br/>
+
+            <div class="panel radius">
+
+                <div class="row">
+                    <div class="large-6 medium-6 columns">
+                        <img class="logo" src="./images/isis-logo-568x286.png" alt="Apache Isis"/>
+                    </div>
+                    <div class="large-1 medium-1 columns">
+                        &nbsp;
+                    </div>
+                    <div class="large-4 medium-4 columns">
+
+
+                        <div class="quote-carousel">
+
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>I like the guidance Apache Isis gives me for structuring code along the lines of Domain Driven Design. My first web application in plain Java without writing a single line of DDL or HTML/*Script.</p>
+                                            <small>Joerg Rade</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>A fantastic framework! With Apache Isis we can prototype a deployable application in minutes rather than days.</p>
+                                            <small>Jeremy Branham</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+
+
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>From a Sprint retrospective:</p>
+                                            <p>&quot;We normally don't see anything at all for the first three months, and now you're showing me working screens after two weeks&quot;</p>
+                                            <small>Project programme manager</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>Apache Isis enabled us to focus on the problem domain and data quality and - because the UI was generated for us by the framework - not get distracted by UI concerns. Identified security issues were quickly addressed by the Apache Isis committers.</p>
+                                            <small>Architect</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>Support from the Apache Isis community is excellent. I sense a love and dedication that is inspiring.</p>
+                                            <small>Johan Doornenbal</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>Isis provided us with a great starting point for our app; we simply took the todoapp archetype and used it as a template to help set up our integration tests and BDD specs.  We were productive almost immediately</p>
+                                            <small>Vladimir Nisevic, A1 Telekom Austria</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>From a Sprint retrospective, having switched to using Isis:</p>
+                                            <p>&quot;This is already looking better than anything we saw after six months of work in the first phase&quot;</p>
+                                            <small>Project test manager</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>We use Isis because of its simple and fast user interface generation.</p>
+                                            <small>Andreas Lechner</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>Apache Isis is one of the best tools for hackathons.  Given a 2 day hackathon challenge I have the perfect framework to create my prototype helping me to focus on business logic.</p>
+                                            <small>Sunand Padmanabhan</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+                            <div>
+                                <blockquote>
+                                    <div class="row">
+                                        <div class="large-12 medium-12">
+                                            <p>From a Sprint retrospective, the criticism of one lead developer sounded more like praise:</p>
+                                            <p>&quot;The problem is that if we show this to the customer they will think that all the work is done.&quot;</p>
+                                            <small>provided by Ged Byrne</small>
+                                        </div>
+                                    </div>
+                                </blockquote>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="large-1 medium-1 columns">
+                        &nbsp;
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="large-12 medium-12 columns">
+                        <div class="description">
+                           <h3 class="legend">Domain Driven Applications, Quickly</h3>
+                            <p>Apache Isis&trade; is a framework for rapidly developing domain-driven apps in Java.  Write your business logic in entities, domain services or view models, and the framework dynamically generates a representation of that domain model as a webapp or a RESTful API.</p>
+
+                            <p><a class="button btn btn-primary btn-lg learn-more" href="./documentation.html" role="button">Learn more »</a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="container">
+                <div class="row">
+                    <div class="large-4 medium-4 columns">
+                        <h2>UI "for free"</h2>
+                        <p>Isis dynamically builds a generic UI directly from the underlying domain objects.
+                            This makes for extremely rapid prototyping and a short feedback cycle, perfect for agile development.
+                            The UI can also be extended for specific use cases, and can be themed using <a href="http://getbootstrap.com">Bootstrap</a>.</p>
+                        <p><a class="button small info radius" href="./isis-in-pictures.html" role="button">See Isis in action »</a></p>
+                    </div>
+                    <div class="large-4 medium-4 columns">
+                        <h2>Domain-Driven</h2>
+                        <p>The core of an Isis application are the domain objects, either persisted entities or view models.
+                            Business rules can be associated directly with domain objects, or can be factored out into separate
+                            services.  Isis performs dependency injection everywhere to ensure that the application remains decoupled.</p>
+                        <p><a class="button small info radius" href="./documentation.html" role="button">Read the docs »</a></p>
+                    </div>
+                    <div class="large-4 medium-4 columns">
+                        <h2>Add-ons <small>(non ASF)</small></h2>
+                        <p>Isis has a large number of github-hosted add-on modules for security, auditing, command profiling, mail merge and other cross-cutting concerns.  It also has a number of UI extensions
+                            for maps, calendars and so on.  All are open source and designed for out-of-the-box use or to fork as you require.</p>
+                        <p><a class="button small info radius" href="http://www.isisaddons.org" role="button">Inspect the add-ons »</a></p>
+                    </div>
+                </div>
+
+                <br/>
+
+                <div class="row">
+                    <div class="large-12 medium-12 columns">
+                        <h4>A typical application built with Apache Isis</h4>
+                        <br/>
+                        <p>Like all Isis apps, the UI is dynamically built from the domain model.</p>
+
+                        <img class="estatio" src="./images/powered-by/estatio-1.png" style="width: 98%"/>
+
+                        <div class="center">
+                            <br/>
+                            <p>You can learn more about this particular application <a href="./intro/powered-by/powered-by.html">here</a>.
+                                The app is also open source, so you can check out its source code on <a href="http://github.com/estatio/estatio">github</a>.</p>
+                        </div>
+                        <br/>
+                    </div>
+                </div>
+
+                <br/>
+
+                <div class="row">
+                    <div class="large-12 medium-12 columns">
+                        <h4>Getting started</h4>
+                        <br/>
+                        <p>Start developing your own Isis application using our <a href="intro/getting-started/simpleapp-archetype.html">simpleapp archetype</a>:</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="large-12 medium-12 columns">
+                <div class=panel>
+                <pre>
+mvn archetype:generate  \
+    -D archetypeGroupId=org.apache.isis.archetype \
+    -D archetypeArtifactId=simpleapp-archetype \
+    -D archetypeVersion=1.8.0 \
+    -D groupId=com.mycompany \
+    -D artifactId=myapp \
+    -D version=1.0-SNAPSHOT \
+    -B</pre>
+                    </div>
+                    </div>
+                </div>
+
+                <br/>
+
+                <div class="row">
+                    <div class="large-12 medium-12 columns">
+                        <h4>Tutorial</h4>
+                        <br/>
+                        <p>... and this short tutorial should give you an idea as to how Apache Isis dynamically builds the UI:</p>
+                    </div>
+                </div>
+
+                <div class="row panel">
+
+                    <div class="large-1 medium-1 columns">
+                        &nbsp;
+                    </div>
+                    <div class="large-10 medium-10 columns">
+
+                        <div class="tutorial-carousel">
+
+                            <div>
+                                <img src="images/index-screenshots/010-sign-in.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/020-object-layout.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/030-declarative-business-rules.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/040-imperative-business-rules.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/050-action-with-args.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/060-action-with-args-autocomplete.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/070-jdo.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/080-rest-api.png"></img>
+                            </div>
+                            <div>
+                                <img src="images/index-screenshots/090-integtesting.png"></img>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="large-1 medium-1 columns">
+                        &nbsp;
+                    </div>
+                </div>
+            </div>
+
+
+            <footer>
+              <hr>
+              <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>
+</div>
+
+
+
+<script src="./js/foundation/5.5.1/vendor/jquery.js"></script>
+<script src="./js/foundation/5.5.1/foundation.min.js"></script>
+
+
+<link href="./css/jquery.tocify/1.9.0/jquery.tocify.css" rel="stylesheet">
+<script src="./js/jqueryui/1.11.4/jquery-ui.min.js"></script> -->
+<script src="./js/jquery.tocify/1.9.0/jquery.tocify.js"></script>
+
+<script src="./js/slick/1.5.0/slick.min.js"></script>
+
+
+<script type="text/javascript">
+    $(function () {
+        $("#toc").tocify({
+            scrollTo: 50,
+            extendPage: true,
+            context: "#doc-content",
+            highlightOnScroll: true,
+            hashGenerator: "pretty",
+            hideEffect: "slideUp",
+            selectors: "h2,h3,h4,h5"
+        });
+        $(".fallback-toc").hide();
+    });
+</script>
+
+
+<script type="text/javascript">
+
+  /****
+
+      $(document).foundation();
+
+      $(document).ready(function(){
+        // Cache selectors
+        var lastId,
+            topMenu = $("div#toc ul"),
+            topMenuHeight = 100,
+
+            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 : "";
+
+           if (lastId !== id && id) {
+               scrollTo(id);
+           }
+
+           window.history.pushState({}, "", window.location.origin + window.location.pathname + "#" + 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];
+        }
+
+        $(syncMenuItem).click();
+
+      });
+
+    ***/
+
+</script>
+
+<script>
+
+$( document ).ready(function() {
+    console.log( "ready!" );
+
+    (function() {
+      $(function() {
+        return $("#doc-content h2, #doc-content h3, #doc-content h4, #doc-content h5, #doc-content h6").each(function(i, el) {
+          var $el, icon, id;
+          $el = $(el);
+          id = $el.attr('id');
+          icon = '<i class="fa fa-link"></i>';
+          if (id) {
+            return $el.prepend($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
+          }
+        });
+      });
+    }).call(this);
+
+
+
+	/*
+        http://osvaldas.info/auto-hide-sticky-header
+        MIT license
+	*/
+	;( function( $, window, document, undefined )
+	{
+		'use strict';
+
+		var elSelector		= '.header',
+			elClassHidden	= 'header--hidden',
+			throttleTimeout	= 500,
+			$element		= $( elSelector );
+
+		if( !$element.length ) return true;
+
+		var $window			= $( window ),
+			wHeight			= 0,
+			wScrollCurrent	= 0,
+			wScrollBefore	= 0,
+			wScrollDiff		= 0,
+			$document		= $( document ),
+			dHeight			= 0,
+
+			throttle = function( delay, fn )
+			{
+				var last, deferTimer;
+				return function()
+				{
+					var context = this, args = arguments, now = +new Date;
+					if( last && now < last + delay )
+					{
+						clearTimeout( deferTimer );
+						deferTimer = setTimeout( function(){ last = now; fn.apply( context, args ); }, delay );
+					}
+					else
+					{
+						last = now;
+						fn.apply( context, args );
+					}
+				};
+			};
+
+		$window.on( 'scroll', throttle( throttleTimeout, function()
+		{
+			dHeight			= $document.height();
+			wHeight			= $window.height();
+			wScrollCurrent	= $window.scrollTop();
+			wScrollDiff		= wScrollBefore - wScrollCurrent;
+
+			if( wScrollCurrent <= 0 ) // scrolled to the very top; element sticks to the top
+				$element.removeClass( elClassHidden );
+
+			else if( wScrollDiff > 0 && $element.hasClass( elClassHidden ) ) // scrolled up; element slides in
+				$element.removeClass( elClassHidden );
+
+			else if( wScrollDiff < 0 ) // scrolled down
+			{
+				if( wScrollCurrent + wHeight >= dHeight && $element.hasClass( elClassHidden ) ) // scrolled to the very bottom; element slides in
+					$element.removeClass( elClassHidden );
+
+				else // scrolled down; element slides out
+					$element.addClass( elClassHidden );
+			}
+
+			wScrollBefore = wScrollCurrent;
+		}));
+
+	})( jQuery, window, document );
+
+
+});
+</script>
+
+
+<script type="text/javascript">
+$(document).ready(function(){
+  $('.quote-carousel').slick({
+    arrows: true,
+    autoplay: true,
+    dots:true,
+    centerMode:false,
+    infinite: true
+  });
+$('.tutorial-carousel').slick({
+    arrows: true,
+    dots:true,
+    autoplay: true,
+    autoplaySpeed: 6000,
+    slidesToShow: 1,
+    centerMode:true,
+    centerPadding:'80px',
+    infinite: true
+  });
+});
+</script>
+
+
+        </body>
+</html>

http://git-wip-us.apache.org/repos/asf/isis/blob/461e51b7/adocs/documentation/src/main/asciidoc/isis-in-pictures.adoc
----------------------------------------------------------------------
diff --git a/adocs/documentation/src/main/asciidoc/isis-in-pictures.adoc b/adocs/documentation/src/main/asciidoc/isis-in-pictures.adoc
new file mode 100644
index 0000000..01783a3
--- /dev/null
+++ b/adocs/documentation/src/main/asciidoc/isis-in-pictures.adoc
@@ -0,0 +1,286 @@
+[isis-in-pictures]]
+= Isis in Pictures
+: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 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.
+:_basedir: ../
+:_imagesdir: images/
+
+
+pass:[<br/><br/><br/>]
+
+
+On this page we want to show you what a modern Isis application looks like.
+
+The screenshots below are taken from the Isis Addons' http://github.com/isisaddons/isis-app-todoapp[todoapp example] (non ASF), which you are free to fork and use as you will. The corresponding domain classes from which this UI was built can be found https://github.com/isisaddons/isis-app-todoapp/tree/0669d6e2acc5bcad1d9978a4514a17bcf7beab1f/dom/src/main/java/todoapp/dom/module/todoitem[here].
+
+The todoapp also integrates with a number of other http://www.isisaddons.org[Isis Addons] modules.  Because we expect that most apps will end up using one or more of these addons, we've chosen to include screenshots of those too.
+
+[NOTE]
+====
+Please note that the Isis Addons are not part of ASF, but they _are_ all licensed under Apache License 2.0 and are maintained by the Isis committers.
+====
+
+
+
+== Basics
+
+Let's start with the basics...
+
+=== Sign-in
+
+Apache Isis integrates with http://shiro.apache.org[Apache Shiro]. The core framework supports file-based realms, while the Isis Addons http://github.com/isisaddons/isis-module-security[security module] (non ASF) provides a well-features subdomain of users, roles and permissions against features derived from the Isis metamodel. The example todoapp integrates with the security module.
+
+
+image::{_imagesdir}/isis-in-pictures/010-login.png[width="600px",link="{_imagesdir}/isis-in-pictures/010-login.png"]
+
+
+
+=== Install Fixtures
+
+Apache Isis has lots of features to help you prototype and then fully test your application. One such are fixture scripts, which allow pre-canned data to be installed in the running application. This is great to act as the starting point for identifying new stories; later on when the feature is being implemented, the same fixture script can be re-used within that feature's integration tests. (More on tests later).
+
+
+image::{_imagesdir}/isis-in-pictures/020-install-fixtures.png[width="600px",link="{_imagesdir}/isis-in-pictures/020-install-fixtures.png"]
+
+
+
+=== Dashboard and View Models
+
+Most of the time the end-user interacts with representations of persistent domain entities, but Isis also supports view models which can aggregate data from multiple sources. The todoapp example uses a "dashboard" view model to list todo items not yet done vs those completed.
+
+image::{_imagesdir}/isis-in-pictures/030-dashboard-view-model.png[width="600px",link="{_imagesdir}/isis-in-pictures/030-dashboard-view-model.png"]
+
+In general we recommend to initially focus only on domain entities; this will help drive out a good domain model. Later on view models can be introduced in support of specific use cases.
+
+
+
+
+=== Domain Entity
+
+The screenshot below is of the todoapp's `ToDoItem` domain entity. Like all web pages, this UI is generated at runtime, directly from the domain object itself. There are no controllers or HTML to write.
+
+
+image::{_imagesdir}/isis-in-pictures/040-domain-entity.png[width="600px",link="{_imagesdir}/isis-in-pictures/040-domain-entity.png"]
+
+In addition to the domain entity, Apache Isis allows layout metadata hints to be provided, for example to specify the grouping of properties, the positioning of those groups into columns, the association of actions (the buttons) with properties or collections, the icons on the buttons, and so on. This metadata can be specified either as annotations or in JSON form; the benefit of the latter is that it can be updated (and the UI redrawn) without restarting the app.
+
+Any production-ready app will require this metadata but (like the view models discussed above) this metadata can be added gradually on top of the core domain model.
+
+
+
+
+=== Edit properties
+
+By default properties on domain entities are editable, meaning they can be changed directly. In the todoapp example, the `ToDoItem`'s description is one such editable property:
+
+image::{_imagesdir}/isis-in-pictures/050-edit-property.png[width="600px",link="{_imagesdir}/isis-in-pictures/050-edit-property.png"]
+
+
+Note that some of the properties are read-only even in edit mode; individual properties can be made non-editable. It is also possible to make all properties disabled and thus enforce changes only through actions (below).
+
+
+
+
+=== Actions
+
+The other way to modify an entity is to an invoke an action. In the screenshot below the `ToDoItem`'s category and subcategory can be updated together using an action:
+
+image::{_imagesdir}/isis-in-pictures/060-invoke-action.png[width="600px",link="{_imagesdir}/isis-in-pictures/060-invoke-action.png"]
+
+
+There are no limitations on what an action can do; it might just update a single object, it could update multiple objects. Or, it might not update any objects at all, but could instead perform some other activity, such as sending out email or printing a document.
+
+In general though, all actions are associated with some object, and are (at least initially) also implemented by that object: good old-fashioned encapsulation. We sometimes use the term "behaviourally complete" for such domain objects.
+
+
+
+
+=== Contributions
+
+As an alternative to placing actions (business logic) on a domain object, it can instead be placed on an (application-scoped, stateless) domain service. When an object is rendered by Apache Isis, it will automatically render all "contributed" behaviour; rather like traits or aspect-oriented mix-ins).
+
+In the screenshot below the highlighted "export as xml" action, the "relative priority" property (and "previous" and "next" actions) and also the "similar to" collection are all contributed:
+
+image::{_imagesdir}/isis-in-pictures/065-contributions.png[width="600px",link="{_imagesdir}/isis-in-pictures/065-contributions.png"]
+
+
+Contributions are defined by the signature of the actions on the contributing service. The code snippet below shows how this works for the "export as xml" action:
+
+image::{_imagesdir}/isis-in-pictures/067-contributed-action.png[width="600px",link="{_imagesdir}/isis-in-pictures/067-contributed-action.png"]
+
+
+
+
+
+== Extensible Views
+
+The Apache Isis viewer is implemented using http://wicket.apache.org[Apache Wicket], and has been architected to be extensible. For example, when a collection of objects is rendered, this is just one several views, as shown in the selector drop-down:
+
+image::{_imagesdir}/isis-in-pictures/070-pluggable-views.png[width="600px",link="{_imagesdir}/isis-in-pictures/070-pluggable-views.png"]
+
+
+
+The Isis Addons' https://github.com/isisaddons/isis-wicket-gmap3[gmap3 component] (non ASF) will render any domain entity (such as `ToDoItem`) that implements its `Locatable` interface:
+
+image::{_imagesdir}/isis-in-pictures/080-gmap3-view.png[width="600px",link="{_imagesdir}/isis-in-pictures/080-gmap3-view.png"]
+
+
+
+
+Similarly the Isis Addons' https://github.com/isisaddons/isis-wicket-fullcalendar2[fullcalendar2 component] (non ASF) will render any domain entity (such as `ToDoItem`) that implements its `Calendarable` interface:
+
+image::{_imagesdir}/isis-in-pictures/090-fullcalendar2-view.png[width="600px",link="{_imagesdir}/isis-in-pictures/090-fullcalendar2-view.png"]
+
+
+
+
+
+Yet another "view" (though this one is rather simpler is that provided by the Isis Addons https://github.com/isisaddons/isis-wicket-excel[excel component] (non ASF). This provides a download button to the table as a spreadsheet:
+
+image::{_imagesdir}/isis-in-pictures/100-excel-view-and-docx.png[width="600px",link="{_imagesdir}/isis-in-pictures/100-excel-view-and-docx.png"]
+
+
+
+
+The screenshot above also shows an "export to Word" action. This is _not_ a view but instead is a (contributed) action that uses the Isis Addons https://github.com/isisaddons/isis-module-docx[docx module] (non ASF) to perform a "mail-merge":
+
+image::{_imagesdir}/isis-in-pictures/110-docx.png[width="600px",link="{_imagesdir}/isis-in-pictures/110-docx.png"]
+
+
+
+
+
+== Security, Auditing and more...
+
+As well as providing extensions to the UI, the Isis Addons provides a rich set of modules to support various cross-cutting concerns.
+
+Under the activity menu are four sets of services which provide support for https://github.com/isisaddons/isis-module-sessionlogger[user session logging/auditing] (non ASF), https://github.com/isisaddons/isis-module-command[command profiling] (non ASF), https://github.com/isisaddons/isis-module-audit[(object change) auditing] (shown, non-ASF) and (inter-system) https://github.com/isisaddons/isis-module-publishing[event publishing] (non ASF):
+
+image::{_imagesdir}/isis-in-pictures/120-auditing.png[width="600px",link="{_imagesdir}/isis-in-pictures/120-auditing.png"]
+
+
+
+
+In the security menu is access to the rich set of functionality provided by the Isis addons https://github.com/isisaddons/isis-module-security[security module] (non ASF):
+
+image::{_imagesdir}/isis-in-pictures/130-security.png[width="600px",link="{_imagesdir}/isis-in-pictures/130-security.png"]
+
+
+
+
+In the prototyping menu is the ability to download a GNU gettext `.po` file for translation. This file can then be translated into multiple languages so that your app can support different locales. Note that this feature is part of Apache Isis core (it is not in Isis Addons):
+
+image::{_imagesdir}/isis-in-pictures/140-i18n.png[width="600px",link="{_imagesdir}/isis-in-pictures/140-i18n.png"]
+
+
+
+
+The Isis addons also provides a module for managing application and user https://github.com/isisaddons/isis-module-settings[settings] (non ASF). Most apps (the todoapp example included) won't expose these services directly, but will usually wrap them in their own app-specific settings service that trivially delegates to the settings module's services:
+
+image::{_imagesdir}/isis-in-pictures/150-appsettings.png[width="600px",link="{_imagesdir}/isis-in-pictures/150-appsettings.png"]
+
+
+
+
+=== Multi-tenancy support
+
+Of the various Isis addons, the https://github.com/isisaddons/isis-module-security[security module] has the most features. One significant feature is the ability to associate users and objects with a "tenancy". The todoapp uses this feature so that different users' list of todo items are kept separate from one another. A user with administrator is able to switch their own "tenancy" to the tenancy of some other user, in order to access the objects in that tenancy:
+
+image::{_imagesdir}/isis-in-pictures/160-switch-tenancy.png[width="600px",link="{_imagesdir}/isis-in-pictures/160-switch-tenancy.png"]
+
+
+
+For more details, see the https://github.com/isisaddons/isis-module-security[security module] README.
+
+
+=== Me
+
+Most of the https://github.com/isisaddons/isis-module-security[security module]'s services are on the security module, which would normally be provided only to administrators. Kept separate is the "me" action:
+
+image::{_imagesdir}/isis-in-pictures/170-me.png[width="600px",link="{_imagesdir}/isis-in-pictures/170-me.png"]
+
+
+
+Assuming they have been granted permissions, this allows a user to access an entity representing their own user account:
+
+image::{_imagesdir}/isis-in-pictures/180-app-user-entity.png[width="600px",link="{_imagesdir}/isis-in-pictures/180-app-user-entity.png"]
+
+
+
+If not all of these properties are required, then they can be hidden either using security or though Isis' internal event bus (described below). Conversely, additional properties can be "grafted onto" the user using the contributed properties/collections discussed previously.
+
+
+=== Themes
+
+Apache Isis' Wicket viewer uses http://getbootstrap.com[Twitter Bootstrap], which means that it can be themed. If more than one theme has been configured for the app, then the viewer allows the end-user to switch their theme:
+
+image::{_imagesdir}/isis-in-pictures/190-switch-theme.png[width="600px",link="{_imagesdir}/isis-in-pictures/190-switch-theme.png"]
+
+
+
+
+== REST API
+
+In addition to Isis' Wicket viewer, it also provides a fully fledged REST API, as an implementation of the http://restfulobjects.org[Restful Objects] specification. The screenshot below shows accessing this REST API using a Chrome plugin:
+
+image::{_imagesdir}/isis-in-pictures/200-rest-api.png[width="600px",link="{_imagesdir}/isis-in-pictures/200-rest-api.png"]
+
+
+
+Like the Wicket viewer, the REST API is generated automatically from the domain objects (entities and view models).
+
+
+
+
+
+== Integration Testing Support
+
+Earlier on we noted that Apache Isis allows fixtures to be installed through the UI. These same fixture scripts can be reused within integration tests. For example, the code snippet below shows how the `FixtureScripts` service injected into an integration test can then be used to set up data:
+
+image::{_imagesdir}/isis-in-pictures/210-fixture-scripts.png[width="500px",link="{_imagesdir}/isis-in-pictures/210-fixture-scripts.png"]
+
+
+
+The tests themselves are run in junit. While these are integration tests (so talking to a real database), they are no more complex than a regular unit test:
+
+image::{_imagesdir}/isis-in-pictures/220-testing-happy-case.png[width="400px",link="{_imagesdir}/isis-in-pictures/220-testing-happy-case.png"]
+
+
+
+To simulate the business rules enforced by Apache Isis, the domain object can be "wrapped" in a proxy. For example, if using the Wicket viewer then Apache Isis will enforce the rule (implemented in the `ToDoItem` class itself) that a completed item cannot have the "completed" action invoked upon it. The wrapper simulates this by throwing an appropriate exception:
+
+image::{_imagesdir}/isis-in-pictures/230-testing-wrapper-factory.png[width="550px",link="{_imagesdir}/isis-in-pictures/230-testing-wrapper-factory.png"]
+
+
+
+
+
+
+== Internal Event Bus
+
+Contributions, discussed earlier, are an important tool in ensuring that the packages within your Isis application are decoupled; by extracting out actions the order of dependency between packages can effectively be reversed.
+
+Another important tool to ensure your codebase remains maintainable is Isis' internal event bus. It is probably best explained by example; the code below says that the "complete" action should emit a `ToDoItem.Completed` event:
+
+image::{_imagesdir}/isis-in-pictures/240-domain-events.png[width="400px",link="{_imagesdir}/isis-in-pictures/240-domain-events.png"]
+
+
+
+
+
+Domain service (application-scoped, stateless) can then subscribe to this event:
+
+image::{_imagesdir}/isis-in-pictures/250-domain-event-subscriber.png[width="450px",link="{_imagesdir}/isis-in-pictures/250-domain-event-subscriber.png"]
+
+
+
+
+And this test verifies that completing an action causes the subscriber to be called:
+
+image::{_imagesdir}/isis-in-pictures/260-domain-event-test.png[width="850px",link="{_imagesdir}/isis-in-pictures/260-domain-event-test.png"]
+
+
+
+In fact, the domain event is fired not once, but (up to) 5 times. It is called 3 times prior to execution, to check that the action is visible, enabled and that arguments are valid. It is then additionally called prior to execution, and also called after execution. What this means is that a subscriber can in either veto access to an action of some publishing object, and/or it can perform cascading updates if the action is allowed to proceed.
+
+Moreover, domain events are fired for all properties and collections, not just actions. Thus, subscribers can therefore switch on or switch off different parts of an application. Indeed, the example todoapp demonstrates this.
+