Using a Scrollbar

November 16th, 2006 · 8 Comments

Using a scrollbar in LZX is so deceptively simple, that developers often have a hard time figuring it out. Below is an example of a scrollbar in action:

There are two LZX classes you can use to make a view scroll its contents: scrollbar and hscrollbar. scrollbar is vertical; hscrollbar is horizontal. The two orientations will work together automatically. The scrollbar is designed to scroll a single view within a clipping container. i.e. if you want to scroll multiple views (which you almost always will), you should wrap them in a single containing view.The diagram below shows the layout of views:

Some guidelines:

The clipping view should have a defined width and height. It’s OK if they are constraints.
The clipping view must clip its contents. (clip=”true”).
The scrolling view must not have a defined height. Exploit the stretchy behavior of views here.
Define a width for the scrolling view, so that it leaves room for the scrollbar.
The scrollbar and scrolling view must be siblings. If not, you’ll have to set the target attribute.

Download an example of using the scrollbar

Tags: LZX Tips

8 responses so far ↓

1 Antun’s Blog » Blog Archive » The Mouse Wheel in OpenLaszlo // Aug 3, 2007 at 10:28 am

[...] Antun’s Blog Notes on OpenLaszlo, LZX and Rich Internet Application Development « OpenLaszlo 4.0.3 Released… stretches, and mini-me! [...]
2 Vishnu // Feb 20, 2009 at 8:54 am

How to scroll a view, when user pressing a tab.
3 antun // Feb 20, 2009 at 9:18 am

Hi Vishnu,

There’s no built-in keyboard shortcut for controlling a scrollbar, that I’m aware of. The list component may scroll automatically, but if you write your own scrolling view, you’d need to write that yourself. You could either make the scrollable view focusable, and listen for the right onkeydown event, or listen for a global key combination using the LzKeys (lz.Keys on 4.2) service.

-Antun
4 Vishnu // Feb 24, 2009 at 5:32 am

Hi Antun,

Thanks for your reply. How to do in openlaszlo Scrolling when the user tabs to a field that is not visible on the screen. What I am looking for is that to get the scrolling when the user is tabbing through fields to work like it does in a standard webpage. If you tab from the first field down to the last field you will notice that Internet Explorer scrolls to make the next field visible if it is not visible when the user tabs to it. If the user shift+tabs to go to the previous field internet explorer does not scroll back until it absolutely has to because the field is not visible.

I have tried with below sample code, but problem is whenever component y postion is greater than 125, it’s scrolling. can you please suggest me how to implement same in openlaszlo.

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

parent.setAttribute(‘currFocus’,this['y']);

125){
parent.parent.sb.step(5);
}
]]>

Thanks,
Vishnu
5 antun // Feb 25, 2009 at 4:41 pm

Hi Vishnu,

If each individual scrolled view is focusable, and you’re tabbing from one to another, you could check both the y-position of that view and the y-position of the container view to determine whether the particular view is above or below the clipping region.

For example, if you deduct the scrolling view’s y-position from the row’s y-position, and the result is greater than the height of the clipping region, then the row is below the bottom of the clipping region.

To scroll the view then, you could set the scrolling view’s y-position accordingly.

-Antun
6 Rich // Jan 12, 2010 at 6:06 pm

Hi Antun – can you describe how a vertical scrollbar can be added to a tabelement component within a tabslider? The contents of my tabelement are dynamically generated via a dataset and typically extend below the bottom of the viewable area. I’ve tried various tricks to date without success! Many thanks.

7 antun // Jan 13, 2010 at 10:00 am

Hi Rich,

Since the tabelement places its children into a view that clips, you can simply copy the scrollingView and scrollbar into the tabelement:

<canvas proxied="false">
    <tabslider width="250" height="150">
        <tabelement>One
            <view name="scrollingView"
                width="${parent.width-parent.sb.width}">
                <simplelayout axis="y" spacing="4" />

                <view width="100%" bgcolor="0xeaeaea" height="30">
                    <text x="10" valign="middle">Row One</text>
                </view>
                <view width="100%" bgcolor="0xeaeaea" height="30">
                    <text x="10" valign="middle">Row Two</text>
                </view>
                <view width="100%" bgcolor="0xeaeaea" height="30">
                    <text x="10" valign="middle">Row Three</text>
                </view>
                <view width="100%" bgcolor="0xeaeaea" height="30">
                    <text x="10" valign="middle">Row Four</text>
                </view>
                <view width="100%" bgcolor="0xeaeaea" height="30">
                    <text x="10" valign="middle">Row Five</text>
                </view>
                <view width="100%" bgcolor="0xeaeaea" height="30">
                    <text x="10" valign="middle">Row Six</text>
                </view>
            </view>
            <scrollbar name="sb" />
        </tabelement>
        <tabelement>Two
        </tabelement>
    </tabslider>
</canvas>

-Antun

8 rakesh // Dec 23, 2010 at 12:37 am

How to scroll a view/form/window, when user pressing a tab in openlaszlo.

Antun’s Blog

Notes on OpenLaszlo, LZX and Rich Internet Application Development

Categories

Archives