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 2014/03/12 08:39:59 UTC
svn commit: r901220 [2/2] - in /websites/staging/isis/trunk: cgi-bin/
content/ content/components/viewers/wicket/
content/components/viewers/wicket/images/layouts/
content/more-advanced-topics/
Added: websites/staging/isis/trunk/content/components/viewers/wicket/how-to-tweak-the-ui-using-javascript.html
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/wicket/how-to-tweak-the-ui-using-javascript.html (added)
+++ websites/staging/isis/trunk/content/components/viewers/wicket/how-to-tweak-the-ui-using-javascript.html Wed Mar 12 07:39:59 2014
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+
+ <meta charset="utf-8">
+ <title>Tweaking the UI using Javascript</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+
+ <!-- Le styles -->
+ <link href="./../../../bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
+ <link href="./../../../prettify.css" rel="stylesheet">
+
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ }
+ .sprite {
+ display: inline-block;
+ height: 20px;
+ margin: 0 auto 4px;
+ outline: medium none;
+ text-indent: -999em;
+ width: 24px;
+ background-image: url('./../../../images/sprites.png');
+ background-repeat: no-repeat;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ .edit-page {
+ display: inline-block;
+ height: 20px;
+ margin: 0 auto 4px;
+ outline: medium none;
+ text-indent: -999em;
+ width: 24px;
+ background-image: url('./../../../images/edit.png');
+ background-repeat: no-repeat;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ .fb-share {
+ background-position: 0px -40px;
+ }
+ .gp-share {
+ background-position: 0px 0px;
+ }
+ .tw-share {
+ background-position: 0px -80px;
+ }
+ .markdown-content {
+ min-height: 500px;
+ }
+ .book-image img {
+ border: 1px;
+ border-style: solid;
+ }
+ .release-matrix .heading {
+ background-color: #eeeeee;
+ }
+ .release-matrix .new {
+ color: #dd0000;
+ font-weight: bolder;
+ }
+ .stub,.note {
+ position: relative;
+ padding: 7px 15px;
+ margin-bottom: 18px;
+ color: #404040;
+ background-color: #eedc94;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
+ background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
+ background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -o-linear-gradient(top, #fceec1, #eedc94);
+ background-image: linear-gradient(top, #fceec1, #eedc94);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #eedc94 #eedc94 #e4c652;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ }
+
+ div.XXXisis-tweak form {
+ margin-top: 6px;
+ margin-bottom: -2px;
+ }
+
+ div.row div.col-md-12 {
+ border-top: 1px solid #eeeeee;
+ }
+
+
+ /* Isis specific stuff */
+
+ div.row div.col-md-12 {
+ margin-top: 20px;
+ }
+
+ .container {
+ width: 940px;
+ }
+
+ .markdown-content .documentation .span-one-third p {
+ margin-bottom: 0px;
+ }
+
+ .markdown-content .documentation .group {
+ margin-top: 9px;
+ }
+
+ .documentation .group h2 {
+ border-bottom: 1px solid #DDD
+ }
+
+ .container h2 a[name],
+ .documentation h2 a[name] {
+ padding-top: 50px;
+ margin-top: -50px;
+ }
+
+ .container h2 a[name],
+ .documentation h2 a[name],
+ .documentation h3 a[name],
+ .documentation h4 a[name] {
+ color: black;
+ display: inline-block;
+ }
+ .documentation h2 a[name]:hover,
+ .documentation h3 a[name]:hover,
+ .documentation h4 a[name]:hover {
+ text-decoration: none;
+ }
+
+ .documentation h2 a:not([name]),
+ .documentation h3 a:not([name]),
+ .documentation h4 a:not([name]) {
+ /* same as code style */
+ padding: 0 3px 2px;
+ font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-size: 12px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ padding: 1px 3px;
+ }
+
+ .carousel-indicators li {
+ border: 1px solid rgb(192,70,1);
+ }
+
+ .carousel-indicators li.active {
+ background-color: rgb(192,70,1);
+ }
+
+ .carousel-control .icon-prev,
+ .carousel-control .icon-next {
+ color: rgb(192,70,1);
+ font-size: 60px;
+ }
+
+ .page-header {
+ margin-top: 0px;
+ }
+
+ .container blockquote p {
+ font-size: small;
+ font-style: italic;
+ }
+
+ .container blockquote p {
+ font-size: small;
+ font-style: italic;
+ font-weight: bold;
+ }
+
+ footer hr {
+ margin-top: 100px;
+ }
+
+ </style>
+ <script type="text/javascript">
+ function fbshare () {
+ window.open(
+ "http://www.facebook.com/sharer/sharer.php?u="+document.URL,
+ 'Share on Facebook',
+ 'width=640,height=426');
+ };
+ function gpshare () {
+ window.open(
+ "https://plus.google.com/share?url="+document.URL,
+ 'Share on Google+',
+ 'width=584,height=385');
+ };
+ function twshare () {
+ window.open(
+ "https://twitter.com/intent/tweet?url="+document.URL+"&text=Tweaking the UI using Javascript",
+ 'Share on Twitter',
+ 'width=800,height=526');
+ };
+ </script>
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="./../../../images/favicon.ico">
+
+ <script src="./../../../javascript/prettify.js" type="text/javascript"></script>
+
+ <script src="//code.jquery.com/jquery.js"></script>
+ <script src="./../../../javascript/prettyprint.js"></script>
+ <script src="./../../../bootstrap-3.0.0/js/bootstrap.js"></script>
+
+
+ <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+ <!--
+ <DISABLEDscript src="./../../../javascript/common.js"></DISABLEDscript>
+ -->
+
+
+
+
+
+ <script>
+ $(function () { prettyPrint() })
+ $().dropdown()
+ </script>
+
+
+ </head>
+
+ <body>
+
+ <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+ <div class="container">
+ <a class="navbar-brand" href="./../../../index.html">Apache Isis™</a>
+ <ul class="nav navbar-nav">
+ <li><a href="./../../../download.html">Download</a></li>
+ <li><a href="./../../../documentation.html">Documentation</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Screenshots<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="./../../../intro/elevator-pitch/isis-in-pictures.html">Screenshots</a></li>
+ <li><a href="./../../../intro/tutorials/screencasts.html">Screencasts <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/">Online Demo</a></li>
+ </ul>
+ </li>
+
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="./../../../support.html">Mailing Lists</a></li>
+ <li><a href="http://isis.markmail.org/search/?q=">ML Archives</a></li>
+ <li><a href="https://issues.apache.org/jira/browse/ISIS">JIRA</a></li>
+ <li><a href="http://stackoverflow.com/questions/tagged/isis">Stack Overflow</a></li>
+ <li><a href="http://github.com/apache/isis">Github mirror</a></li>
+ </ul>
+ </li>
+
+ <FORM class="navbar-form navbar-right" id="searchbox_012614087480249044419:dn-q5gtwxya" action="http://www.google.com/cse">
+ <div class="form-group">
+ <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 class="dropdown navbar-right">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apache <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="http://www.apache.org/">Apache Homepage <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/licenses/">Licenses <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/security/">Security <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/foundation/sponsorship.html">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="./../../../more-thanks.html">More thanks <i class="icon-share-alt"></i></a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+ </div>
+ </nav>
+
+ <div class="container">
+ <div class="markdown-content">
+
+
+<div class="page-header">
+<p><a href="./../../../documentation.html">Docs</a> » <a href="./../../../components/about.html">Components</a> » <a href="./../../../components/viewers/about.html">Viewers</a> » <a href="./../../../components/viewers/wicket/about.html">Wicket</a></p>
+<h1>Tweaking the UI using Javascript
+
+</h1>
+</div>
+
+<p>The Wicket viewer allows you to customize the GUI in several (progressively more sophisticated) ways:</p>
+
+<ul>
+<li>through CSS (see <a href="./how-to-tweak-the-ui-using-css-classes.html">here</a>)</li>
+<li>through Javascript snippets (eg JQuery) (described below)</li>
+<li>by replacing elements of the page using the <code>ComponentFactory</code> interface (see <a href="./customizing-the-viewer.html">here</a>)</li>
+<li>by providing new pages (see <a href="./custom-pages.html">here</a>)</li>
+</ul>
+
+<h2>Customizing using Javascript snippets</h2>
+
+<p>The Wicket viewer ships with embedded JQuery, so this can be leveraged (eg to run some arbitrary JQuery on page load). </p>
+
+<p>This is done by adjusting the Guice bindings (part of Isis' bootstrapping) in your custom subclass of <code>IsisWicketApplication</code>:</p>
+
+<pre><code>public class MyAppApplication extends IsisWicketApplication {
+ @Override
+ protected Module newIsisWicketModule() {
+ final Module isisDefaults = super.newIsisWicketModule();
+ final Module myAppOverrides = new AbstractModule() {
+ @Override
+ protected void configure() {
+ ...
+ bind(String.class)
+ .annotatedWith(Names.named("applicationJs"))
+ .toInstance("scripts/application.js");
+ ...
+ }
+ };
+
+ return Modules.override(isisDefaults).with(myAppOverrides);
+ }
+}
+</code></pre>
+
+<p>Currently only one such <code>.js</code> file can be registered.</p>
+
+
+
+ </div>
+
+ <div id="edit" class="modal hide fade in" style="xxxdisplay: none; ">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">x</a>
+
+ <h3>Thank you for contributing to the documention!</h3>
+ </div>
+ <div class="modal-body">
+ <h4>Any help with the documentation is greatly appreciated.</h4>
+ <p>All edits are reviewed before going live, so feel free to do much more than fix typos or links. If you see a page that could benefit from an entire rewrite, we'd be thrilled to review it. Don't be surprised if we like it so much we ask you for help with other pages :)</p>
+ <small>NOTICE: unless indicated otherwise on the pages in question, all editable content available from apache.org is presumed to be licensed under the Apache License (AL) version 2.0 and hence all submissions to apache.org treated as formal Contributions under the license terms.</small>
+ <!--[if gt IE 6]>
+ <h4>Internet Explorer Users</h4>
+ <p>If you are not an Apache committer, click the Yes link and enter a <i>anonymous</i> for the username and leave the password empty</p>
+ <![endif]-->
+
+ </div>
+ <div class="modal-footer">
+ Do you have an Apache ID?
+ <a href="javascript:void(location.href='https://cms.apache.org/redirect?uri='+escape(location.href))" class="btn">Yes</a>
+ <a href="javascript:void(location.href='https://anonymous:@cms.apache.org/redirect?uri='+escape(location.href))" class="btn">No</a>
+ </div>
+ </div>
+ <!--
+ <script src="./../../../javascript/bootstrap-modal.js"></script>
+ -->
+
+ <footer>
+ <hr/>
+ <p>
+ Copyright © 2010~2014 The Apache Software Foundation, Licensed under the Apache License, Version 2.0.
+ <br/>
+ Apache Isis, Isis, Apache, the Apache feather logo, and the Apache Isis project logo are trademarks of The Apache Software Foundation.
+ </p>
+ </footer>
+
+ </div> <!-- /container -->
+
+ </body>
+</html>
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/4-0-8-0.png
==============================================================================
Binary file - no diff available.
Propchange: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/4-0-8-0.png
------------------------------------------------------------------------------
svn:mime-type = image/png
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/4-4-4-12.png
==============================================================================
Binary file - no diff available.
Propchange: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/4-4-4-12.png
------------------------------------------------------------------------------
svn:mime-type = image/png
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/6-6-0-12.png
==============================================================================
Binary file - no diff available.
Propchange: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/6-6-0-12.png
------------------------------------------------------------------------------
svn:mime-type = image/png
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/isis-layout-show-facets.css
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/isis-layout-show-facets.css (added)
+++ websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/isis-layout-show-facets.css Wed Mar 12 07:39:59 2014
@@ -0,0 +1,3 @@
+ul.isis-facets {
+ display: initial;
+}
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/isis-layout.css
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/isis-layout.css (added)
+++ websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/isis-layout.css Wed Mar 12 07:39:59 2014
@@ -0,0 +1,253 @@
+.primary-1 {
+ background-color: #669900;
+}
+
+.primary-2 {
+ background-color: #669900;
+}
+
+.primary-3 {
+ background-color: #669900;
+}
+
+.primary-4 {
+ background-color: #99FF66;
+}
+
+.primary-5 {
+ background-color: #CCFF99;
+}
+
+.secondary-a-1 {
+ background-color: #006666;
+}
+
+.secondary-a-2 {
+ background-color: #006666;
+}
+
+.secondary-a-3 {
+ background-color: #006666;
+}
+
+.secondary-a-4 {
+ background-color: #66CCCC;
+}
+
+.secondary-a-5 {
+ background-color: #99CCCC;
+}
+
+.secondary-b-1 {
+ background-color: #999900;
+}
+
+.secondary-b-2 {
+ background-color: #999900;
+}
+
+.secondary-b-3 {
+ background-color: #999900;
+}
+
+.secondary-b-4 {
+ background-color: #FFFF66;
+}
+
+.secondary-b-5 {
+ background-color: #FFFFCC;
+}
+
+.complement-1 {
+ background-color: #990033;
+}
+
+.complement-2 {
+ background-color: #990033;
+}
+
+.complement-3 {
+ background-color: #990033;
+}
+
+.complement-4 {
+ background-color: #FF6699;
+}
+
+.complement-5 {
+ background-color: #FF99CC;
+}
+
+
+
+legend {
+ background-color: white;
+}
+
+fieldset {
+ padding-bottom: 10px;
+}
+
+span,li {
+ color: white;
+}
+span {
+ font-weight: bold;
+}
+
+li {
+ padding-bottom: 10px;
+ margin-bottom: 10px;
+}
+
+
+
+.isis-header {
+ padding: 20px 80px 20px 40px;
+ margin-right: 100px;
+ background-color: #99CCCC;
+ display: block;
+ width: 100%;
+}
+
+.isis-header span.isis-title {
+ font-size: xx-large;
+ padding: 5px 80px 5px 40px;
+ margin-right: 50px;
+ color: black;
+ background-color: #99FF66;
+ display: inline-table;
+ vertical-align: bottom;
+}
+
+.isis-header div.isis-actions span {
+ font-size: large;
+ padding: 5px 5px 5px 5px;
+ display: inline-table;
+}
+
+.isis-memberGroup, .isis-collection {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ min-height: 100px;
+}
+
+.isis-memberGroup {
+ background-color: #669900;
+}
+
+.isis-collection {
+ background-color: #999900;
+}
+
+
+div.isis-property > span {
+ margin-left: 5%;
+ padding-left: 10px;
+ width: 90%;
+ display: block;
+}
+
+fieldset div.isis-property > span {
+ padding: 5px;
+ margin: 10px;
+ background-color: #006666;
+}
+
+.isis-header div.isis-actions,
+fieldset div.isis-actions {
+ margin-left: 60px;
+}
+
+fieldset.isis-collection div.isis-actions {
+ margin-left: 60px;
+}
+
+.isis-header .isis-actions {
+ display: inline-block;
+}
+
+.isis-header div.isis-action,
+fieldset div.isis-action {
+ display: inline-table;
+ padding: 5px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ background-color: #990033;
+}
+
+
+fieldset div.isis-action span {
+ background-color: #990033;
+}
+
+.isis-memberGroups {}
+
+.isis-memberGroup.min-height-50,
+.isis-collection.min-height-50 {
+ min-height: 50px;
+}
+
+.isis-memberGroup.min-height-100,
+.isis-collection.min-height-100 {
+ min-height: 100px;
+}
+
+.isis-memberGroup.min-height-150,
+.isis-collection.min-height-150 {
+ min-height: 150px;
+}
+
+.isis-memberGroup.min-height-200,
+.isis-collection.min-height-200 {
+ min-height: 200px;
+}
+
+.isis-memberGroup.min-height-250,
+.isis-collection.min-height-250 {
+ min-height: 250px;
+}
+
+.isis-memberGroup.min-height-300,
+.isis-collection.min-height-300 {
+ min-height: 300px;
+}
+
+.isis-memberGroup.min-height-350,
+.isis-collection.min-height-350 {
+ min-height: 350px;
+}
+
+.isis-memberGroup.min-height-400,
+.isis-collection.min-height-400 {
+ min-height: 400px;
+}
+
+.isis-memberGroup .isis-hidden {
+ display: none;
+}
+
+.isis-action ul.isis-facets li {
+ margin-top: 30px;
+}
+ul.isis-facets li {
+ margin-left: 40px;
+ font-size: small;
+}
+.isis-action ul.isis-facets li {
+ margin-top: 10px;
+ margin-left: 20px;
+}
+.isis-action ul.isis-facets li {
+ font-size: small;
+}
+ul.isis-facets {
+ line-height: 0px;
+}
+ul.isis-facets {
+ margin:0px;
+}
+
+.isis-facets {
+ display: none;
+}
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-4-0-8-0.html
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-4-0-8-0.html (added)
+++ websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-4-0-8-0.html Wed Mar 12 07:39:59 2014
@@ -0,0 +1,198 @@
+f<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>colspans={4,0,8,0}</title>
+
+ <!-- Bootstrap -->
+ <!--
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
+ <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+ -->
+
+ <!-- Bootstrap -->
+ <link href="css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+ <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+ <![endif]-->
+ <link href="isis-layout.css" rel="stylesheet">
+ <!--<link href="isis-layout-show-facets.css" rel="stylesheet">-->
+</head>
+ <body>
+ <div class="container">
+ <h1>colspans={4,0,8,0}</h1>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="isis-header">
+ <span class="isis-title">Buy bread</span>
+ <div class="isis-actions">
+ <div class="isis-action x-caution">
+ <span>delete</span>
+ </div>
+ <div class="isis-action">
+ <span data-isis-id="duplicate">clone</span>
+ <ul class="isis-facets">
+ <li>describedAs.value="Create a new todo item from this one"</li>
+ </ul>
+ </div>
+ <div class="isis-action">
+ <span>recentChanges</span>
+ </div>
+ <div class="isis-action">
+ <span>recentChanges</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-4 isis-memberGroups">
+ <fieldset class="isis-memberGroup min-height-100">
+ <legend>General</legend>
+ <div class="isis-property">
+ <span data-isis-typicallength="50">description</span>
+ <ul class="isis-facets">
+ <li>typicalLength.value=50</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>category</span>
+ <ul class="isis-facets">
+ <li>disabled.reason="Use action to update both category and subcategory"</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>subcategory</span>
+ <ul class="isis-facets">
+ <li>disabled.reason="Use action to update both category and subcategory"</li>
+ </ul>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="updateCategory">update</span>
+ </div>
+ <div class="isis-action">
+ <span>analyseCategory</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property">
+ <span class="isis-hidden">ownedBy</span>
+ </div>
+ <div class="isis-property x-highlight">
+ <span data-isis-id="complete">done</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="completed">done</span>
+ <ul class="isis-facets">
+ <li>describedAs.value="Mark this todo item as having been completed"</li>
+ </ul>
+ </div>
+ <div class="isis-action">
+ <span>scheduleExplicitly</span>
+ </div>
+ <div class="isis-action">
+ <span>scheduleImplicitly</span>
+ </div>
+ <div class="isis-action">
+ <span data-isis-id="notYetCompleted">not done</span>
+ </div>
+ </div>
+ </div>
+ </fieldset>
+ <fieldset class="isis-memberGroup">
+ <legend>Priority</legend>
+ <div class="isis-property">
+ <span>relativePriority</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span>previous</span>
+ </div>
+ <div class="isis-action">
+ <span>next</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property x-key">
+ <span>dueBy</span>
+ </div>
+ <legend>Other</legend>
+ <div class="isis-property">
+ <span>cost</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="updateCost">update</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property">
+ <span>notes</span>
+ <ul class="isis-facets">
+ <li>multiLine.numberOfLines=5</li>
+ <li>hidden.where=ALL_TABLES</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>attachment</span>
+ <ul class="isis-facets">
+ <li>hidden.where=ALL_TABLES</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span data-isis-id="versionSequence">version</span>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>hidden.where=STANDALONE_TABLES</li>
+ </ul>
+ </div>
+ </fieldset>
+ </div>
+ <div class="col-md-8">
+ <fieldset class="isis-collection min-height-100">
+ <legend>dependencies</legend>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span>add</span>
+ </div>
+ <div class="isis-action x-caution">
+ <span>remove</span>
+ </div>
+ </div>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>paged.value=5</li>
+ <li>render.value=EAGERLY</li>
+ </ul>
+ </fieldset>
+ <fieldset class="isis-collection min-height-200">
+ <legend>similarTo</legend>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>paged.value=3</li>
+ <li>render.value=LAZILY</li>
+ </ul>
+ </fieldset>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ </div>
+ </div>
+ </div>
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <script src="js/bootstrap.min.js"></script>
+ <script>
+ $(document).ready(function () {
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-4-4-4-12.html
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-4-4-4-12.html (added)
+++ websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-4-4-4-12.html Wed Mar 12 07:39:59 2014
@@ -0,0 +1,205 @@
+f<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>colspans={4,4,4,12}</title>
+
+ <!-- Bootstrap -->
+ <!--
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
+ <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+ -->
+
+ <!-- Bootstrap -->
+ <link href="css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+ <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+ <![endif]-->
+ <link href="isis-layout.css" rel="stylesheet">
+ <!--<link href="isis-layout-show-facets.css" rel="stylesheet">-->
+</head>
+ <body>
+ <div class="container">
+ <h1>colspans={4,4,4,12}</h1>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="isis-header">
+ <span class="isis-title">Buy bread</span>
+ <div class="isis-actions">
+ <div class="isis-action x-caution">
+ <span>delete</span>
+ </div>
+ <div class="isis-action">
+ <span data-isis-id="duplicate">clone</span>
+ <ul class="isis-facets">
+ <li>describedAs.value="Create a new todo item from this one"</li>
+ </ul>
+ </div>
+ <div class="isis-action">
+ <span>recentChanges</span>
+ </div>
+ <div class="isis-action">
+ <span>recentChanges</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-4 isis-memberGroups">
+ <fieldset class="isis-memberGroup min-height-100">
+ <legend>General</legend>
+ <div class="isis-property">
+ <span data-isis-typicallength="50">description</span>
+ <ul class="isis-facets">
+ <li>typicalLength.value=50</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>category</span>
+ <ul class="isis-facets">
+ <li>disabled.reason="Use action to update both category and subcategory"</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>subcategory</span>
+ <ul class="isis-facets">
+ <li>disabled.reason="Use action to update both category and subcategory"</li>
+ </ul>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="updateCategory">update</span>
+ </div>
+ <div class="isis-action">
+ <span>analyseCategory</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property">
+ <span class="isis-hidden">ownedBy</span>
+ </div>
+ <div class="isis-property x-highlight">
+ <span data-isis-id="complete">done</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="completed">done</span>
+ <ul class="isis-facets">
+ <li>describedAs.value="Mark this todo item as having been completed"</li>
+ </ul>
+ </div>
+ <div class="isis-action">
+ <span>scheduleExplicitly</span>
+ </div>
+ <div class="isis-action">
+ <span>scheduleImplicitly</span>
+ </div>
+ <div class="isis-action">
+ <span data-isis-id="notYetCompleted">not done</span>
+ </div>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+ <div class="col-md-4 isis-memberGroups">
+ <fieldset class="isis-memberGroup">
+ <legend>Priority</legend>
+ <div class="isis-property">
+ <span>relativePriority</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span>previous</span>
+ </div>
+ <div class="isis-action">
+ <span>next</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property x-key">
+ <span>dueBy</span>
+ </div>
+ </fieldset>
+ </div>
+ <div class="col-md-4 isis-memberGroups">
+ <fieldset class="isis-memberGroup">
+ <legend>Other</legend>
+ <div class="isis-property">
+ <span>cost</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="updateCost">update</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property">
+ <span>notes</span>
+ <ul class="isis-facets">
+ <li>multiLine.numberOfLines=5</li>
+ <li>hidden.where=ALL_TABLES</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>attachment</span>
+ <ul class="isis-facets">
+ <li>hidden.where=ALL_TABLES</li>
+ </ul>
+ </div>
+ </fieldset>
+ <fieldset class="isis-memberGroup min-height-100">
+ <legend>Misc</legend>
+ <div class="isis-property">
+ <span data-isis-id="versionSequence">version</span>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>hidden.where=STANDALONE_TABLES</li>
+ </ul>
+ </div>
+ </fieldset>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <fieldset class="isis-collection min-height-100">
+ <legend>dependencies</legend>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span>add</span>
+ </div>
+ <div class="isis-action x-caution">
+ <span>remove</span>
+ </div>
+ </div>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>paged.value=5</li>
+ <li>render.value=EAGERLY</li>
+ </ul>
+ </fieldset>
+ <fieldset class="isis-collection min-height-200">
+ <legend>similarTo</legend>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>paged.value=3</li>
+ <li>render.value=LAZILY</li>
+ </ul>
+ </fieldset>
+ </div>
+ </div>
+ </div>
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <script src="js/bootstrap.min.js"></script>
+ <script>
+ $(document).ready(function () {
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
Added: websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-6-6-0-12.html
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-6-6-0-12.html (added)
+++ websites/staging/isis/trunk/content/components/viewers/wicket/images/layouts/layout-6-6-0-12.html Wed Mar 12 07:39:59 2014
@@ -0,0 +1,203 @@
+f<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>colspans={6,6,0,12}</title>
+
+ <!-- Bootstrap -->
+ <!--
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
+ <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+ -->
+
+ <!-- Bootstrap -->
+ <link href="css/bootstrap.min.css" rel="stylesheet">
+
+ <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+ <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+ <![endif]-->
+ <link href="isis-layout.css" rel="stylesheet">
+ <!--<link href="isis-layout-show-facets.css" rel="stylesheet">-->
+</head>
+ <body>
+ <div class="container">
+ <h1>colspans={6,6,0,12}</h1>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="isis-header">
+ <span class="isis-title">Buy bread</span>
+ <div class="isis-actions">
+ <div class="isis-action x-caution">
+ <span>delete</span>
+ </div>
+ <div class="isis-action">
+ <span data-isis-id="duplicate">clone</span>
+ <ul class="isis-facets">
+ <li>describedAs.value="Create a new todo item from this one"</li>
+ </ul>
+ </div>
+ <div class="isis-action">
+ <span>recentChanges</span>
+ </div>
+ <div class="isis-action">
+ <span>recentChanges</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 isis-memberGroups">
+ <fieldset class="isis-memberGroup min-height-100">
+ <legend>General</legend>
+ <div class="isis-property">
+ <span data-isis-typicallength="50">description</span>
+ <ul class="isis-facets">
+ <li>typicalLength.value=50</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>category</span>
+ <ul class="isis-facets">
+ <li>disabled.reason="Use action to update both category and subcategory"</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>subcategory</span>
+ <ul class="isis-facets">
+ <li>disabled.reason="Use action to update both category and subcategory"</li>
+ </ul>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="updateCategory">update</span>
+ </div>
+ <div class="isis-action">
+ <span>analyseCategory</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property">
+ <span class="isis-hidden">ownedBy</span>
+ </div>
+ <div class="isis-property x-highlight">
+ <span data-isis-id="complete">done</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="completed">done</span>
+ <ul class="isis-facets">
+ <li>describedAs.value="Mark this todo item as having been completed"</li>
+ </ul>
+ </div>
+ <div class="isis-action">
+ <span>scheduleExplicitly</span>
+ </div>
+ <div class="isis-action">
+ <span>scheduleImplicitly</span>
+ </div>
+ <div class="isis-action">
+ <span data-isis-id="notYetCompleted">not done</span>
+ </div>
+ </div>
+ </div>
+ </fieldset>
+ <fieldset class="isis-memberGroup min-height-100">
+ <legend>Misc</legend>
+ <div class="isis-property">
+ <span data-isis-id="versionSequence">version</span>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>hidden.where=STANDALONE_TABLES</li>
+ </ul>
+ </div>
+ </fieldset>
+ </div>
+ <div class="col-md-6 isis-memberGroups">
+ <fieldset class="isis-memberGroup">
+ <legend>Priority</legend>
+ <div class="isis-property">
+ <span>relativePriority</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span>previous</span>
+ </div>
+ <div class="isis-action">
+ <span>next</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property x-key">
+ <span>dueBy</span>
+ </div>
+ </fieldset>
+ <fieldset class="isis-memberGroup">
+ <legend>Other</legend>
+ <div class="isis-property">
+ <span>cost</span>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span data-isis-id="updateCost">update</span>
+ </div>
+ </div>
+ </div>
+ <div class="isis-property">
+ <span>notes</span>
+ <ul class="isis-facets">
+ <li>multiLine.numberOfLines=5</li>
+ <li>hidden.where=ALL_TABLES</li>
+ </ul>
+ </div>
+ <div class="isis-property">
+ <span>attachment</span>
+ <ul class="isis-facets">
+ <li>hidden.where=ALL_TABLES</li>
+ </ul>
+ </div>
+ </fieldset>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <fieldset class="isis-collection min-height-100">
+ <legend>dependencies</legend>
+ <div class="isis-actions">
+ <div class="isis-action">
+ <span>add</span>
+ </div>
+ <div class="isis-action x-caution">
+ <span>remove</span>
+ </div>
+ </div>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>paged.value=5</li>
+ <li>render.value=EAGERLY</li>
+ </ul>
+ </fieldset>
+ <fieldset class="isis-collection min-height-200">
+ <legend>similarTo</legend>
+ <ul class="isis-facets">
+ <li>disabled</li>
+ <li>paged.value=3</li>
+ <li>render.value=LAZILY</li>
+ </ul>
+ </fieldset>
+ </div>
+ </div>
+ </div>
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+ <!-- Include all compiled plugins (below), or include individual files as needed -->
+ <script src="js/bootstrap.min.js"></script>
+ <script>
+ $(document).ready(function () {
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
Added: websites/staging/isis/trunk/content/components/viewers/wicket/static-layouts.html
==============================================================================
--- websites/staging/isis/trunk/content/components/viewers/wicket/static-layouts.html (added)
+++ websites/staging/isis/trunk/content/components/viewers/wicket/static-layouts.html Wed Mar 12 07:39:59 2014
@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+
+ <meta charset="utf-8">
+ <title>Static Layouts
</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+
+ <!-- Le styles -->
+ <link href="./../../../bootstrap-3.0.0/css/bootstrap.css" rel="stylesheet">
+ <link href="./../../../prettify.css" rel="stylesheet">
+
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ }
+ .sprite {
+ display: inline-block;
+ height: 20px;
+ margin: 0 auto 4px;
+ outline: medium none;
+ text-indent: -999em;
+ width: 24px;
+ background-image: url('./../../../images/sprites.png');
+ background-repeat: no-repeat;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ .edit-page {
+ display: inline-block;
+ height: 20px;
+ margin: 0 auto 4px;
+ outline: medium none;
+ text-indent: -999em;
+ width: 24px;
+ background-image: url('./../../../images/edit.png');
+ background-repeat: no-repeat;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ .fb-share {
+ background-position: 0px -40px;
+ }
+ .gp-share {
+ background-position: 0px 0px;
+ }
+ .tw-share {
+ background-position: 0px -80px;
+ }
+ .markdown-content {
+ min-height: 500px;
+ }
+ .book-image img {
+ border: 1px;
+ border-style: solid;
+ }
+ .release-matrix .heading {
+ background-color: #eeeeee;
+ }
+ .release-matrix .new {
+ color: #dd0000;
+ font-weight: bolder;
+ }
+ .stub,.note {
+ position: relative;
+ padding: 7px 15px;
+ margin-bottom: 18px;
+ color: #404040;
+ background-color: #eedc94;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
+ background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
+ background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
+ background-image: -o-linear-gradient(top, #fceec1, #eedc94);
+ background-image: linear-gradient(top, #fceec1, #eedc94);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #eedc94 #eedc94 #e4c652;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ }
+
+ div.XXXisis-tweak form {
+ margin-top: 6px;
+ margin-bottom: -2px;
+ }
+
+ div.row div.col-md-12 {
+ border-top: 1px solid #eeeeee;
+ }
+
+
+ /* Isis specific stuff */
+
+ div.row div.col-md-12 {
+ margin-top: 20px;
+ }
+
+ .container {
+ width: 940px;
+ }
+
+ .markdown-content .documentation .span-one-third p {
+ margin-bottom: 0px;
+ }
+
+ .markdown-content .documentation .group {
+ margin-top: 9px;
+ }
+
+ .documentation .group h2 {
+ border-bottom: 1px solid #DDD
+ }
+
+ .container h2 a[name],
+ .documentation h2 a[name] {
+ padding-top: 50px;
+ margin-top: -50px;
+ }
+
+ .container h2 a[name],
+ .documentation h2 a[name],
+ .documentation h3 a[name],
+ .documentation h4 a[name] {
+ color: black;
+ display: inline-block;
+ }
+ .documentation h2 a[name]:hover,
+ .documentation h3 a[name]:hover,
+ .documentation h4 a[name]:hover {
+ text-decoration: none;
+ }
+
+ .documentation h2 a:not([name]),
+ .documentation h3 a:not([name]),
+ .documentation h4 a:not([name]) {
+ /* same as code style */
+ padding: 0 3px 2px;
+ font-family: Monaco, Andale Mono, Courier New, monospace;
+ font-size: 12px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ padding: 1px 3px;
+ }
+
+ .carousel-indicators li {
+ border: 1px solid rgb(192,70,1);
+ }
+
+ .carousel-indicators li.active {
+ background-color: rgb(192,70,1);
+ }
+
+ .carousel-control .icon-prev,
+ .carousel-control .icon-next {
+ color: rgb(192,70,1);
+ font-size: 60px;
+ }
+
+ .page-header {
+ margin-top: 0px;
+ }
+
+ .container blockquote p {
+ font-size: small;
+ font-style: italic;
+ }
+
+ .container blockquote p {
+ font-size: small;
+ font-style: italic;
+ font-weight: bold;
+ }
+
+ footer hr {
+ margin-top: 100px;
+ }
+
+ </style>
+ <script type="text/javascript">
+ function fbshare () {
+ window.open(
+ "http://www.facebook.com/sharer/sharer.php?u="+document.URL,
+ 'Share on Facebook',
+ 'width=640,height=426');
+ };
+ function gpshare () {
+ window.open(
+ "https://plus.google.com/share?url="+document.URL,
+ 'Share on Google+',
+ 'width=584,height=385');
+ };
+ function twshare () {
+ window.open(
+ "https://twitter.com/intent/tweet?url="+document.URL+"&text=Static Layouts
",
+ 'Share on Twitter',
+ 'width=800,height=526');
+ };
+ </script>
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="./../../../images/favicon.ico">
+
+ <script src="./../../../javascript/prettify.js" type="text/javascript"></script>
+
+ <script src="//code.jquery.com/jquery.js"></script>
+ <script src="./../../../javascript/prettyprint.js"></script>
+ <script src="./../../../bootstrap-3.0.0/js/bootstrap.js"></script>
+
+
+ <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+ <!--
+ <DISABLEDscript src="./../../../javascript/common.js"></DISABLEDscript>
+ -->
+
+
+
+
+
+ <script>
+ $(function () { prettyPrint() })
+ $().dropdown()
+ </script>
+
+
+ </head>
+
+ <body>
+
+ <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+ <div class="container">
+ <a class="navbar-brand" href="./../../../index.html">Apache Isis™</a>
+ <ul class="nav navbar-nav">
+ <li><a href="./../../../download.html">Download</a></li>
+ <li><a href="./../../../documentation.html">Documentation</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Screenshots<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="./../../../intro/elevator-pitch/isis-in-pictures.html">Screenshots</a></li>
+ <li><a href="./../../../intro/tutorials/screencasts.html">Screencasts <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/">Online Demo</a></li>
+ </ul>
+ </li>
+
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support<b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="./../../../support.html">Mailing Lists</a></li>
+ <li><a href="http://isis.markmail.org/search/?q=">ML Archives</a></li>
+ <li><a href="https://issues.apache.org/jira/browse/ISIS">JIRA</a></li>
+ <li><a href="http://stackoverflow.com/questions/tagged/isis">Stack Overflow</a></li>
+ <li><a href="http://github.com/apache/isis">Github mirror</a></li>
+ </ul>
+ </li>
+
+ <FORM class="navbar-form navbar-right" id="searchbox_012614087480249044419:dn-q5gtwxya" action="http://www.google.com/cse">
+ <div class="form-group">
+ <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 class="dropdown navbar-right">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Apache <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="http://www.apache.org/">Apache Homepage <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/licenses/">Licenses <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/security/">Security <i class="icon-share-alt"></i></a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/foundation/sponsorship.html">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="./../../../more-thanks.html">More thanks <i class="icon-share-alt"></i></a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+
+ </div>
+ </nav>
+
+ <div class="container">
+ <div class="markdown-content">
+
+
+<div class="page-header">
+<p><a href="./../../../documentation.html">Docs</a> » <a href="./../../../components/about.html">Components</a> » <a href="./../../../components/viewers/about.html">Viewers</a> » <a href="./../../../components/viewers/wicket/about.html">Wicket</a></p>
+<h1>Static Layouts
+
+</h1>
+</div>
+
+<p>Because Isis implements the <a href="http://en.wikipedia.org/wiki/Naked_objects">naked objects pattern</a>, the domain objects are rendered in the UI based only metadata gleaned from the domain classes themselves. Traditionally this metadata has been specified using annotations.</p>
+
+<blockquote>
+ <p>It's also possible to specify much UI metadata using a <code>.layout.json</code> file; see <a href="./dynamic-layouts.html">dynamic layouts</a> for more details. One benefit is that layout can be refreshed without recompiling/redeploying the app. There's further discussion on this topic <a href="#pros-and-cons">below</a>.</p>
+</blockquote>
+
+<h2>The @MemberOrder Annotation</h2>
+
+<p>To specify the relative order of domain class properties and classes, the <code>@MemberOrder</code> annotation is used.</p>
+
+<p>For example:</p>
+
+<pre><code>public class ToDoItem {
+
+ @MemberOrder(sequence="1")
+ public String getDescription() { ... }
+
+ @MemberOrder(sequence="2")
+ public String getCategory() { ... }
+
+ @MemberOrder(sequence="3")
+ public boolean isComplete() { ... }
+
+ @MemberOrder(name="Detail", sequence="1")
+ public LocalDate getDueBy() { ... }
+
+ @MemberOrder(name="Detail", sequence="2")
+ public BigDecimal getCost() { ... }
+
+ @MemberOrder(name="Detail", sequence="4")
+ public String getNotes() { ... }
+
+ @MemberOrder(name="Misc", sequence="99")
+ public Long getVersionSequence() { ... }
+
+ ...
+}
+</code></pre>
+
+<p>This defines three property (or member) groups, "General", "Detail" and "Misc"; "General" is the default if no <code>name</code> attribute is specified. Properties in the same member group are rendered together, as a fieldset. </p>
+
+<p>In addition, actions can optionally be associated (rendered close to) either properties or actions. This is done by overloading the <code>@MemberOrder</code>'s <code>name</code> attribute, holding the value of the property or collection.</p>
+
+<p>For example:</p>
+
+<pre><code>public class ToDoItem {
+
+ @MemberOrder(sequence="3")
+ public boolean isComplete() { ... }
+
+ @MemberOrder(sequence="1")
+ public SortedSet<ToDoItem> getDependencies() { ... }
+
+
+ // actions ...
+ @MemberOrder(name="complete", sequence="1")
+ public ToDoItem completed() { ...}
+
+ @MemberOrder(name="complete", sequence="2")
+ public ToDoItem notYetCompleted() { ...}
+
+
+ // more actions ...
+ @MemberOrder(name="dependencies", sequence="1")
+ public ToDoItem add(ToDoItem t) { ...}
+
+ @MemberOrder(name="dependencies", sequence="2")
+ public ToDoItem remove(ToDoItem t) { ...}
+
+}
+</code></pre>
+
+<p>will associate the <code>completed()</code> and <code>notYetCompleted()</code> actions with the <code>complete</code> property, and will associate the <code>add()</code> and <code>remove()</code> actions with the <code>dependencies</code> collection.</p>
+
+<p>If the <code>name</code> attribute is omitted, then the action is rendered near the header. Note also that the <code>@MemberOrder</code>'s <code>name</code> attribute has no meaning for collections.</p>
+
+<h2>The @MemberGroupLayout Annotation</h2>
+
+<p>The <code>@MemberGroupLayout</code> annotation specifies the relative positioning of property groups as being either in a left column, a middle column or in a right column. It also specifies the relative width.</p>
+
+<p>For example:</p>
+
+<pre><code>@MemberGroupLayout(
+ columnSpans={3,3,0,6}, left={"General", "Misc"}, middle="Detail")
+public class ToDoItem {
+ ...
+}
+</code></pre>
+
+<p>Four values are given in the <code>columnSpans</code> attribute. The first three are the relative widths of the three columns of property groups. The fourth, meanwhile, indicates the width of a final column that holds all the collections of the object.</p>
+
+<p>The values of these spans are taken as proportions of 12 virtual columns across the page (this taken from the <a href="http://twitter.github.io/bootstrap/">Bootstrap</a> library).</p>
+
+<p>For example:</p>
+
+<ul>
+<li><code>{3,3,0,6}</code> indicates:
+<ul>
+<li>a left column of properties taking up 25% of the width</li>
+<li>a middle column of properties taking up 25% of the width</li>
+<li>a right column of collections taking up 50% of the width</li>
+</ul></li>
+<li><code>{2,6,0,4}</code> indicates:
+<ul>
+<li>a left column of properties taking up ~16% of the width</li>
+<li>a middle column of properties taking up 50% of the width</li>
+<li>a right column of collections taking up ~33% of the width</li>
+</ul></li>
+<li><code>{2,3,3,4}</code> indicates:
+<ul>
+<li>a left column of properties taking up ~16% of the width</li>
+<li>a middle column of properties taking up 25% of the width</li>
+<li>a right column of properties taking up 25% of the width</li>
+<li>a far right column of collections taking up ~33% of the width</li>
+</ul></li>
+</ul>
+
+<p>If the sum of all the columns exceeds 12, then the collections are placed underneath the properties, taking up the full span. For example:</p>
+
+<ul>
+<li>{4,4,4,12} indicates:
+<ul>
+<li>a left column of properties taking up ~33% of the width</li>
+<li>a middle column of properties taking up ~33% of the width</li>
+<li>a right column of properties taking up ~33% of the width</li>
+<li>the collections underneath the property columns, taking up the full width</li>
+</ul></li>
+</ul>
+
+<h2><a name="example-layouts">Example Layouts</a></h2>
+
+<p>Below are sketches for the layout of the <a href="https://github.com/apache/isis/blob/f38fdb92941172eabb12e0943509f239e6d5925f/example/application/quickstart_wicket_restful_jdo/dom/src/main/java/dom/todo/ToDoItem.java">ToDoItem</a> class of the <a href="../../../intro/getting-started/quickstart-archetype.html">quickstart archetype</a>.</p>
+
+<h4>6-6-0-12</h4>
+
+<p><img src="images/layouts/6-6-0-12.png" width="600px"/></p>
+
+<h4>4-4-4-12</h4>
+
+<p><img src="images/layouts/4-4-4-12.png" width="600px"/></p>
+
+<h4>4-0-8-0</h4>
+
+<p><img src="images/layouts/4-0-8-0.png" width="600px"/></p>
+
+<h2>Other Annotations</h2>
+
+<p>The <a href="../../../reference/recognized-annotations/Named.html">@Named</a>, <a href="../../../reference/recognized-annotations/DescribedAs.html">@DescribedAs</a>, <a href="../../../reference/recognized-annotations/MultiLine.html">@MultiLine</a>, <a href="../../../reference/recognized-annotations/TypicalLength.html">@TypicalLength</a>, <a href="../../../reference/recognized-annotations/Render.html">@Render</a> and <a href="../../../reference/recognized-annotations/CssClass.html">@CssClass</a> annotations are also all hints that can affect the UI.</p>
+
+<h2><a name="pros-and-cons">Static vs Dynamic Layouts</a></h2>
+
+<p>As mentioned earlier, it is also possible to <a href="./dynamic-layouts.html">specify the layout semantics dynamically</a> using a <code>.layout.json</code> file. Using JSON has the benefit that the layout can be updated without requiring a recompile of the code and redeploy of the app. Many developers also find it easier to rationalize about layout when all the hints are collated together in a single place (rather than scattered across the class members as annotations).</p>
+
+<p>Another benefit of dynamic layout is that UI hints can be provided for <a href="../../../more-advanced-topics/how-to-01-062-How-to-decouple-dependencies-using-contributions.html">contributed associations and actions</a> that are synthesised at runtime.</p>
+
+<p>The main downsides of using dynamic layouts are a lack of typesafety (a typo will result in the metadata not being picked up for the element) and syntactic fragility (an invalid JSON document will result in no metadata for the entire class. Also, dynamic layouts have no notion of inheritance, whereas the dewey-decimal format <code>@MemberOrder</code> annotation allows the metadata of the subclass its superclasses to fit together relatively seamlessly.</p>
+
+<h4>Best of both worlds?</h4>
+
+<p>Using the (third-party) <a href="../../../other/jrebel.html">JRebel plugin</a> comes close to getting the best of both words: metadata is specified in a type-safe way using annotations, but can be reloaded automatically. The downsides are licensing cost, and also the fact that metadata for contributed actions in the contributee class cannot be specified.</p>
+
+
+
+ </div>
+
+ <div id="edit" class="modal hide fade in" style="xxxdisplay: none; ">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal">x</a>
+
+ <h3>Thank you for contributing to the documention!</h3>
+ </div>
+ <div class="modal-body">
+ <h4>Any help with the documentation is greatly appreciated.</h4>
+ <p>All edits are reviewed before going live, so feel free to do much more than fix typos or links. If you see a page that could benefit from an entire rewrite, we'd be thrilled to review it. Don't be surprised if we like it so much we ask you for help with other pages :)</p>
+ <small>NOTICE: unless indicated otherwise on the pages in question, all editable content available from apache.org is presumed to be licensed under the Apache License (AL) version 2.0 and hence all submissions to apache.org treated as formal Contributions under the license terms.</small>
+ <!--[if gt IE 6]>
+ <h4>Internet Explorer Users</h4>
+ <p>If you are not an Apache committer, click the Yes link and enter a <i>anonymous</i> for the username and leave the password empty</p>
+ <![endif]-->
+
+ </div>
+ <div class="modal-footer">
+ Do you have an Apache ID?
+ <a href="javascript:void(location.href='https://cms.apache.org/redirect?uri='+escape(location.href))" class="btn">Yes</a>
+ <a href="javascript:void(location.href='https://anonymous:@cms.apache.org/redirect?uri='+escape(location.href))" class="btn">No</a>
+ </div>
+ </div>
+ <!--
+ <script src="./../../../javascript/bootstrap-modal.js"></script>
+ -->
+
+ <footer>
+ <hr/>
+ <p>
+ Copyright © 2010~2014 The Apache Software Foundation, Licensed under the Apache License, Version 2.0.
+ <br/>
+ Apache Isis, Isis, Apache, the Apache feather logo, and the Apache Isis project logo are trademarks of The Apache Software Foundation.
+ </p>
+ </footer>
+
+ </div> <!-- /container -->
+
+ </body>
+</html>
Modified: websites/staging/isis/trunk/content/documentation.html
==============================================================================
--- websites/staging/isis/trunk/content/documentation.html (original)
+++ websites/staging/isis/trunk/content/documentation.html Wed Mar 12 07:39:59 2014
@@ -511,8 +511,6 @@
<h4><a name="more-advanced-topics-more-ui-layout-hints">More UI layout hints</a></h4>
<ul>
-<li><a href="more-advanced-topics/dynamic-layouts.html">Static and dynamic layouts</a> <a href="more-advanced-topics/dynamic-layouts.html#screencast"><img src="./images/tv_show-25.png"></a></li>
-<li><a href="./more-advanced-topics/how-to-tweak-the-ui-using-css-classes.html">Tweaking CSS classes</a></li>
<li><a href="./more-advanced-topics/how-to-05-010-How-to-specify-a-name-or-description-for-an-object.html">Name/descr. of an object</a></li>
<li><a href="./more-advanced-topics/how-to-05-020-How-to-specify-a-name-or-description-for-a-property.html">Name/descr. of a property</a></li>
<li><a href="./more-advanced-topics/how-to-05-030-How-to-specify-a-name-or-description-for-a-collection.html">Name/descr. of a collection</a></li>
@@ -765,19 +763,37 @@
<h4><a name="wicket-viewer-configuration">Configuration</a></h4>
+<p>Layouts</p>
+
+<ul>
+<li><a href="components/viewers/wicket/static-layouts.html">Static layouts</a></li>
+<li><a href="components/viewers/wicket/dynamic-layouts.html">Dynamic layouts</a> <a href="components/viewers/wicket/dynamic-layouts.html#screencast"><img src="./images/tv_show-25.png"></a></li>
+</ul>
+
+<p>Pages</p>
+
+<ul>
+<li><a href="components/viewers/wicket/customizing-the-welcome-page.html">The Welcome page</a></li>
+<li><a href="components/viewers/wicket/configuring-the-about-page.html">The About page</a></li>
+</ul>
+
+<p>Other</p>
+
<ul>
<li><a href="components/viewers/wicket/titles-in-tables.html">Titles in tables</a></li>
<li><a href="components/viewers/wicket/suppressing-remember-me.html">Suppressing 'remember me'</a></li>
<li><a href="components/viewers/wicket/regular-vs-upper-case.html">Regular vs upper case</a> (1.4.0-snapshot)</li>
<li><a href="components/viewers/wicket/bookmarks.html">Number of bookmarked pages</a> (1.4.0-snapshot)</li>
<li><a href="components/viewers/wicket/stripped-wicket-tags.html">Stripped Wicket tags</a></li>
-<li><a href="components/viewers/wicket/configuring-the-about-page.html">The About page</a></li>
</ul>
-<h4><a name="wicket-viewer-extensions">Extensions</a></h4>
+<h4><a name="wicket-viewer-extensions">Customization</a></h4>
<ul>
-<li><a href="components/viewers/wicket/customizing-the-viewer.html">Extending the viewer</a>
+<li><a href="./components/viewers/wicket/how-to-tweak-the-ui-using-css-classes.html">Tweaking CSS classes</a></li>
+<li><a href="./components/viewers/wicket/how-to-tweak-the-ui-using-javascript.html">Custom Javascript</a></li>
+<li><a href="components/viewers/wicket/customizing-the-viewer.html">Replacing page elements</a></li>
+<li><a href="components/viewers/wicket/custom-pages.html">Custom pages</a>
</div>
<div class="col-md-4"></li>
</ul>