The 3rd installation of my GrailsUI Screencast series deals with some more advanced usage of the AutoComplete component. It starts off where the previous AutoComplete screencast leaves off.
Download (41.7 MB, 14:36)
alternative download for iPod & Apple TV (26.5 MB, 14:36)
Music is “Rusty Cage” by Soundgarden.
So far, the series goes like this:
- Part 1: GrailsUI Basics (expandablePanel, accordion, tabView)
- Part 2: GrailsUI AutoComplete Basics
- Part 3: GrailsUI Advanced AutoComplete
- Part 4: GrailsUI DataTable (COMING SOON)
35 Comments
Excellent screencast! Congratulations!
I would like to ask you a question:
Is it possible to use the autocomplete component with grails as a multitag input like the one you can find in del.icio.us for example?
Thanks in advance.
If you are a registered member of Grails.org, within the plugin portal you can do multitags within one autoComplete. To see this working, just login to grails.org (you may have to register), then go to any plugin in the Plugin Portal and click the little green “+” icon to add new tags. This will pop up an autoComplete in a dialog where you can start typing tag names.
You’ll notice that once you have chosen one tag and typed a comma, the autoComplete server logic is smart enough to provide you with a list that includes your already-typed tags.
If you take a look at the TagController starting at around line 107, you’ll see how I did this on the server.
Great! This is just what I was looking for.
Thanks a lot from Spain.
Where can I download the source code? Apperently, http://tinyurl.com/gui-sc3-start doesn’t work…
Hey Daniel, sorry about that! I just uploaded the source, so the link should work now.
Excellent screencast (just like the previous one)!
Thanks for it.
Btw, what tool did you use to shoot the screen?
Thanks, Bálint. I use ScreenFlow for my screencasting. I like it quite a bit.
Hey Matthew! Since at least yesterday, I can’t install GrailsUI anymore.
When I do “grails install-plugin grails-ui” it fails upon extraction of “yui 2.7.0″.
I believe the download URL points to a bad location. Or am I doing something wrong?
Quick follow-up: there is a workaround as described here:
http://www.pubbs.net/grails/200904/40990/
Thanks Felix. The problem is with the latest release of the YUI plugin, because the new YUI 2.7.0 source is not in the same place as the last release (sourceforge). Marcel will be fixing it soon. In the meantime, you can bypass this issue by manually installing the YUI plugin version 2.6.1 like this:
grails install-plugin yui 2.6.1
Both GrailsUI and Screencasts are excellent works! Thank you 4all!
Could you elaborate more on two-way dependencies between 2 autoComplete fields and on multiple dependencies on other autoCompletes?
All my attemptes were in vain. That’s throughly real world scenario…
Do you have some hints on it?
Thanks again!
Hi Mat,
I’m new to grails.
These screencasts are great. Thank you for your work.
Thomas
@Rawl, I’m sure I could help you out if you gave me a sample of the code you’re attempting. It would be a very good idea to register for the grails-user mailing list and ask your questions there. I monitor those lists for questions about GrailsUI.
Hi,
Could you tell me how i could change the color of ONE tab in the tabView, i went to the tabView-skin.css and tried a few things but was unsuccessful.
may be a few pointers would go a long way..
thank you,
-U
@uday, you can give your tabs a class that contains the color you want by passing class=’whatever’. You can see an example here.
Just a comment about your dynamic method by interpolating the params, surely there could be a security vulnerability to that practice? It seems as though arbitrary params coming from the request are used to form a method call. Is there some measure taken to ensure the containment of that data?
@Chris In a real-world application, these methods would be secured by something like the acegi or jsecurity plugins, which would ensure that they cannot be accessed unless a valid user is logged in. I understand your concern about the security of using the request params in any case for calling a method dynamically, so if you think there are attributes of the domain object in question that you wouldn’t want users to see, I would suggest that this be restricted in the controller that serves the autocomplete call. This would definitely be a problem if Person.findBySsnLike(’%') happened to be called.
In short, you are correct that this could be a security issue. It would be the programmer’s responsibility to ensure no sensitive attributes be revealed.
Is it possible to use the current implementation of AutoComplete with DataTable… Any tips? I see an example with the yui plugin http://developer.yahoo.com/yui/examples/datatable/dt_autocomplete.html but can’t figure out how to implement with GUI.
Thanks
Josh
Yes, it is possible. You would need to create the autoComplete and attach an itemSelectEvent handler to it that would call the dataTable’s addFilter method. Something like this (off top of head):
GRAILSUI.myAutoComplete.itemSelectEvent.subscribe(function(type, args) { var filterValue = args[2].value; // args[2] is the object literal of the selected item GRAILSUI.myDataTable.addFilter('some name', filterValue); });You would need to properly handle this new request on the server side as well, as you’ll get new “filter” and “filterBy” params.
I appreciate the quick response. I wish I could attend your sessions at SpringOne / 2GX because I have a feeling they’ll cover the basics of this.
I’m not sure how to “attach an itemSelectEvent handler to it.” More specifically where would that bit of code you provided go? In the gsp, or do I need to go add it to the InputTagLib.goovy?
Is “myAutoComplete” and “myDataTable” referring to the id’s of the autoComplete and dataTable?
Thanks again
Josh
Also I did read your \Learn Java Script!\ rant, and that’s why I’m trying to do this stuff! :-D
@Josh You would put that code in your GSP in a script tag. And you’d need to wrap it in the YAHOO.util.Event.onDOMReady method after the grailsUI tags in order for it to have access to the components it needs. And yes, those are referring to the ids of the tags.
Thanks! It’s working..
Here’s what I ended up having in my gsp:
YAHOO.util.Event.onDOMReady(function() {
GRAILSUI.myAutoComplete.itemSelectEvent.subscribe(function(type, args) {
var filterValue = args[2][1]; // args[2][1] is the id of the autoComplete
GRAILSUI.myDataTable.addFilter(’id’, filterValue);
});
});
The ‘id’ and filterValues are then just passed in as “filterBy” and “filterOn” params.
Josh
Great! And if you want to clear the filter, call GRAILSUI.myDataTable.clearFilters() or .clearFilter(’name’).
great screencasts there Matt! waiting for part 4 (and also something on Drag n Drop) . is this supported by GrailsUI btw?
@rawkafella I am not sure when I’ll get around to the next screencast, but it will be on the DataTable if I do it at all.
And yes, there is a drag and drop GrailsUI component. See http://grails.org/plugin/grails-ui for details.
@Matt yeah i could get its gonna be DataTable which is cool. DragNDrop just adds a “whoa!” factor and for a larger audience. maybe u wud wanna do that sometime in future (great that its supported!)
last but not the least - UNREAL RAD there! i’m super impressed. hopefully u’ll keep adding to it.
Nice! .. was looking for this. Great plugin! :)
Matthew - would you happen to know some resource which has implemented Drag N Drop while maintaining the state of components. (ie. their position, expand-collapse etc.) some thing like the widgets in iGoogle? Or any suggestions?
Would that kind of a thing (generating ajax calls to backend to save states) be possible with Gui?
hey!.. just did a quick test of DND. works good with simple lists. but when i add an expandablePanel nothing shows up.
something like -
….
Please tell me this sorta thing will work! :D
Hi Chris. At the moment, the DND component only works with very simple elements. Sorry, but I don’t have plans to improve it in the future. Drag-and-Drop is a complex and very customized thing, and you would have better luck getting to know the YUI underpinnings of it or use the jQueryUI “selectable”, “draggable”, “droppable”, etc. stuff.
Might I also add that newlines inside LI do not work. If I add all the code in same line the component works (even then not for expandablePanel) but if I indent the code .. have multiple lines. Bam! No display.
Sorry I’m adding all this here .. will create a JIRA account and log it there asap.
hello. is there a possibility to “disable” the collapse/expand function from expandablePanel.. ie. make it readonly. remove (+/-)
I checked YUI lib to look for config pass-through but didnt have any luck.
I think persistent=”true”.
i did try that earlier on. persistent doesnt work. but thanks anyway :)
Ah, I guess that only works on the accordion.