The HADOCK template, as of v2.10.1, is still under development, so expect sharp edges. Especially the area of the Editor and all Group management UI are still work in progress. The template is being tested on Chrome, Safari and FF. Testing on IE is left to the adventurous users. 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 WikiTemplate, a new template/ui for Apache JSPWiki.

This new template contains various UI improvements, a major redesign of the CSS stylesheet and the javascript and many new and improved dynamic styles, such as video viewers, carousels, etc.

Activate the haddock template in your jspwiki-custom.properties file: 
     jspwiki.templateDir = haddock

To see the haddock template in action see this test wiki:

Summary of features#

  • Simplified JSP's,
    • The JSP's have been cleaned from all of the table formatting and tabbed sections, which are replaced by css driven styles.
    • The Quick Navigation UI is redesigned to simplify the creation of new pages or cloning of existing pages.
    • The sidebar (aka LeftMenu) has become collapsible so you can use the full screen width to view or edit pages.
    • The template support two main layouts, which can be set in the UserPreferences: a fluid layout which occupies the maximum available width of the browser window and a fixed-width layout which adapts in increment to the width of the window.
    • You can upload multiple files in one go. Upload progress bars have been improved, and drag & drop is possible if your browsers support its.
      Note that the current jspwiki server functionality to upload multiple files needs fixing. FFS
    • A new reader template is added displaying only the bare content of a jspwiki page; thus without header, footer, sidebar or menu-bars. This is used to display various help pages as overlays on the main screen.
  • The plain editor has a complete new UI.
    • Icons are now based on an Icon FontContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png.
    • By default, when you open the editor, the sidebar is hidden to provide maximum screen size. However, you can re-open the sidebar if needed.
    • The editor supports livepreview, with ajax based on the fly page rendering. The livepreview area can now also be displayed side-by-side next to the editor textarea, so you can immediately see the rendering of the wikimarkup.
    • During editing, suggestion dialog boxes are shown to assist entrance of more advanced wiki-markup for links, %%styles, colors, fonts, plugins, and symbols.
    • The editor find & replace ui has been enhanced, showing number of occurrences, supporting regular expressions, and text replaces for the first or all matches.
    • You can choose to edit the whole page or only one particular section of a page.
    • TAB-Completion allows to automatically expand short-cut command into wiki-markup templates.
    • Text is automatically indented based on the indentation level of the previous line.
    • Use the TAB key to indent a line or a blocks of text left or right (shift+TAB to un-indent)
    • Use shift+Enter to quickly insert line-breaks. (\\)
    • etc..
  • There are many improved and new dynamic styles:
    • %%tabbedSections now support a alternative simplified markup based on section headers, while maintaining backwards compatibility with current markup. The same simplified markup is supported for Accordions.
    • %%tabs, %%accordions, %%pills, TableOfContents and %%commentbox adopt the Bootstrap look&feel.
    • %%graphBars provide more display options and colors
    • %%prettify provide also line-numbers
    • Table support functions have improved: %%table-filter,%%sortable, %%table-hover, %%table-bordered
    • %%slimbox now also supports video (like YouTube, and other format) as well as external sites or wiki-pages. A new %%viewer allows to embed video directly into a page; and %%carousel provides an auto-rotating image viewer.
    • etc..
  • The CSS stylesheet is based on the BOOTSTRAP 3.0 CSS FrameworkContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png, one of the most popular CSS frameworks. It provides solutions for cross-browser compatibility, responsive web designs and a bag of UI components to shop from. Bootstrap is released under the Apache 2 license.
    • The modular css is build via LessContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png. Less is a CSS pre-processor, extending the CSS language with variables, mixins, functions, etc. This makes the jspwiki stylesheets more maintainable, and extendable.
    • As a bonus, many Bootstrap style components are now available to be used inside your wiki pages. (eg. %%label, %%quote, %%badge, %%list-unstyled, %%list-group, ... )
  • The structure of the js and ccs files have been improved: monolithic files are broken into many smaller modules which get merged and minimized by wro4jContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png and UglifyJSContent unavailable! (broken link)https://jspwiki-vm1.apache.org/images/out.png via Maven.
    • The total js size (including the mootools library) remains at appox. 150K, while the css size (including BOOTSTRAP) has increased to approx. 130K
    • The js was upgraded to the latest mootools library: mootools-core-1.4.5, mootools-more-1.4.0.1
WikiTemplate
This particular version was published on 19-May-2015 12:48 by Poulami Biswas.  Top