I have several elements on screen in XML file
<layout:VerticalLayout xmlns:layout="sap.ui.layout" xmlns="sap.m">
<Input />
<Button />
<!-- ... -->
</layout:VerticalLayout>
How can I add something like layout gravity or align the controls vertically? E.g. I want the elements in the center of the screen.
Since you're using the sap.m library anyway, I would recommend to use the sap.m.VBox control (or sap.m.HBox for horizontal layouts)
The VBox does exactly the same as the VerticalLayout and more (you can specify alignment, justification in a truly flexible way).
The VBox and HBox inherit from sap.m.FlexBox, see these examples on what you can do: https://sdk.openui5.org/entity/sap.m.FlexBox
Related
How can I set a line break between two controls?
I want to display one by one in vertical manner.
You can use a flex box control: either <VBox> or <HBox>.
<VBox xmlns="sap.m" wrap="Wrap" renderType="Bare">
<!-- ... -->
</VBox>
You don't really use linebreaks but layout controls.
If you want to have an element below another element, put both of them in a vertical layout.
https://sapui5.hana.ondemand.com/explored.html#/entity/sap.ui.layout.VerticalLayout/samples
<l:VerticalLayout>
<Input placeholder="UserID" />
<Input placeholder="Password" type="Password" />
</l:VerticalLayout>
Don't forget to include the namespace: xmlns:l="sap.ui.layout"
You can also nest different layouts: Outer layout is vertical, and each row of the vertical layout can be a horizontal layout where items are placed next to each other.
Edit: This also works in IE9. VBox unfortunately does not work in IE9.
Child view has DocLayoutPanel and Want to embed it into SimplePanel. center position is ScrollView and it is not displayed properly.
position in Parent View
<ui:SimplePanel ui:field="plageHolderID"/>
layout in Child view
<ui:Binder>
<g:DoclayoutPanel>
<g:north>
</g:north>
<g:center>
<g:ScrollPanel>
<g:VerticalPanel ui:field="paneForList">
<!-- Display List here-->
</g:VerticalPanel>
</g:ScorllPanel>
</g:center>
<g:south>
</g:south>
</ui:DoclayoutPanel>
</ui:Binder>
I am assuming you mean DockLayoutPanel.
The issue with the center not showing correctly is caused by the SimplePanel, which does not implement ProvidesResize.
DockLayoutPanel implements RequiresResize and therfore either needs to be placed in a panel, which implements ProvidesResize, or it needs to be given a specific height by calling [setSize()](http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/UIObject.html#setSize(java.lang.String, java.lang.String)).
I am using a sap.ui.table.Table control and have added some controls in the 'extension' aggregation. Specifically, I have added a HorizontalLayout that has 2 buttons in it. However, both the buttons show up as left aligned. I tried changing the alignment but nothing seems to get them to show up on the extreme right.
Here is the code snippet:
`<table:Table height="100%" width="100%">
<table:extension>`
<l:HorizontalLayout>
<Button text="Save" />
<Button text="Cancel"/>
</l:HorizontalLayout>
</table:extension>
</table:Table>
A HorizontalLayout will be left-aligned only.
Why not use a MatrixLayout instead with a single cell and set its hALign property to Right?
My existing layout is a stack of two divs - g:layers in a LayoutPanel. The top div should be as big as it needs to be to contain its contents. The bottom div should take up the rest of the space on the screen, without causing scrollbars to appear.
The contents of the top div can change, so the size of the top div can change.
My current solution is a callback that's triggered whenever the contents of the top div change. The containing LayoutPanel can then recalculate the size of the top div and explicitly set the top and bottom attributes of the second layer to take up the rest of the space. Is there a better way? Something like,
<g:LayoutPanel>
<g:layer top="0px" height="whatever you need, baby">
<c:SomeWidget/>
</g:layer>
<g:layer top="the bottom of the first layer" bottom="0px">
<c:Anotherwidget/>
</g:layer>
</g:LayoutPanel>
What about using DockLayoutPanel?
<g:DockLayoutPanel unit='PX'>
<north size="10" ui:field='northWidget'>
<c:SomeWidget/>
</north>
<center>
<c:Anotherwidget/>
</center>
</g:DockLayoutPanel>
Then the center will take up the rest of the space. If you want to resize the top, call
setWidgetSize(northWidget, newSize); and the center widget will be recalculated.
The answer seems to be that there is not a better way. Manual recalculation isn't so bad when you get used to it!
I think HeaderPanel is the standard Widget to do this. Maybe it was added after the question was asked. We missed it too and had our own version for a while.
Perhaps I haven't been searching the right way but I cannot figure out for the life of me how to center an element using GWT Layout Panels.
I'm using UiBinder and I've tried all panels that implement HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). None of them seem to have any impact from setting vertical alignment (or even horizontal). I've made sure they're taking 100% width and height, inspected the resulting DOM layout from my browser and nothing seems to be changed from those properties.
Pertinent UiBinder extract (with extra docklayout elements omitted):
<g:DockLayoutPanel>
<g:center>
<g:HorizontalPanel width="100%" height="100%" >
<g:FlexTable ui:field="homeData" />
</g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>
The quick and dirty fix I've figured out is to create my own "CenterPanel" widget which basically is a wrapper around a HTMLPanel with a HTML table with a valign="middle" cell. However, this basically feels like a throwback to the classical css-layout middle centering problems. Surely GWT has something to do this that I've completely overlooked?
Centering an item can be done with a cell element like this:
<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Label>Hello Center</g:Label>
</g:cell>
</g:HorizontalPanel>
Have you tried setting width less than 100% ... i feel the width of HorizontalPanel becomes 100% ... so it occupies whole DockLayoutPanel and thus the FlexTable might be getting left aligned.
You can use styleName attribute in your component. For Example:
<g:DockLayoutPanel>
<g:center>
<g:HorizontalPanel width="100%" height="100%" >
<g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
</g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>
and have
.verticalAlign{
vertical-align: middle;
}
in your style.css