ScrollPane
From MegaZine3
(Redirected from Scrollpane)
| ASUL Component | |
|---|---|
| Tag name | scrollpane
|
| Extends | Box |
The scroll pane is a container that can be used to scroll its content when the content's size exceeds the size of the scroll pane itself.
Contents |
[edit] Attributes
 |
See: Box and AbstractAsulObject for inherited attributes. |
mousemode
- Type: {mouse_none, mouse_move, mouse_drag}
- Default:
mouse_none
This determines how the mouse can be used to drag the contents of the scroll pane (i.e. scroll the contents). Per default, direct mouse interaction is disabled, and scroll bars (or the API) have to be used.
- mouse_move: when set to this mode, mouse movement alone will suffice to scroll the contents. When the cursor touches an edge of the scrollpane, the content will be completely scrolled to that side. I.e.
- when the mouse is at the left edge, x offset is 0.
- when the mouse is at the right edge, x offset is 1.
- when the mouse is at the top edge, y offset is 0.
- when the mouse is at the bottom edge, y offset is 1.
- mouse_drag: in this mode, the user can "drag" the contents of the scroll pane, by keeping the left mouse button pressed and then moving the mouse.
mousewheel
- Type: {x, y, none}
- Default:
none
This determines whether the mouse wheel should be used to scroll inside the scroll pane. When set to x, turning the mouse wheel with the cursor hovering the scroll pane will scroll along the x axis, when set to y along the y axis.
mousewheelstep
- Type: Number
- Default:
0.1
The step size by which to scroll when turning the mouse wheel (and scrollpane@mousewheel is set to either x or y.
[edit] Child nodes
$scroll_x$
- Type: Scrollbar
A scroll bar that is used for horizontal scrolling.
$scroll_y$
- Type: Scrollbar
A scroll bar that is used for vertical scrolling.
$viewport$
- Type: any AbstractAsulObject
The actual content of the scroll pane that should be scrolled if too big.
[edit] Example
[edit] Using mouse_drag and scrollbars
<scrollpane anchors="0,0,pw-25,ph-25" mousemode="mouse_drag" clipchildren="false"> <box name="$viewport$" resize="true"> <box width="2560" height="1600" background="image(http://www.megazine3.de/demo/megazine/data/zoom2.jpg)"/> </box> <scrollbar name="$scroll_x$" anchors="0,ph,pw,ph+25" background="gradient(linear,0x000099,0x6666CC)"> <button name="$btn_reduce$" anchors="0,0,25,ph"> <box name="$up$" anchors="2,2,pw-2,ph-2" background="color(0x9999DD)"/> <box name="$over$" anchors="2,2,pw-2,ph-2" background="color(0xAAAAEE)"/> <box name="$down$" anchors="4,4,pw-4,ph-4" background="color(0x8888CC)"/> </button> <button name="$btn_increase$" anchors="pw-25,0,pw,ph"> <box name="$up$" anchors="2,2,pw-2,ph-2" background="color(0x9999DD)"/> <box name="$over$" anchors="2,2,pw-2,ph-2" background="color(0xAAAAEE)"/> <box name="$down$" anchors="4,4,pw-4,ph-4" background="color(0x8888CC)"/> </button> <button name="$scroll_handle$" width="25" height="25"> <box name="$up$" anchors="4,4,pw-4,ph-4" background="color(0xDD9999)"/> <box name="$over$" anchors="4,4,pw-4,ph-4" background="color(0xEEAAAA)"/> <box name="$down$" anchors="6,6,pw-6,ph-6" background="color(0xCC8888)"/> </button> </scrollbar> <scrollbar name="$scroll_y$" anchors="pw,0,pw+25,ph" orientation="vertical" background="gradient(linear-vertical,0x000099,0x6666CC)"> <button name="$btn_reduce$" anchors="0,0,25,pw"> <box name="$up$" anchors="2,2,pw-2,ph-2" background="color(0x9999DD)"/> <box name="$over$" anchors="2,2,pw-2,ph-2" background="color(0xAAAAEE)"/> <box name="$down$" anchors="4,4,pw-4,ph-4" background="color(0x8888CC)"/> </button> <button name="$btn_increase$" anchors="pw-25,ph-25,pw,ph"> <box name="$up$" anchors="2,2,pw-2,ph-2" background="color(0x9999DD)"/> <box name="$over$" anchors="2,2,pw-2,ph-2" background="color(0xAAAAEE)"/> <box name="$down$" anchors="4,4,pw-4,ph-4" background="color(0x8888CC)"/> </button> <button name="$scroll_handle$" width="25" height="25"> <box name="$up$" anchors="4,4,pw-4,ph-4" background="color(0xDD9999)"/> <box name="$over$" anchors="4,4,pw-4,ph-4" background="color(0xEEAAAA)"/> <box name="$down$" anchors="6,6,pw-6,ph-6" background="color(0xCC8888)"/> </button> </scrollbar> <box anchors="pw,ph,pw+25,ph+25" background="color(0x6666CC)" mouseenabled="true"/> </scrollpane>
[edit] Using mouse_move
<scrollpane anchors="0,0,pw,ph" mousemode="mouse_move"> <box name="$viewport$" resize="true"> <box width="2560" height="1600" background="image(http://www.megazine3.de/demo/megazine/data/zoom2.jpg)"/> </box> </scrollpane>
| ASUL-related articles | |
|---|---|
| Components | Box · Button · ProgressBar · ScrollBar · ScrollPane · Text · ToggleButton · Window |
| Layouts | Horizontal Flow Layout · Vertical Flow Layout |
| ASUL Articles | ASUL Document · Editing the GUI · Layouting · ASUL scripting |
