PrimeFaces Community Forum
Board index
Login
Register
Board index ‹ JavaServer Faces ‹ General ‹ Ajax support for <p:colorPicker>?
15 Sep 2011, 20:54
15 Sep 2011, 21:34
16 Sep 2011, 09:17
16 Sep 2011, 10:33
16 Sep 2011, 15:07
16 Sep 2011, 15:22
07 Apr 2012, 16:30
Ajax support for <p:colorPicker>?
7 posts
• Page 1 of 1
15 Sep 2011, 20:54
I was wondering if there were any plans to add Ajax support for the <p:colorPicker>. It's a bummer to need a superfluous Submit button for the color picker on a page that is otherwise fully Ajax'ed.
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
15 Sep 2011, 21:34
No immediate plans unless it is sponsored.
PrimeFaces Lead
16 Sep 2011, 09:17
Hi Jim,
I packed the same colorPicker widget as in PrimeFaces in a composite component. You can call from there p:remoteCommand e.g. or direct JS Ajax (standard or PF). Below is my code. See my comments // ==> FIRE ON CHANGE EVENT in onHide and onSubmit callbacks.
I packed the same colorPicker widget as in PrimeFaces in a composite component. You can call from there p:remoteCommand e.g. or direct JS Ajax (standard or PF). Below is my code. See my comments // ==> FIRE ON CHANGE EVENT in onHide and onSubmit callbacks.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
</composite:interface>
<composite:implementation>
<h:outputScript library="js" name="colorpicker.js" target="head"/>
<h:outputStylesheet library="css" name="colorpicker.css"/>
<div id="#{cc.clientId}" class="colorSelector">
<div style="background-color: #0000FF;"></div>
</div>
<script type="text/javascript">
/* <![CDATA[ */
jQuery("##{cc.clientId}").ColorPicker({
onBeforeShow: function () {
var divEl = jQuery('##{cc.clientId} div');
var originalColor = colorToHex(divEl.css('backgroundColor'));
jQuery(this).ColorPickerSetColor(originalColor);
// buffer original color
divEl.data("colorpicker.originalColor", originalColor);
},
onShow: function (colpkr) {
jQuery(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
jQuery(colpkr).fadeOut(500);
var divEl = jQuery('##{cc.clientId} div');
if (divEl.data("colorpicker.originalColor") != colorToHex(divEl.css('backgroundColor'))) {
// ==> FIRE ON CHANGE EVENT
}
return false;
},
onChange: function (hsb, hex, rgb) {
jQuery('##{cc.clientId} div').css('backgroundColor', '#' + hex);
},
onSubmit: function(hsb, hex, rgb, el) {
jQuery(el).ColorPickerHide();
var divEl = jQuery('##{cc.clientId} div');
if (divEl.data("colorpicker.originalColor") != colorToHex(divEl.css('backgroundColor'))) {
// ==> FIRE ON CHANGE EVENT
}
}
});
/* ]]> */
</script>
</composite:implementation>
</html>
PrimeFaces 3.5.x, Mojarra 2.1.23, JBoss 7.x, Kubuntu 12.04, Windows 7, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/
16 Sep 2011, 10:33
Forgot to show colorToHex function if you need.
You can see an example of "ajaxified" color picker in my web app (collaborative whiteboard) - http://www.fractalsoft.net/whiteboard-websocket/ Simple draw some elements and change their colors. Changes will be propagated to all participants you invited to this whiteboard.
Code: Select all
function colorToHex(color) {
if (color.substr(0, 1) === '#') {
return color;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + rgb.toString(16);
}
You can see an example of "ajaxified" color picker in my web app (collaborative whiteboard) - http://www.fractalsoft.net/whiteboard-websocket/ Simple draw some elements and change their colors. Changes will be propagated to all participants you invited to this whiteboard.
PrimeFaces 3.5.x, Mojarra 2.1.23, JBoss 7.x, Kubuntu 12.04, Windows 7, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/
16 Sep 2011, 15:07
Thanks Oleg. I'm avoiding adding any custom JavaScript into my webapp right now because the customer does not have anyone who will be able to maintain this going forward. I'll let them decide and will try your code if they say that the Ajax support is a must-have.
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome
http://stackoverflow.com/users/346112/jim-tough
Would rather be a Decepticon...
16 Sep 2011, 15:22
Hi Jim
Well, but you encapsulate all stuff in a composite component. This is a quite normally component like PrimeFaces one. Almost
I'm avoiding adding any custom JavaScript into my webapp
Well, but you encapsulate all stuff in a composite component. This is a quite normally component like PrimeFaces one. Almost
PrimeFaces 3.5.x, Mojarra 2.1.23, JBoss 7.x, Kubuntu 12.04, Windows 7, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/
07 Apr 2012, 16:30
Hey,
Really nice solution great!! and nice work in primfaces extension...
Im trying to implement your solution and I include your code as tag but nothing shows up, any advice? and could you please paste how can I call p:remotecomand ??
Thanks un advance
Really nice solution great!! and nice work in primfaces extension...
Im trying to implement your solution and I include your code as tag but nothing shows up, any advice? and could you please paste how can I call p:remotecomand ??
Thanks un advance
7 posts
• Page 1 of 1