HADDOCK Template#

Table of Contents

The haddock is a marine fish distributed on both sides of the North Atlantic. Haddock is a popular food fish and is widely fished commercially Content unavailable! (broken link)haddock.jpg
Introducing the HADDOCK template, a new template and user interface for Apache JSPWiki, introduced as of v2.10.1.

Haddock features a clean, modern look and feel which builds upon the Bootstrap frameworkContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png. The template supports many new styles, including video viewers, a new slimbox, a carousel viewer, support for adding inline css, and much more. It also comes with a new plain and a wysiwyg editor.

The template JSP's and other assets are located in <your wiki url>/templates/haddock.

To activate the haddock template, add this to your jspwiki-custom.properties file: 

jspwiki.templateDir = haddock

See also: Haddock Editor, Haddock Styles, Haddock Styles Test page, Haddock Stylesheet Design

Simplified JSP's#

  • The styling of all JSP's is based on CSS, instead of html tables and tabs. CSS3 is used for basic animations.
  • The stylesheet is build on the foundation of the BOOTSTRAP 3.0 CSS FrameworkContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png. This improves cross-browser compatibility, responsiveness of the design on various platforms, and provides many reusable css building blocks. (see Haddock Styles) Bootstrap is released under the Apache 2 license.
  • The quick search and navigation menu is redesigned to make it easier to create new pages or clone existing pages.
  • The sidebar, aka LeftMenu, has become collapsible. You can toggle it to full screen to view or edit pages.
  • Haddock supports both a fluid and a fixed-width layout, which can be toggled via the UserPreferences.
  • The menubar remains always on top for quick access to the key actions of the page.
  • The attachment upload UI has been redesigned: you can upload multiple files in one go; and use drag & drop if your browser supports it.

A new plain editor UI#

See Haddock Editor

  • Live Preview will immediately render the page while editing. The preview area can be displayed side-by-side next to the main editor area.
  • The sidebar is by default collapsed in Edit mode.
  • Suggestion popup dialogs provide assistance while entering wiki markup. Help is available for links, plugins, images, ACLs, %%styles, colors, fonts, symbols, but can easily be extended.
  • All icons (eg editor toolbar) are now based on Font AwesomeContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png by Dave Gandy, replacing the FamFamFam icon set. See Icon Style
  • Other features: section editing (zoom in a partical page section during edit), Find & Replace UI, tab completion with snippets (press the TAB key to complete shortcut commands), smart typing pairs, and more.

WYSIWYG Editor#

  • The Haddock Template comes with a light-weight WYSIWYG editor installed.
  • You can add your own WYSIWYG editor to JSPWiki. Hooks are already provided for TinyMCE and CKeditor.
  • WYSIWYG editors also support LivePreview.
  • You can switch between the available editors from the UserPreferences as well as from the Edit view.

Dynamic styles#

Dynamic styles are %%css styles supported by JavaScript which add dynamic behaviour or animation to parts of your wiki pages.
Dynamic styles are built on the idea of progressive enhancementContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png: if javascript would be turned off in the browser, the wiki page should still be fully accessible and readable.

See Haddock Styles for more details.

  • All dynamic styles adopt the Bootstrap look and feel.
  • The markup for Tabbed Sections has been simplified, while maintaining backwards compatibility with previous markup.
  • GraphBars have been extended to provide more display options and colors
  • Prettified code-blocks now also display line-numbers
  • Table styles have been improved (%%table-filter, %%sortable) and more Bootstrap table styles are available.
  • Embedding video, or other media has become much easier. The new %%viewer style allows to embed video (like YouTube, and other formats), wiki-pages or external web-content directly into a wikipage. %%slimbox now supports those same media formats. A %%carousel style is added with an auto-rotating viewer.
  • The %%add-css style brings the full power of CSS and CSS3 to your wikipages.

Reader view #

The Reader view (also accessible via the More... menu) removes all clutter from the display of a wikipage: no header (only the pagename), no footer, no sidebar and no menu-bars. This is also a great view for printing.
When in Reader view, clicking the page name on top of the screen will get you back to the default view.

You can use following new interwiki references: 

[Raw:Haddock Template]    => raw wiki markup
[Reader:Haddock Template] => Reader view

Reserved Pages#

The Haddock template uses following reserved wiki pages, and degrades gracefully if it cannot find the pages.
  • LoginHelp : add a help button to the login, lost-password and register page
  • EditPageHelp : add a help button to the Edit page.
  • SearchPageHelp : add a help button to the Search page
  • TitleBox : add an alert message above the page header, which can be used as temporary web-site banner with news flash
  • MoreMenu : extend the standard More... dropdown with your own links.
    • Use * [some link] to add additional menu entries.
    • Use * ---- to add a menu separator line
  • HomeMenu : add a dropdown menu below the logo, which can be used for showing key general info of the site, system info, etc. Use the same formatting rules as for the MoreMenu.
  • CopyrightNotice : add it to the page footer

Under the hood#

The HADDOCK template JSP's, the Javascript and the CSS stylesheets have gotten a complete overhaul.

Javascript#

  • The monolithic javascript files are refactored into many small modules to improve maintainability, and reduces complexity.
  • At build time the javascript is merged by wro4jContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png and minimized by UglifyJSContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png.
  • The JS still runs on top of the mootools JS library.
  • With the new modularized design, it is easy to write your own dynamic styles.
    See How To Add a Dynamic Style to the Haddock Template

CSS #

  • The monolithic jspwiki.css file has been broken up into many small LessContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png files; many which are reused from the BOOTSTRAP framework.
  • Less is a CSS pre-processor, extending the CSS language with variables, mixins, functions, etc. This makes the jspwiki stylesheets more maintainable, and extendable.
  • At build time, the LESS pre-processor and CSS minimizer are run via the wro4jContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png framework.

How to extend the Haddock Template#

WikiTemplate
This particular version was published on 16-May-2016 10:12 by Dirk Frederickx.  Top