Listbox item remain selected - zk

I have a bandbox with a Listbox inside.
My Listbox has "onSelect" listener, and inside this i do a myListbox.clearSelection()
after read the value of the selected item and write it on a TextBox.
The problem is, that when I open the bandpopup another time, the selected item in the List remain selected and Marked in blue color, and i can't select the same element twice because it's remain selected.
For example:
Open the Bandpopup.
Clik in a element, the value is written on the Textbox, and then learSelection()" is called.
The user clear the Textbox.
Reopen the Bandpopup.
Click on the same item in the ListBox.
Nothing occurs, because this element remains selected.
The Zul code:
<?page title="Enviar a" contentType="text/html;charset=UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./envioWindow" ?>
<zk>
<window title="Enviar a" border="normal" width="60%" id="envioWindow"
apply="..............">
<bandbox id="sectorReparticionBusquedaSADE" >
<bandpopup apply="XXXXXX.FindSectorReparticionesBusquedaSADEBandboxComposer"
id="sectorReparticionesComboBusquedaSADE" width="650px">
<groupbox mold="3d">
<vbox>
<hbox>
<textbox id="textoSectorReparticionBusquedaSADE" />
</hbox>
<paging id="pagingSectorReparticionesDocsSADE" pageSize="10" />
<listbox mold="paging"
width="600px" id="sectoresReparticionesBusquedaSADEListbox"
model="#{listaSectorReparticionSADESeleccionada}"
selectedItem="#{sectorReparticionSeleccionada}"
paginal="${pagingSectorReparticionesDocsSADE}">
<listhead>
<listheader label="Código" width="30%" />
<listheader label="Nombre" height="70%" />
</listhead>
<listitem self="#{each=reparticion}">
<listcell label="#{reparticion.codigo}" />
<listcell label="#{reparticion.nombre}" />
</listitem>
</listbox>
</vbox>
</groupbox>
</bandpopup>
</bandbox>
<bandbox id="sectorBusquedaSADE" tooltiptext="Ingrese el nombre del sector correspondiente a la repartición seleccionada a la que desea agregar para enviarle un pase múltiple." >
<bandpopup apply="ar.gob.gcaba.ee.satra.pl.consulta.FindSectorBusquedaSADEBandboxComposer"
id="sectorComboBusquedaSADE" width="650px">
<groupbox mold="3d">
<vbox>
<hbox>
<textbox id="textoSectorBusquedaSADE" />
</hbox>
<paging id="pagingSectorDocsSADE" pageSize="10" />
<listbox mold="paging"
width="600px" id="sectoresBusquedaSADEListbox"
model="#{listaSectorSADESeleccionado}"
selectedItem="#{sectorSeleccionado}"
paginal="${pagingSectorDocsSADE}">
<listhead>
<listheader label="Código" width="30%" />
<listheader label="Nombre" height="70%" />
</listhead>
<listitem self="#{each=sector}">
<listcell label="#{sector.codigo}" />
<listcell label="#{sector.nombre}" />
</listitem>
</listbox>
</vbox>
</groupbox>
</bandpopup>
</bandbox>
</window>
</zk>
The listbox "sectoresReparticionesBusquedaSADEListbox" has the problem, the "sectoresBusquedaSADEListbox" don't have this problem, and for me both are equal.

I finally solved this resetting the binder every time thath i open the BandPopup:
private void resetComponent() {
this.binder = new AnnotateDataBinder(sectoresReparticionesBusquedaSADEListbox);
this.binder.bindBean("sectorReparticionSeleccionada", this.sectorReparticionSeleccionada);
this.binder.loadAll();
this.listaSectorReparticionSeleccionada = new ArrayList<ReparticionBean>();
this.binder.bindBean("listaSectorReparticionSADESeleccionada", this.listaSectorReparticionSeleccionada);
}

Related

How to make sap.f.GridList scrollable inside a control Panel?

I'm adding some GenericTile based on my model into a sap.f.GridList. This is successful. But my problem is that I don't want to have my whole page to be scrollable but only the GridList. That is the reason I add a Panel control and a TileContent.
What did I make wrong? Do you have any suggestion to achieve that?
Here is my code:
<Panel>
<TileContent footerColor="Good" frameType="OneByOne">
<f:GridList xmlns:f="sap.f" id="FormPart4" headerText="Liste des Cartons" items="{CartonsList>/results}" growing="true" noDataText="Aucunes données disponible">
<f:customLayout>
<cssgrid:GridBoxLayout xmlns:cssgrid="sap.ui.layout.cssgrid" boxMinWidth="17rem" />
</f:customLayout>
<f:GridListItem navigated="true">
<VBox class="sapUiSmallMargin">
<layoutData>
<FlexItemData growFactor="1" shrinkFactor="0" />
</layoutData>
<GenericTile header="Carton N°: " press="onCarton_Click" headerImage="sap-icon://palette">
<TileContent>
<NumericContent value="{CartonsList>Number}" withMargin="true" truncateValueTo="24" />
</TileContent>
</GenericTile>
</VBox>
</f:GridListItem>
</f:GridList>
</TileContent>
</Panel>

How to handle selectedItem on hirarchy grid ZK

I got a problem with hirarchy grid, i am following this zk live demo,so i am using grid for header data and listbox for detail data, but when i am using the selectedItem property in listbox detail the second row detail become selected too,Here is my UI design
This is my code i am using mvvm
<grid model="#load(vm.headers )">
<columns>
<column width="40px" />
<column label="Nomor Part" sort="auto(name)" style="color:black"/>
<column label="Description" sort="auto(averageHigh)" align="center" style="color:black"/>
<column label="Hotline" sort="auto(averageVolume)" align="center" style="color:black"/>
</columns>
<template name="model" var="item" >
<row>
<custom-attributes details="${item.details}" hotline="${item.hotline}" partNumber="${item.partNumber}"/>
<detail open="false" fulfill="onOpen">
<!--<include src="/widgets/grid/hierarchy/season.zul" details="${details}" hotline="${item.hotline}"/>-->
<include src="/widgets/grid/hierarchy/season.zul" details="#bind(item.details)" hotline="#bind(item.hotline)" partNumber="#bind(item.partNumber)"/>
</detail>
<label value="${item.partNumber}" />
<label value="${item.partDescription}"/>
<checkbox checked="#bind(item.hotline)" onCheck="#command('checkHotline',hotline=item.hotline)"></checkbox>
</row>
</template>
</grid>
And here is my list detail code :
<vbox>
<listbox width="100%" height="300px" model="#load(details)" mold="paging" pageSize="5"
emptyMessage="no data found" >
<listhead style = "text-align: center">
<listheader label="Kode Dealer"/>
<listheader label="Nama Dealer"/>
<listheader label="Alamat"/>
<listheader label="Jarak"/>
<listheader label="Aksi"/>
</listhead>
<template name="model" var="dtl">
<listitem style = "text-align: center" >
<listcell label="#bind(dtl.dealerCode)"/>
<listcell label="#bind(dtl.dealerName)"/>
<listcell label="#bind(dtl.address)"/>
<listcell label="#bind(dtl.distance)"/>
<listcell>
<checkbox checked="#bind(dtl.selectedDealer)" oncheck="#command('onSelectDealer',partNumber)" visible="#load(not hotline)"/>
</listcell>
</listitem>
</template>
</listbox>
<div align="right">
<button label="Cancel" onClick="#command('onSelectDealer',partNumber=partNumber)"/>
</div>
</vbox>
It's hard to provide advice without seeing your code. I would pay careful attention to the row expander code (from the demo)
<!-- use custom-attributes to store quarters and stock in row,
so it can be accessed later when detail onOpen -->
<custom-attributes quarters="${each.quarters}" stock="${each}" />
<detail open="false" fulfill="onOpen">
<include src="/widgets/grid/hierarchy/season.zul"
stock="${stock}" quarters="${quarters}" />
</detail>

Copy content to new content by using button

I'm using SAPUI5 XML view
myView.view.xml
<f:SimpleForm id="form1"/>
<f:content id="content1">
<core:Title text="" />
<m:Label text="Label A" />
<m:Input value="10/5/2548" enabled="false" />
<m:Label text="ชั้นที่/ปีที่" />
<m:Input value="1" />
<core:Title text="" />
<m:Label text="Label B" />
<m:Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
myController.controller.js
addNewContent:function(){
var content = this.getView().byId("form1").getContent();
this.getView().byId("form1").addContent(content);
}
Error message
not valid for aggregation "content" of Element
sap.ui.layout.form.SimpleForm#__xmlview1--form1
I want to copy content (id="content1") to button when click addNewContent Button
Anyone help thanks
Add more information
this is what i want to do
Technically
The getContent() method returns an array sap.ui.core.Element[].
The addContent() method takes a single sap.ui.core.Element as parameter.
So you need to do something like this:
this.getView().byId("form1").addContent(content[0]);
or this:
oForm = this.getView().byId("form1");
content.forEach(oControl => oForm.addContent(oControl))
or if not using ES6:
oForm = this.getView().byId("form1");
for (var i = 0; i < content.length; i++) {
oForm.addContent(content[i]);
}
Functionally
It is not clear to me what you are trying to achieve. Based on your code snippet, you are trying to copy from and paste to the same place...
Hope this will help you, try to clone form and append it to the container.
XML view
<Button text="+" press="cloneContent" /><!-- Button for cloning -->
<f:SimpleForm id="form1" editable="false" layout="ResponsiveGridLayout" title="Address" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<core:Title text="" />
<Label text="Label A" />
<Input value="10/5/2548" enabled="false" />
<Label text="ชั้นที่/ปีที่" />
<Input value="1" />
<core:Title text="" />
<Label text="Label B" />
<Input value="3.25" />
<core:Title text="" />
</f:content>
</f:SimpleForm>
<VBox id="contentHolder"></VBox><!-- clone form holder -->
Controller
cloneContent: function(oEvent){
var oForm = this.getView().byId("form1");
if (oForm) {
oFormClone = oForm.clone();
oFormClone.setTitle("");
var oHolder = this.getView().byId("contentHolder");
if (oHolder) {
//oHolder.removeAllItems();//if you want to remove all the previous added item you can uncomment this line
oHolder.addItem(oFormClone);
}
}
}
Note: Take care of binding after clone. You can use oHolder to rebind if you have any issue.

how to re-position the child nodes when the screen size is increased

I have an anchor panel wrapped in a Border panel (anchor panel positioned at the top ) .Anchor panel has a Menu bar to the top left and set of buttons aligned to the top right of the anchor panel. When is maximize the screen to full screen the buttons do not hold the position according to the increased screen size. I there a way to set the button co-ordinates relatively to the parent size ?
here is the code of the anchor panel.
<AnchorPane xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="application.views.MenuControls">
<children>
<MenuBar prefHeight="20.0" prefWidth="181.0">
<menus>
<Menu mnemonicParsing="false" text="First Menu">
<items>
<MenuItem fx:id="displayOne" mnemonicParsing="false"
onAction="#switchToOne" text="Display Anchor Pane One" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Second Menu">
<items>
<MenuItem fx:id="displayTwo" mnemonicParsing="false"
onAction="#switchToTwo" text="Display Anchor Pane Two" />
</items>
</Menu>
</menus>
</MenuBar>
<Button layoutX="590.0" mnemonicParsing="false" prefHeight="15.0" text="Close"
prefWidth="30.0" onAction="#closeApplication" managed="true" >
<!-- <graphic>
<ImageView fitHeight="17.0" fitWidth="17.0" layoutX="539.0"
layoutY="4.0">
<Image url="#close.png" />
</ImageView>
</graphic> -->
</Button>
<Button layoutX="560.0" mnemonicParsing="false" prefHeight="15.0"
prefWidth="30.0" onAction="#minimizeApplication" text="Min" managed="true">
<!-- <graphic>
<ImageView fitHeight="17.0" fitWidth="17.0" layoutX="577.0"
layoutY="4.0">
<Image url="#close.png" />
</ImageView>
</graphic> -->
</Button>
<Button layoutX="530.0" mnemonicParsing="false" prefHeight="15.0"
prefWidth="30.0" onAction="#maximizeApplication" text="Max" managed="true">
<!-- <graphic>
<ImageView fitHeight="15.0" fitWidth="17.0" >
<Image url="#close.png" />
</ImageView>
</graphic> -->
</Button>
</children>
</AnchorPane>

Prevent tab-siwtch on p:tabView when form validation fails

I'm using a tabView-Element of primefaces. The first tab points to the "Home" element the second one to a registration form. The registration form is validated. The problem is, when the form is validated the user is redirect to the home tab. When the user navigates back, he can see the validation errors.
This seems to be a more or less common problem, but I did not find a proper solution. I tried out Oleg Varaksin suggestion to prevent a user switching tabs when a form validation failed, but my problem starts earlier.
I tried to fiddle aorund with the onTabChange event but with no success. Is there a mistake in my code or how can I approach may probelm? I would welcome a push in the right direction.
<p:tabView id="mainTabView">
<p:tab title="Startseite" id="startPage">
<p:layout style="min-width:400px;min-height:400px;border:none !important"
id="layout_login">
<p:layoutUnit position="west" size="305">
<p:panel>
<h:form id="loginForm">
<p:panelGrid columns="2" styleClass="gridWithNoBorders reducedFontSize">
<p:outputLabel value="Benutzername:" />
<p:inputText size="14" value="#{data.username}" />
<p:outputLabel value="Passwort:" />
<p:inputText size="14" value="#{data.loginPassword}" />
</p:panelGrid>
<p:separator />
<h:commandButton styleClass="reducedFontSize" value="Anmelden" />
</h:form>
</p:panel>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:panel>
Lorem ipsum dolor sit amet(...)
</p:panel>
</p:layoutUnit>
</p:layout>
</p:tab>
<p:tab id="registrationPage" title="#{ivy.cms.co('/Translations/Registration/tabTitleRegistration')}" >
<h:form id="registrationForm">
<p:panel header="#{ivy.cms.co('/Translations/Registration/panelHeaderRegistration')}">
<p:panelGrid columns="3">
<p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelEmail')}" />
<p:inputText value="#{data.email}" id="email1" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterEmailAddress')}">
<f:validator validatorId="EmailValidator" />
<f:validator validatorId="EmailCompareValidator" />
</p:inputText>
<p:message for="email1" />
<p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelRepeatEmail')}" />
<p:inputText value="#{data.emailConfirm}" id="email2" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/repeatMailAddress')}">
<f:validator validatorId="EmailValidator" />
</p:inputText>
<p:message for="email2"/>
<p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelPrename')}" />
<p:inputText value="#{data.prename}" id="prename" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterPrename')}"/>
<p:message for="prename"/>
<p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelSurname')}" />
<p:inputText value="#{data.surname}" id="surname" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterSurname')}"/>
<p:message for="surname"/>
<p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelPassword')}" />
<p:password id="pwd1" value="#{data.registrationPassword}" match="pwd2"
required="true" feedback="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterPassword')}"
weakLabel="#{ivy.cms.co('/Translations/Registration/passwordWeak')}"
goodLabel="#{ivy.cms.co('/Translations/Registration/passwordMedium')}"
strongLabel="#{ivy.cms.co('/Translations/Registration/passwordStrong')}" />
<p:message for="pwd1"/>
<p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelRepeatPassword')}" />
<p:password id="pwd2" value="#{data.confirmPassword}" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/repeatPassword')}"/>
<p:message for="pwd2"/>
<h:commandButton value="#{ivy.cms.co('/Translations/Registration/finishRegistration')}" actionListener="#{logic.startRegistration}" >
<p:ajax event="click" listener="#{logic.startRegistration}"/>
</h:commandButton>
</p:panelGrid>
</p:panel>
</h:form>
</p:tab>
</p:tabView>
I had to combine the binding and ajax to achieve my goal. It seems that the activeIndex is resetted after the form validation (?) therefore it is not honored after submitting the form. I've used the approach that was suggested by Steves to use the binding property. So here is the working code:
xhtml:
<p:layoutUnit position="center">
<p:tabView id="mainTabView" binding="#{tabIndexHelper.messagesTab}">
<p:ajax event="tabChange" listener="#{tabIndexHelper.onTabChange}" />
<p:tab title="Startseite" id="startPage">
<ui:include src="HomePage.xhtml" />
</p:tab>
<p:tab id="registrationPage" title="#{ivy.cms.co('/Translations/Registration/tabTitleRegistration')}" >
<ui:include src="RegisterPage.xhtml" />
</p:tab>
</p:tabView>
</p:layoutUnit>
And the backing bean:
private TabView messagesTab = new TabView();
public TabView getMessagesTab () {
return messagesTab;
}
public void setMessagesTab(TabView messagesTab ) {
this.messagesTab = messagesTab;
}
public void onTabChange(TabChangeEvent event) {
TabView tabView = (TabView) event.getComponent();
int activeIndex = tabView.getChildren().indexOf(event.getTab());
this.messagesTab.setActiveIndex(activeIndex);
}
Thanks for support. :)
You need to fix the current tab selected if you don't the update or validation should reset the tabview with default tab selected(the first one).
So you could use activeIndex attribut from tabView :
<p:tabView activeIndex="#{bean.activeIndex}"/>
From Primeface User Guide:
activeIndex is an Integer with default value 0. Index of the active tab.
And create an event for set this var like that :
<p:ajax event="tabChange" listener="#{bean.onTabChange}"/>