This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links
Haddock Template
Haddock Template

Version management

Difference between version and

At line 1 added 182 lines
!!! 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]
This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthorTop