0

Ways to realize component for choice from a reference book (as modal window)

asked 2010-10-14 09:18:40 +0800

aponomarenko gravatar image aponomarenko
18 1

Hi, All!

I want to get a component like bandbox but the data whould be present in separate modal window, not in popup window.
So the component contents a textbox and a button, an user clicks this button, the modal window with the data (listbox, for instance) appears, user chooses some row, the window closes and selected data is repesented in the textbox.

Now I'm interested how to realize the component before a moment of opening of the window. It's not a question how to retrieve data and pass selected data into a textbox.

I suppose two following ways:
1) use a bandbox and show the window in onOpen event
2) use a hbox with a textbox and a button and show the window in onClick event of button

In the first case I have the trouble with the empty popup appears when I click the button in bandbox. I.e. I can show the window in onOpen event but the empty popup will blink before it.
In the second case to be honest I have problem with widths of subcomponents.

Maybe someone has implemented a component or functionality similar to. Please share your ideas.

Thanks in advice,
Alexey

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2010-10-14 12:39:34 +0800

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

updated 2010-10-14 12:39:55 +0800

Place an iconed button next the textbox and use one of our searchListBoxes.


Have a look on the three different searchListbox skeletons here.

best
Stephan

link publish delete flag offensive edit

answered 2010-10-15 03:05:05 +0800

aponomarenko gravatar image aponomarenko
18 1

Thanks, Stephan! I'll investigate your link without fail.

I've tried to use a textbox and a button to show search window. But I was been at a loss by components' behaviour concerning their widths.

I won't create new thread, please help with it the one.

In the following code I define the listbox with two columns. In the first column I represent textbox with 100% width, so it ocuppies all space of listcell. In the second column I represent textbox and button inside hbox and I have no any idea how to force to fill listcell by hbox.

<zk>
<listbox id="testListbox" rows="10">
  <listhead>
    <listheader width="40%" label="Column 1" />
    <listheader width="60%" label="Column 2" />
  </listhead>
</listbox>
<zscript>
  <![CDATA[
 	  // data init
 	  List data = new ArrayList();
 	  for (int i; i < 21; i++) {
     	data.add("Option" + i); 
    }

    testListbox.setModel(new ListModelList(data));
    
    testListbox.setItemRenderer(new ListitemRenderer() {
    	public void render(Listitem listitem, Object data) throws Exception {
    		
    		// Column 1
    		Listcell lc1 = new Listcell();

    		Textbox tb1 = new Textbox(data.toString());
    		tb1.setWidth("100%");

    		lc1.appendChild(tb1);
    		listitem.appendChild(lc1);
    		
    		// Column 2
    		Listcell lc2 = new Listcell();
    		
    		Hbox hb = new Hbox();
    		hb.setWidth("100%");
    		
    		Textbox tb2 = new Textbox(data.toString());
    		tb2.setWidth("100%");
    		tb2.setParent(hb);
    		
    		Button b2 = new Button("...");
    		b2.setParent(hb);
    		
    		lc2.appendChild(hb);
    		listitem.appendChild(lc2);
    	}
    });    
  ]]>
</zscript>
</zk>

Thanks in advice,
Alexey

link publish delete flag offensive edit

answered 2010-10-15 04:21:35 +0800

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

updated 2010-10-15 04:26:53 +0800

Hi Alexey,

in my case, i have problems to stretch it to the whole width.

Here are the zul-codes how i do arrange such a textbox/button pair in the hope it can help you:

		<row>
			<label value="${c:l('common.Address')}" />

				<hbox pack="fill">
					<textbox	id="txtb_StockPlace_StockAddress_Matchcode"
							value="@{controller.stockPlace.stockAddress.matchcode}"
							readonly="true" width="100%" />

     				       <separator	spacing="5px" />

					<textbox	id="txtb_StockPlace_StockAddress_City"
							value="@{controller.stockPlace.stockAddress.city}"
							readonly="true" width="100%" />

							<div	align="left">
								
						               <button	id="btnSearchStockAddress" disabled="true" height="24px"
										image="/images/icons/btn_search2_16x16.gif"
										tooltiptext="${c:l('btnSearch.tooltiptext')}" />
							</div>

				</hbox>
		</row>

best
Stephan

link publish delete flag offensive edit

answered 2010-10-15 08:29:41 +0800

aponomarenko gravatar image aponomarenko
18 1

Stephan, thanks anyway, but...

I transformed your solution in pure Java code and it didn't help :(

So I continued to look over variants and have been satisfied by the following solution (value stretch for Hbox's attribute pack, since ZK 5.x only)

...
    		// Column 2
    		Listcell lc2 = new Listcell();
    		
    		Hbox hb = new Hbox();
    		hb.setWidth("100%");
    		hb.setPack("stretch");
    		
    		Textbox tb2 = new Textbox(data.toString());
    		tb2.setWidth("100%");
    		tb2.setParent(hb);
    		
    		Button b2 = new Button("...");
    		b2.setWidth("100%");
    		b2.setParent(hb);

    		lc2.appendChild(hb);
    		listitem.appendChild(lc2);
...

WBW,
Alexey

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-10-14 09:18:40 +0800

Seen: 220 times

Last updated: Oct 15 '10

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