A couple of questions related to splitpane resizebar

[mathias]

Hi there. We're looking at perhaps improving our splitpane interface by adding a resize bar, but we're having some difficulty getting its UI to look the way we want.

Basically, we have 2 thoughts.

1. Our optimal solution would basically be a resizebar that looks like this (can't be dragged, just clicked on): We want a visible image, but we don't want the resizebar to be visible and take up horizontal width.

However, the only way forward that i've found is setting setResizeBarClass("ImgSplitbar"), and then changing it in load_skin.
What i haven't gotten to work:

a) Changing the center align of the image. I've tried every thing i can think of, from setting parameters in the class in load_skin, to setting the stylename and applying various CSS parameters.
The problem seems to be that there are a bunch of items inbetween the img and the object that has the style and parameters applied - the style gets applied to the outer resize bar div, but inside that there's a table with one row where the actual image is, so i can't really see how i can change the alignment.

b) Making the image float "on top " of the actual resize bar as in the image above. The image is again, inside the div and i can't really see a way to change this.

c) I would like to change the image when it is closing / opening, but it seems impossible. I tried adding a clickhandler like in the snippet below, but nothing changes.

resizeBarConfig.addClickHandler(clickEvent -> {
            GWT.log("CLICKY");
            Splitbar newConfig = new Splitbar();
            newConfig.setVSrc("myNewImage");
            mainSplitPane.setAutoChildProperties("resizeBar", newConfig);
            //redraw(); no difference
        });

If you have any pointers on the items above here i would love to hear them.

---

2. As a not-as-good but acceptable alternative, set a button somewhere that does what the resize bar does when you click on it.

However, i haven't managed to replicate what happens when i click on the resize bar. I've obviously tried all resize-methods i can find on the splitbar and navpane.
Could you point me to what i should call in order to do the same thing the resize bar does when clicked on?


I would love to get the resize bar to look as in the image, it looks pretty neat i think.

[mathias]

Any chance anybody would have the time to respond to this? Would be great. Seems to me that the code is there already, just need some way to call it.

[Isomorphic]

It's not really clear what you want to do. You say:

would basically be a resizebar that looks like this (can't be dragged, just clicked on): We want a visible image, but we don't want the resizebar to be visible and take up horizontal width.

It's not clear if you want resizing, but just want it invisible, or you don't want resizing at all and just want expand/collapse.

If you want invisible resizing, you can just turn on canDragResize and use resizeFrom to limit it to the right. For the expand/collapse icon, make it a peer (since it sticks out of the bounding box) and use snapTo positioning.

Alternatively, you can do this via an invisible resizeBar, by just setting all the media to blank.gif and setting the width to 1px (nothing can be truly zero width). You can't make an ImgBar render your expand/collapse icon because that's not what it's documented to do, but again it can be created as a separate snapTo peer.

Keep in mind the entire assembly shouldn't be there on mobile.

[mathias]

Hey, huge thanks for responding. We don't want it to be draggable. just two fixed widths of the navbar that expands/collapses when a button is pressed. And that button would be cool if it looked like the image cause we think it looks great :)

Not sure i got the thing about peer and snapto, but i'll try and play around with that.

So you're saying that if i want to hide the built-in one resizebar look and feel, the way to go is to blank out all the gifs? That would lead to a lot of unneccesary loading on the server, but that'll work i guess.

So, how can i call on the splitbar to tell it to expand and collapse it's navbar?

[Isomorphic]

If you set the media to blank, that would have zero effect on your server - at most one request for a trivial image that is cacheable (although it's probably already cached).

However, if you don't want resizing, why add a resizeBar? It seems like you focused in on the resize bar because it happens to appear in the same place as the widget you want to add, even though the behavior you want is totally unrelated. You haven't mentioned any of the behaviors of a resizeBar as desirable, so, no resizeBar.

So again you just want this:

For the expand/collapse icon, make it a peer (since it sticks out of the bounding box) and use snapTo positioning.

Any element could create this button - it could be your left pane, or it could be the SplitPane. Use snapTo positioning (see Canvas.snapTo) to place it. When clicked it just resizes the left pane as you like, and toggles it's visual state.

[mathias]

I understand! I absolutely do not need the resize bar at all since the users are not to drag it. However, i have tried to instead resizing the SplitPane manually when a button is pressed but i haven't for the life of me gotten it to work: (see my point 2 in my initial post)

In SplitPane, there is a method called setNavigationPaneWidth, but if you change it later you get a warning message:

"Cannot change configuration property 'navigationPaneWidth' to 400 now that component nav has been created"

I have tried:

//getNavPane().setWidth(LayoutConf.getInstance().getSmallNavWidth()); //only works if starting out small then making wider
//getNavigationPane().setWidth(LayoutConf.getInstance().getSmallNavWidth()); //only works if starting out small then making wider
//setNavigationPaneWidth(LayoutConf.getInstance().getSmallNavWidth()); //only works before component created

the getNavePane()/getNavigationPane() works if you start out by calling the setNavigationPaneWidth with a smaller value then expanding/collapsing with getNavPane().setWidth(). However, if you start with the setNavigationPaneWidth and then make it more narrow, it becomes narrow but everything to the right stays in place.

Is there anyway to change the width of the navpane programmatically post-create?

[Isomorphic]

Is there anyway to change the width of the navpane programmatically post-create?

As you observed, the SplitPane.setNavigationPaneWidth() API is only valid during initialization of the SplitPane. After that, you need to set the width on SplitPane's leftLayout autochild.

NavPanel navPanel; // navPanel member

public void setNavPaneDynamicWidth(int width) {
     navPanel.getCanvasAutoChild("leftLayout").setWidth(width);
}

As mentioned in the docs for setNavigationPaneWidth(), you only want to adjust the navigation pane width when multiple panes are visible (i.e., so not on a handset), but fortunately leftLayout is an empty layout and not used in the handset case, so setting its width in that case harmlessly no-ops.

If you want to check whether the autochild is used in the current layout, you can check for members:

NavPanel navPanel; // navPanel member

public void checkForSideBySidePanes() {
    Layout leftLayout = (Layout)navPanel.getCanvasAutoChild("leftLayout");
    if (leftLayout.getMembersLength() > 0) {
        SC.warn("Multiple panes are being shown side by side.");
    } 
}

[mathias]

I bow my head in thanks for this super-concrete clarification. I'll will look at it asap, and get back to you if i have any issues. If not - thanks!

[mathias]

Hi again, i have now tried it, and the navigationbar-autochild suggestion works like a charm, great stuff.


However, i have some problems with the image and snapto - i.e. making an image hover above the split in the splitpane. I'm hoping you have time to pass on some insight.

consider this example:

public void onModuleLoad() {
    Layout left = new Layout();
    left.setBorder("1px solid blue");
    Layout right = new Layout();
    right.setBorder("1px solid red");
    SplitPane pane = new SplitPane(left, right);
    pane.setShowResizeBars(false).setShowDetailToolStrip(false);
    pane.setWidth100().setHeight100();

    Img img = new Img(WebConstants.RELOAD_IMG, 100, 100);
    img.setSnapTo("R");
    img.setBorder("1px solid green");
    img.setSnapEdge("C");
    left.addMember(img);

    pane.draw();
}

1. It works kind of, but the img ends up "pushing" the detail pane to the right. See the attached image:



2. if i set snapTo tp "TR" instead of "R" the image is moved there, but the snapedge is ignored.

Can i do something to make the img float above "everything"? (That is, in the image the red and blue borders are next to eachother.)

Pointers much appreciated.

(As an aside: The docs for setSnapEdge doesn't say what the valid values are, like setSnapTo does. I took a change on "C" and it seems to work.)

[Blama]

Hi mathias1,

members make the Layout adapt for it. Try left.addChild(img).

Best regards
Blama

[mathias]

Thanks Blama, but if i do that, the snapEdge stops working, the image only snaps to.

[Isomorphic]

The problem is that the children of a canvas, even if not managed as layout members, are included in the overflow of that canvas. So your "img" canvas is causing your "left" widget to overflow, and thus the "img" canvas can't ultimately be centered on the "left" widget's edge. One potential solution is to add the "img" canvas as a peer of the "left" widget, but that still doesn't work, because then it's added as a child of "left" widget's parent, the leftLayout autochild, and so the letLayout autochild overflows, causing your "img" to still not stradle the panes.

What does work is for us to add the "img" canvas as a peer of the leftLayout autochild, because its parent is the entire SplitPane, and that's not going to overflow. So something like this:

left.setBorder("1px solid blue");
Layout right = new Layout();
right.setBorder("1px solid red");
SplitPane pane = new SplitPane(left, right);
pane.setShowResizeBars(false).setShowDetailToolStrip(false);
pane.setWidth100().setHeight100();

Img img = new Img(WebConstants.RELOAD_IMG, 100, 100);
img.setSnapTo("R");
img.setBorder("1px solid green");
img.setSnapEdge("C");
img.bringToFront();

pane.getCanvasAutoChild("leftLayout").addPeer(img);

Note the call to bringToFront(). This keeps the "img" canvas at the top of the z-order. Otherwise it may be rendered behind other widgets.

[mathias]

WHOOHOOOO IT WOOOOOOOORKS!!!! Thanks, you have been super helpful.

Since we're on a roll, i have one outstanding issue. It's not a big deal, i can make my arrow image just take up the bottom half, but now i'm basically just curious.

I would like the image not to be in the middle of the screen, but in the upper 20% or similar. So, i've tried calling snapTo("TR"), but that makes only the bottom half of the image show:

What i'd need is to be able to call setSnapEdge to something like ("TC"), i.e. topcenter. I have tried various combinations to no avail. Is there any way to accomplish this? Again if not, i'll just make the png have whitespace on the top half.

EDIT: I got this working, i think - i found another method, setSnapAxis(), tried setting it to "vertical", and it seems to work? Is there a better way?
--


THANKS AGAIN FOR ALL YOUR HELP! This kind of web stuff is hardest for me, i'm more of an app/backend guy, but small company etc.

[Isomorphic]

You may be looking for Canvas.setSnapOffsetLeft() and Canvas.setSnapOffsetTop() You can use these APIs to specify a % offset.

Canvas.snapAxis is a property related to a different feature called "snap-to-grid". Even if it's currently working for you for this purpose, it would not be guaranteed in future releases.