I have this zul:
<zk>
<style>
tr.z-listitem-seld { background-image:none ; background-color :
LIGHTSKYBLUE;}
</style>
<window self="#define(content)" id="winReportFatturePassive" apply="controller.ReportFatturePassive">
<div align="center">
<panel sclass="grid_report_log">
<panelchildren>
..........
..........
..........
..........
<!-- Dettagli POD -->
<window id="winDettagliPod" visible="false">
<separator spacing="30px" />
<grid oddRowSclass="none" >
<columns>
<column align="center" hflex="1" />
<column align="center" hflex="1" />
<column align="center" hflex="1" />
<column align="center" hflex="1" />
<column align="center" hflex="1" />
<column align="center" hflex="1" />
<column align="center" hflex="1" />
</columns>
<rows>
<row valign="top" style="background:#FFFFFF;">
<label value="${labels.app.Pod}" />
</row>
<row>
<textbox id="txtPodDettagliPod" width="120px" />
<button id="btnFilterTechDettagliPod" label="${labels.app.filter}" />
</row>
</rows>
</grid>
..........
..........
..........
..........
</window>
</panelchildren>
</panel>
</div>
</window>
How is possibile itercept click on button btnFilterTechDettagliPod in sub-window winDettagliPod in controller ReportFatturePassive ?
My Controller Java is:
public class ReportFatturePassive extends SelectorComposer<Component> {
Is possibile use a simil code:
#Listen(Events.ON_CLICK + " = #btnFilterTechDettagliPod")
public void FilterTechDettagliPod() throws Exception {
}
Thanks
For this kind of use, I think you should try the Event Queues.
https://www.zkoss.org/wiki/ZK_Developer's_Reference/Event_Handling/Event_Queues#Subscribe_to_an_Event_Queue
This first article is working in MVC.
In this second one you will find an exemple with MVVM.
It's a shopping cart example. I think this is close to your need. When you add an article to the shopping cart, you have to force refresh of an other windows.
http://books.zkoss.org/zk-mvvm-book/8.0/advanced/communication_between_viewmodel_and_composer.html
Related
I have to make a matrix of radio buttons exactly like the image attached (this is from https://experience.sap.com/fiori-design-web/radio-button/). But only one option selected per line.
Since the image is from the guidelines shouldn't we be able to reproduce it easily? Been trying to work with radio button groups but it doesn't end up looking like this...
Did you try the "groupName" Property?
Name of the radio button group the current radio button belongs to. You can define a new name for the group. If no new name is specified, this radio button belongs to the sapMRbDefaultGroup per default. Default behavior of a radio button in a group is that when one of the radio buttons in a group is selected, all others are unselected.
https://sapui5.hana.ondemand.com/#/api/sap.m.RadioButton%23controlProperties
you can have a look on https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButtonGroup/sample/sap.m.sample.RadioButtonGroup
You can just create 2 groups and align them. With a bit of predefined css classes i think you would get your result. Or you use groupName but you cant use it with RadioButtonGroup.
Radiogroup with a bit of adjustment from your side:
<FlexBox class="sapUiMediumMarginBeginEnd">
<Label text="Foo" class="sapUiLargeMarginBeginEnd"/>
<Label text="Bar" class="sapUiLargeMarginBegin"/>
</FlexBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="selected"/>
<RadioButtonGroup id="rbg3" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-1" text="Option 1" />
<RadioButton id="RB3-2" text="Option 2" />
<RadioButton id="RB3-3" text="Option 3" />
</RadioButtonGroup>
</HBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="unselected"/>
<RadioButtonGroup id="rbg4" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-5" text="Option 1" />
<RadioButton id="RB3-6" text="Option 2" />
<RadioButton id="RB3-7" text="Option 3" />
</RadioButtonGroup>
</HBox>
</VBox>
or you can do this with the groupNamewhich i would prefere more, but here also a little adjustment with the flexbox.
<VBox class="sapUiSmallMargin">
<HBox class="sapUiTinyMarginTopBottom">
<FlexBox class="sapUiMediumMargin" direction="Column" alignItems="Start">
<Label text="Selected" />
<Label text="Unselected" class="sapUiTinyMarginTop"/>
</FlexBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Success" labelFor="groupB" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Error" labelFor="groupC" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Warning" labelFor="groupD" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Information" labelFor="groupE" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
</HBox>
</VBox>
Ended up just using a sap.m.Table and for the content used sap.m.Text and sap.m.RadioButton. Also important to use groupName to distinguish the two radio button lines.
`
<mvc:View
controllerName="HelloWorld.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page title="My App"/>
<Table id="idProductsTable">
<columns>
<Column>
<Text
text="" />
</Column>
<Column
hAlign="Center">
<Text text="Low"/>
</Column>
<Column
hAlign="Center">
<Text text="Medium" />
</Column>
<Column
hAlign="Center">
<Text text="High" />
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="First Line" />
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
</cells>
</ColumnListItem>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="Second Line" />
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
`
I have this issue where I want to have the scrollbar active only for the content of my IconTabBar, while keeping the header fixed. I read here in stackoverflow that I should put all the content inside a ScrollContainer, and then set the stretchContentHeight="true".
But this option kills my header.
this is my code
<mvc:View
controllerName="Quickstart.App"
displayBlock="true"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:tnt="sap.tnt"
height="100%">
<App id="app">
<Page id="intro" showHeader="false" enableScrolling="false">
<tnt:ToolHeader height="10rem">
<Image src="./images/image.png"/>
<Text text="title" wrapping="false" />
<ToolbarSpacer />
<Button text="Feedback" icon="sap-icon://feedback" type="Transparent" press="onPressFeedback"/>
</tnt:ToolHeader>
<IconTabBar
id="idIconTabBarNoIcons"
items="{/Sheet1}"
class="sapUiResponsiveContentPadding"
expandable="false"
backgroundDesign="Transparent"
applyContentPadding="false"
stretchContentHeight="true">
<items>
<IconTabFilter text="{category_title}" key="info">
<Toolbar class="toolbar_boarder" design="Transparent">
<ToolbarSpacer/>
<Button text="Sort" tooltip="Order Alphabetically" id="IdSortButton" width="70px" press="onPressSort" icon="sap-icon://alphabetical-order" type="Ghost"/>
<Button id="IdExpandButton" tooltip="Additional Information" text="Collapse" class="sapUiTinyMarginEnd" width="101px" press="onPressExpand" icon="sap-icon://collapse-all" type="Ghost"/>
</Toolbar>
<ScrollContainer id="Scroll" class="sapUIBody" height="100%" width="100%" horizontal="false" vertical="true">
<l:Grid containerQuery="true" content="{path:'tools', templateShareable:false}" id="gridId">
<Panel class="iconFilters" fieldGroupIds="idPanel" >
<HBox>
<!-- <core:Icon press="onPressToolIcon"
src="{tool_icon_url}" size="2rem" color="Default" class="" /> -->
<Image src="{tool_icon_url}" width="2.2rem" press="onPressToolImage"></Image>
<Link text="{tool_title}" wrapping="true" target="_blank" href="{tool_redirect_url}" class="sapUiTinyMargin title_header"/>
</HBox>
<!-- Control the size of the line before badges -->
<Toolbar height="6px" width="75%"></Toolbar>
<HBox items="{path:'badges', templateShareable:false}" height="1rem" justifyContent="End" class="drawline">
<core:Icon size="1rem" src="{badge_css_url}" tooltip="{badge_hover_text}" class="badgePadding" />
</HBox>
<VBox height="11rem">
<Label text="Use Cases" class="sapUiTinyTop" design="Bold"/>
<List
items="{path:'usecases', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<FormattedText htmlText="{item}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="11rem">
<Label text="Strengths" class="sapUiSmallTop" design="Bold"/>
<List
items="{path:'strengths', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="5rem" fieldGroupIds="hideShowElements" visible="true">
<Label text="Best Practices" class="sapUiSmallTop" design="Bold" fieldGroupIds="hideShowElements"/>
<List
items="{path:'best_practices', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{best_practices_name}"
target="_blank"
href="{best_practices_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class="" height="5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Content Responsibility" class="sapUiSmallTop" fieldGroupIds="hideShowElements" design="Bold" visible="true"/>
<List
items="{path:'content_responsibility', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class=" conf_move_down" height="3.5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Confidentiality Level" design="Bold" fieldGroupIds="hideShowElements"/>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{confidentiality_level}"
target="_blank"
href="{confidentiality_level_url}" />
</HBox>
</VBox>
<VBox class=" expandClassTrue" height="6rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Support" design="Bold" fieldGroupIds="hideShowElements"/>
<List fieldGroupIds="hideShowElements"
items="{path:'support', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem class="listItems">
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{support_name}"
target="_blank"
href="{support_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
</Panel>
</l:Grid>
</ScrollContainer>
</IconTabFilter>
</items>
</IconTabBar>
</Page>
</App>
</mvc:View>
When I use "False" for stretchcontentheight, this is the top of my page:
When I use "true", the header is gone.
Does anyone know how to solve this?
Thank you very much for reading and helping
I fixed my problem with a workaround using custom headers.
<hlayout width="100%" height="100%">
<grid height="100%" sclass="farm-form-grid" hflex="1" xmlns:ca="client/attribute" ca:data-scrollable="false">
<columns>
<column width="2.2%" align="right" height="28px"/>
<column width="34%" align="left"/>
<column width="57%" align="left" />
</columns>
<rows sclass="farm-sale-rows">
<row sclass="">
<hlayout>
<label value="*" sclass="farm-label" />
</hlayout>
<hlayout>
<label value="Map Layer:" sclass="farm-label "/>
</hlayout>
<hlayout>
<textbox id="mapLayerTextbox" instant="true" sclass="intboxwidth"/>
</hlayout>
</row>
</rows>
</grid>
</hlayout>
I have used hflex="1" in grid to divided in two section.
But not able get the two section within the hlayout.
I am new to SAP UI5 and working my way through the sample Fiori apps. My XML view contains a table control and is as under:
<Table id="idProductsTable" inset="false"
items="{path: '/ShipmentCollection'
}">
<headerToolbar>
<Toolbar>
<Label text="Shipment List"></Label>
<ToolbarSpacer />
<Button icon="sap-icon://refresh" press="refreshDataFromBackend" />
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Label text="Shipment" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Carrier`" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Dimensions" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Weight" />
</Column>
<Column hAlign="Center">
<Label text="Price" />
</Column>
</columns>
<items>
<ColumnListItem id="listItems" type="Navigation"
press="onListItemPress">
<cells>
<l:VerticalLayout>
<Label text="{ShipNum}"></Label>
<Label text="{Text}"></Label>
</l:VerticalLayout>
<Text text="{Carrier}" />
<Text text="{Route}" />
<Text text="{Cust}" />
<Text text="{DelDate}" />
</cells>
</ColumnListItem>
</items>
</Table>
How can I change the color of Text field in cell-1 based on the contents of this field?
Thanks!
1.You can use data binding formatter to change the color. For example, your first cell.
<Label text="{path:'ShipNum', formatter:'Formatter.colorFormatter'}"></Label>
2.Define yourstyle for changing color in the css file.
3.Define the function colorFormatter in the demoformatter.js
sap.ui.core.Element.extend("demoformatter", {
colorFormatter:function(value) {
this.addStyleClass("yourstyle");
return value;
}
});
Formatter = new demoformatter();
==================xml===================================
<t:Table >
<t:columns>
<t:Column width="11rem">
<Label text="标志" />
<t:template>
<Text text="{
path: 'status',
formatter: 'yaoji.utils.formatter.format'
}"
/>
</t:template>
</t:Column>
</t:columns>
</t:Table>
===================format js===========================
yaoji.utils.formatter.format = function (cellValue) {
this.onAfterRendering= function() {
//!!! if not after redering, can't get the dom
var cellId = this.getId();
$("#"+cellId).parent().parent().parent().css("background- color","red");
return cellValue;
};
Maybe another, uglier option is to just add a updateFinished event handler on the table and then set the classes dynamically there?
<window apply="org.zkoss.bind.BindComposer"
viewModel="#id('vm') #init('com.test.labelTest')">
<template <!--model = "#bind(vm.allLabelSets)" some thing like this --> >
<label value="#load(each.label1)" />
<label value="#load(each.label2)" />
<label value="#load(each.label3)" />
</template>
</window>
how can we use template to iterate over a list without using any of gridModel,treeModel ?
Try this below code
<vlayout id="vlayout" children="#bind(vm.allLabelSets) #template('record')">
<template name="record" var="record">
<vlayout style="padding-left:10px; border:2px solid green;" >
<label value="#load(each.label1)" />
<label value="#load(each.label2)" />
<label value="#load(each.label3)" />
</vlayout>
</template>
</vlayout>
You have to use children attribute