| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Customisation :: Apache Isis</title> |
| <link rel="canonical" href="https://isis.apache.org/vw/2.0.0-M3/customisation.html"> |
| <meta name="generator" content="Antora 2.2.0"> |
| <link rel="stylesheet" href="../../_/css/site.css"> |
| <link rel="stylesheet" href="../../_/css/site-custom.css"> |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700" rel="stylesheet"> |
| <link rel="home" href="https://isis.apache.org" title="Apache Isis"> |
| <link rel="next" href="extending.html" title="Extending"> |
| <link rel="prev" href="security.html" title="Security"> |
| </head> |
| <body class="article"> |
| <header class="header"> |
| <nav class="navbar"> |
| <div class="navbar-brand"> |
| <a class="navbar-item" href="https://isis.apache.org"> |
| <span class="icon"> |
| <img src="../../_/img/isis-logo-48x48.png"></img> |
| </span> |
| <span>Apache Isis</span> |
| </a> |
| <button class="navbar-burger" data-target="topbar-nav"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </button> |
| </div> |
| <div id="topbar-nav" class="navbar-menu"> |
| <a class="navbar-end"> |
| <div class="navbar-item has-dropdown is-hoverable"> |
| <a class="navbar-link" href="#">Quick Start</a> |
| <div class="navbar-dropdown"> |
| <span class="navbar-item navbar-heading">Starter Apps</span> |
| <a class="navbar-item" href="../../docs/latest/starters/helloworld.html">Hello World</a> |
| <a class="navbar-item" href="../../docs/latest/starters/simpleapp.html">Simple App</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Demos & Tutorials</span> |
| <a class="navbar-item" href="../../docs/latest/demo/about.html">Demo App</a> |
| <a class="navbar-item" href="https://danhaywood.gitlab.io/isis-petclinic-tutorial-docs/petclinic/1.16.2/intro.html">Petclinic (tutorial)</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Resources</span> |
| <a class="navbar-item" href="../../docs/latest/resources/cheatsheet.html">Cheatsheet</a> |
| <a class="navbar-item" href="../../docs/latest/resources/icons.html">Icons</a> |
| </div> |
| </div> |
| <div class="navbar-item has-dropdown is-hoverable"> |
| <a class="navbar-link" href="#">Guides</a> |
| <div class="navbar-dropdown"> |
| <span class="navbar-item navbar-heading">Development</span> |
| <a class="navbar-item" href="../../setupguide/latest/about.html">Setup Guide</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Core</span> |
| <a class="navbar-item" href="../../userguide/latest/about.html">User Guide</a> |
| <a class="navbar-item" href="../../refguide/latest/about.html">Reference Guide</a> |
| <a class="navbar-item" href="../../testing/latest/about.html">Testing Guide</a> |
| </div> |
| </div> |
| <div class="navbar-item has-dropdown is-hoverable"> |
| <a class="navbar-link" href="#">Libraries</a> |
| <div class="navbar-dropdown"> |
| <span class="navbar-item navbar-heading">For Use in Apps</span> |
| <a class="navbar-item" href="../../subdomains/latest/about.html">Subdomain Libraries</a> |
| <a class="navbar-item" href="../../valuetypes/latest/about.html">Value Types</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Integrate between Apps</span> |
| <a class="navbar-item" href="../../mappings/latest/about.html">Bounded Context Mapping Libraries</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Other</span> |
| <a class="navbar-item" href="../../incubator/latest/about.html">Incubator</a> |
| <a class="navbar-item" href="../../legacy/latest/about.html">Legacy</a> |
| </div> |
| </div> |
| <div class="navbar-item has-dropdown is-hoverable"> |
| <a class="navbar-link" href="#">Components</a> |
| <div class="navbar-dropdown"> |
| <span class="navbar-item navbar-heading">Viewers</span> |
| <a class="navbar-item" href="../../vw/latest/about.html">Wicket UI</a> |
| <a class="navbar-item" href="../../vro/latest/about.html">Restful Objects (REST)</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Security</span> |
| <a class="navbar-item" href="../../security/latest/about.html">Security Guide</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Persistence</span> |
| <a class="navbar-item" href="../../pjdo/latest/about.html">DataNucleus (JDO)</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Extensions</span> |
| <a class="navbar-item" href="../../extensions/latest/about.html">Extensions Catalog</a> |
| </div> |
| </div> |
| <div class="navbar-item has-dropdown is-hoverable"> |
| <a class="navbar-link" href="#">Support</a> |
| <div class="navbar-dropdown"> |
| <span class="navbar-item navbar-heading">Contact</span> |
| <a class="navbar-item" href="../../docs/latest/support/slack-channel.html">Slack</a> |
| <a class="navbar-item" href="../../docs/latest/support/mailing-list.html">Mailing Lists</a> |
| <a class="navbar-item" href="https://issues.apache.org/jira/browse/ISIS">JIRA</a> |
| <a class="navbar-item" href="https://stackoverflow.com/questions/tagged/isis">Stack Overflow</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Releases</span> |
| <a class="navbar-item" href="../../docs/latest/downloads/how-to.html">Downloads</a> |
| <a class="navbar-item" href="../../relnotes/latest/about.html">Release Notes</a> |
| <a class="navbar-item" href="../../docs/latest/archive/1-x.html">Archive (1.x)</a> |
| <hr class="navbar-divider"/> |
| <span class="navbar-item navbar-heading">Framework</span> |
| <a class="navbar-item" href="../../conguide/latest/about.html">Contributors' Guide</a> |
| <a class="navbar-item" href="../../comguide/latest/about.html">Committers' Guide</a> |
| <a class="navbar-item" href="../../core/latest/about.html">Core Design</a> |
| </div> |
| </div> |
| <div class="navbar-item has-dropdown is-hoverable"> |
| <a class="navbar-link" href="#">ASF</a> |
| <div class="navbar-dropdown"> |
| <a class="navbar-item" href="http://www.apache.org/">Apache Homepage</a> |
| <a class="navbar-item" href="https://www.apache.org/events/current-event">Events</a> |
| <a class="navbar-item" href="https://www.apache.org/licenses/">Licenses</a> |
| <a class="navbar-item" href="https://www.apache.org/security/">Security</a> |
| <a class="navbar-item" href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a> |
| <a class="navbar-item" href="https://www.apache.org/foundation/thanks.html">Thanks</a> |
| <hr class="navbar-divider"/> |
| <a class="navbar-item" href="https://whimsy.apache.org/board/minutes/Isis.html">PMC board minutes</a> |
| </div> |
| </div> |
| <a class="navbar-item" href="../../docs/latest/about.html"> |
| <span class="icon"> |
| <img src="../../_/img/home.png"></img> |
| </span> |
| </a> |
| </div> |
| </div> |
| </nav> |
| </header> |
| <div class="body "> |
| <div class="nav-container" data-component="vw" data-version="2.0.0-M3"> |
| <aside class="nav"> |
| <div class="panels"> |
| <div class="nav-panel-pagination"> |
| <a class="page-previous" rel="prev" href="security.html" title="Security"><span></span></a> |
| <a class="page-next" rel="next" |
| href="extending.html" title="Extending"><span></span></a> |
| <!-- |
| page.parent doesn't seem to be set... |
| <a class="page-parent disabled" rel="prev" href="" title="Security"><span></span></a> |
| --> |
| </div> |
| <div class="nav-panel-menu is-active" data-panel="menu"> |
| <nav class="nav-menu"> |
| <h3 class="title"><a href="about.html">Wicket Viewer</a></h3> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="0"> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="configuration-properties.html">Configuration Properties</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="features.html">End-user Features</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="security.html">Security</a> |
| </li> |
| <li class="nav-item is-current-page" data-depth="1"> |
| <a class="nav-link" href="customisation.html">Customisation</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="extending.html">Extending</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <a class="nav-link" href="hints-and-tips.html">Hints-n-Tips</a> |
| </li> |
| <li class="nav-item" data-depth="1"> |
| <button class="nav-item-toggle"></button> |
| <span class="nav-text">Extensions</span> |
| <ul class="nav-list"> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="exceldownload/about.html">Excel Download</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="fullcalendar/about.html">fullcalendar</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="gmap3/about.html">GMap3</a> |
| </li> |
| <li class="nav-item" data-depth="2"> |
| <a class="nav-link" href="pdfjs/about.html">pdf.js</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </nav> |
| </div> |
| <div class="nav-panel-explore" data-panel="explore"> |
| <div class="context"> |
| <span class="title">Wicket Viewer</span> |
| <span class="version">2.0.0-M3</span> |
| </div> |
| <ul class="components"> |
| <li class="component"> |
| <span class="title"> </span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../docs/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">BC Mappings Catalog</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../mappings/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Committers' Guide</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../comguide/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Contributors' Guide</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../conguide/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Core Framework</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../core/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Extensions Catalog</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../extensions/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Incubator Catalog</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../incubator/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">JDO/DataNucleus</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../pjdo/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Legacy Catalog</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../legacy/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Reference Guide</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../refguide/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Release Notes</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../relnotes/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Restful Objects Viewer</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../vro/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Security Guide</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../security/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Setup Guide</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../setupguide/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Subdomains Catalog</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../subdomains/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Testing Guide</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../testing/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">User Guide</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../userguide/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component"> |
| <span class="title">Value Types Catalog</span> |
| <ul class="versions"> |
| <li class="version is-latest"> |
| <a href="../../valuetypes/2.0.0-M3/about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| <li class="component is-current"> |
| <span class="title">Wicket Viewer</span> |
| <ul class="versions"> |
| <li class="version is-current is-latest"> |
| <a href="about.html">2.0.0-M3</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </aside> |
| </div> |
| <main role="main"> |
| <div class="toolbar" role="navigation"> |
| <button class="nav-toggle"></button> |
| <a href="../../docs/2.0.0-M3/about.html" class="home-link"></a> |
| <nav class="breadcrumbs" aria-label="breadcrumbs"> |
| <ul> |
| <li><a href="about.html">Wicket Viewer</a></li> |
| <li><a href="customisation.html">Customisation</a></li> |
| </ul> |
| </nav> |
| <div class="edit-this-page"><a href="https://github.com/apache/isis/edit/2.0.0-M3/viewers/wicket/adoc/modules/ROOT/pages/customisation.adoc">Edit</a></div> |
| </div> |
| <article class="doc"> |
| <a name="section-top"></a> |
| <h1 class="page">Customisation</h1> |
| <div id="preamble"> |
| <div class="sectionbody"> |
| <div class="admonitionblock warning"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-warning" title="Warning"></i> |
| </td> |
| <td class="content"> |
| TODO: this content has not yet been reviewed/updated for v2.0 |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>This chapter describes a number of mechanisms by which the UI provided by the Wicket viewer can be customised.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="top-level-index-page"><a class="anchor" href="#top-level-index-page"></a>Top-level Index Page</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>If the user visits the root of the webapp (eg <a href="http://localhost:8080" class="bare">http://localhost:8080</a>), then a top-level index page can specified. |
| This is a static file that typically has hyperlinks to the available resources available (eg the Wicket viewer at <code>/wicket/</code>, the Swagger UI is bound to <code>/swagger-ui</code>, the Restful at <code>/restful/</code>).</p> |
| </div> |
| <div class="paragraph"> |
| <p>The example apps provide an example in the <code>about/index.html</code> file (relative to <code>src/main/webapp</code>). |
| This is configured using the <code>web.xml</code>:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="title">web.xml</div> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><welcome-file-list> |
| <welcome-file>about/index.html</welcome-file> |
| </welcome-file-list></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>If instead you want to redirect users directly to the Wicket viewer, then this file should contain simply:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="title">about/index.html</div> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><html> |
| <head> |
| <META HTTP-EQUIV="Refresh" CONTENT="0; URL=wicket/"/> |
| </head> |
| </html></code></pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="brand-logo"><a class="anchor" href="#brand-logo"></a>Brand logo</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>By default the Wicket viewer will display the application name top-left in the header menu. |
| This can be changed to display a png logo instead.</p> |
| </div> |
| <div class="sect2"> |
| <h3 id="screenshots"><a class="anchor" href="#screenshots"></a>Screenshots</h3> |
| <div class="paragraph"> |
| <p>The screenshot below shows the example <a href="https://github.com/apache/isis-app-todoapp/">TodoApp</a> with a 'brand logo' image in its header:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="_images/brand-logo/brand-logo.png"><img src="_images/brand-logo/brand-logo.png" alt="brand logo" width="750px"></a> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>A custom brand logo (typically larger) can also be specified for the signin page:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="_images/brand-logo/brand-logo-signin.png"><img src="_images/brand-logo/brand-logo-signin.png" alt="brand logo signin" width="750px"></a> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>To configure, simply specify the appropriate configuration properties:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties">isis.wicket.viewer.application.brandLogoSignin=/images/todoapp-logo-signin.png |
| isis.wicket.viewer.application.brandLogoHeader=/images/todoapp-logo-header.png</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>These are resolved relative to <code>src/main/webapp</code>, or an absolute URL can be specified.</p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>for the signin image, a size of 400x100 works well.</p> |
| </li> |
| <li> |
| <p>for the header image, a size of 160x40 works well.</p> |
| </li> |
| </ul> |
| </div> |
| <div class="paragraph"> |
| <p>You may also wish to tweak the <a href="../../refguide/2.0.0-M3/config/application-specific/application-css.html" class="page"><code>application.css</code></a>. |
| For example, a logo with height 40px works well with the following:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.navbar-brand img { |
| margin-top: -5px; |
| margin-left: 5px; |
| }</code></pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="welcome-page"><a class="anchor" href="#welcome-page"></a>Welcome page</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>It’s possible to customize the application name, welcome message (as displayed on the home page if not home page service is configured) and the about message can all be customized. |
| This is done by specifying the appropriate configuration properties:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties">isis.viewer.wicket.application.name=My Wonderful App |
| isis.viewer.wicket.welcome.file=welcome.html <i class="conum" data-value="1"></i><b>(1)</b> |
| isis.viewer.wicket.application.about=My Wonderful App v1.0</code></pre> |
| </div> |
| </div> |
| <div class="colist arabic"> |
| <table> |
| <tr> |
| <td><i class="conum" data-value="1"></i><b>1</b></td> |
| <td>the <code>welcome.html</code> file is resolved relative to <code>src/main/webapp</code>.</td> |
| </tr> |
| </table> |
| </div> |
| <div class="admonitionblock tip"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-tip" title="Tip"></i> |
| </td> |
| <td class="content"> |
| <div class="paragraph"> |
| <p>Do not confuse the welcome page file with the <a href="#top-level-index-page">top-level index page</a>; they are different things!</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>The <code>application.name</code> is used both on the sign-in page and also top-left on the header. |
| It’s also possible to replace this text with images:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties">isis.viewer.wicket.application.brandLogoSignin=/images/logo-512.png |
| isis.viewer.wicket.application.brandLogoHeader=/images/logo-80x32.png</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>These images are resolved relative to <code>src/main/webapp</code>.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="about-page"><a class="anchor" href="#about-page"></a>About page</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>Isis' Wicket viewer has an About page that, by default, will provide a dump of the JARs that make up the webapp. |
| This page will also show the manifest attributes of the WAR archive itself, if there are any. |
| One of these attributes may also be used as the application version number.</p> |
| </div> |
| <div class="sect2"> |
| <h3 id="screenshot"><a class="anchor" href="#screenshot"></a>Screenshot</h3> |
| <div class="paragraph"> |
| <p>Here’s what the About page looks like with this configuration added:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="_images/about-page/about-page.png"><img src="_images/about-page/about-page.png" alt="about page" width="800px"></a> |
| </div> |
| </div> |
| <div class="admonitionblock note"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-note" title="Note"></i> |
| </td> |
| <td class="content"> |
| <div class="paragraph"> |
| <p>Note that this screenshot shows an earlier version of the <a href="about.html" class="page">Wicket viewer</a> UI (specifically, pre 1.8.0).</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>Note that the <code>Build-Time</code> attribute has been used as the version number. |
| The Wicket viewer is hard-coded to search for specific attributes and use as the application version. |
| In order, it searches for:</p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p><code>Implementation-Version</code></p> |
| </li> |
| <li> |
| <p><code>Build-Time</code></p> |
| </li> |
| </ul> |
| </div> |
| <div class="paragraph"> |
| <p>If none of these are found, then no version is displayed.</p> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="configuration"><a class="anchor" href="#configuration"></a>Configuration</h3> |
| <div class="sect3"> |
| <h4 id="adding-attributes-to-the-wars-manifest"><a class="anchor" href="#adding-attributes-to-the-wars-manifest"></a>Adding attributes to the WAR’s manifest</h4> |
| <div class="paragraph"> |
| <p>Add the following to the webapp’s <code>pom.xml</code> (under <code><build>/<plugins></code>):</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><plugin> |
| <groupId>org.codehaus.mojo</groupId> |
| <artifactId>build-helper-maven-plugin</artifactId> |
| <version>1.5</version> |
| <executions> |
| <execution> |
| <phase>validate</phase> |
| <goals> |
| <goal>maven-version</goal> |
| </goals> |
| </execution> |
| </executions> |
| </plugin> |
| |
| <plugin> |
| <artifactId>maven-war-plugin</artifactId> |
| <configuration> |
| <archive> |
| <manifest> |
| <addDefaultImplementationEntries>true</addDefaultImplementationEntries> |
| </manifest> |
| <manifestEntries> |
| <Build-Time>${maven.build.timestamp}</Build-Time> |
| <Build-Number>${buildNumber}</Build-Number> |
| <Build-Host>${agent.name}</Build-Host> |
| <Build-User>${user.name}</Build-User> |
| <Build-Maven>Maven ${maven.version}</Build-Maven> |
| <Build-Java>${java.version}</Build-Java> |
| <Build-OS>${os.name}</Build-OS> |
| <Build-Label>${project.version}</Build-Label> |
| </manifestEntries> |
| </archive> |
| </configuration> |
| <executions> |
| <execution> |
| <phase>package</phase> |
| <goals> |
| <goal>war</goal> |
| </goals> |
| <configuration> |
| <classifier>${env}</classifier> |
| </configuration> |
| </execution> |
| </executions> |
| </plugin></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>If you then build the webapp from the Maven command line (<code>mvn clean package</code>), then the WAR should contain a <code>META-INF/MANIFEST.MF</code> with those various attribute entries. |
| This will be picked up automatically and used in the about page.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="tweaking-css-classes"><a class="anchor" href="#tweaking-css-classes"></a>Tweaking CSS classes</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>The HTML generated by the Wicket viewer include plenty of CSS classes so that you can easily target the required elements as required. |
| For example, you could use CSS to suppress the entity’s icon alongside its title. |
| This would be done using:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.entityIconAndTitlePanel a img { |
| display: none; |
| }</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>These customizations should generally be added to <a href="../../refguide/2.0.0-M3/config/application-specific/application-css.html" class="page"><code>application.css</a></code>; this file is included by default in every webpage served up by the Wicket viewer.</p> |
| </div> |
| <div class="sect2"> |
| <h3 id="individual-members"><a class="anchor" href="#individual-members"></a>Individual members</h3> |
| <div class="paragraph"> |
| <p>For example, the <code>ToDoItem</code> object of the example <a href="https://github.com/apache/isis-app-todoapp/">TodoApp</a> has a <code>notes</code> property. |
| The HTML for this will be something like:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><div> |
| <div class="property ToDoItem-notes"> |
| <div class="multiLineStringPanel scalarNameAndValueComponentType"> |
| <label for="id83" title=""> |
| <span class="scalarName">Notes</span> |
| <span class="scalarValue"> |
| <textarea |
| name="middleColumn:memberGroup:1:properties:4:property:scalarIfRegular:scalarValue" |
| disabled="disabled" |
| id="id83" rows="5" maxlength="400" size="125" |
| title=""> |
| </textarea> |
| <span> |
| </label> |
| </div> |
| </div> |
| </div></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>The <a href="../../refguide/2.0.0-M3/config/application-specific/application-css.html" class="page"><code>application.css</code></a> file is the place to add application-specific styles. |
| By way of an example, if (for some reason) we wanted to completely hide the notes value, we could do so using:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">div.ToDoItem-notes span.scalarValue { |
| display: none; |
| }</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>You can use a similar approach for collections and actions.</p> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="custom-css-styles"><a class="anchor" href="#custom-css-styles"></a>Custom CSS styles</h3> |
| <div class="paragraph"> |
| <p>The above technique works well if you know the class member to target, but you might instead want to apply a custom style to a set of members. |
| For this, you can use the <code>@PropertyLayout(cssClass=…​)</code>.</p> |
| </div> |
| <div class="paragraph"> |
| <p>For example, in the <code>ToDoItem</code> class the following annotation (indicating that this is a key, important, property) :</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">@PropertyLayout(cssClass="x-myapp-highlight") |
| public LocalDate getDueBy() { |
| return dueBy; |
| }</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>would generate the HTML:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><div> |
| <div class="property ToDoItem-dueBy x-myapp-highlight"> |
| ... |
| </div> |
| </div></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>This can then be targeted, for example using:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">div.x-myapp-highlight span.scalarName { |
| color: red; |
| }</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Note also that instead of using <code>@PropertyLayout(cssClass=…​)</code> annotation, you can also specify the CSS style using a <a href="../../userguide/2.0.0-M3/fun/ui.html#object-layout" class="page">layout file</a>.</p> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="table-columns"><a class="anchor" href="#table-columns"></a>Table columns</h3> |
| <div class="paragraph"> |
| <p>Sometimes you may want to apply styling to specific columns of tables. |
| For example, you might want to adjust width so that for certain properties have more (or less) room than they otherwise would; or you might want to hide the column completely. |
| This also applies to the initial icon/title column.</p> |
| </div> |
| <div class="paragraph"> |
| <p>There is also the issue of scoping:</p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>You may wish the style to apply globally: that is, dependent on the type of entity being rendered in the table, irrespective of the page on which it is shown.</p> |
| </li> |
| <li> |
| <p>Alternativel, you may wish to target the CSS for a table as rendered either as a parented collection (owned by some other entity) or rendered as a standarlone collection (the result of invoking an action).</p> |
| </li> |
| </ul> |
| </div> |
| <div class="paragraph"> |
| <p>In each of these cases the Wicket viewer adds CSS classes either to containing <code>div</code>s or to the <code><th></code> and <code><td></code> |
| elements of the table itself so that it can custom styles can be appropriately targetted.</p> |
| </div> |
| <div class="sect3"> |
| <h4 id="applying-styles-globally"><a class="anchor" href="#applying-styles-globally"></a>Applying styles globally</h4> |
| <div class="paragraph"> |
| <p>Every rendered collection containing a domain class will be wrapped in a <code><div></code> that lists that domain class (in CSS safe form). |
| For example:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><div class="entityCollection com-mycompany-myapp-Customer"> |
| ... |
| <table> |
| <tr> |
| <th class="title-column">...</th> |
| <th class="firstName">...</th> |
| <th class="lastName">...</th> |
| ... |
| </tr> |
| <tr> |
| <td class="title-column">...</td> |
| <td class="firstName">...</td> |
| <td class="lastName">...</td> |
| ... |
| </tr> |
| ... |
| </table> |
| ... |
| </div></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Using this, the <code>lastName</code> property could be targeted using:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.com-mycompany-myapp-Customer th.lastName { |
| width: 30%; |
| }</code></pre> |
| </div> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="parented-collections"><a class="anchor" href="#parented-collections"></a>Parented collections</h4> |
| <div class="paragraph"> |
| <p>Parented collections will be wrapped in <code><div></code>s that identify both the entity type and also the collection Id. |
| For example:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><div class="entityPage com-mycompany-myapp-Customer"> <i class="conum" data-value="1"></i><b>(1)</b> |
| ... |
| <div class="orders"> <i class="conum" data-value="2"></i><b>(2)</b> |
| <table> |
| <tr> |
| <th class="title-column">...</th> |
| <th class="productRef">...</th> |
| <th class="quantity">...</th> |
| ... |
| </tr> |
| <tr> |
| <td class="title-column">...</td> |
| <td class="productRef">...</td> |
| <td class="quantity">...</td> |
| ... |
| </tr> |
| ... |
| </table> |
| ... |
| </div> |
| ... |
| </div></code></pre> |
| </div> |
| </div> |
| <div class="colist arabic"> |
| <table> |
| <tr> |
| <td><i class="conum" data-value="1"></i><b>1</b></td> |
| <td>the parent class identifier</td> |
| </tr> |
| <tr> |
| <td><i class="conum" data-value="2"></i><b>2</b></td> |
| <td>the collection identifier. |
| This element’s class also has the entity type within the collection (as <a href="customisation/tweaking-css-classes.html#columns-in-tables_globally" class="page">discussed above</a>).</td> |
| </tr> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>Using this, the <code>productRef</code> property could be targeted using:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.com-mycompany-myapp-Customer orders td.productRef { |
| font-style: italic; |
| }</code></pre> |
| </div> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="standalone-collections"><a class="anchor" href="#standalone-collections"></a>Standalone collections</h4> |
| <div class="paragraph"> |
| <p>Standalone collections will be wrapped in a <code><div></code> that identifies the action invoked. |
| For example:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><div class="standaloneCollectionPage"> |
| <div class="com-mycompany-myapp-Customer_mostRecentOrders ..."> <i class="conum" data-value="1"></i><b>(1)</b> |
| ... |
| <div class="orders"> |
| <table> |
| <tr> |
| <th class="title-column">...</th> |
| <th class="productRef">...</th> |
| <th class="quantity">...</th> |
| ... |
| </tr> |
| <tr> |
| <td class="title-column">...</td> |
| <td class="productRef">...</td> |
| <td class="quantity">...</td> |
| ... |
| </tr> |
| ... |
| </table> |
| ... |
| </div> |
| ... |
| </div> |
| </div></code></pre> |
| </div> |
| </div> |
| <div class="colist arabic"> |
| <table> |
| <tr> |
| <td><i class="conum" data-value="1"></i><b>1</b></td> |
| <td>action identifier. |
| This element’s class also identifies the entity type within the collection (as <a href="customisation/tweaking-css-classes.html#columns-in-tables_globally" class="page">discussed above</a>).</td> |
| </tr> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>Using this, the <code>quantity</code> property could be targeted using:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-css hljs" data-lang="css">.com-mycompany-myapp-Customer_mostRecentOrders td.quantity { |
| font-weight: bold; |
| }</code></pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="cheap-n-cheerful-theme"><a class="anchor" href="#cheap-n-cheerful-theme"></a>Cheap-n-cheerful theme</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>The application name (as defined by <code>isis.viewer.wicket.application.name</code> configuration property) is also used (in sanitized form) as the CSS class in a <code><div></code> that wraps all the rendered content of every page.</p> |
| </div> |
| <div class="paragraph"> |
| <p>For example, if the application name is "ToDo App", then the <code><div></code> generated is:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html"><div class="todo-app"> |
| ... |
| </div></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>You can therefore use this CSS class as a way of building your own "theme" for the various elements of the wicket viewer pages.</p> |
| </div> |
| <div class="admonitionblock tip"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-tip" title="Tip"></i> |
| </td> |
| <td class="content"> |
| <div class="paragraph"> |
| <p>Alternatively you could "do it properly" and create your <a href="extending.html#custom-bootstrap-theme" class="page">own Bootstrap theme</a>, as described in the <a href="extending.html" class="page">extending</a> chapter.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="using-different-css-file"><a class="anchor" href="#using-different-css-file"></a>Using a different CSS file</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>If for some reason you wanted to name the CSS file differently (eg <code>stylesheets/myapp.css</code>), then just specify the appropriate configuration property:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">isis.viewer.wicket.application.css=stylesheets/myapp.css</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>This file is resolved relative to <code>src/main/webapp</code>.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="custom-javascript"><a class="anchor" href="#custom-javascript"></a>Custom Javascript</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>The Wicket viewer ships with embedded JQuery, so this can be leveraged, for example to perform arbitrary transformations of the rendered page on page load.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To register your Javascript code, then just specify the appropriate configuration property:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-properties hljs" data-lang="properties">isis.viewer.wicket.application.js=stylesheets/myapp.js</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>This file is resolved relative to <code>src/main/webapp</code>.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Currently only one such <code>.js</code> file can be registered.</p> |
| </div> |
| <div class="admonitionblock warning"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-warning" title="Warning"></i> |
| </td> |
| <td class="content"> |
| <div class="paragraph"> |
| <p>Just because something is possible, it doesn’t necessarily mean we encourage it. |
| Please be aware that there is no formal API for any custom javascript that you might implement to target; future versions of Apache Isis might break your code.</p> |
| </div> |
| <div class="paragraph"> |
| <p>As an alternative, consider using the <code>ComponentFactory</code> API described in the <a href="extending.html" class="page">Extending</a> chapter.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="auto-refresh"><a class="anchor" href="#auto-refresh"></a>Auto-refresh page</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>This requirement from the users mailing list:</p> |
| </div> |
| <div class="paragraph"> |
| <p>"Suppose you want to build a monitoring application, eg for an electricity grid. Data is updated in the background (eg via the Restful Objects REST API). |
| What is needed is the ability to show an entity that includes a map, and have it auto-refresh every 5 seconds or so."</p> |
| </div> |
| <div class="paragraph"> |
| <p>Here’s one (somewhat crude, but workable) way to accomplish this.</p> |
| </div> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>First, update the domain object to return custom CSS:<br></p> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public class MyDomainObject { |
| ... |
| public String cssClass() { return "my-special-auto-updating-entity"; } |
| ... |
| }</code></pre> |
| </div> |
| </div> |
| </li> |
| <li> |
| <p>Then, use javascript in <code>scripts/application.js</code> (under <code>src/main/webapp/</code>) to reload:</p> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">$(function() { |
| if ($(".my-special-auto-updating-entity").length) { |
| setTimeout(function() {document.location.reload();}, 5000); // 1000 is 5 sec |
| } |
| });</code></pre> |
| </div> |
| </div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="request-parameters"><a class="anchor" href="#request-parameters"></a>Embedded View</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>The Wicket viewer provides some support such that an Apache Isis application can be embedded within a host webapp, for example within an iframe.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Currently this support consists simply of being able to suppress the header and/or footer.</p> |
| </div> |
| <div class="sect2"> |
| <h3 id="screenshots-2"><a class="anchor" href="#screenshots-2"></a>Screenshots</h3> |
| <div class="paragraph"> |
| <p>For example, the regular view is:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="_images/embedded-view/regular.png"><img src="_images/embedded-view/regular.png" alt="regular" width="720px"></a> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>With the header and footer both suppressed only the main content is shown:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <a class="image" href="_images/embedded-view/no-header-no-footer.png"><img src="_images/embedded-view/no-header-no-footer.png" alt="no header no footer" width="720px"></a> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>It is also possible to suppress just the header, or just the footer.</p> |
| </div> |
| </div> |
| <div class="sect2"> |
| <h3 id="request-parameters-2"><a class="anchor" href="#request-parameters-2"></a>Request parameters</h3> |
| <div class="paragraph"> |
| <p>To suppress the header, add the following as a request parameter:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-ini hljs" data-lang="ini">isis.no.header</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>and to suppress the header, add the following as a request parameter:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-ini hljs" data-lang="ini">isis.no.footer</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>For example,</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-ini hljs" data-lang="ini">http://localhost:8080/wicket/entity/TODO:0?isis.no.header&isis.no.footer</code></pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </article> |
| <aside class="article-aside toc" role="navigation"> |
| <p class="toc-title">On this page</p> |
| <div id="article-toc"></div> |
| </aside> |
| </main> |
| </div> |
| <footer class="footer"> |
| <div class="content"> |
| <div class="copyright"> |
| <p> |
| Copyright © 2010~2020 The Apache Software Foundation, licensed under the Apache License, v2.0. |
| <br/> |
| Apache, the Apache feather logo, Apache Isis, and the Apache Isis project logo are all trademarks of The Apache Software Foundation. |
| </p> |
| </div> |
| <div class="revision"> |
| <p>Revision: SNAPSHOT</p> |
| </div> |
| </div> |
| </footer> |
| <script src="../../_/js/site.js"></script> |
| <script async src="../../_/js/vendor/highlight.js"></script> |
| <script src="../../_/js/vendor/jquery-3.4.1.min.js"></script> |
| <script src="../../_/js/vendor/jquery-ui-1.12.1.custom.widget-only.min.js"></script> |
| <script src="../../_/js/vendor/jquery.tocify.min.js"></script> |
| |
| <script> |
| $(function() { |
| $("#article-toc").tocify( { |
| showEffect: "slideDown", |
| hashGenerator: "pretty", |
| hideEffect: "slideUp", |
| selectors: "h2, h3", |
| scrollTo: 120, |
| smoothScroll: true, |
| theme: "jqueryui", |
| highlightOnScroll: true |
| } ); |
| }); |
| </script> |
| </body> |
| </html> |
