{% extends "isis-template.html" %}

{% block content %}


  <br/>
  <br/>
  <div class="row">
    <div class="col-md-12">
      <div align="center">
        <h4>The carousel below provides a tutorial by screenshot of many of the core features of Apache Isis&trade;, v1.3.0.  Note that there have been many improvements in more recent releases, in particular as of v1.8.0.</h4>
        <h4>When you are done here, either get started with our <a href="../getting-started/simple-archetype.html">simple archetype</a>, or read more at our <a href="../../documentation.html">documentation</a> page.</h4>
      </div>
    </div>
  </div>
  <br/>
  <br/>

  <!--  Carousel -->
  <!--  consult Bootstrap docs at 
        http://getbootstrap.com/javascript/#carousel -->
  <div id="this-carousel-id" class="carousel slide">
  
    <ol class="carousel-indicators">
      <li data-target="#this-carousel-id" data-slide-to="0" class="active"></li>
      <li data-target="#this-carousel-id" data-slide-to="1"></li>
      <li data-target="#this-carousel-id" data-slide-to="2"></li>
      <li data-target="#this-carousel-id" data-slide-to="3"></li>
      <li data-target="#this-carousel-id" data-slide-to="4"></li>
      <li data-target="#this-carousel-id" data-slide-to="5"></li>
      <li data-target="#this-carousel-id" data-slide-to="6"></li>
      <li data-target="#this-carousel-id" data-slide-to="7"></li>
      <li data-target="#this-carousel-id" data-slide-to="8"></li>
      <li data-target="#this-carousel-id" data-slide-to="9"></li>
      <li data-target="#this-carousel-id" data-slide-to="10"></li>
      <li data-target="#this-carousel-id" data-slide-to="11"></li>
      <li data-target="#this-carousel-id" data-slide-to="12"></li>
      <li data-target="#this-carousel-id" data-slide-to="13"></li>
      <li data-target="#this-carousel-id" data-slide-to="14"></li>
      <li data-target="#this-carousel-id" data-slide-to="15"></li>
      <li data-target="#this-carousel-id" data-slide-to="16"></li>
      <li data-target="#this-carousel-id" data-slide-to="17"></li>
      <li data-target="#this-carousel-id" data-slide-to="18"></li>
      <li data-target="#this-carousel-id" data-slide-to="19"></li>
      <li data-target="#this-carousel-id" data-slide-to="20"></li>
      <li data-target="#this-carousel-id" data-slide-to="21"></li>
      <li data-target="#this-carousel-id" data-slide-to="22"></li>
      <li data-target="#this-carousel-id" data-slide-to="23"></li>
      <li data-target="#this-carousel-id" data-slide-to="24"></li>
      <li data-target="#this-carousel-id" data-slide-to="25"></li>
      <li data-target="#this-carousel-id" data-slide-to="26"></li>
      <li data-target="#this-carousel-id" data-slide-to="27"></li>
      <li data-target="#this-carousel-id" data-slide-to="28"></li>
      <li data-target="#this-carousel-id" data-slide-to="29"></li>
      <li data-target="#this-carousel-id" data-slide-to="30"></li>
      <li data-target="#this-carousel-id" data-slide-to="31"></li>
      <li data-target="#this-carousel-id" data-slide-to="32"></li>
      <li data-target="#this-carousel-id" data-slide-to="33"></li>
      <li data-target="#this-carousel-id" data-slide-to="34"></li>
      <li data-target="#this-carousel-id" data-slide-to="35"></li>
      <li data-target="#this-carousel-id" data-slide-to="36"></li>
      <li data-target="#this-carousel-id" data-slide-to="37"></li>
      <li data-target="#this-carousel-id" data-slide-to="38"></li>
      <li data-target="#this-carousel-id" data-slide-to="39"></li>
      <li data-target="#this-carousel-id" data-slide-to="40"></li>
      <li data-target="#this-carousel-id" data-slide-to="41"></li>
      <li data-target="#this-carousel-id" data-slide-to="42"></li>
      <li data-target="#this-carousel-id" data-slide-to="43"></li>
      <li data-target="#this-carousel-id" data-slide-to="44"></li>
      <li data-target="#this-carousel-id" data-slide-to="45"></li>
      <li data-target="#this-carousel-id" data-slide-to="46"></li>
      <li data-target="#this-carousel-id" data-slide-to="47"></li>
      <li data-target="#this-carousel-id" data-slide-to="48"></li>
      <li data-target="#this-carousel-id" data-slide-to="49"></li>
      <li data-target="#this-carousel-id" data-slide-to="50"></li>
      <li data-target="#this-carousel-id" data-slide-to="51"></li>
      <li data-target="#this-carousel-id" data-slide-to="52"></li>
      <li data-target="#this-carousel-id" data-slide-to="53"></li>
      <li data-target="#this-carousel-id" data-slide-to="54"></li>
      
    </ol>

    <div class="carousel-inner">

      <div class="item active">
        <a href="#010-sign-in">
          <img src="../getting-started/images/screenshots/010-sign-in.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#020-todo-app">
          <img src="../getting-started/images/screenshots/020-todo-app.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#030-jdo">
          <img src="../getting-started/images/screenshots/030-jdo.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#040-rest-api">
          <img src="../getting-started/images/screenshots/040-rest-api.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#050-menu-services">
          <img src="../getting-started/images/screenshots/050-menu-services.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#060-menu-class">
          <img src="../getting-started/images/screenshots/060-menu-class.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#070-ToDoItem-newToDo">
          <img src="../getting-started/images/screenshots/070-ToDoItem-newToDo.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#080-ToDoItems-newToDo-Category-enum">
          <img src="../getting-started/images/screenshots/080-ToDoItems-newToDo-Category-enum.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#090-ToDoItems-newToDo-Subcategory-choices">
          <img src="../getting-started/images/screenshots/090-ToDoItems-newToDo-Subcategory-choices.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#100-ToDoItems-newToDo-datepicker">
          <img src="../getting-started/images/screenshots/100-ToDoItems-newToDo-datepicker.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#110-ToDoItems-newToDo-defaults">
          <img src="../getting-started/images/screenshots/110-ToDoItems-newToDo-defaults.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#120-ToDoItems-newToDo-mandatory">
          <img src="../getting-started/images/screenshots/120-ToDoItems-newToDo-mandatory.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#130-ToDoItems-newToDo-regex">
          <img src="../getting-started/images/screenshots/130-ToDoItems-newToDo-regex.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#140-ToDoItems-notYetComplete">
          <img src="../getting-started/images/screenshots/140-ToDoItems-notYetComplete.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#150-standalone-collection">
          <img src="../getting-started/images/screenshots/150-standalone-collection.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#160-navigating-to-object">
          <img src="../getting-started/images/screenshots/160-navigating-to-object.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#170-object-layout">
          <img src="../getting-started/images/screenshots/170-object-layout.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#180-object-layout-json">
          <img src="../getting-started/images/screenshots/180-object-layout-json.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#190-download-layout">
          <img src="../getting-started/images/screenshots/190-download-layout.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#200-refresh-layout">
          <img src="../getting-started/images/screenshots/200-refresh-layout.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#210-css-styling">
          <img src="../getting-started/images/screenshots/210-css-styling.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#220-title">
          <img src="../getting-started/images/screenshots/220-title.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#230-icon">
          <img src="../getting-started/images/screenshots/230-icon.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#240-editing-properties">
          <img src="../getting-started/images/screenshots/240-editing-properties.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#250-disabled-properties">
          <img src="../getting-started/images/screenshots/250-disabled-properties.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#260-ToDoItem-hidden">
          <img src="../getting-started/images/screenshots/260-ToDoItem-hidden.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#270-ToDoItem-validateDeclaratively">
          <img src="../getting-started/images/screenshots/270-ToDoItem-validateDeclaratively.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#280-ToDoItem-validateImperatively">
          <img src="../getting-started/images/screenshots/280-ToDoItem-validateImperatively.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#290-invoke-noarg-action">
          <img src="../getting-started/images/screenshots/290-invoke-noarg-action.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#300-disable-action">
          <img src="../getting-started/images/screenshots/300-disable-action.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#310-action-with-args">
          <img src="../getting-started/images/screenshots/310-action-with-args.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#320-action-with-args-autocomplete">
          <img src="../getting-started/images/screenshots/320-action-with-args-autocomplete.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#330-bulk-actions">
          <img src="../getting-started/images/screenshots/330-bulk-actions.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#340-contributed-action">
          <img src="../getting-started/images/screenshots/340-contributed-action.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#350-contributed-properties">
          <img src="../getting-started/images/screenshots/350-contributed-properties.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#360-contributed-collections">
          <img src="../getting-started/images/screenshots/360-contributed-collections.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#370-view-models-1">
          <img src="../getting-started/images/screenshots/370-view-models-1.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#380-view-models-2">
          <img src="../getting-started/images/screenshots/380-view-models-2.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#390-view-model-rest-api">
          <img src="../getting-started/images/screenshots/390-view-model-rest-api.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#400-dashboard">
          <img src="../getting-started/images/screenshots/400-dashboard.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#410-bookmarkable">
          <img src="../getting-started/images/screenshots/410-bookmarkable.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#420-optimistic-locking">
          <img src="../getting-started/images/screenshots/420-optimistic-locking.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#430-domainobjectcontainer">
          <img src="../getting-started/images/screenshots/430-domainobjectcontainer.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#440-domainobjectcontainer-2">
          <img src="../getting-started/images/screenshots/440-domainobjectcontainer-2.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#450-prototyping-actions">
          <img src="../getting-started/images/screenshots/450-prototyping-actions.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#460-authorization">
          <img src="../getting-started/images/screenshots/460-authorization.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#470-publishing-service">
          <img src="../getting-started/images/screenshots/470-publishing-service.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#480-auditing-service">
          <img src="../getting-started/images/screenshots/480-auditing-service.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#490-integtesting">
          <img src="../getting-started/images/screenshots/490-integtesting.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#500-maven-modules">
          <img src="../getting-started/images/screenshots/500-maven-modules.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#510-extensible-excel">
          <img src="../getting-started/images/screenshots/510-extensible-excel.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#520-extensible-calendar">
          <img src="../getting-started/images/screenshots/520-extensible-calendar.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#530-extensible-map">
          <img src="../getting-started/images/screenshots/530-extensible-map.png"></img>
        </a>
      </div>
      <div class="item">
        <a href="#540-extensible-charts">
          <img src="../getting-started/images/screenshots/540-extensible-charts.png"></img>
        </a>
      </div>

    </div>
    
      <a class="carousel-control left" href="#this-carousel-id" data-slide="prev"><span class="icon-prev"></span></a>
      <a class="carousel-control right" href="#this-carousel-id" data-slide="next"><span class="icon-next"></span></a>
  </div><!-- .carousel -->


<script>
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 6000
    });
  });
</script>


<br/>
<br/>

{% endblock %}