Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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?
Does this mean the new listbox automatically highlights the latest added/updated item?
You delete all information, are you also refreshing the view?
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.
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
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]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..
sample:
BindingListModelList lml = (BindingListModelList) getListBoxArticle().getModel(); lml.getSelection().clear()
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
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.
Ups, sorry. My failure.
try this at last line after your operation.
salasBox.getSelectedItem().setSelected(false);
best
Stephan
Asked: 2012-11-05 10:26:00 +0800
Seen: 201 times
Last updated: Nov 15 '12