The HADDOCK template, as of v2.10.1, is still under development, so expect sharp edges. Especially the Group management UI is still work in progress. The template is being tested on Chrome, Safari and FF. Testing on IE is left to the adventurous user. It is the intention to gather feedback from the community, and increase test-coverage across browsers and devices.

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 Content unavailable! (broken link)haddock.jpg
Introducing the HADDOCK template, a new template/ui for Apache JSPWiki.

This new template contains various UI improvements, a major redesign of the CSS stylesheet and modularization of the javascript. And many new and improved dynamic styles, including video viewers, a new slimbox, carousel viewers, and more.

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 Styles, Haddock Styles Test page, Haddock Editor, Haddock Stylesheet

Simplified JSP's#

  • The styling of all JSP's is based on CSS, instead of table formatting 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-wiki.apache.org/images/out.png. This helps to improve 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 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 to full screen to view or edit pages.
  • The template supports a fluid and a fixed-width layout, settable via the UserPreferences.
  • The menubar remains always on top. Clicking the page name on the menubar get's you back to the top of the page.
  • The attachment upload UI has been redesigned: you can upload multiple files in one go; and use drag & drop if your browsers support its.
    Note: the current server-side functionality to upload multiple files needs fixing.

A new Plain editor UI#

  • As before LivePreview renders the page while editing. The livepreview area can now also be displayed side-by-side next to the editor textarea, so you can immediately see the rendered wiki-markup during edit. By default, the sidebar is collapsed.
  • Advanced suggestion dialog boxes provide assistance while you enter wiki markup. Help is available for links, plugins, images, ACLs, %%styles, colors, fonts, symbols.
  • All (toolbar) icons are now based on a Font AwesomeContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png by Dave Gandy, replacing the FamFamFam icon set. See Icon Style

See Haddock Editor for details on Section Editing, Find & Replace UI, Tab Completion, and more.

Dynamic styles#

Dynamic styles are styles powered by a combination of JavaScript and CSS. They 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-wiki.apache.org/images/out.png: if javascript is turned off, the wiki page is still accessible and readable.

  • Many dynamic styles adopt the Bootstrap look and feel.
  • The markup for %%tabbedSections has been simplified, while maintaining backwards compatibility with previous markup. This simplified markup is supported for other dynamic styles too.
  • %%graphBars have been extended to provide more display options and colors
  • You now get line-numbers for %%prettify code-blocks
  • Table support functions (%%table-filter, %%sortable) have improved 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.
  • And the new %%add-css style brings the full power of CSS3 to your wikipages.

See HADDOCK Styles for more.

New Reader view #

The new Reader view (also accessible via the More... menu) simplifies 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.

If you want, you can add following handy interwiki references to your jspwiki-custom.properties file: 

jspwiki.interWikiRef.Raw = Wiki.jsp?page=%s&skin=raw
jspwiki.interWikiRef.Reader = Wiki.jsp?page=%s&skin=reader
When that is done you can use it like this: 
[Raw:Haddock Template] 
[Reader:Haddock Template]

Under the hood#

Javascript#

  • The monolithic javascript files are refactored into many small modules. This improves maintainability, and reduces complexity.
  • At build time the javascript is merged by wro4jContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png and minimized by UglifyJSContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png.
  • The JS still runs on top of the mootools JS library: mootools-core-1.5.1, mootools-more-1.5.1

With the new modularized design, it is easy to write your own dynamic styles. See How To Write A Dynamic Style

CSS#

  • The monolithic jspwiki.css file has been modularized into many small LessContent unavailable! (broken link)https://jspwiki-wiki.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-wiki.apache.org/images/out.png framework.
WikiTemplate
This particular version was published on 22-Jun-2015 20:32 by Dirk Frederickx.  Top