I've recently added a few widgets to showcase MLDB's new in-browser support. They are detailed below.

General design principles

This is a design overview document for the Browser UI Widget Api. For details on that Api please see the Widget API page.

JavaScript

I've made MLDB's in browser support be transparent to the developer. For communication mldb will detect the presence of a jQuery or prototype.js library. If neither exists, it will default to the browser's XmlHttpRequest implementation. MLDB will warn you in the javascript console if you've forgotten to include the relevant wrapper js file. (I separated them out so you wouldn't have to have the code for every single one loaded all the time - I may change this in the future.)

The core MLDB.js file holds wrappers for the REST functions and utility functions only. There is no UI capability within them. The various widget-*.js files hold those. These are grouped by category. So widgets-search.js holds all the search widgets together. There is also an events.js file that provides general utility functions to the MLDB widget libraries.

If you want a bare minimum install then just include the mldb.js and mldb-xhr.js files. You can write your own UI widgets to use the MLDB functions directly if you wish. I would strongly advise using mldb-jquery.js though instead of XHR because it has received more testing. Also, the provided widgets adopt MLDB's 'defaults then best-guess' approach to providing functionality. Using them should minimise your UI code.

CSS styles

I've used my own CSS styles following the 'widgetname-element' naming convention. So the query input box on the searchbar is 'searchbar-query'. These are all registered as CSS classes. By default I also provide CSS classes for elements to lay them out in a 960.gs 12 wide page format.

If you don't include the 960.css file then these will have no lay out effect, meaning you will have to specify your own width, padding and margin for the various elements. (I used 960 so I didn't have to think about this!)

Search

Search Page

This is a wrapper widget so that if you want the below 5 widgets integrated together on a 'typical' search page layout, then you can just instantiate this single widget. This widget will take care of the inter widget event registration and HTML layout. Uses 960.gs for laying out.

Search Bar

A 'google like' search bar using MarkLogic's default search grammer.

Search Facets

Shows facets allowing browsing of search results. Defaults to showing 5 results each, with a 'more' link to show 5 more, and an 'show all' link to view all of a facet's values. Clicking a facet value will alert the search bar to re-run the search with the new facet value incorporated.

Search Results

Displays the current page of search results. Includes the result index in the title by default. Also by default checks if the JSON returned (if it is JSON) has a title and summary element, and uses them for the title and snippet text, respectively.

Also supports addProcessor, removeProcessor and setProcessorPriority functions. These allow you to write your own snippeting algorithms (comprising a matching function, and a processor function) to customise the display of the search results. A default one is provided for JSON content. (soon to include XML full doc, and snippet, support).

Search Pager

Provides pagination controls and 'showing X to Y of Z results' text. Causes search to update (and thus results and facets too).

Search Sort

Provides a drop down box of search options. Defaults to 'none' as per default search options. Supports relevancy by default. You will be able to register custom sort options too.