Versions Compared

Old Version 2

changes.mady.by.user Cedric

Saved on

compared with

New Version 3

changes.mady.by.user Cedric

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

Code Block
languagexml
<!-- 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>

...

You should get the following result:

 

Now we have our search bar and the results displayed, why not adding the search informations like the number of documents returned, the query execution time. Lets add the SearchInformation widget.

The html file

Code Block
languagexml
<!-- index.html - Adding a SearchInformation 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>
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <!-- The SearchInformationWidget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
       <div id="searchBar"></div>
       <div id="result_information"></div><!-- the widget will be inserted here -->
       <div class="col left"></div>
       <div class="col right">
    	   <div id="results"></div>
       </div>
       <div class="clear"></div>
    </div>
  </body>
</html>

...

You should get the following display:

 

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

The html file:

Code Block
languagexml
<!-- index.html - Adding the pagination  -->
<!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>
    <!-- Add this class -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractModule.js"></script>    
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <!-- Add this module -->
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
    <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/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <!-- The SearchInformationWidget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
      <div id="searchBar"></div>
      <div id="result_information"></div> <!-- the widget will be inserted here -->
      <div class="col left"></div>
      <div class="col right">
    <div id="results"></div>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

...

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 next thing we will do is including the autocomplete widget to the search bar.


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.

...

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.

The html file

Code Block
languagexml
<!-- index.html - Adding some facets -->
<!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/AbstractModule.js"></script>    
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractWidget.js"></script>
    <!-- Add this class which our widget extends -->
    <script type="text/javascript" src="js/AjaxFranceLabs/core/AbstractFacetWidget.js"></script>    
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Autocomplete.module.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/modules/Pager.module.js"></script>
    <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/AjaxFranceLabs/widgets/Result.widget.js"></script>
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/SearchInformation.widget.js"></script>
    <!-- Add this widget -->
    <script type="text/javascript" src="js/AjaxFranceLabs/widgets/Table.widget.js"></script>
    <script type="text/javascript" src="js/searchTutorial.js"></script>
    <div id="solr">
      <div id="searchBar"></div>
      <div id="result_information"></div>
      <div class="col left">
    <!-- Add this block -->
    <div id="facets">
      <div id="facet_langue"></div><!-- First widget -->
      <div id="facet_source"></div><!-- Second widget -->
    </div>
      </div>
      <div class="col right">
    <div id="results"></div>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

...