Small updates always matter - there is one such update in ADF PS3. We have new property to control UI layout components stretching, this property is called DimensionFrom. This post will demonstrate how and where DimensionFrom property can be applied.
Download sample application - LayoutStretching.zip. This sample implements very typical use case in ADF - regions included into Panel Tabbed component. It contains two regions, one is nested into another:
Region with data is included into region with tabs:
Data region contain ADF Rich Faces UI layout component - Panel Tabbed, it groups two UI boxes:
Tabs region contains nested region with data, I just did drag and drop. However by default, included region with data is rendered as corrupted, only half of region is visible:
Same on runtime, region is squeezed:
What happens - Panel Dashboard is not stretched correctly, when it is rendered from included region. We were solving this before by setting AFVisualRoot style, but its bad practice (is not guaranteed to work on all browsers). I recommend to avoid using AFVisualRoot style for stretching:
Useful hint - if you want to see all available styles, just click Edit option for style class property:
Instead of using AFVisualRoot, scroll down in Property Inspector and select DimensionsFrom property. By default its value is set to parent:
Switch DimensionFrom value to auto:
Magic happens - embedded region is stretched on design time:
On runtime is stretched as well:
Download sample application - LayoutStretching.zip. This sample implements very typical use case in ADF - regions included into Panel Tabbed component. It contains two regions, one is nested into another:
Region with data is included into region with tabs:
Data region contain ADF Rich Faces UI layout component - Panel Tabbed, it groups two UI boxes:
Tabs region contains nested region with data, I just did drag and drop. However by default, included region with data is rendered as corrupted, only half of region is visible:
Same on runtime, region is squeezed:
What happens - Panel Dashboard is not stretched correctly, when it is rendered from included region. We were solving this before by setting AFVisualRoot style, but its bad practice (is not guaranteed to work on all browsers). I recommend to avoid using AFVisualRoot style for stretching:
Useful hint - if you want to see all available styles, just click Edit option for style class property:
Instead of using AFVisualRoot, scroll down in Property Inspector and select DimensionsFrom property. By default its value is set to parent:
Switch DimensionFrom value to auto:
Magic happens - embedded region is stretched on design time:
On runtime is stretched as well:
0 comments:
Post a Comment