HADDOCK Template#
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 
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.
Interwiki links#
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#
- Category.Haddock Behavior
- How to change the site logo
- How to add a Cookie Policy to your site
- How To Add a Behavior to the Haddock Template
- How To Add CKEditor 4.0 to the Haddock Template
- How To Add TinyMCE to the Haddock Template
WikiTemplate
.feather {
background-image:url(
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}
Copyright © 2024 The Apache Software Foundation,
Licensed under the Apache License, Version 2.0.
Apache and the Apache feather logo are trademarks of The Apache Software Foundation.
Licensed under the Apache License, Version 2.0
.Apache and the Apache feather logo are trademarks of The Apache Software Foundation.