!!! Overview
[{$pagename}]
[{SET page-styles='prettify-nonum magnify'}]
!!!HADDOCK Template
[{TableOfContents }]
%%commentbox
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 | http://getbootstrap.com/|class='slimbox'].
The template supports many new [styles|Haddock 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|Haddock 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 Framework|http://getbootstrap.com/| class='slimbox-link']. 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|Haddock Weblog Example] 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|http://fortawesome.github.io/Font-Awesome/|class='slimbox-link'] 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|How To Add TinyMCE to the Haddock Template] and [CKeditor|How To Add CKEditor 4.0 to the Haddock Template].
* 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|Wikipedia:progressive enhancement|class='slimbox']: 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|Prettify] code-blocks now also display line-numbers
* Table styles have been improved ([%%table-filter|Filtered Tables|class='slimbox'], [%%sortable|Sortable Tables|class='slimbox']) and more Bootstrap table styles are available.
* Embedding video, or other media has become much easier. The new [%%viewer|Viewer|class='slimbox'] style allows to embed video (like YouTube, and other formats), wiki-pages or external web-content directly into a wikipage. [%%slimbox|Slimbox|class='slimbox'] now supports those same media formats. A [%%carousel|Carousel|class='slimbox'] style is added with an auto-rotating viewer.
* The [%%add-css|Add CSS Style|class='slimbox'] style brings the full power of CSS and CSS3 to your wikipages.
!! Interwiki links
The %%interwiki-raw Raw/% view or {{Raw:}} interwiki link will display the raw page markup.
The %%interwiki-reader Reader/% view or {{Reader:}} interwiki link (also accessible via the [More...|MoreMenu] 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 | http://wro4j.readthedocs.org/en/stable|class='slimbox-link'] and minimized by [UglifyJS|https://github.com/mishoo/UglifyJS |class='slimbox-link'].
* 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|http://lesscss.org/|class='slimbox-link'] 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 | http://wro4j.readthedocs.org/en/stable|class='slimbox'] framework.
!!How to extend the Haddock Template
* %%category [Category.Haddock Behavior] /%
* [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]
!! Category
%%category [JSPWiki-2.10.3]%%
!! More Information
There might be more information for this subject on one of the following:
[{ReferringPagesPlugin before='*' after='\n' }]
----
[WikiTemplate]