Moveable Window Frame Borders

#1

Hi all,

I have a question about window frame borders. I’d like to create a multi windowed app - think Outlook with a mail list screen and a reading pane. How can I create a prototype where the bar between the two panes are moveable (e.g. resizable). I’d like the ability to show more items in the list or the reading pane.

Thanks,

Bill

#2

An oldy but a goody :slight_smile:

(from back in the day… RP7… Allowing a user to resize a dynamic panel with drag control)

Here is a basic demo, updated for RP9, which makes things simpler. i made three dynamic panels:

  • DP1, with a rectangle widget in it named “Content 1”, and a Placeholder widget.
  • DP2, with a rectangle widget in it named “Content 2”
  • A “Resizer Bar” with a Dragged event that sets the width of Content 1 and Content 2.

Take note of a few things:

  • DP1 and DP2 are set to “Fit to Content” so as the rectangle widget inside is resized, the dynamic panel size changes accordingly.
  • Also take note of the anchor points in the Set Size action. Content 1 is anchored to left, Content 2 is anchored to right.
  • Content 1 has a Resized event that changes the size of the Placeholder widget, giving it a responsive nature.
  • The Resizer Bar has a “handle” shape which is highlighted when dragged. Just a little decoration for usability. Typically, an app would change the cursor, which is not impossible but not easy in Axure (search this forum for “custom cursor” if you’d like to pursue that.)
  • If you get crazy (fast back & forth) with the dragging or have a relatively slow system, the panel resizing may get out of whack. You can add a “healing” action in the Drag Dropped event to ensure the panel sizes and positions get set properly.

If you have a lot of content in either pane you could place all that content on its own separate page (one page per pane) and use an Inline Frame widget in the dynamic panel (or even replace the dynamic panel with just an Inline Frame) and set the frame’s target to that page. You could then use similar dynamic responsive sizing and/or Adaptive Views on that content page to define how the page responds to the width of the window (e.g., the Window Resized and built in variable, [[Window.width]] is quite useful), such as showing more items as it gets wider.

drag to resize panels.rp (57.2 KB)

#3

Thanks so much mbc66 - this is perfect! It’s been a while since I’ve built an app with movable panes, so just a little rusty. I wonder why they don’t just build a standard widget for it?

Best,

Bill

#4

Hi mbc66,

So, having a little trouble getting it to work. I had to convert the X to Y, as it’s a vertical drag, but I can’t get the windows to follow. I’m pretty sure it’s the variables – I can’t seem to get them to match up to yours. Here’s what I have:

image
image.png1128×578 22.9 KB

I’m noticing I have an extra Widthw variable in my formula, which I think is the problem. I just removed the X component (like you did with your Y), but it keeps coming out different. Any suggestions?

Here’s the RP fileWindowDrag.rp (53.6 KB)

Thanks,

Bill

#5

Your basic setup looks good. This stuff can be hard to debug in Axure though… It is usually best to isolate events and actions, make sure the basic parts work: does the drag alone–with no boundaries–work properly? Add in one boundary–does it work? Add in another boundary and test, etc. Then start adding in other actions and test one at a time…

With your file, here’s what I did.

  • On ++Resizer dp, I cut the Set Size actions & pasted to another unused event, Rotated --so they won’t get called but won’t get lost. I then removed the Move boundary.
    • I tested the dragging, it worked.
  • I undid (Ctrl-Z) the boundary deletion and tested. It worked but had issues: could drag “forever up” off the top panel (++Content1) and could not drag down far enough to its initial position.
    • It looks like you want the minimum height of ++Content2 to be its default 213px?
    • I’ll make assumption that minimum height of ++Content1 will be “one item” or 41px
    • So I made these boundaries, and it worked (what I assume to be) correctly:
      top is greater than or equals [[P1.top + 41]]
      bottom is less than or equals [[P2.top]]
  • I moved one Set Size action, for ++Content1 dp, back to Dragged event and tested.
    • All good.
  • I moved the other Set Size action to Dragged and tested.
    • Drags up well, but could never drag down.
    • (Duh! :roll_eyes: ) my second boundary clearly states ++Resizer can never go below the top of ++Content2.
  • I rejiggered the lower boundary to be:
    bottom is less than or equals [[P2.bottom - 213]]
    • All good.
    • So there must have been something with your original boundary that was causing the problem.
    • You should be able to adjust the numbers (41 and 213) to allow the dragging to go further up and/or down.
    • You could make this more reusable by using variables or relative size or relative position to represent the hard-coded numbers of 41 and 213. For example, instead of “41” it could be [[LVAR1.height]] where LVAR1 was local variable pointing to a widget in ++Content1.

Updated file, see Page 2:
WindowDrag.rp (70.3 KB)

#6

Awesome - thanks so much for taking a look at it- I really appreciate it!!! I’ll add in those changes. It’s funny, I tried the same setup with my actual prototype, and it worked. The only issue was that there seemed to be a lot of padding around the drag handle (either from the handle or the panels). I also tried your suggestion about using frames, which is also a work in progress.

Thanks again for the help!!

Bill