New Tab Control... well, finished anyways

User Code & Projects tonegodgui
21
@rockfire said: Another update. This fixes 99% of it. There is still one issue that you'll see in the video below that seems to happen (so far only to vertical tabs), after you've resize the tab controls container a bit.

Patch can be found here

A lot of it was down to rounding, the root cause being TabControl when it set the sizes, setting them to rounded values helped a lot. Also the GameTimer used to show/hide buttons needed to be 0.26, i.e. longer than the effect. I’m not sure if this is the right approach. Can you guarantee that a timer used that will always run after the effect is finished? Is there no way to execute an actual method when the event really finished (i.e. part of the batch?).

When sliding is turned off it now uses exactly the same code so both should behave identically.

Note i accidentally left setAsContainer() commented out in that patch, i often use that and setting a patterned background to layout stuff. I think someone else has mentioned this, but a debug mode that highlights bounds of all elements would be cool.

I’ll have another go at that last resizing issue tonight!

[video]http://youtu.be/-SsWlFAFqY4[/video]

RR

Nice! I’ll start playing around with it and see if I can figure out the Vertical orientation issue. Thanks so much for doing this!

22

It looks like there is still an issue with Horizontal sliding if you resize while on anything but the first tab.

23

Thoughts:

— In horizontal mode the next tab should always align left unless you are paged out to the last tab.
— In h mode, tab 0’s offset from 0 should be stored for resize use.
— In vertical mode this should happen aligned to the top
— In v mode, the last tabs offset from zero should be stored for resize use
— In controlResizeHook, the tabs should be moved to align the current tab to the same position. This way, there can never be a sync problem.

I’ll give it a shot and see if it is possible.

24

@rockfire
Ok… bare with me here. I removed all of the attempts to sort this out to fix an underlying issue that was stopping this from working properly in the first place. I left in alignment issue fixes from your patch, but everything else has been semi-reset. I added the vertical placement fix for resizing, which basically pushes the tabs during resize as if the y axis was not flipped.

From this point, adding back in the limiting of tab position changes should be simple. I’ll keep at it here, but I’ll leave the current commit for you to take a look at and see if it helps.

25

@rockfire
Scratch that… I committed what I think is working correctly. I wasn’t able to break it. Could you give it a go and let me know if you were able to?

26

Yup, Im not seeing any problems with resizing in that, and there is no random sticking or other odd behavior. As you say its just missing the nice position limiting thing. I do notice also that if you resize the window, the button on the right appears slightly too late (out by ‘trayPadding’ by the looks of it). I’m not sure if it was doing that before as I didn’t test.

27

Lol. My last comment was a reply to your previous one. I’ll update again :wink:

28

Note that this is not working the way you had it… it waits til the last tab to factor in the offset. I like what you had, but wasn’t sure how to accomplish it with the fix.

29

I do believe you have got it :stuck_out_tongue:

I’m not seeing any problems with that at all, either vertical or horizontal, sliding or not.

The ONLY issue I see is that the slide left/right is not completely consistent. Slide left aligns to the very edge on each slide. The slide to the right seems to slide a whole buttons width except on the last tab (which it does correctly).

I would rather see the slide right do that same, it just looks neater to me. But at this point, that REALLY is a personal preference!

Thanks for your work on this.

30

Haha. Its happened again. I take so long to type replies :facepalm:

1 Like
31
@t0neg0d said: Note that this is not working the way you had it... it waits til the last tab to factor in the offset. I like what you had, but wasn't sure how to accomplish it with the fix.

Will have a play with this later on.

32

@t0neg0d, I think this patch will do the trick. The main trick it seems was related to the current index. The problem with my way was that you might not actually be increasing/decreasing the index. To combat this the index is now recalculated after each next / previous (or at the end of the effect).

I also found using 0.26f is still not good enough for the timer. On occasion it was leaving arrow buttons visible or invisible. Using brute force, I changed this to 0.5f.

New vid

[video]http://youtu.be/cmPa6VQ9aPk[/video]

2 Likes
33

Perfect… nice work!

34

@rockfire
Steeeerange… I can’t apply this diff patch =(

35

Damn. Erm. Ok, here is the full SlideTray.java. I guess you’ll have to manually diff it. Patches never seem to work for me ;*(

1 Like
36
@rockfire said: Damn. Erm. Ok, here is the full SlideTray.java. I guess you'll have to manually diff it. Patches never seem to work for me ;*(

Actually half of them work fine for me… I can’t see a difference between the ones that work and don’t =(

Thanks for the full file!

37

@t0neg0d,
Are you planning on adding an example of this to your example framework app?

38
@hexmare said: @t0neg0d, Are you planning on adding an example of this to your example framework app?

Sure am… but for the time being… here is one:

[java]
Window win = new Window(screen, Vector2f.ZERO, new Vector2f(500,400));

TabControl tc = new TabControl(screen, UIDUtil.getUID(), new Vector2f(10,10),
new Vector2f(win.getContentArea().getWidth()-20, win.getContentArea().getHeight()-20),
screen.getStyle(“Tab”).getVector4f(“resizeBorders”),
null,
Orientation.HORIZONTAL // Change this to VERTICAL for other layout
) {
@Override
public void onTabSelect(int index) { System.out.println(index); }
};
tc.setUseSlideEffect(true);
tc.addTab(“Tab 1”);
tc.addTab(“Tab 2 is longer again”);
tc.addTab(“Tab 3”);
tc.addTab(“Tab 4”);
tc.addTab(“Tab 5”);
tc.addTab(“Tab 6”);

ButtonAdapter ba = new ButtonAdapter(screen, new Vector2f(10,10));
ba.setText(“Test”);
tc.addTabChild(0, ba);

win.addClippingLayer(win);
win.addWindowContent(tc);

screen.addElement(win);

tc.setSelectedTab(0);
[/java]

39

If it helps, here is the recipe for adding a custom tab button. I am using this to get a right-click event. Extend TabControl and add the following methods :-

[java]
public void addTabWithRMBSupport(String title) {
ButtonAdapter tab = getTabButtonWithRMBSupport();
addTab(title, tab, false, true);
}

public void addTabWithRMBSupport(String title, boolean useScrollPanel) {
    ButtonAdapter tab = getTabButtonWithRMBSupport();
    addTab(title, tab, useScrollPanel, true);
}

private ButtonAdapter getTabButtonWithRMBSupport() {
    Vector2f pos = new Vector2f();
    Vector2f dim = new Vector2f();
    if (getOrientation() == Orientation.HORIZONTAL) {
        pos.set(tabInc * tabButtonIndex, 0);
        dim.set(screen.getStyle("Tab").getVector2f("defaultSize"));
    } else {
        pos.set(0, tabInc * tabButtonIndex);
        dim.set(screen.getStyle("Tab").getVector2f("defaultSize").y, screen.getStyle("Tab").getVector2f("defaultSize").x);
    }
    ButtonAdapter tab = new ButtonAdapter(
            screen,
            getUID() + ":Tab" + tabButtonIndex,
            pos,
            dim,
            (getOrientation() == Orientation.HORIZONTAL) ? screen.getStyle("Tab").getVector4f("resizeBorders") : screen.getStyle("Tab").getVector4f("resizeBordersV"),
            (getOrientation() == Orientation.HORIZONTAL) ? screen.getStyle("Tab").getString("defaultImg") : screen.getStyle("Tab").getString("defaultImgV")) {
        @Override
        public void onButtonMouseRightUp(MouseButtonEvent evt, boolean toggled) {
            super.onButtonMouseRightUp(evt, toggled);
            onTabRightClick((Integer) getElementUserData(), evt);

        }
    };
    String hImg = (getOrientation() == Orientation.HORIZONTAL) ? screen.getStyle("Tab").getString("hoverImg") : screen.getStyle("Tab").getString("hoverImgV");
    String pImg = (getOrientation() == Orientation.HORIZONTAL) ? screen.getStyle("Tab").getString("pressedImg") : screen.getStyle("Tab").getString("pressedImgV");
    tab.setButtonHoverInfo(hImg, screen.getStyle("Tab").getColorRGBA("hoverColor"));
    tab.setButtonPressedInfo(pImg, screen.getStyle("Tab").getColorRGBA("pressedColor"));
    tab.setDocking(Docking.NW);
    tab.setScaleEW(false);
    tab.setScaleNS(false);
    return tab;
}

protected void onTabRightClick(int indexOf, MouseButtonEvent evt) {
}

[/java]

Then where you use the control …

[java]
MyTabControl mtc= new MyTabControl(screen) {
@Override
protected void onTabRightClick(int indexOf, MouseButtonEvent evt) {
// Use this to select on right click, you may or may not want this
setSelectedTabIndex(indexOf);

           // Do other stuff
    }
};
mtc.addTabWithRMBSupport("Tab 1");
mtc.addTabChild(0, someChild);

[/java]