Version
Started with Dojo Toolkit 1.9.1.43d05c6, originally combos were in 1.8.3.30226. Note: look in dojo/dojo.js.uncompressed.js to see which version it is. Note: when downloading dojo, get the binary and source tarballs.
Current dojo version: 1.9.2.f774568
When editing files, replace with the source version, commit, then change the file, and commit. So the exact changes are easily diffed in svn.
Edited files: QueryReadStore.js
Gotchas
Dojo 1.9 conflicts with jquery datatables and simplemodal, and dojo will not parse the dom onload. I believe this is the issue
To fix this, make things synchronous, and parse after jquery is loaded:
<script> dojoConfig= { parseOnLoad: false, async: false }; </script> <script src="../../grouperExternal/public/assets/dojo/dojo/dojo.js" ></script> <script type="text/javascript" > require(["dojo/ready", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!", "dijit/form/FilteringSelect", "dojox/data/QueryReadStore", "dojo/dom-attr", "dijit/Tree", "dojo/data/ItemFileReadStore", "dojo/store/JsonRest", "dojo/_base/declare", "dijit/form/ComboBox"]); </script> <script src="../../grouperExternal/public/assets/js/jquery.js"></script> <script src="../../grouperExternal/public/assets/js/bootstrap.js"></script> <script src="../../grouperExternal/public/assets/js/tree.jquery.js"></script> <script src="../../grouperExternal/public/assets/js/jquery.dataTables.min.js"></script> <script src="../../grouperExternal/public/assets/js/footable-0.1.js"></script> <script src="../../grouperExternal/public/assets/js/jquery.cookie.js"></script> <script src="../../grouperExternal/public/assets/js/grouper.js"></script> <script src="../../grouperExternal/public/assets/js/native.history.js"></script> <script src="../../grouperExternal/public/assets/js/grouperUi.js"></script> <script src="../../grouperExternal/public/assets/js/jquery.blockUI.js"></script> <script src="../../grouperExternal/public/assets/js/jquery.simplemodal.js"></script> <script src="../../grouperExternal/public/assets/nifty/niftycube.js"></script> <script> $( document ).ready(function() { dojo.parser.parse(); }); </script>
Dojo combobox
Requires dojo version 1.8.3.30226 (proof of concept of menu was 1.9.1.43d05c6).
Submit data from other form elements (QueryReadStore.js)
Throbber patch QueryReadStore.js)
Show errors when there are problems with communication with server (QueryReadStore.js)
Dont interrupt typing, autocomplete off (no files edited, was an option)
Send the entered label if it is not associated with a value (so server can give validation errors or so a name or id can be entered and not selected) (QueryReadStore.js)
If you have a combobox in a div which is replaced by ajax, and another combobox appears with the same id, you will get an error. The custom tag prevents this with this script before combobox:
//unregister old ones since if they are replaced in divs they will give you an error result.append(" <script>\n"); result.append(" dojoUnregisterWidget('" + this.idBase + "Id');"); result.append(" dojoUnregisterWidget('" + this.idBase + "StoreId');"); result.append(" </script>\n"); This function is in the grouperUi.js /** * unregister a widget * @param id */ function dojoUnregisterWidget(id) { var widget = dijit.byId(id); if (widget != null) { if (typeof widget.destroyRecursive != 'undefined') { widget.destroyRecursive(); } } }
If we want paging, I think we need to try switching from a QueryReadStore to a JSON store, and use HTTP headers to communicate paging information
Tree control
didnt show pluses or minuses, here is a forum post about it, note, this is not a problem in 1.8.3 (note: claro.css needed to be edited originally, but not anymore)
show icons for folders, groups, attributes, attribute defs, doesnt work in 1.8.3
Build dojo into fewer files
Note, original files are kept in this project: https://github.com/Internet2/grouper/tree/master/grouper-misc/grouper-ui-dojo
There is a README.txt that shows which files need to be copied to the grouper UI, e.g.
dojo/dojo.js dojo/resources/dojo.css dojo/resources/blank.gif dojo/selector/lite.js dijit/registry.js dijit/icons/images/commonIconsObjActEnabled.png dijit/themes/claro/claro.css dijit/themes/claro/images/loadingAnimation.gif dijit/themes/claro/images/tooltip.png dijit/themes/claro/images/treeExpandImages.png dijit/themes/claro/form/images/error.png dijit/nls/* dijit/form/nls/* grouper/*
Note: make sure the nls dirs are there or dojo wont work for other locales. Try changing your browser to different languages to test them.
Get the source build for dojo, unzip, and put in the changes (only QueryReadStore.js?)
Make an HTML file: dojo-release-1.9.2-src/grouper.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> <!-- load Dojo --> <script src="dojo/dojo.js"></script> <script> dojo.require("grouper.grouperDojo"); function init() { alert("Dojo ready, version:" + dojo.version); dojo.byId("greeting").innerHTML += ". Greetings from dojo " + dojo.version; } dojo.ready(init); </script> </head> <body> <h1 id="greeting">Hello</h1> </body> </html>
Make a javascript file
[appadmin@i2midev1 grouper]$ pwd /home/appadmin/dojo/dojo-release-1.9.2-src/grouper [appadmin@i2midev1 grouper]$ more grouperDojo.js dojo.provide("grouper"); /* dojo.require("dojo.ready"); dojo.require("dojo.registry"); dojo.require("dojo.parser"); dojo.require("dojo.json"); dojo.require("dojo._base.config"); dojo.require("dijit.Dialog"); dojo.require("dojo.domReady!"); dojo.require("dijit/form/FilteringSelect"); dojo.require("dojox/data/QueryReadStore"); dojo.require("dojo/dom-attr"); dojo.require("dijit/Tree"); dojo.require("dojo/data/ItemFileReadStore"); dojo.require("dojo/store/JsonRest"); dojo.require("dojo/_base/declare"); dojo.require("dijit/form/ComboBox"); */ require(["dojo/ready", "dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!", "dijit/form/FilteringSelect", "dojox/data/QueryReadStore", "dojo/dom-attr", "dijit/Tree", "dojo/data/ItemFileReadStore", "dojo/store/JsonRest", "dojo/_base/declare", "dijit/form/ComboBox"]);
Build dojo
[appadmin@i2midev1 buildscripts]$ pwd /home/appadmin/dojo/dojo-release-1.9.2-src/util/buildscripts[appadmin@i2midev1 buildscripts]$ ./build.sh action=release htmlFiles=/home/appadmin/dojo/dojo-release-1.9.2-src/grouper.html
Result is here, tarball it up
/home/appadmin/dojo/dojo-release-1.9.2-src/release/dojo/grouper [appadmin@i2midev1 dojo]$ pwd /home/appadmin/dojo/dojo-release-1.9.2-src/release/dojo [appadmin@i2midev1 dojo]$ tar czvf grouper.tgz grouper [appadmin@i2midev1 dojo]$
SFTP that to SVN in the dojo grouper directory
sfd