0

Creating a file chooser dynamically

asked 2010-07-15 05:54:10 +0800

daykinr gravatar image daykinr
21 1

Hi everyone,

I have a scenario where in some cases, I will be creating a file browser similar to Java's File Chooser dynamically from the code. There is a way to do this in the zul file itself, e.g.:

1) Add 'xmlns:h="http://www.w3.org/1999/xhtml"' as an attribute of the window.
2) Add '<h:input type="file" />' within the window.

However, I am unsure how to create this dynamically through the code. The ZK Input class does not support a type of file.

Another option would be the Fileupload class, which unfortunately includes Upload and Cancel buttons. Is it possible to set the template via the controller class, and what is the format of the template? I was hoping it would be enough to hide those two buttons by setting their visibility.

As a last resort, should it be possible to insert a macro component programmatically? This was a further option but it does not seem effective.

Any advice appreciated!

delete flag offensive retag edit

9 Replies

Sort by » oldest newest

answered 2010-07-17 10:33:07 +0800

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

Hi daykinr
I create a sample for create element dynamically

<zk>

	<window id="win" border="none" width="300px">
	</window>
	<button label="add file upolad">
		<attribute name="onClick"><![CDATA[
			Executions.createComponentsDirectly("<input xmlns=\"http://www.w3.org/1999/xhtml\" type=\"file\"/>","zul",win,null);
		]]></attribute>
	</button>
</zk>


link publish delete flag offensive edit

answered 2010-07-17 13:45:32 +0800

mikelara gravatar image mikelara
144
www.mextisa.com.mx

why don´t you try the zk Fileupload component?

link publish delete flag offensive edit

answered 2010-07-17 22:29:55 +0800

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

Yes you can change the template

Fileupload.setTemplate("templateURL")

and the sample in zul.jar\archive\web\zul\html\fileuploaddlg.zul

link publish delete flag offensive edit

answered 2010-07-19 05:13:06 +0800

daykinr gravatar image daykinr
21 1

Many thanks for your help on this.

My issue was that I didn't know what kind of widget was needed until runtime. The user would select a particular class type and my code would then read the annotations from that class in order to select what widgets were needed (textbox, intbox, combobox etc). Therefore all widget manipulation had to be done in the Java class file rather than in the zul file.

I had managed to get the macro to work but I think your solution (Executions.createComponentsDirectory) will be better.

My remaining problem is that when I attempt to retrieve the input field via the code, using autowiring, it gives me an Input object. However, this has no getText() method and getValue() returns an empty string, no matter what is present in the input field. Do you know how to retrieve the text from an HTML Input widget from the code?

Thanks again for your help! It's much appreciated.

link publish delete flag offensive edit

answered 2010-07-19 21:01:50 +0800

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

updated 2010-07-19 21:02:22 +0800

I create a sample
it can be retrieve at client side, so you shall send the value to server side

<zk>
	<zscript><![CDATA[
		Component comp;
	]]></zscript>
	<window id="win" border="none" width="300px">
	</window>
	<button label="add file upolad">
		<attribute name="onClick"><![CDATA[
			comp = Executions.createComponentsDirectly("<input xmlns=\"http://www.w3.org/1999/xhtml\" type=\"file\"/>","zul",win,null);
		]]></attribute>
	</button>
	<button id="btn" label="get text" onUser='alert(org.zkoss.lang.Objects.toString(event.data));'>
		<attribute name="onClick"><![CDATA[
			if (comp == null) return;
			String script = "zAu.send(new zk.Event(zk.Widget.$('$btn'), 'onUser', jq('"+comp.getUuid()+"',zk)[0].value));";
			Clients.evalJavaScript(script);
		]]></attribute>
	</button>
</zk>

but the value of the input file seems just got the file name

link publish delete flag offensive edit

answered 2010-07-20 10:30:08 +0800

daykinr gravatar image daykinr
21 1

Thanks for that. Am I right in thinking that it has to run against ZK 5.0.3?

link publish delete flag offensive edit

answered 2010-07-20 10:42:11 +0800

daykinr gravatar image daykinr
21 1

Brilliant, I upgraded to 5.0.3 and am now able to see get the text from the input box. Will look at doing this from a Java class. Thanks!

link publish delete flag offensive edit

answered 2010-11-03 21:14:51 +0800

joredva gravatar image joredva
69

Hi
Please help

I tried to get de full path of a file selected for a user
I tried with this codes

<textbox id="exportlabel" value="" width="100%" visible="false"/>
<h:input id="exportfile" type="file" size="50" zk:onChange="exportlabel.value=self.value"/>

<textbox id="exportlabel" value="defaultpath" />
<h:input id="fup" type="file" onchange="$e('${exportlabel.uuid}').value = this.value;$e('${exportlabel.uuid}').focus()" />

I my java class how can i get de file path

Thanks

link publish delete flag offensive edit

answered 2010-11-04 20:57:44 +0800

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

<button id="btn" label="get text" onUser='alert(org.zkoss.lang.Objects.toString(event.data));'>

You can get it in onUser event.

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: 2010-07-15 05:54:10 +0800

Seen: 1,237 times

Last updated: Nov 04 '10

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