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

This page was created on 28-Feb-2014 20:34 by unknown

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Version Date Modified Size Author Changes ... Change note
33 02-Aug-2022 21:59 8 KB Dirk Frederickx to previous undo testing update
32 02-Aug-2022 21:58 8 KB Dirk Frederickx to previous | to last just testing
31 03-May-2021 08:30 8 KB Dirk Frederickx to previous | to last typo
30 03-May-2021 08:29 8 KB Dirk Frederickx to previous | to last How to add a Cookie Policy to you site ==> How to add a Cookie Policy to your site
29 13-Mar-2021 19:31 8 KB Dirk Frederickx to previous | to last Added link to how-to add a cookie-policy
28 23-Jun-2019 13:55 8 KB Dirk Frederickx to previous | to last
27 10-Jul-2018 17:03 8 KB Dirk Frederickx to previous | to last Unsaved page changes can be restored.
26 28-Apr-2018 15:07 8 KB Dirk Frederickx to previous | to last
25 15-Apr-2018 18:42 7 KB Dirk Frederickx to previous | to last
24 16-Sep-2017 18:11 7 KB Dirk Frederickx to previous | to last
23 16-Sep-2017 18:02 7 KB Dirk Frederickx to previous | to last Haddock Math Behavior ==> Math Behavior
22 24-Apr-2017 18:58 7 KB Dirk Frederickx to previous | to last
21 18-Dec-2016 20:28 7 KB Dirk Frederickx to previous | to last
Incoming links Outgoing links
Haddock Template
Haddock Template

Difference between version and

At line 1 changed one line
[{SET page-styles='prettify-nonum '}]
[{SET page-styles='prettify-nonum magnify'}]
At line 3 removed 4 lines
%%information
The %%category [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.
/%
At line 4 added one line
[{TableOfContents }]
At line 9 changed one line
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.jpg]
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]
At line 11 changed one line
Introducing the __HADDOCK__ template, a new template/ui for Apache JSPWiki.
Introducing the __HADDOCK__ template, a new template and user interface for Apache JSPWiki, introduced as of v2.10.1.
At line 13 changed 2 lines
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.
Haddock features a clean, modern look and feel which builds upon the [Bootstrap framework | http://getbootstrap.com/|class='slimbox']. 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|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].
At line 18 changed one line
To activate the haddock template, add this to your {{jspwiki-custom.properties}} file:
Since [2.11.0.M1|https://jspwiki-wiki.apache.org/Wiki.jsp?page=NewIn2.11] the Haddock template has become the new default template.
At line 20 changed 3 lines
{{{
jspwiki.templateDir = haddock
}}}
%%indent-1.small
Note: to activate the haddock template in earlier JSPWiki versions, set {{{jspwiki.templateDir = haddock}}} in your {{{jspwiki-custom.properties}}}
/%
At line 24 changed one line
See also: [Haddock Styles], [Haddock Styles Test page], [Haddock Editor], [Haddock Stylesheet]
See also: [Haddock Editor], [Haddock Styles], [Haddock Styles Test page], [Haddock Stylesheet Design]
At line 27 changed 9 lines
* 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 Framework|http://getbootstrap.com/| class='slimbox-link']. 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.\\
%%error Note: the current server-side functionality to upload multiple files needs fixing. /%
* 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.
At line 36 added one line
!! A new plain editor UI
At line 38 changed one line
!! 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]
* 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.
At line 40 changed 3 lines
* 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 Awesome|http://fortawesome.github.io/Font-Awesome/|class='slimbox-link'] by Dave Gandy, replacing the FamFamFam icon set. See [Icon Style]
!! WYSIWYG Editor
At line 44 changed one line
See [Haddock Editor] for details on Section Editing, Find & Replace UI, Tab Completion, and more.
* 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.
At line 47 changed 3 lines
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 enhancement|Wikipedia:progressive enhancement|class='slimbox-link']: if javascript is turned off, the wiki page is still accessible and readable.
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.
At line 51 changed 7 lines
* Many dynamic styles adopt the Bootstrap look and feel.
* The markup for [%%tabbedSections|Tabbed Sections|class='slimbox-link'] has been simplified, while maintaining backwards compatibility with previous markup. This simplified markup is supported for other dynamic styles too.
* [%%graphBars|GraphBars|class='slimbox-link'] have been extended to provide more display options and colors
* You now get line-numbers for [%%prettify|Prettify|class='slimbox-link'] code-blocks
* Table support functions ([%%table-filter|Filtered Tables|class='slimbox-link'], [%%sortable|Sortable Tables|class='slimbox-link']) have improved and more Bootstrap table styles are available.
* Embedding video, or other media has become much easier. The new [%%viewer|Viewer|class='slimbox-link'] style allows to embed video (like YouTube, and other formats), wiki-pages or external web-content directly into a wikipage. [%%slimbox|Slimbox|class='slimbox-link'] now supports those same media formats. A [%%carousel|Carousel|class='slimbox-link'] style is added with an auto-rotating viewer.
* And the new [%%add-css|Add CSS Style|class='slimbox-link'] style brings the full power of CSS3 to your wikipages.
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|Add CSS Style|class='slimbox'] 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|Category.Themes].
* [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.
At line 59 changed 2 lines
See [HADDOCK Styles] for more.
!! New Reader view
!! Interwiki links
At line 62 changed 2 lines
The new Reader view (also accessible via the [More...|MoreMenu] 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.
The %%interwiki-raw Raw/% view or {{Raw:}} interwiki link will display the raw page markup.
At line 65 changed one line
If you want, you can add following handy interwiki references to your {{jspwiki-custom.properties}} file:
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.
At line 67 changed 2 lines
jspwiki.interWikiRef.Raw = Wiki.jsp?page=%s&skin=raw
jspwiki.interWikiRef.Reader = Wiki.jsp?page=%s&skin=reader
[Raw:Haddock Template] => raw wiki markup
[Reader:Haddock Template] => Reader view
At line 70 removed 5 lines
When that is done you can use it like this:
{{{
[Raw:Haddock Template]
[Reader:Haddock Template]
}}}
At line 81 added 13 lines
!![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>}} )
At line 96 added 2 lines
The HADDOCK template JSP's, the Javascript and the CSS stylesheets have gotten a complete overhaul.
At line 79 changed 3 lines
* The monolithic javascript files are refactored into many small modules. This improves maintainability, and reduces complexity.
* At build time the javascript is merged by [wro4j | https://github.com/alexo/wro4j|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: {{mootools-core-1.5.1}}, {{mootools-more-1.5.1}}
* 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]
At line 83 changed 3 lines
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 [Less|http://lesscss.org/|class='slimbox-link'] files; many which are reused from the BOOTSTRAP framework.
!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.
At line 87 changed one line
* At build time, the LESS pre-processor and CSS minimizer are run via the [wro4j | https://github.com/alexo/wro4j |class='slimbox-link'] framework.
* At build time, the LESS pre-processor and CSS minimizer are run via the [wro4j | http://wro4j.readthedocs.org/en/stable|class='slimbox'] framework.
At line 110 added 9 lines
!!How to extend the Haddock Template
* %%category [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]
This page (revision-33) was last changed on 02-Aug-2022 21:59 by Dirk Frederickx  Top