X-Git-Url: http://git.indexdata.com/?a=blobdiff_plain;f=doc%2Fmkws-manual.markdown;h=a275051c49de440de9c78200f1571f56a9a75601;hb=a18584cadc9d704b512b0c4ea30234b62750ff1f;hp=6cd131b91e8a61e7de40a7e03a304d858c5e7e02;hpb=ffe353360305f0082ae56f506ac309678c775d0d;p=mkws-moved-to-github.git diff --git a/doc/mkws-manual.markdown b/doc/mkws-manual.markdown index 6cd131b..a275051 100644 --- a/doc/mkws-manual.markdown +++ b/doc/mkws-manual.markdown @@ -1,6 +1,6 @@ -% Embedded metasearching with the MasterKey Widget Set +% The MKWS manual: embedded metasearching with the MasterKey Widget Set % Mike Taylor -% 30 July 2014 +% October 2014 Introduction @@ -19,10 +19,14 @@ Index Data provides several different toolkits for communicating with its metasearching middleware, trading off varying degrees of flexibility against convenience: -* pz2.js -- a low-level JavaScript library for interrogating the - Service Proxy and Pazpar2. It allows the HTML/JavaScript programmer - to create JavaScript applications display facets, records, etc. that - are fetched from the metasearching middleware. +* [pz2.js](http://www.indexdata.com/pazpar2/doc/ajaxdev.html) -- + a low-level JavaScript library for interrogating the + [Service Proxy](http://www.indexdata.com/service-proxy/) + and + [Pazpar2](http://www.indexdata.com/pazpar2/). + It allows the HTML/JavaScript programmer + to create JavaScript applications to display facets, records, + etc. that are fetched from the metasearching middleware. * masterkey-ui-core -- a higher-level, complex JavaScript library that uses pz2.js to provide the pieces needed for building a @@ -30,44 +34,46 @@ flexibility against convenience: * MasterKey Demo UI -- an example of a searching application built on top of masterkey-ui-core. Available as a public demo at - http://mk2.indexdata.com/ + -* MKDru -- a toolkit for embedding MasterKey-like searching into - Drupal sites. +* [MKDru](http://www.indexdata.com/masterkey-drupal) -- + a toolkit for embedding MasterKey-like searching into + [Drupal](https://www.drupal.org/) + sites. All of these approaches require programming to a greater or lesser -extent. Against this backdrop, we introduced MKWS (the MasterKey -Widget Set) -- a set of simple, very high-level HTML+CSS+JavaScript +extent. Against this backdrop, we introduced +[MKWS (the MasterKey Widget Set)](http://mkws.indexdata.com/) +-- a set of simple, very high-level HTML+CSS+JavaScript components that can be incorporated into any web-site to provide MasterKey searching facilities. By placing `
`s with well-known -identifiers in any HTML page, the various components of an application +MKWS classes in any HTML page, the various components of an application can be embedded: search-boxes, results areas, target information, etc. Simple Example ============== -The following is a complete MKWS-based searching application: +The following is +[a complete MKWS-based searching application](//example.indexdata.com/simple.html): MKWS demo client - - + + -
-
+ +
-Go ahead, try it! You don't even need a web-server. Just copy and -paste this HTML into a file on your computer -- `/tmp/magic.html`, -say -- and point your web-browser at it: -`file:///tmp/magic.html`. Just like that, you have working -metasearching. - +Go ahead, try it! Simply put the above in a file (e.g index.html), +drop it into a folder accessible with an ordinary web-server (e.g +Apache) and load it in your web browser. Just like that, you have +working metasearching. How the example works --------------------- @@ -78,61 +84,114 @@ you: the `` element at the top level contains a `` and a page, you can add MKWS elements. These fall into two categories. First, the prerequisites in the HTML -header, which are loaded from the tool site mkws.indexdata.com: +header, which are loaded from the tool site `mkws.indexdata.com`: * `mkws-complete.js` - contains all the JavaScript needed by the widget-set. + contains all the JavaScript needed by the widget-set, including a + copy of the jQuery library. * `mkws.css` provides the default CSS styling Second, within the HTML body, `
` elements with special IDs that -begin `mkws` can be provided. These are filled in by the MKWS code, +begin `mkws-` can be provided. These are filled in by the MKWS code, and provide the components of the searching UI. The very simple -application above has only two such components: a search box and a -results area. But more are supported. The main `
`s are: +application above has only two such widgets: a search box and a +results area. But more are supported. + +Defining Widget Elements +======================== + +Widget type +----------- -* `mkwsSearch` -- provides the search box and button. +An HTML element is made an MKWS widget by including an MKWS +class-name. These names begin `mkws-`: what follows that prefix +specifies the type of the widget. The type can be any sequence of +alphanumeric characters and hyphens _except_ something beginning +`team` -- see below. -* `mkwsResults` -- provides the results area, including a list of +The main widgets are: + +* `mkws-search` -- provides the search box and button. + +* `mkws-results` -- provides the results area, including a list of brief records (which open out into full versions when clicked), paging for large results sets, facets for refining a search, sorting facilities, etc. -* `mkwsLang` -- provides links to switch between one of several - different UI languages. By default, English, Danish and German are - provided. +* `mkws-progress` -- shows a progress bar indicating how many of the + targets have responded to the search request. -* `mkwsSwitch` -- provides links to switch between a view of the +* `mkws-stat` -- provides a status line summarising the statistics of + the various targets. + +* `mkws-switch` -- provides links to switch between a view of the result records and of the targets that provide them. Only meaningful when `mkwsTargets` is also provided. -* `mkwsTargets` -- the area where per-target information will appear +* `mkws-targets` -- the area where per-target information will appear when selected by the link in the `mkwsSwitch` area. Of interest mostly for fault diagnosis rather than for end-users. -* `mkwsStat` --provides a status line summarising the statistics of - the various targets. +* `mkws-lang` -- provides links to switch between one of several + different UI languages. By default, English, Danish and German are + provided. To see all of these working together, just put them all into the HTML `` like so: -
-
-
-
-
-
+
+
+
+ +
+
+
+ +The full set of supported widgets is described in the +reference guide below. + +Widget team +----------- + +In general a set of widgets work together in a team: in the example +above, the search-term that the user enters in the `mkws-search` +widget is used to generate the set of records that are displayed in +the `mkws-results` widget. + +Sometimes, it's desirable to have multiple teams in a single page. A +widget can be placed in a named team by giving it (in addition to its +main class) a class that begins with `mkws-team-`: what follows that +prefix specifies the team that the widget is part of. For example, +` ---- -Element Type Default Description --------- ----- --------- ------------ -popup_width string 880 Width of the popup window (if used), in - pixels. +Element Type Default Description +-------- ----- ------- ------------ +popup_width string 880 Width of the popup window (if used), in + pixels. -popup_height string 760 Height of the popup window (if used), in - pixels. +popup_height string 760 Height of the popup window (if used), in + pixels. -popup_button string input.mkwsButton (Never change this.) +popup_button string `input.mkwsButton` (Never change this.) -popup_modal string 0 Modal confirmation mode. Valid values are 0 or 1 +popup_modal string 0 Modal confirmation mode. Valid values are 0 or 1 -popup_autoOpen string 1 Open popup window on load. Valid values are 0 or 1 +popup_autoOpen string 1 Open popup window on load. Valid values are 0 or 1 ---- @@ -709,7 +821,7 @@ The structure of the HTML generated by the MKWS widgets In order to override the default CSS styles provided by the MasterKey Widget Set, it's necessary to understand that structure of the HTML elements that are -generated within the components. This knowledge make it possible, for example, +generated within the widgets. This knowledge make it possible, for example, to style each `
` with class `term` but only when it occurs inside an element with ID `#mkwsTermlists`, so as to avoid inadvertently styling other elements using the same class in the non-MKWS parts of the page. @@ -776,4 +888,4 @@ and .CLASS indicates an instance of a class. - - - -Copyright (C) 2013-2014 by IndexData ApS, +Copyright (C) 2013-2014 Index Data ApS.