Changes between Version 3 and Version 4 of TechnicalDocumentation

07-02-11 17:44:54 (3 years ago)



  • TechnicalDocumentation

    v3 v4  
    1414==== Usage ==== 
    1515First require the Ontology Chooser Javascript code in your project (note the minified Javascript): 
    16  <g:if env="production"> 
     17<g:if env="production"> 
    1718 <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.min.js')}"></script> 
    1819 </g:if><g:else> 
    1920 <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.js')}"></script> 
    2021 </g:else> 
    2223Within your page, you can define your form text input fields to be ontology fields by adding a ''rel'' tag: 
    23  <input type="text" name="..." rel="ontologies-all" /> 
     25<input type="text" name="..." rel="ontologies-all" /> 
    2426 <input type="text" name="..." rel="ontologies-1132" /> 
    2527 <input type="text" name="..." rel="ontologies-1000,1031" /> 
    2729The first input element will use all available ontologies, while the second one only uses the [ NCBI Species Ontology] which has ''Ontology ID'' 1132. The third uses two ontologies, both [ Mouse adult gross anatomy] (Ontology ID: 1000) as well as [ Mouse pathology] (Ontology ID: 1031). All available ontologies can be found at the [ NCBO BioPortal]. 
    2931To actually attach the Ontology Chooser to the ontology fields you need to instantiate the Ontology Chooser using Javascript like this: 
    3033 // initialize the ontology chooser 
    3134 new OntologyChooser().init(); 
    3336Note that you should do this when the DOM ([ Document Object Model]) is ready otherwise it will not work properly. So probably you would require the following code in order to do so: 
    34  <script type="text/javascript"> 
     38<script type="text/javascript"> 
    3539 // jQuery way to execute code when DOM is ready 
    3640 $(function() { 
    3943 } 
    4044 </script> 
    4246==== After initialization ==== 
    4347After 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: 
    7074If the name of this fields was ''myOntology'' the three hidden fields accompanying this ontology field would look like this (upon selecting the first suggestion): 
    7176 <input type="hidden" name="myOntology-concept_id" value="A_Mouse" /> 
    7277 <input type="hidden" name="myOntology-ontology_id" value="42693" /> 
    7378 <input type="hidden" name="myOntology-full_id" value="" /> 
    7580==== Advanced Example ==== 
    7681For 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: 
    7783 $(function() { 
    7884  // initialize the ontology chooser 
    7985  new OntologyChooser().init({showHide: $('div#button')}); 
    8086 }); 
    8288with -for example- the following HTML / GSP (Grails / Groovy Server Pages): 
    8390 &lt;div id="termForm"&gt; 
    8491  &lt;g:form action="pages" name="wizardForm" id="wizardForm"&gt; 
    8895  &lt;/g:form&gt; 
    8996 &lt;/div&gt; 
    9198=== Select Add More === 
    9299Select 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. 
    99106==== Usage ==== 
    100107First require the Javascript code in your project (note the minified Javascript): 
    101109 <g:if env="production"> 
    102110 <script type="text/javascript" src="${resource(dir: 'js', file: 'SelectAddMore.min.js')}"></script> 
    104112 <script type="text/javascript" src="${resource(dir: 'js', file: 'SelectAddMore.js')}"></script> 
    105113 </g:else> 
    107115Within your page enter the select element with a user defined ''rel tag'' (in this example, we use ''template'' as a rel tag): 
    108  <select name="template" rel="template" entity="pass-this-on-to-the-dialog"> 
     116{{{ <select name="template" rel="template" entity="pass-this-on-to-the-dialog"> 
    109117  <option selected="selected" value=""></option> 
    110118  <option value="Academic study">Academic study</option> 
    111119 </select> 
    113121This 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: 
    114  // handle template selects 
     122{{{ // handle template selects 
    115123 new SelectAddMore().init({ 
    116124        rel     : 'template', 
    123131        } 
    124132 }); 
    125134''Note that this should be done after the DOM is ready (see the ontology chooser how to do that).'' 
    129138==== GSCF Grails example ==== 
    130139Instead of writing the select element yourself, within the GSCF template you could also write the following code which automatically renders a select element with ''rel='template'''. Note that this results in a (Blowfish) encrypted entity for security sake: 
    131141 <wizard:templateElement name="template" description="Template" entity="${dbnp.studycapturing.Study}" addDummy="true"> 
    132142  The template to use for this study 
    133143 </wizard:templateElement> 
    135145==== CSS ==== 
    136146The 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:  
    138  option.modify { 
     148{{{ option.modify { 
    139149    background: url(../images/icons/famfamfam/layout_add.png) no-repeat left top; 
    140150    background-color: #333; 
    144154    font-weight: bold;     
    145155 } 
    147157==== Example  ==== 
    148158A screenshot of what the above example looks like: 
    162172==== Usage ==== 
    163173First require the Javascript code in your project (note the minified Javascript): 
    164175 <g:if env="production"> 
    165176 <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.min.js')}"></script> 
    167178 <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.js')}"></script> 
    168179 </g:else> 
    170181Second, define a table containing input elements in your html or code: 
    171  &lt;div class="table"&gt; 
     182{{{ &lt;div class="table"&gt; 
    172183  &lt;div class="row"&gt; 
    173184   &lt;div class="column"&gt;row 1 column 1&lt;/div&gt; 
    186197  &lt;/div&gt; 
    187198 &lt;/div&gt;       
    189200And instantiate the table editor to make the rows multi-selectable and make any changes made in any input field replicate to selected rows to speed up editing: 
    190201 new TableEditor().init('div.table', 'div.row', 'div.column');