[DEPRECATED] Ajaxfrancelabs Tutorial

Ajaxfrancelabs is deprecated as of Datafari v6.0 aside from specific admin and search expert functionalities. Please refer to https://datafari.atlassian.net/wiki/spaces/DATAFARI/pages/1517813761 for any search UI related task.

This demonstration is an introduction to the framework AjaxFranceLabs and will demonstrate how to use it.

In order to do that, you will need to download the AjaxFranceLabs framework and include it to your workspace.

Here are the first steps:

Download the latest update of the version 1 of jQuery on jQuery's website
Create a main.js file where we will add all our code to create the interface
Include this two JavaScript files to the html page
Include the main.css file, the result.css from the framework and the font awesome library as bellow.

In a first place, we will create the AjaxFranceLabs manager, configure it and include the searchBar widget which will allow us to process searches using keywords.
We are going to include the required files as well as their dependencies,

<!-- index.html - Adding a SearchBar widget -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/results.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    
  </head>
  <body>
    
    <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
    <!-- The framework main file -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
    <!-- Required file for the manager -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
    <!-- Required file for the manager -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
    <!-- The abstract manager -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
    <!-- An implementation of the manager -->
    <script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
    <!-- The AbstractWidget file -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <!-- The SearchBar widget, implementing AbstractWidget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
          <div id="solr">
            <div id="searchBar"></div><!-- the widget will be inserted here -->
          </div>
        </body>
    </html>

Now let's create the main.js file .

/* main.js */
$(function($){                
	/* Now, we had the widget to the manager */
	//Version 1 - if you do not need to have a variable refering to the widget
	Manager.addWidget(
	   	new AjaxFranceLabs.SearchBarWidget({
	    	elm: $('#searchBar'),
	        id: 'searchBar'
	    })
	);
                
    //Version 2
    var searchBarWidget = new AjaxFranceLabs.SearchBarWidget({
        elm: $('#searchBar'),
        id: 'searchBar'
    });
    Manager.addWidget(searchBarWidget);
                
    /* And we initialize the manager */
    Manager.init();
});

The display should look like something like this:

Well, now it would be good to show some results. Lets add the ResultWidget!

In the html file

<!-- index.html - Adding a Result widget -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/results.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/uuid.core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/i18njs.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Core.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/Parameter.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/ParameterStore.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractManager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/manager/Manager.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchBar.widget.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <!-- The ResultWidget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
      <div id="searchBar"></div><!-- the widget will be inserted here -->
      <div class="col left"></div>
      <div class="col right">
    <div id="results"></div><!-- the widget will be inserted here -->
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

And the javascript file:

You should get the following result:

The html file

And the javascript file :

You should get the following display:

For this part of the tutorial, we will continue by adding the pagination feature.

The html file:

And the javascript file

You should get the following result:

Easy right? Regarding to the documentation, the pagination variable can take 3 values, true, false, a PagerWidget.
By default this value is set to true and will automaticaly create a PagerWidget with the default options. But, if you want to modify some methods or values of the widget, you can create another one and assign it to the pagination variable.

The autocomplete widget is a direct extension of the autocomplete plugin from jQuery UI, so we will need to download it and include it to our javascript files.

And the javascript file

You should get the following:

Easy right? Regarding to the documentation, the pagination variable can take 3 values, true, false, a PagerWidget.
By default this value is set to true and will automaticaly create a PagerWidget with the default options. But, if you want to modify some methods or values of the widget, you can create another one and assign it to the pagination variable.

Lets go a bit further now and add faceting.