0

Listbox and old mechanism databinding

asked 2012-11-05 10:26:00 +0800

giga gravatar image giga
96

updated 2012-11-05 12:27:22 +0800

Hello everyone,

We developed a web application using the ZK version 3.6.4 enterprise edition and now we changed to version 6.5 professional edition.
We just had to change the pages layout and some minor tweaks.
However, we are using the old databinding mechanism and we don´t have the same control on the listbox.
Everytime we add or update a record to the listbox the item appears selected in the screen despite the selected item being null because after the operation of add or update because we clear everything.

Does anyone had this issue before?

delete flag offensive retag edit

14 Replies

Sort by » oldest newest

answered 2012-11-05 16:58:38 +0800

Steva77 gravatar image Steva77 flag of Italy
1014 3
http://www.research.softe...

Does this mean the new listbox automatically highlights the latest added/updated item?
You delete all information, are you also refreshing the view?

link publish delete flag offensive edit

answered 2012-11-05 20:31:10 +0800

giga gravatar image giga
96

Thanks for your answer.
Yes, it highlights the latest added/updated item, in the previous version that didn´t happen.
I update the model defined in the listbox and the load-after events are all well defined too.
I clear the selected item with null, even if I use clearSelection it still highlights it.

link publish delete flag offensive edit

answered 2012-11-07 01:34:53 +0800

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

Hi giga,
Since ZK6, if you want to control the listbox selection, you need to set selection to model, in your case, you need to clear selection from model, please refer to the following link
http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/Model/List_Model#Selection

link publish delete flag offensive edit

answered 2012-11-07 10:27:44 +0800

giga gravatar image giga
96

updated 2012-11-07 10:29:28 +0800

So you´re saying I should not use selected item binded?

<listbox id="salasBox" multiple="false" rows="5" fixedLayout="true" model="@{salasCentroFormacaoWindow$composer.salas, load-after='addSala.onClick, deleteSala.onClick, updateSala.onClick, salasBox.onSelect'}" 
	selectedItem="@{salasCentroFormacaoWindow$composer.salaSelected, load-after='limparDadosSala.onClick'}" forward="onSelect=onSelectDisableAddButton" emptyMessage="Sem salas adicionados" >
		<listhead sizable="true">
			<listheader label="Identificação" width="300px" ></listheader>
			<listheader label="Área" width="100px" ></listheader>
			<listheader label="Lotação" width="100%" ></listheader>
		</listhead>
		<listitem self="@{each='sala'}" value="@{sala}">
			<listcell label="@{sala.nmSala}" ></listcell>
			<listcell label="@{sala.numAreaOcupada}" ></listcell>
			<listcell label="@{sala.numLotacao}" ></listcell>
		</listitem>
	</listbox>/code]

link publish delete flag offensive edit

answered 2012-11-07 10:51:41 +0800

giga gravatar image giga
96

Here´s the zul code:

<listbox id="salasBox" multiple="false" rows="5" fixedLayout="true" model="@{salasCentroFormacaoWindow$composer.salas, load-after='addSala.onClick, deleteSala.onClick, updateSala.onClick, salasBox.onSelect'}" 
selectedItem="@{salasCentroFormacaoWindow$composer.salaSelected, load-after='limparDadosSala.onClick'}" forward="onSelect=onSelectDisableAddButton" emptyMessage="Sem salas adicionados" >
		<listhead sizable="true">
			<listheader label="Identificação" width="300px" />
			<listheader label="Área" width="100px" />
			<listheader label="Lotação" width="100%" />
		</listhead>
		<listitem self="@{each='sala'}" value="@{sala}">
			<listcell label="@{sala.nmSala}" />
			<listcell label="@{sala.numAreaOcupada}" />
			<listcell label="@{sala.numLotacao}" />
		</listitem>
	</listbox>
	
	<separator />
	
	<groupbox closable="false" visible="@{salasCentroFormacaoWindow$composer.editVisible}" >
		<caption label="Sala" />
			<grid fixedLayout="true" style="border:none" width="760px" >
				<columns>
					<column width="100px"/>
					<column width="300px"/>
				</columns>
				<rows>
					<row style="background-color:white;border:none" >
						<label value="Identificação *"/>
						<textbox use="com.logica.imtt.scp.zul.ScpTextBox" id="nomeSala" maxlength="50" cols="50" value="@{salasCentroFormacaoWindow$composer.salaCurrent.nmSala, save-when='addSala.onClick, updateSala.onClick, limparDadosSala.onClick', load-after='addSala.onClick, updateSala.onClick, deleteSala.onClick, limparDadosSala.onClick, salasBox.onSelect'}" constraint="no empty:Insira a identificação sala" width="250px"/>
					</row>
					<row style="background-color:white;border:none" >
						<label value="Área *"/>
						<textbox id="areaSala" maxlength="9" cols="9" value="@{salasCentroFormacaoWindow$composer.salaCurrent.numAreaOcupada, save-when='addSala.onClick, updateSala.onClick, limparDadosSala.onClick', load-after='addSala.onClick, updateSala.onClick, deleteSala.onClick, limparDadosSala.onClick, salasBox.onSelect'}" constraint="no empty, /[1-9]\d*/:Insira a área da sala" width="150px"/>
					</row>
					<row style="background-color:white;border:none" >
						<label value="Lotação *"/>
						<textbox id="lotacaoSala" maxlength="9" cols="9" value="@{salasCentroFormacaoWindow$composer.salaCurrent.numLotacao, save-when='addSala.onClick, updateSala.onClick, limparDadosSala.onClick', load-after='addSala.onClick, updateSala.onClick, deleteSala.onClick, limparDadosSala.onClick, salasBox.onSelect'}" constraint="no empty, /[1-9]\d*/:Insira a lotação da sala" width="150px"/>
					</row>
				</rows>
			</grid>
	                        
		<separator/>
							        
		<button label="Adicionar" id="addSala" forward="onClick=onAddSala" disabled="@{salasCentroFormacaoWindow$composer.adicionarSalaDisable, load-after='updateSala.onClick, deleteSala.onClick, limparDadosSala.onClick, salasBox.onSelect'}"/>
		<space width="5px" />
		<button label="Actualizar" id="updateSala" forward="onClick=onUpdateSala" />
		<space width="5px" />
		<button label="Eliminar" id="deleteSala" forward="onClick=onDeleteSala" />
		<space width="30px" />
		<button label="Limpar" id="limparDadosSala" forward="onClick=onLimparDadosSala" />
	                         
	</groupbox>

Here´s the controller code:

public void onSelectDisableAddButton() {
		if ( salasBox.getSelectedItem() != null ) {
			
			setAdicionarSalaDisable( true );
			
			if ( getSalaCurrent() == null ) {
				setSalaCurrent( new SalaVO() );
			}
			
			getSalaCurrent().setIdSala( getSalaSelected().getIdSala() );
			getSalaCurrent().setIdSalaOriginal( getSalaSelected().getIdSalaOriginal() );
			getSalaCurrent().setNmSala( getSalaSelected().getNmSala() );
			getSalaCurrent().setNumAreaOcupada( getSalaSelected().getNumAreaOcupada() );
			getSalaCurrent().setNumLotacao( getSalaSelected().getNumLotacao() );
			getSalaCurrent().setFlEstado( getSalaSelected().getFlEstado() );
			
		}
	}
	
	
	public void onAddSala() {
		if ( isEditVisible() && !isAdicionarSalaDisable() ) {
			
			if ( getSalaCurrent() == null ) {
				setSalaCurrent( new SalaVO() );
			}
			
			getSalaCurrent().setNmSala( nomeSala.getValue() );
			getSalaCurrent().setNumAreaOcupada( Long.parseLong( areaSala.getValue() ) );
			getSalaCurrent().setNumLotacao( Long.parseLong( lotacaoSala.getValue() ) );
			
			getSalas().add( getSalaCurrent() );
			salasBox.setAttribute( "salas", getSalas() );
			setSalaCurrent( null );
		}
	}
	
	
	public void onUpdateSala() {
		if (isEditVisible()) {
			
			if (salasBox.getSelectedItem() != null) {
				
				getSalaSelected().setIdSala( getSalaCurrent().getIdSala() );
				getSalaSelected().setIdSalaOriginal( getSalaCurrent().getIdSalaOriginal() );
				getSalaSelected().setNmSala( getSalaCurrent().getNmSala() );
				getSalaSelected().setNumAreaOcupada( getSalaCurrent().getNumAreaOcupada() );
				getSalaSelected().setNumLotacao( getSalaCurrent().getNumLotacao() );
				
				salasBox.setAttribute( "salas", getSalas() );
				setAdicionarSalaDisable( false );
				setSalaSelected( null );
				setSalaCurrent( null );
				
			}
			
		}
	}
	
	
	public void onDeleteSala() {
		if ( isEditVisible() ) {
			
			if ( salasBox.getSelectedItem() != null ) {
				
				getSalas().remove( salasBox.getSelectedItem().getValue() );
				
				salasBox.setAttribute( "salas", getSalas() );
				setAdicionarSalaDisable( false );
				setSalaSelected( null );
				setSalaCurrent( null );
				
			}
			
		}
	}
	
	
	public void onLimparDadosSala() {
		setAdicionarSalaDisable( false );
		setSalaSelected( null );
		setSalaCurrent( null );
	}

This is the model definition:


public class SalaVO {

	private Long idSalaOriginal = null;
	private Long idSala = null;
	private String nmSala = null;
	private Long numAreaOcupada = null;
	private Long numLotacao = null;
	private String flEstado = null;
	
	
	public SalaVO() {
	}
	
	public SalaVO( SalaVO sala ) {
		setIdSalaOriginal( sala.getIdSalaOriginal() );
		setIdSala( sala.getIdSala() );
		setNmSala( sala.getNmSala() );
		setNumAreaOcupada( sala.getNumAreaOcupada() );
		setNumLotacao( sala.getNumLotacao() );
		setFlEstado( sala.getFlEstado() );
	}
		
	/**
	 * @return the idSalaOriginal
	 */
	public Long getIdSalaOriginal() {
		return idSalaOriginal;
	}
	/**
	 * @param idSalaOriginal the idSalaOriginal to set
	 */
	public void setIdSalaOriginal(Long idSalaOriginal) {
		this.idSalaOriginal = idSalaOriginal;
	}
	/**
	 * @return the idSala
	 */
	public Long getIdSala() {
		return idSala;
	}
	/**
	 * @param idSala the idSala to set
	 */
	public void setIdSala(Long idSala) {
		this.idSala = idSala;
	}
	/**
	 * @return the nmSala
	 */
	public String getNmSala() {
		return nmSala;
	}
	/**
	 * @param nmSala the nmSala to set
	 */
	public void setNmSala(String nmSala) {
		this.nmSala = nmSala;
	}
	/**
	 * @return the numAreaOcupada
	 */
	public Long getNumAreaOcupada() {
		return numAreaOcupada;
	}
	/**
	 * @param numAreaOcupada the numAreaOcupada to set
	 */
	public void setNumAreaOcupada(Long numAreaOcupada) {
		this.numAreaOcupada = numAreaOcupada;
	}
	/**
	 * @return the numLotacao
	 */
	public Long getNumLotacao() {
		return numLotacao;
	}
	/**
	 * @param numLotacao the numLotacao to set
	 */
	public void setNumLotacao(Long numLotacao) {
		this.numLotacao = numLotacao;
	}
	/**
	 * @return the flEstado
	 */
	public String getFlEstado() {
		return flEstado;
	}
	/**
	 * @param flEstado the flEstado to set
	 */
	public void setFlEstado(String flEstado) {
		this.flEstado = flEstado;
	}
	
}



Maybe it´s easier to see what I´m doing..

link publish delete flag offensive edit

answered 2012-11-07 11:08:43 +0800

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

sample:

BindingListModelList lml = (BindingListModelList) getListBoxArticle().getModel();
lml.getSelection().clear()

link publish delete flag offensive edit

answered 2012-11-07 12:14:15 +0800

giga gravatar image giga
96

Could you provide a sample code?
Because I still can´t solve my problem..

link publish delete flag offensive edit

answered 2012-11-07 14:24:22 +0800

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

updated 2012-11-07 14:27:24 +0800

if you have a reference of your bean salaCurrent you can select them in the model and the selection should appear in the UI.


You can search your bean object with .indexOf() in the model and than select it with myListBox.setSelectedIndex(rowIndex) (only for not db paged data)

int rowIndex = model.indexOf(getSalaCurrent())
myListbox.setSelectedIndex(rowIndex);


only pieces of code how to select in the model. (not the same as you want, yours is two lines on top.

		BindingListModelList lml = (BindingListModelList) getListBoxArticle().getModel();
		setArticles(lml);

		// Now we would select and show the text of the first entry in the list.
		// We became not the first item FROM the listbox because it's NOT
		// RENDERED AT THIS TIME.
		// So we take the first entry from the MODEL (ListModelList) and set as
		// selected.
		// check if first time opened and init databinding for selectedBean
		if (getSelectedArticle() == null) {
			// init the bean with the first record in the List
			if (lml.getSize() > 0) {
				final int rowIndex = 0;
				// only for correct showing after Rendering. No effect as an
				// Event
				// yet.
				getListBoxArticle().setSelectedIndex(rowIndex);
				// get the first entry and cast them to the needed object
				setSelectedArticle((Article) lml.get(0));

				// call the onSelect Event for showing the objects data in the
				// statusBar
				Events.sendEvent(new Event("onSelect", getListBoxArticle(), getSelectedArticle()));
			}
		}

best
Stephan

PS: You will find a lot of well commented stuff in the Zksample2 demo

link publish delete flag offensive edit

answered 2012-11-13 12:16:25 +0800

giga gravatar image giga
96

Thanks for your answers but my problem is not getting the selected item.
My problem is what I have to change in the code provided to make the listbox and its records behave the way I want.
My biggest problem is when I add/update an item to the listbox it automatically highlights it in the listbox like it was selected.

link publish delete flag offensive edit

answered 2012-11-13 13:30:21 +0800

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

updated 2012-11-13 13:32:06 +0800

Ups, sorry. My failure.

try this at last line after your operation.

salasBox.getSelectedItem().setSelected(false);

best
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: 2012-11-05 10:26:00 +0800

Seen: 200 times

Last updated: Nov 15 '12

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