Changes between Version 1 and Version 2 of TechnicalDocumentation
- Timestamp:
- Feb 7, 2011, 5:24:52 PM (11 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
TechnicalDocumentation
v1 v2 1 = Technical Documentation=1 = Technical Documentation = 2 2 3 == Javascript Classes==3 == Javascript Classes == 4 4 The DbNP Project contains several Javascript classes which can dynamically add functionality to the pages which are developed. All of these classes rely on the jQuery library so make sure jQuery is available before using any of these classes. Note that I am using the Grails notation of including Javascript as the whole project is built in [http://www.grails.org Grails]. Note that I tend to use ([http://developer.yahoo.com/yui/compressor/ yui compressed]) minified Javascript and css for the production version of the application using an if statement. 5 5 6 === Ontology Chooser===6 === Ontology Chooser === 7 7 The Ontology Chooser integrates with the [http://bioportal.bioontology.org/ontologies/ NCBO Ontologies] and build upon the jQuery-ui autocomplete functionality. 8 8 9 ==== Code====9 ==== Code ==== 10 10 Source can be found here: 11 11 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/ontology-chooser.js ontology-chooser.js] 12 12 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/ontology-chooser.min.js ontology-chooser.min.js] 13 13 14 ==== Usage====14 ==== Usage ==== 15 15 First require the Ontology Chooser Javascript code in your project (note the minified Javascript): 16 16 <g:if env="production"> … … 40 40 </script> 41 41 42 ==== After initialization====42 ==== After initialization ==== 43 43 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: 44 44 <input type="hidden" name="fieldName-concept_id" value="..."/> … … 50 50 Upon selecting one of the provided suggestions these hidden fields will be filled 51 51 52 ==== CSS====52 ==== CSS ==== 53 53 The 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: 54 54 .ui-autocomplete .ui-menu-item { … … 64 64 } 65 65 66 ==== Example====66 ==== Example ==== 67 67 A screenshot of what the above example looks like:<br /> 68 68 [[Image:dbnp-ontology-all.png]]<br /> … … 73 73 <input type="hidden" name="myOntology-full_id" value="http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#A_Mouse" /> 74 74 75 ==== Advanced Example====75 ==== Advanced Example ==== 76 76 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: 77 77 $(function() { … … 89 89 </div> 90 90 91 === Select Add More===91 === Select Add More === 92 92 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. 93 93 94 ==== Code====94 ==== Code ==== 95 95 Source can be found here: 96 96 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/SelectAddMore.js SelectAddMore.js] 97 97 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/SelectAddMore.min.js SelectAddMore.min.js] 98 98 99 ==== Usage====99 ==== Usage ==== 100 100 First require the Javascript code in your project (note the minified Javascript): 101 101 <g:if env="production"> … … 127 127 This code will insert an option with 'add / modify..' as a label, and when selecting it a jQuery dialog will be opened with url '/gscf/templateEditor' and passing '?entity=...' as get variable (as defined by the ''vars'' argument). Whenever the dialog is closed, the ''onClose'' function is executed. 128 128 129 ==== GSCF Grails example====129 ==== GSCF Grails example ==== 130 130 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: 131 131 <wizard:templateElement name="template" description="Template" entity="${dbnp.studycapturing.Study}" addDummy="true"> … … 133 133 </wizard:templateElement> 134 134 135 ==== CSS====135 ==== CSS ==== 136 136 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 137 … … 145 145 } 146 146 147 ==== Example====147 ==== Example ==== 148 148 A screenshot of what the above example looks like:<br /> 149 149 [[Image:SelectAddMore.png]] … … 152 152 [[Image:SelectAddMore.dialog.png]] 153 153 154 === Table Editor===154 === Table Editor === 155 155 The table editor provides multi-edit functionality to ''tables''. These tables are defined as a set of HTML elements which -in the user interface- show a table. This can be the table element, but could as well be a set of div elements. 156 156 157 ==== Code====157 ==== Code ==== 158 158 Source can be found here: 159 159 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/table-editor.js table-editor.js] 160 160 [https://trac.nbic.nl/gscf/browser/trunk/web-app/js/table-editor.min.js table-editor.min.js] 161 161 162 ==== Usage====162 ==== Usage ==== 163 163 First require the Javascript code in your project (note the minified Javascript): 164 164 <g:if env="production"> … … 191 191 ''Note that this should be done after the DOM is ready (see the ontology chooser how to do that).'' 192 192 193 ==== Example====193 ==== Example ==== 194 194 A screenshot of what it would look like:<br /> 195 195 [[Image:TableEditor.png]]<br />