Grails: How do I add a color picker in my grails textfields?

Heeeey everyone!
In this tutorial, I will demonstrate how we can embed a color picker in our textfields with the use of a jQuery plugin called miniColors. miniColors is a very beautiful plugin created in jQuery by the ever wonderful Claviska! To get started, below are the stuff I used. Be sure that you download them before hand!
Step 1
Download the necessary requirements above. If you have them already, then you're good to go!

Step 2
After downloading the miniColors plugin, you will notice 3 important files as encircled below.
  • Copy "jquery.miniColors.css" and paste it under "~/yourProject/web-app/css" folder.
  • Copy "jquery.miniColors.js" and paste it under "~/yourProject/web-app/js" folder.
  • Copy the "images" folder and paste it inside "~/yourProject/web-app/images" folder. Then Rename that folder to: "colorpicker"

Step 3
Next, we will change the paths of the images inside the css because, as you can remember, we renamed the folder and placed it inside the "~/yourProject/web-app/images" folder. So open "jquery.miniColors.css" and FIND ALL the paths of the images, then replace this part: "images/" with: "../images/colorpicker/". Be sure to do this to ALL the images! Here is a concrete example:
Before:
background: url(images/colors.png) -40px 0 no-repeat;
After:
background: url(../images/colorpicker/colors.png) -40px 0 no-repeat;
Step 4
Next, we will need to declare the newly pasted plugin in our "Config.groovy"
grails.resources.modules = {
jQuery{
resource url:'http://code.jquery.com/jquery-1.8.2.min.js', disposition: 'head'
}

colorPicker{
dependsOn 'jQuery'

resource url: '/js/jquery.miniColors.js', disposition: 'head'
resource url: '/css/jquery.miniColors.css'
}
}
Step 5
Next, we are ready to use our plugin! In our GSP file, we can simply add this tag:
<r:require module="colorPicker" / >
Step 6
Create a textfield where the colorpicker is supposed to appear.
<g:textField value="${myDomain?.myColor}" id="myColorPicker" class="color-picker" />
Step 7
Once you have that covered, simply add the following lines to trigger the event. Please take note of the selector we used which is "myColorPicker" id.
<script>
jQuery.noConflict();
jQuery(document).ready( function() {
jQuery('#myColorPicker').miniColors({
opacity:false,
readonly:false
});
});
</script>
<br/><br/>
That's it! If everything went well, you should be able to see something like the photo below! For more information about the various options that can be done on this wonderful plugin, simply visit miniColors on github! Don't forget to like us on facebook! Thank you so much for viewing! Ja ne~!
Well, isn't that neat? :D

Written by

I am a software developer with 2 years of experience. I like cats. I like going to hackathons for free food and temporary lodging. I want to be a polyglot. Currently, I can speak languages like English, Korean, Java (it counts right?), Groovy, Ruby and C#. I aim to learn German as well.

5 (mga) puna:

  1. Thank you. Can I use other colorpickers lije the twitter bootstrap?

    ReplyDelete
  2. @kalhel788zx
    Yes, you can use twitter bootstrap. The steps are pretty much the same.

    ReplyDelete
  3. Wow.. This is awesome」!!!

    ReplyDelete
  4. Damn, great. This goes into my project. :)

    ReplyDelete
  5. is missing the required "name" attribute

    ReplyDelete

 

© 2013 icodeya. All rights resevered.Designed by Templateism

Back To Top