JSF format an h:inputText while typing - jsf

I'm constructing a page with pure JSF.
On that page I've some field for dates... but I don't need a date picker. So I used an <h:inputText>
This is working when I type a valid date like 01/01/1970. But I need to type the "/".
I want to put some mask on this input. How can I do that?

You'll want to use jQuery or a JSF component library like Primefaces.
With Primefaces inputMask, you can do this
<p:inputMask id="date" value="#{maskView.date}" mask="99/99/9999"/>
Alternatively, if using jQuery, the jQuery Mask plugin provides similar functionality. It is used by simply locating the input element, then applying the mask() javascript function
$(document).ready(function(){
$('.date').mask('00/00/0000');
});
If Primefaces and jQuery are not options, plain Javascript can always be used. A bit of warning thought, using plain JS for this will require a lot of work.

Solved with plain JS...
Added <f:ajax event="keypress" onevent="formatDate(this)"/> on inputText
and the function
function formatarData(obj) {
if (obj.value.length == 2 || obj.value.length == 5) {
obj.value += "/";
}
return;
}

Related

Add target property for dropdownnode in Widget Container

I would like to add a target (e.g. _blank) property for a basicLeafNode on the Widget Container from the extension library.
I do not see the property for this.
Instead I could use the onClick property and return an URL. But then I still would have no target defined.
I could add a postScript method
var target = url;
view.postScript("window.open('"+target+"','_blank')")
but this fires when the container is loaded.
Can I add a target property without using the onClick Property?
In case I use the onClick property what method should I use or how I prevent the postscript is executed when the container is loaded?
The basicLeafNode doesn't currently provide a target property. You have 2 courses of action:
implement your own custom node as Michael suggested (hard)
use a class on the link e.g. "newpageopen" and add an onPageReady script that selects all a elements with the calss newpageopen and add the target property to the resulted HTML.
Something like this:
require(["dojo/ready","dojo/query"], function(ready){
ready(function(){
dojo.query("a.newpageopen").attr("target", "_blank");
});
});
Hope that helps;
To make this list of solutions a bit longer here another on wich does not require dojo or jquery:
Instead of using your code as SSJS like:
var target = url;
view.postScript("window.open('"+target+"','_blank')")
You can use the Client Side Code and add SSJS code in #{javascript:}' wich i think is the shortest solution on this Problem. Here a hardcoded example:
<xe:basicLeafNode>
<xe:this.onClick><![CDATA[window.open('#{javascript: return "http://www.google.com";}','_blank');]]></xe:this.onClick>
</xe:basicLeafNode>
the above example will also work with viewScope variables or SSJS funktions:
<xe:basicLeafNode>
<xe:this.onClick><![CDATA[window.open('#{javascript: return viewScope.url;}','_blank');]]></xe:this.onClick>
</xe:basicLeafNode>
You can add the target attribute using JavaScript. It's kind of inconvenient way but would work.
You can use dojo.query to query the HTML output generated by basicLeafNode on the Widget Container. Once you get the node of <a> then you can add attribute using dojo.attr.
One problem you might face is that the ID generated by XPages contains the character :, which will not work so you would have to escape it.
function escapeColon(controlID) {
return controlID.replace(/:/g, "\\3A");
}
So your code would be something like:
dojo.addOnLoad(function() {
dojo.attr(dojo.query(escapeColon("#{id:ID_of_basicLeafNode}") + " > a")[0], "target", "_blank");
});
The code escapeColon("#{id:ID_of_basicLeafNode}") + " > a" would generate a CSS selector. Here I am assuming that basicLeafNode on the Widget Container would generate something like this <div id="_id1:basicLeafNode"><a href=".... So the CSS selector would search for a tag with that ID and inside it the <a> tag. You would have to modify this based on the output that is generated.
As I said its a bit inconvenient. Also I haven't tested this code.

script not executing in jsf

I am using an ajax request for autocomplete in jsf, I want the autocomplete suggestions to disappear once I click at any other point in website.
I am using onblur, and calling script for to change the display to none, but the script does not appear to be working.
this is the autocomplete code in my xhtml:
<rich:autocomplete id="test" required="true" onblur="hidebox()" requiredMessage="Field is blank" mode="cachedAjax"
minChars="3" value="#{action.do.testmethod}" autocompleteMethod="#{action.autocomplete}">
</rich:autocomplete>
this is the hidebox code:
<script type="text/javascript">
function hidebox() {
alert("Test");
document.getElementById('test').style.display = "none";
}
</script>
The actual id of the element is not test. JSF composes the ID (probably it will be [formId]:test) to avoid ids being repeated (more so when used in tables, lists, etc.).
You can try to do document.getElementById('[formId]:test').... You can use your browser inspector utilities to check the actual Id, if you are not sure of what [formId] is. And you can just do onblur="hidebox(this)" and use directly the object in the JS function.

Use the value entered in a JSF page for Java Applet

I have created a JSF page which asks the user to enter a value, and this value is being processed via Applet and create a barcode image based on the inputted value. My problem is how can i get the value from the JSF Page and use it in my Applet.. Thanks!
Use JavaScript. E.g.
<h:inputText ... onchange="updateBarcodeApplet(this.value)" />
...
<applet id="barcodeApplet" ...></applet>
with this JS
<script>
function updateBarcodeApplet(value) {
var barcodeApplet = document.getElementById("barcodeApplet");
barcodeApplet.updateValue(value);
}
</script>
and in Applet
public void updateValue(String value) {
// Do your business here.
}
(yes, all Applet's public methods are just available as is in JS)
Needless to say, using an applet for this job is pretty clumsy. Not all clients support or even appreciate applets. I'd also opt for a simple <img> element with a servlet which returns the image as suggested by Denisk. You just have to update the <img src> by JSF or JavaScript.
Why do you do it in a hard way? You don't really want an applet here, create the image on server, serialize it to response stream and display it as plain image.

Input field like stackOverflow tags input field

I am using primefaces with JSF. I need a input component that allows users to submit upto 5 tags in a single input field just like the tags input field on stackOverflow. There must be also a functionality to suggest the tags(as the user starts typing) as it is available here.
I couldnt figure out a way to do so using Primefaces components. What could be a better way to achieve that ?
You can use jquery Autocomplete plugin for your purpose.
Example for you :
<script type="text/javascript">
$(document).ready(function () {
$("#myID").autocomplete('/Urlthatreturns/results', { multiple: true,
multipleSeparator: "," }).result(function (event, item) {
});
});
</script>
You could use Primefaces Multiple Selection AutoComplete. It will fit your needs.

Is there any JSF or Primefaces Photo tagger component?

Is there any built-in component for facebook like photo-tagging in JSF(Preferably in Primefaces). Or will it be in near future? I have googled a lot but found nothing -- I found a lot of jQuery photo taggers, but I am not good at jQuery, I am unable to submit tag values to the JSF in jQuery.
Well you could use the jQuery-photo-tagger (believe me, it's worth looking into jQuery) and use the PrimeFaces Ajax-API to make your ajax-calls. The basic functionality is:
PrimeFaces.ajax.AjaxRequest(url, config, parameters);
A little more complex example would be:
PrimeFaces.ajax.AjaxRequest(‘/myapp/createUser.jsf’,
{
formId:’userForm’,
,source:’userForm’
,process:’userForm’
,update:’msgs’
oncomplete:function(xhr, status) {alert(‘Done’);}
},
{
‘param_name1’:’value1’,
‘param_name2’:’value2’
}
);
For more information you can have a look at the User Guide: http://primefaces.org/documentation.html (starting from page 420)

Resources