Changes between Version 4 and Version 5 of TechnicalDocumentation

Show
Ignore:
Timestamp:
07-02-11 17:46:48 (3 years ago)
Author:
jannekevdp@…
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • TechnicalDocumentation

    v4 v5  
    4444 </script> 
    4545}}} 
     46 
    4647==== After initialization ==== 
    4748After initializing the ontology fields and selecting one of the provided suggestions in the ontology autocomplete list, three hidden fields will be automatically inserted (if they do not yet exist) into the DOM. Or (if they ''do'' exist) their values will be changed accordingly: 
     
    5657==== CSS ==== 
    5758The following style sheet elements are used by the ontology chooser. This CSS is already included in the default application wide stylesheet. However, if one would like to implement this somewhere else, this CSS can be used to tweak the look and feel: 
     59{{{ 
    5860 .ui-autocomplete .ui-menu-item { 
    5961    font-size: 10px; 
     
    6769    color: #666; 
    6870 } 
     71}}} 
    6972 
    7073==== Example ==== 
     
    7881 <input type="hidden" name="myOntology-full_id" value="http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#A_Mouse" /> 
    7982}}} 
     83 
    8084==== Advanced Example ==== 
    8185For more advanced behavior, the Ontology Chooser can be instantiated to automatically show and hide a DOM element. This functionality is useful for showing a submit button when there are search results and the user has actually selected one of the results, or hide the submit button when there are no results. You can use this by instantiating the Ontology Chooser like this: 
     
    8690 }); 
    8791}}} 
     92 
    8893with -for example- the following HTML / GSP (Grails / Groovy Server Pages): 
    8994{{{ 
     
    96101 &lt;/div&gt; 
    97102}}} 
     103 
    98104=== Select Add More === 
    99105Select Add More is a Javascript class which is able to dynamically insert an entry to a select element which -upon selecting- causes a jQuery-ui dialog window to open. The look & feel and behaviour can be defined according to your needs. 
     
    114120}}} 
    115121Within your page enter the select element with a user defined ''rel tag'' (in this example, we use ''template'' as a rel tag): 
    116 {{{ <select name="template" rel="template" entity="pass-this-on-to-the-dialog"> 
     122{{{  
     123<select name="template" rel="template" entity="pass-this-on-to-the-dialog"> 
    117124  <option selected="selected" value=""></option> 
    118125  <option value="Academic study">Academic study</option> 
     
    120127}}} 
    121128This select element lists an empty option and an 'Academic study' option. Using the Javascript it is possible to dynamically extend this select element with a third 'add / modify...' option which -when selected- opens a jQuery-ui dialog. In order to do so, initialize the SelectAddMore Javascript class specifying the rel tag of your select element, and specifying what URL to open in the dialog: 
    122 {{{ // handle template selects 
     129{{{ 
     130 // handle template selects 
    123131 new SelectAddMore().init({ 
    124132        rel     : 'template', 
     
    146154The actual style which is used by the Javascript class is user definable. In the example above the class is instantiated with the ''modify'' class. Below is the css for this example:  
    147155 
    148 {{{ option.modify { 
     156{{{ 
     157 option.modify { 
    149158    background: url(../images/icons/famfamfam/layout_add.png) no-repeat left top; 
    150159    background-color: #333; 
     
    180189}}} 
    181190Second, define a table containing input elements in your html or code: 
    182 {{{ &lt;div class="table"&gt; 
     191{{{ 
     192 &lt;div class="table"&gt; 
    183193  &lt;div class="row"&gt; 
    184194   &lt;div class="column"&gt;row 1 column 1&lt;/div&gt;