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 Haddock Template/haddock_fish.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 framework. It has a responsive design, allowing wiki pages to render well on a variety of devices and window or screen sizes. 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.

Since 2.11.0.M1 the Haddock template has become the new default template.

Note: to activate the haddock template in earlier JSPWiki versions, set jspwiki.templateDir = haddock in your jspwiki-custom.properties

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 Framework. 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.
  • The styling of weblogs has been improved as well.

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 Awesome by Dave Gandy, replacing the FamFamFam icon set. See Icon Style
  • Unsaved page edits can be restored, even when your session or login timer expires, or you accidentally close a browser tab without saving. The last changes are saved in the localstorage area of your browser. At the start of a new edit session, you will be presented with a modal dialog to restore the changes.
  • 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 enhancement: 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.
  • The %%add-css style brings the full power of CSS and CSS3 to your wikipages.
  • The Haddock Template doesn't support skins. Instead it introduces the notion of themes.
  • 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 Raw view or Raw: interwiki link will display the raw page markup.

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

[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
  • SessionExpired : this page is shown after an inactive edit session timeout. The timeout value is configured in the web.xml file <session-timeout>60</session-timeout> )

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 wro4j and minimized by UglifyJS.
  • 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 Less 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 wro4j framework.

How to extend the Haddock Template#

WikiTemplate
This page (revision-33) was last changed on 02-Aug-2022 21:59 by Dirk Frederickx  Top