Drag'n'Drop an draggable item through a form - jsf

I currently have two form:
The first for my Favorite Menu
The second for my Standard Menu.
Look like this :
<ui:define name="favoris">
<h:form id="favForm">
<script type="text/javascript">
function initDND() {
$(".draggable_item").draggable({ revert: true, helper: "clone" });
}
$(function(){
initDND();
});
</script>
<p:remoteCommand name="activeDraggableFavoris" actionListener="favorisBean.menuModel" oncomplete="initDND()" />
<p:tieredMenu model="#{favorisBean.menuModel}" id="panelMenu"
style="width:198px" />
</h:form>
</ui:define>
Standard Menu code look similar than Favoris Menu.
I want to drag my Item of my Standard Menu to my Favorite Menu to set it.
Is this possible for a draggable Item to through over a form?

Related

How to move a primefaces iframe lightbox?

I have to make a draggable/moveable lightbox iframe
lightBox code:
<p:lightBox id="draggable" iframe="true" width="910px" height="500px" style="overflow:none" widgetVar="dlg" iframeTitle="flight">
<h:outputLink value="/airProject/flightBooking.xhtml" title="flight" styleClass="LinkButton">
</h:outputLink>
</p:lightBox>
Tried this(for moving)
<p:draggable for="draggable" />
and also this too:
<script type="text/javascript">
$(function() {
$( "#draggable" ).draggable();
});
</script>
But these are moving button not iframe popup. So how do drag/move the iframe lighbox popup as we move p:dialog?
Assuming your lightBox's widgetVar is: lightBoxWV
<script type="text/javascript">
$(function() {
PF('lightBoxWV').panel.draggable()
});
</script>
Hope this helps.

Popup helpful message before selecting from h:selectOneMenu in JSF

I am using JSF and I have an h:selectOneMenu which is populated using f:selectItems from a backing bean. I would like to display a helpful message for each option in the h:selectOneMenu. This message will come from a bean too and it will be different for each option. I want to do that while the user navigates between the options and before selecting the options that he wants. The idea is to help the user decide what to select. In other words I want something very similar to “title” attribute of component but more fancy and powerful than this. Specifically I want something like a small popup window which allows unlimited number of characters. Is this possible? Do you have any idea as to how to proceed? Is there any JSF library that can help me do this?
I found this link ToolTip for each SelectOneMenu Items in jsf but it is not helpful for me because first of all it uses the “title” attribute and secondly the message does not come from a backing bean.
Thanks in advance!
As BalusC mentioned, you can just use Primefaces, and here is a sample code using the PowerTip jQuery plugin:
<p:selectOneMenu id="users" converter="userConverter" var="u">
<f:selectItems value="#{userManagedBean.users}" var="user" itemLabel="#{user.firstName}" itemValue="#{user}"/>
<p:column >
<span customData="#{u.emailOrAnyOtheInfoYouWantToDisplayInTooltip}" class="aClassForTooltips">
<h:outputText value="#{u.firstName} - #{u.lastName}" />
</span>
</p:column>
And on the jQuery part:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h:outputScript name="js/jquery.powertip.min.js" />
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function () {
jQuery('.aClassForTooltips').each(function(){
var elementToH = jQuery(this),
data = elementToH.attr('customdata').replace(/%20/g,' ');
elementToH.data('powertip', function() {
return '<div style="background-color:black;width:200px;height:25px">'+data+'.</div>';
});
///////
elementToH.powerTip({
placement: 'ne' // north-east tooltip position
});
//////
});
});
Notice the use of a custom attribute in the span element. This attribute is ignored by JSF renderers if used with any JSF component, that's why you need a span.
Finally do not forget to include at least this CSS:
#powerTip {
position: absolute;
display: none;
z-index: 2147483647;
color:red;
}
I hope this helps

How to create a button in JSF page with custom label

I have this simple JSF button:
//Question Dialog
function deletedialog(button, a){
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
$("#form\\:deleterow").click();
// $('input[id$="deleterow"]').click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form"></f:ajax>
</h:commandButton>
<!-- the delete button -->
<h:button onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" >
<h:graphicImage name="small-hover.png" library="images" title="Delete" />
</h:button>
I want to create png image which will be the visual body of the button. The only thing that I will change will be the title of the button which I will set every time using the value attribute of the button. Is this possible? Now when I load the JSF page I see only empty button without label.
P.S 1 I get this result:
Use a command link that will wrap your image:
<script type="text/javascript">
function deletedialog(button, a) {
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
//$("#form\\:deleterow").click();
//using the hidden button click
document.getElementById('myForm:deleterow').click();
// $('input[id$="deleterow"]').click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
</script>
<h:form id="myForm">
<h:commandLink onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;">
<h:graphicImage name="small-hover.png" library="images"
title="#{someBean.imageTitle}" />
</h:commandLink>
<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form" />
</h:commandButton>
</h:form>
Also, there is a good example of <h:graphicImage/> in mkyong site.
Based on your comments, it looks like you want to have a button with an icon. Also, the real action is performed by your hidden <h:commandButton>. so I recommend you to read this answer:
HTML / CSS How to add image icon to input type=“button”?
Your code would be like this:
<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form" />
</h:commandButton>
<button type="submit" onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;"><img src="resources/images/small-hover.png" /> Delete</button>
Yes, you can mix basic HTML with JSF code, but read the link warning about this implementation on IE 6 browser clients.
I'd start from basics. Since you don't even see an image, when you right click on the browser window, and select 'view source' does it provide any meaningful information on whether the image is even being inserted onto the page? If you don't have the image path correct, it won't render the image on the page. That is the first thing to check and try to correct. (i.e. is the computer plugged in).

Using CKEditor instead of PrimeFaces Editor

I am trying to use CKEditor in my JSF application. How to get the content of CKEditor into backing bean..?
index.xhtml
<form action="" method="post">
<p>
My Editor:<br />
<textarea cols="90" rows="20" id="editor1" name="editor1" value="#{EditorBean.value}"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
uiColor: '#85B5D9'
});
</script>
<input type="button" value="Clear" name="clear" onclick="clear1()"/>
</p>
</form>
BackingBean
#ManagedBean
public class EditorBean {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
System.out.println("Content: "+value);
}
}
When I tried to print the value, It is not printing. Help me on this issue. PrimeFaces Editor is not supporting "Insert Table" function. So, I want to use CKE.
As el wont be able to evaluate non-JSF component.
Add this to your page :
<h:inputHidden value="#{EditorBean.value}" id="editorValue"/>
and onblur of editor textarea assign the value to the hidden element using
document.getElementById(editorValue).value = this.value;
Since this question bumped up somehow....
There is another option:
You can use the PrimeFaces Extensions , here is the link PrimeFaces Extensions CKEditor
Here an example from the showcase
<p:growl id="growl" showDetail="true" />
<pe:ckEditor id="editor" value="#{editorController.content}" interfaceColor="#33fc14">
<p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/>
</pe:ckEditor>
<p:commandButton actionListener="#{editorController.changeColor}" update="editor"
value="Change color with AJAX" style="margin-top:10px;"/>
try this:
<textarea class="ckeditor" cols="80" id="editor1" rows="10"/>
<h:inputHidden value="#{tskCtrl.selected.dsc}" id="editorValue"/>
<p:commandButton onclick="document.getElementById('editorValue').value = CKEDITOR.instances.editor1.getData();" action="#{tskCtrl.create()}" value="Post" />
The answer from niksvp was helpful and set me in the right direction, but
the problem I found was that the blur handler never fires. I had to copy
the value from the textarea to the inputHidden on the onclick handler of
the commandButton:
<textarea id="textareaValue" .../>
<a4j:commandButton execute="editorValue" onclick="document.getElementById('editorValue').value = document.getElementById('textareaValue').value;"
...
or
<a4j:commandButton execute="editorValue" onclick="jQuery('#editorValue').val(jQuery('#textareaValue').val())"
I tried using onbegin & onbeforedomupdate but they didn't work.
Another option is to use the JSF versions of form and textarea. (It is likely possible to do this with passthrough elements as well, but I didn't try that.)
<h:form id="form">
<p>
My Editor:<br />
<h:inputTextarea cols="90" rows="20" id="editor1" value="#{EditorBean.value}" />
<script type="text/javascript">
ClassicEditor.create(document.querySelector('form\\:editor1'))
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</p>
</form>
This assumes that you do not have prependId=false.
The weird \\: is an escaping issue. It won't work without that. You'd get the "is an invalid selector" error in the console.
You can ID form and editor1 with other names, but you'll need to change the selector as well. You don't want to leave it to the defaults, as those are fragile, often changing as you update the page. Now it will only change if you change the structure of where editor1 is relative to form. E.g. if you add a fieldset around editor1, that would make the ID something like form\\:fieldset\\:editor1, where fieldset is the ID of the fieldset as specified in JSF. JSF will create the long version for you.
This also requires the CKEditor script to be added to the head, e.g.:
<script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
This particular example is for the ClassicEditor version. If you want a different version, you'd need to change the script and the part that says ClassicEditor.
Differences between the script as called in the question and this version may be that this is the current version (as I write this) while the question is older.
Alternately, you might prefer to use h:outputScript. But then you might need to host the script in your resources folder rather than using the version from the CDN.
See also:
Is the ID generated by JSF guaranteed to be the same across different versions and implementations?
Select element with double dot in id, error: “#octo:cat” is not a valid selector
Acquire full prefix for a component clientId inside naming containers with JSF 2.0
How to find out client ID of component for ajax update/render? Cannot find component with expression “foo” referenced from “bar”
How to include JavaScript files by h:outputScript?

Show a piece of text only when mouseover a certain region

I need to show a outputText component only when the mouse is over a panel region. How can I achieve that ?
I tried using show() & hide() js functions with onmouseover event on panel but failed to achieve results.
If i understood correctly
<script>
$(document).ready(function(){
$("#something").mouseover(function (){
$("#myText").show();
})
$("#something").mouseout(function (){
$("#myText").hide();
}
)}
);
And your Panel
<p:panel id="something" >
<h:outputText id="myText" styleClass="hidden" value="hi i am hidden when is mouse is somewhere"/>
</p:panel>

Resources