-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi Everybody,
Someone knows how is it possible to apply a mask in a Textbox that is being rendered by a Java Class, and not by a .zul file?
The examples in www.zkoss.org just show how to do this using a .zul file.
Regrads.
Hi rodkruger,
You can refer to the following demo
http://www.zkoss.org/zkdemo/effects/form_effect
and move the javascript to java and invoke by widgetlistener
tb.setWidgetListener("onBind", "jq(this).mask('(999) 999-9999');");
Hi Jimmyshiau,
I've tried the way you've suggested but it's not working for me. The screen gets locked with that "Processing" message after composing the Window.
What's wrong with my code?
**I've tried the demo code from http://www.zkoss.org/zkdemo/effects/form_effect in my machine and the same problem was noticed, the screen gets locked with the "Processing" message.
public class InputMask extends GenericForwardComposer{ Window wMask; @Override public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp); //Adding the window components Hbox box = new Hbox(); Textbox phone = new Textbox(); phone.setId("phone"); box.appendChild(new Label("Phone:")); box.appendChild(phone); wMask.appendChild(box); //Loading the mask input script Script loadMask = new Script(); loadMask.setSrc("/widgets/effects/form_effect/maskedinput-1.2.2.min.js"); loadMask.setDefer(true); wMask.appendChild(loadMask); phone.setWidgetListener("onBind", "jq(this).mask('(999) 999-9999');"); } }
and my zul file:
<zk> <window id="wMask" title="Hello World!!" border="normal" width="200px" apply="InputMask"> </window> </zk>
gyowanny,
Often when the screen locks up with the "Processing" message, it is due to an issue with JavaScript. Since you are indeed using a zul file, I'd suggest making the following changes:
composer
import org.zkoss.zk.ui.util.GenericForwardComposer; public class InputMask extends GenericForwardComposer{ Window wMask; public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp); //Adding the window components Hbox box = new Hbox(); Textbox phone = new Textbox(); phone.setId("phone"); box.appendChild(new Label("Phone:")); box.appendChild(phone); wMask.appendChild(box); phone.setWidgetListener("onBind", "jq(this).mask('(999) 999-9999');"); } }
zul
<zk> <?script type="text/javascript" src="/widgets/effects/form_effect/maskedinput-1.2.2.min.js"?> <window id="wMask" title="Hello World!!" border="normal" width="200px" apply="InputMask"> </window> </zk>
Hope that helps,
Todd
Gyo,
It runs fine for me. I suspect your issue is the the src attribute of the <?script?> tag. My sense is that ZK is not finding the JavaScript file.
if I deliberately misdirect the src in my <?script?> tag (e.g. mess up the path), I can get the screen to lock up like you are talking about.
I would suggest you run the screen and then, in the browser, right click and choose View Page Source. Once you see the rendered source, you should see a hyperlink to what it thinks is the "maskedinput" Javascript file. Click on that hyperlink and if you don't see true JavaScript code, that is the problem.
One last thing, I have been under the assumption that you are running ZK 5 or above. If that is not the case, then we have a whole other issue.
Hope that helps,
Todd
Gyo,
To my knowledge the masked input script is an external one - not included as part of ZK.
All you have to do is download the script and put it into an appropriate place in your project. Then simply modify your src attribute for the right path.
You can find the script here. Just choose the version you want - uncompressed or minified - and you should be set.
Regards,
Todd
Yeah, that's right!
I thought ZK has embedded the scripts in the framework but I was wrong, that's why things didn't work for me.
And I was able to load up the scripts from Java code.
PS: The trick is that we need to pass the component's UUID to the JQuery.
Check it out:
public class InputMask extends GenericForwardComposer{ Window wMask; Textbox phone; @Override public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp); //montando a tela Hbox box = new Hbox(); phone = new Textbox(); phone.setId("phone"); box.appendChild(new Label("Phone:")); box.appendChild(phone); wMask.appendChild(box); //Loading the js scripts (Jquery and maskedinput as well) Script loadJQuery = new Script(); loadJQuery.setSrc("jquery-1.3.2.js"); Script loadMask = new Script(); loadMask.setSrc("jquery.maskedinput-1.2.2.js"); //Adding scripts to the Window component wMask.appendChild(loadJQuery); wMask.appendChild(loadMask); //Applying the mask to the Phone field throuhg onBind event. phone.setWidgetListener("onBind", "jQuery('#"+phone.getUuid()+"').mask('(99) 999-9999');"); } }
and the zul file
<?page title="Auto Generated index.zul"?> <zk> <window id="wMask" title="Hello World!!" border="normal" width="200px" apply="com.gyo.InputMask"> </window> </zk>
Thanks a lot for your help.
Gyo
Good sample Gyo.
Please can you told us in which folder you save the js file.
thx
Stephan
Asked: 2011-09-21 20:24:03 +0800
Seen: 1,224 times
Last updated: May 20 '14