0

How to apply a mask in a Textbox not rendered by a .zul file

asked 2011-09-21 20:24:03 +0800

rodkruger gravatar image rodkruger
3 1

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.

delete flag offensive retag edit

15 Replies

Sort by » oldest newest

answered 2011-10-03 20:22:35 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

updated 2011-10-03 20:23:03 +0800

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');");

link publish delete flag offensive edit

answered 2011-10-04 03:18:15 +0800

RichardL gravatar image RichardL
768 4

Thanks Jimmy, this is helpful for me.

link publish delete flag offensive edit

answered 2011-10-11 12:36:25 +0800

gyowanny gravatar image gyowanny
283 1 2 6

updated 2011-10-11 12:42:52 +0800

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>

link publish delete flag offensive edit

answered 2011-10-11 15:02:54 +0800

twiegand gravatar image twiegand
1807 3

updated 2011-10-11 17:08:47 +0800

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

link publish delete flag offensive edit

answered 2011-10-11 20:38:12 +0800

gyowanny gravatar image gyowanny
283 1 2 6

Hi Twiegand.

Unfortunately it didn´t work too. The screen's still showing up locked.

Any other ideas? lol

Thanks a bunch for your help.

Gyo

link publish delete flag offensive edit

answered 2011-10-12 12:11:37 +0800

twiegand gravatar image twiegand
1807 3

updated 2011-10-12 12:24:39 +0800

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

link publish delete flag offensive edit

answered 2011-10-13 08:55:58 +0800

gyowanny gravatar image gyowanny
283 1 2 6

Man,

You're completely right! The maskedinput-1.2.2.min.js file is not found and I'm using ZK 5 for sure.
Has the script file name changed? Any suggestions?

Thanks

Gyo

link publish delete flag offensive edit

answered 2011-10-13 09:07:54 +0800

twiegand gravatar image twiegand
1807 3

updated 2011-10-13 09:08:21 +0800

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

link publish delete flag offensive edit

answered 2011-10-13 09:23:49 +0800

gyowanny gravatar image gyowanny
283 1 2 6

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

link publish delete flag offensive edit

answered 2011-10-13 15:39:42 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Good sample Gyo.
Please can you told us in which folder you save the js file.

thx
Stephan

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-09-21 20:24:03 +0800

Seen: 1,221 times

Last updated: May 20 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More