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

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>

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>

Press event or navigation from card control in sapui5

I am using cards to display some data. i want to call some function on click of card control in sapui5.
<f:Card class="sapUiMediumMargin carousalCards" width="360px">
<f:content>
<VBox height="370px" justifyContent="SpaceBetween">
<HBox justifyContent="SpaceBetween">
<VBox>
<Title class="titleWidth" text="{getfileDefaultJSONModel>REFERENCE}" level="H1"/>
<Text class="sapMGTSubHdrTxt" text="{getfileDefaultJSONModel>CREATION_DATE}"></Text>
</VBox>
<HBox class="checkedIcon">
<RadioButton custom:model="getfileDefaultJSONModel" select="fnCreateClone" text="{getfileDefaultJSONModel>ID}" groupName="GroupA" visible="{getfileDefaultJSONModel>RADIO_VISIBLE}"/>
</HBox>
</HBox>
<HBox justifyContent="SpaceBetween" class="largeTileFooter">
<Text class="sapMTileCntFtrTxt" text="{getfileDefaultJSONModel>USER_ID} {getfileDefaultJSONModel>REFERENCE} Data"></Text>
<Text class="sapMNCValue Neutral" text="{getfileDefaultJSONModel>JSON_SIZE}"></Text>
</HBox>
</VBox>
</f:content>
</f:Card>
Currently, sap.f.Card does not have any click event. You can, however, use the browser events:
var card = this.getView().byId("your-card-id");
card.attachBrowserEvent("click", function(event) {
// handle card click
}, this);
At the time of writing, sap.f.Card does not provide any press events. You could..
Stick with the guidelines and make only the header clickable. Controls that implement sap.f.cards.IHeader do provide press event.
Or leverage sap.m.CustomListItem with type="Active" to make the card content clickable.
See the demo below:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/Fragment",
], Fragment => Fragment.load({
definition: `<f:Card xmlns:f="sap.f" width="18rem" class="sapUiSmallMargin">
<f:header>
<cards:Header xmlns:cards="sap.f.cards"
title="Clickable Header"
statusText="Status"
press="alert('Header pressed')"
/>
</f:header>
<f:content>
<FlexBox xmlns="sap.m" renderType="Bare" width="100%">
<CustomListItem type="Active" press="alert('Card pressed')">
<HBox height="7rem" justifyContent="SpaceAround" alignItems="Center">
<Title text="Clickable Card" titleStyle="H4" />
<core:Icon xmlns:core="sap.ui.core"
src="sap-icon://sap-ui5"
size="4rem"
color="#ff7b17"
class="sapUiTinyMarginBottom"
/>
</HBox>
<layoutData>
<FlexItemData minWidth="100%" />
</layoutData>
</CustomListItem>
</FlexBox>
</f:content>
</f:Card>`,
}).then(control => control.placeAt("content"))));
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.f, sap.ui.layout"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Listbox item remain selected

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);
}

SplitApp Container under ICONTAB Bar

Why is It not possible to add a SplitApp Container as an aggregation for ICONTab Bar. I have tried to add the splitApp under ICONTAB Bar and it is working. But it is not working with SplitApp Container.
<mvc:View controllerName="com.sap.controller.Main"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<IconTabBar id="idIconTabBar" select="handleIconTabBarSelect"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter>
<content></content>
</IconTabFilter>
<IconTabFilter>
<content>
<SplitApp id="SplitContDemo1" initialDetail="detail" initialMaster="master">
<detailPages>
<Page id="detail" title="Detail 1" class="sapUiStdPage">
<content>
<Label text="Detail page 1"/>
<Button text="Go to Detail page2" press="onPressNavToDetail"/>
</content>
</Page>
</detailPages>
<masterPages>
<Page id="master" title="Master 1" icon="sap-icon://action"
class="sapUiStdPage">
<content>
<List>
<items>
<StandardListItem title="To Master2" type="Navigation"
press="onPressGoToMaster"/>
</items>
</List>
</content>
</Page>
</masterPages>
</SplitApp>
</content>
</IconTabFilter>
</items>
</IconTabBar>
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button"/>
</detailPages>
<masterPages>
<Button text="Master Button"/>
</masterPages>
</SplitContainer>
</content>
</Page>
</pages>
</App>
</mvc:View>
Regards,
MS
It is not very clear what your problem is exactly. You can put anything inside the content aggregation of an IconTabFilter. In the items aggregation of an IconTabBar you can only put IconTabFilters and IconTabSeparators.
I have checked your example and made it to work by putting the Split Container inside an IconTabFilter: https://jsfiddle.net/enykp4h8/1/.
<IconTabFilter text="Split Container">
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button" />
</detailPages>
<masterPages>
<Button text="Master Button" />
</masterPages>
</SplitContainer>
</IconTabFilter>
Later update:
If you put the SplitContainer alone in the IconTabBar, it will seem as though it does not work because the tab's content has 0 height. This is because the SplitContainer has a height 100% of its parent element whilst the tab's height is determined based on the height of its children (so they are somehow codependent).
To go around this you can either use some custom CSS to give the container a fixed height or you can ask the IconTabBar to stretch to its parent's height (using stretchContentHeight):
CSS Solution:
.fixContHeight.sapMSplitContainer {
height: 300px
}
<SplitContainer id="SplitContDemo" class="fixContHeight" >
<!-- the pages... -->
</SplitContainer>
Stretch Content Solution:
<IconTabBar id="idIconTabBar" select="handleIconTabBarSelect"
class="sapUiResponsiveContentPadding" stretchContentHeight="true">
<items>
<IconTabFilter text="Split Container">
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button" />
</detailPages>
<masterPages>
<Button text="Master Button" />
</masterPages>
</SplitContainer>
</IconTabFilter>
<items>
</IconTabBar>