Changes between Version 3 and Version 4 of TechnicalDocumentation
- Timestamp:
- Feb 7, 2011, 5:44:54 PM (10 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
TechnicalDocumentation
v3 v4 14 14 ==== Usage ==== 15 15 First require the Ontology Chooser Javascript code in your project (note the minified Javascript): 16 <g:if env="production"> 16 {{{ 17 <g:if env="production"> 17 18 <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.min.js')}"></script> 18 19 </g:if><g:else> 19 20 <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.js')}"></script> 20 21 </g:else> 21 22 }}} 22 23 Within 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" /> 24 {{{ 25 <input type="text" name="..." rel="ontologies-all" /> 24 26 <input type="text" name="..." rel="ontologies-1132" /> 25 27 <input type="text" name="..." rel="ontologies-1000,1031" /> 26 28 }}} 27 29 The first input element will use all available ontologies, while the second one only uses the [http://bioportal.bioontology.org/ontologies/38802 NCBI Species Ontology] which has ''Ontology ID'' 1132. The third uses two ontologies, both [http://bioportal.bioontology.org/ontologies/42571 Mouse adult gross anatomy] (Ontology ID: 1000) as well as [http://bioportal.bioontology.org/ontologies/42184 Mouse pathology] (Ontology ID: 1031). All available ontologies can be found at the [http://bioportal.bioontology.org/ontologies/ NCBO BioPortal]. 28 30 29 31 To actually attach the Ontology Chooser to the ontology fields you need to instantiate the Ontology Chooser using Javascript like this: 32 {{{ 30 33 // initialize the ontology chooser 31 34 new OntologyChooser().init(); 32 35 }}} 33 36 Note that you should do this when the DOM ([http://www.w3.org/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"> 37 {{{ 38 <script type="text/javascript"> 35 39 // jQuery way to execute code when DOM is ready 36 40 $(function() { … … 39 43 } 40 44 </script> 41 45 }}} 42 46 ==== After initialization ==== 43 47 After 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: … … 69 73 70 74 If the name of this fields was ''myOntology'' the three hidden fields accompanying this ontology field would look like this (upon selecting the first suggestion): 75 {{{ 71 76 <input type="hidden" name="myOntology-concept_id" value="A_Mouse" /> 72 77 <input type="hidden" name="myOntology-ontology_id" value="42693" /> 73 78 <input type="hidden" name="myOntology-full_id" value="http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#A_Mouse" /> 74 79 }}} 75 80 ==== Advanced Example ==== 76 81 For 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: 82 {{{ 77 83 $(function() { 78 84 // initialize the ontology chooser 79 85 new OntologyChooser().init({showHide: $('div#button')}); 80 86 }); 81 87 }}} 82 88 with -for example- the following HTML / GSP (Grails / Groovy Server Pages): 89 {{{ 83 90 <div id="termForm"> 84 91 <g:form action="pages" name="wizardForm" id="wizardForm"> … … 88 95 </g:form> 89 96 </div> 90 97 }}} 91 98 === Select Add More === 92 99 Select 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. … … 99 106 ==== Usage ==== 100 107 First require the Javascript code in your project (note the minified Javascript): 108 {{{ 101 109 <g:if env="production"> 102 110 <script type="text/javascript" src="${resource(dir: 'js', file: 'SelectAddMore.min.js')}"></script> … … 104 112 <script type="text/javascript" src="${resource(dir: 'js', file: 'SelectAddMore.js')}"></script> 105 113 </g:else> 106 114 }}} 107 115 Within 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"> 109 117 <option selected="selected" value=""></option> 110 118 <option value="Academic study">Academic study</option> 111 119 </select> 112 120 }}} 113 121 This 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 selects122 {{{ // handle template selects 115 123 new SelectAddMore().init({ 116 124 rel : 'template', … … 123 131 } 124 132 }); 133 }}} 125 134 ''Note that this should be done after the DOM is ready (see the ontology chooser how to do that).'' 126 135 … … 129 138 ==== GSCF Grails example ==== 130 139 Instead 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: 140 {{{ 131 141 <wizard:templateElement name="template" description="Template" entity="${dbnp.studycapturing.Study}" addDummy="true"> 132 142 The template to use for this study 133 143 </wizard:templateElement> 134 144 }}} 135 145 ==== CSS ==== 136 146 The 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: 137 147 138 option.modify {148 {{{ option.modify { 139 149 background: url(../images/icons/famfamfam/layout_add.png) no-repeat left top; 140 150 background-color: #333; … … 144 154 font-weight: bold; 145 155 } 146 156 }}} 147 157 ==== Example ==== 148 158 A screenshot of what the above example looks like: … … 162 172 ==== Usage ==== 163 173 First require the Javascript code in your project (note the minified Javascript): 174 {{{ 164 175 <g:if env="production"> 165 176 <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.min.js')}"></script> … … 167 178 <script type="text/javascript" src="${resource(dir: 'js', file: 'table-editor.js')}"></script> 168 179 </g:else> 169 180 }}} 170 181 Second, define a table containing input elements in your html or code: 171 <div class="table">182 {{{ <div class="table"> 172 183 <div class="row"> 173 184 <div class="column">row 1 column 1</div> … … 186 197 </div> 187 198 </div> 188 199 }}} 189 200 And 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: 190 201 new TableEditor().init('div.table', 'div.row', 'div.column');
