I have issue with making below layout. Please provide me some code example how to create below layout. As the screenshot depict I need two part equally sized. Left part containing the latin text and right side the radio buttons and rest. The "From" teksts should be left aligned and the amounts and icons should be right alligned. How do I construct this layout best way in ZK and in ZK way ?
Screenshot Example
You can see below code for demo purpose and adjust component according to your requirments
<zk>
<window border="normal" title="hello" apply="pkg$.TestComposer" width="100%" height="100%">
<hbox heights="40%,20%,40%" width="100%" height="100%">
<borderlayout width="100%" height="100%">
<center>
Here is My Content
</center>
</borderlayout>
<borderlayout width="100%" height="100%">
<center>
<vbox widths="30%,30%,30%" width="100%" height="100%">
<checkbox />
<checkbox />
<checkbox />
</vbox>
</center>
</borderlayout>
<splitter width="100%"/>
<borderlayout width="100%" height="100%">
<center>
<vbox widths="30%,30%,30%" width="100%" height="100%">
<label value = "hariom123"/>
<label value = "hariom123"/>
<label value = "hariom123"/>
</vbox>
</center>
</borderlayout>
</hbox>
</window>
</zk>
You can run above code in Zk Fiddle
It kills me to respond to this answer given the level of detail you provided. In the future please do post some code showing what you've tried and why it doesn't work. With that, we can quickly get you back on track. Your question here is just fishing for code =/
<hlayout hflex="1">
<!--
size/flex on labels doesn't work, wrap label in a div to control size
-->
<div hflex="1">
<label value="lorem ipsum.."/>
</div>
<grid hflex="1">
<columns>
<!--
Last column is small, first two share available space.
-->
<column>
<column>
<column width="30px">
</columns>
<rows>
<row>
<radio label="This is a radio button"/>
<label value="From: 100,00 $"/>
<image src="info.png"/>
<row>
<row>
<radio label="This is a radio button 2"/>
<label value="From: 200,00 $"/>
<image src="info.png"/>
<row>
<row>
<radio label="This is a radio button 3"/>
<label value="0,00 $"/>
<image src="info.png"/>
<row>
</rows>
</grid>
</hlayout>
There are many other ways to get this layout. I chose a grid next to a div so the radio buttons, labels, and icons on the right are guaranteed to line up. You have other options though.
PS: of course you will need to apply CSS to make the ZK grid less gaudy.
Related
I have a simple form, that looks as follows:
On the large screen, it looks pretty small. I would like to increase the size and width.
This is the code:
<Page title="{i18n>authorization}">
<content>
<VBox alignItems="Center">
<f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="true">
<f:content>
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>
Update
I have removed simple form and placed the controls in VBOX.
<Page title="{i18n>authorization}">
<content>
<VBox alignItems="Center">
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</VBox>
</content>
</Page>
The controls still looks very small:
How can I increase the size of controls?
The properties labelSpan<ScreenSize> and emptySpan<ScreenSize> are the one which control the width of the actual elements within a "row" of the form.
More info here: https://sapui5.hana.ondemand.com/#/api/sap.ui.layout.form.SimpleForm
For example, for M you have label span of 3 and empty span of 3 => leaving 6 out of total 12 for the actual elements. Try reducing labelSpanM and emptySpanM to increase the width taken by the element Text, Button and Input
That being said, I don't think the choice of simple Form was a wise choice here - why don't you put the three elements directly into the VBox?
That also being said, in case you are implementing an authentication screen inside an application, you should rethink this and let authentication layers take care of that (wherever your app is running)
Update after Question update: depending on what you want to achieve, you could simply add a css class to the control and add some css. that is the "manual" way. you could add a custom theme and style the buttons there. you could add custom extensions of the standard controls, e.g. a custom button as extension of standard button. and completely change the rendering there. I think, this are more or less the possibilities
I have an application with a footer which is same for all pages. Until now, I used separate view for this which I attached to the bottoms of the pages. However, now I created two fragments for item details page (Display/Add modes), using the ObjectPageLayout and want to add my footer into both of those. As I understand, I should use fragment instead of View so I rewrote my footer view into fragment so it looks like this:
<core:FragmentDefinition xmlns="sap.m"
xmlns:f="sap.f"
xmlns:core="sap.ui.core"
>
<VBox>
<Text text=""/>
<Text text=""/>
<f:Card class="sapUiTinyMargin" height="100px" width="1144px">
<f:content>
<VBox width="100%" alignItems="Center">
<Text text=""/>
<HBox>
<Label text="{i18n>needHelp}" />
<ToolbarSpacer width="20px" />
<Link text="{i18n>contactUs}" href="mailto:xxx.xxx#xxx.com"/>
</HBox>
</VBox>
</f:content>
</f:Card>
</VBox>
</core:FragmentDefinition>
And then I put this fragment into the footer of the ObjectPageLayout, like this
<footer>
<core:Fragment fragmentName="xxx.portal.view.Footer" type="XML"/>
</footer>
However, when I try to load the page, I get the error "Assertion failed: "Element sap.m.VBox#__vbox1" is not valid for aggregation "footer" of Element sap.uxap.ObjectPageLayout#nav---connection--ObjectPageLayout"
Any idea why is it showing up and what I am doing wrong? I would also like to note that if I use some simpler elements in the footer (such as Toolbar), there is no error and it gets displayed correctly.
Thank you
I am developing a Online Questionnaire application. In this I am using Checkbox and Labels inside a VBox and Hbox control to display the options for my answers. These answer options I am getting them from my questionnaire.json model.
Following is my App.view.xml showing the answers layout:
<VBox id="multipleChoices">
<items>
<HBox backgroundDesign="Solid" alignItems="Center">
<items>
<CheckBox id="mCheckBox0"/>
<Label text="" id="multipleChoice0" width="500px"/>
<CheckBox id="mCheckBox1"/>
<Label text="" id="multipleChoice1" width="500px"/>
</items>
</HBox>
<HBox backgroundDesign="Solid" alignItems="Center">
<items>
<CheckBox id="mCheckBox2"/>
<Label text="" id="multipleChoice2" width="500px"/>
<CheckBox id="mCheckBox3"/>
<Label text="" id="multipleChoice3" width="500px"/>
</items>
</HBox>
</items>
</VBox>
It gets applied in front end as follows:
Q1.png
Q2.png
Problem:
You can see in Q2.png 4 Labels and 4 radio buttons are being displayed even though there are only two answer options. How do I achieve the scenario where the labels's and radio buttons/ check boxes appear in same number as the answer choices and extra ones are hidden?
Is there a dynamic control which can help me with this one?
you should bind your question from your model to a List and a ListItem can have a template with Labels and checkboxs, so you don't need to care about the size of your answers. The way you are doing it at the moment is way too static.
Checkbox has a text property, therefore you could remove the labels and do a binding inside that property
<CheckBox id="mCheckBox1" text="{model/textOption1}"/>
<CheckBox id="mCheckBox2" text="{model/textOption1}"/>
It's my first time working on zk and i have this guideline.
There is an empty column on the far right that fills the empty space between the last column and the right edge of the Grid. When the content is loaded the scroll should appear inside that column.
Is it possible to do this? do you have any suggestion?
Something like this fiddle if your run it under zk 7.0.2 or 7.0.3?
If link dies this is the code :
<zk>
<window border="normal" title="hello" >
<grid height="300px">
<columns>
<column label="Chat Message" sort="auto" />
<column label="By" sort="auto" />
</columns>
<rows id="rows">
<zk forEach="1,2,3,4,5,6,7,8,9,10">
<row>
<label value="Message ${each}"/>
<label value="By User ${each}"/>
</row>
</zk>
</rows>
</grid>
</window>
</zk>
I am new to ZK frame work. I wanted to have a layout where one Window should fit the
enitre width of div component. I tried to add width=100% but it does not work.
how do I do that? Please see the code below
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window width="100%" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>
Using relative sizes (percent) are by my experience often counter-productive. Use hflex/vflex instead.
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window hflex="1" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>