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

answered 2014-05-20 21:23:38 +0800

arturomachuca
11 ● 1

the syntaxys for import scrip in zk is: <script type="text/javascript" src="../js/jquery.maskedinput.js"/>

answered 2012-06-16 02:16:07 +0800

Senthilchettyin
2623 ● 3 ● 8
http://emrpms.blogspot.in...

Thanks a lot to everyone for this post. I have done some changes and make as reusable own component by extending textbox and added as new component in language addon file and referred in zk.xml. Then just like other components, we can use our phone box.

Here is the complete example with source, etc

answered 2012-06-15 14:47:51 +0800

ecellani
24

How make it works on the listbox?

for example:

		Listcell textcell = new Listcell();
		Textbox textbox = new Textbox();
		textbox.setValue(valor);
		textbox.setInplace(true);
		textbox.setWidth(width);
		textbox.setMaxlength(maxlength);
		textbox.setConstraint(constraint);
		textbox.setWidgetListener("onBind", "jQuery('#" + textbox.getUuid() + "').mask('99.999-999');");
		textcell.appendChild(textbox);

answered 2011-10-14 14:28:08 +0800

terrytornado
9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

Thanks Gyo

answered 2011-10-14 09:34:57 +0800

gyowanny
283 ● 1 ● 2 ● 6

Hi Terry,

I saved the files under the WebContent folder of my Eclipse project, that's why I load the scripts only by their names loadJQuery.setSrc("jquery-1.3.2.js");
If you want to have the scripts in a folder say called "js" for example, you'll have loadJQuery.setSrc("js/jquery-1.3.2.js");

I hope that helps

Thanks,

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

terrytornado
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

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

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

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

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

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

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

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

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