UI Element Sizing and Scrolling

[Former Member]

My goal is to implement a page with two columns: a tree on the left side and a details view on the right side. The details view will change depending on the selected node in the tree (but that is beside the point). My question involves sizing and scrolling. I want to avoid horizontal scrolling of the whole page if at all possible. Also, I'd like to avoid using fixed widths/heights as I'd like to account for multiple screen resolutions. If the text in the tree gets too large, I'd like the tree view on the left side to scroll, but not the details view on the right side. I can't seem to figure out how to do this without giving the tree's scroll container a fixed width/height. Any help would be greatly appreciated...

Also, is there a way to make the two columns of my page resizable by the user (horizontally)?

Thanks,

DS

[Former Member]

David,

Well, it's quite complex with "current state of affairs"

First, whenever you need to control scrolling you have to define (at least) fixed height. Otherwise your scroll container will collapse to several-pixel-height nonsense. And you has no way to detect available height of parent container (for different screen resolutions, for resized browser window, etc).

Second, controlling maximum width is also hard: since certain NW version (SP5, AFAIR) even well-behaved tables start to occupy as much space as they need instead of wrapping cell content. Long text without spaces breaks TextView easily. And so on...

So, let me advise the following:

1. Simply do not control height. You will never get it right as far as you are too restricted by WD framework.

2. Use relative (%) width for your columns, this is the best compromise.

3. For navigation-like column consider using some kind of column resizer (like one found in portal). Or at least allow user to hide / show navigation area to see content without scrolling.

VS

[Former Member]

Thanks for your help. I was hoping it would turn out otherwise, but was expecting to hear that I can't really do what I want for this page. Can you tell me what Web Dynpro controls are available for column resizing and hide/show (like the navigation area in portal)?

Thanks,

DS

[Former Member]

There is no such built-in control, but you can easily create your own:

1. For your navigation pane create some container with 2 rows.

2. Into second row place Tree UI control.

3. Bind <b>visibility</b> property of UI tree control to context node attribute with type <b>Visibility</b>, assign <b>WDVisibility.VISIBLE</b> in wdDoInit of view controller.

4. Into first row create LinkToAction UI control and bind it <b>imageUrl</b> property to another context attribute. Set attribute value to point to some "collapse-arrow" image

5. Create onAction handler for link with the following logic: it revert 2 context attributes mentioned between WDVisibility.VISIBLE / WDVisibility.NONE and "collapse-arrow" / "expand-arrow" correspondingly.

VS

[Former Member]

Thanks... and I take it I should just adjust the width (in pixels) of the container element using a couple other links (like the arrows on the navigation pane in the portal). Let me know if there is an easier way - but I'm guessing not...

Thanks,

DS

[Former Member]

Yep, you are right -- at least I'd implemented this myself this way. You can play with increment / decrement by pixels as well as percents. Personally, I took only the first approach.

VS