Extend the tabs of codename on so to set a limit

[Th3B1gBull]

Hello everybody,

I would like to extend the tabs of codename one, so that for example there are always just 4 maximum tabs, and the last one if there are more then 4 is a "More" Button, which causes not to switch tab but to open a small pop up to select the tab  I would like to go in.

Has anybody already did some thing like this, and could maybe guide me where to start ?

Thank you very much 

Greetings

[Shai Almog]

Hi,
there is a request for this functionality but we never got around to do this.
The simplest way would just be to derive addTab and if the tab count exceeds 3 create the more tab and keep every additional container.
Then just add a button representing that container to the more tab.
When the button is clicked create a form with that container in it and show it.

[Th3B1gBull]

Thank you for the fast answer.

My problem is how could I show the More Button to look like a normal Tab button. And what would be the best solution to open just a pop up menu with the other containers.

Example:
I have container1,container2,container3,container4,container5 na widht 4 or more I would like some thing like this

Container1        Container2                 Container3              More

The first 3 Container/Tabbuttons should work normaly as they do now, and the More Button shoulld open a small popup menu maybe up from there ore something like this. 

I dont get why you would create a new Form.

Thanks, 

Greetings

[Th3B1gBull]

I feel like changing Form destroys the whole feeling of the Tabs... If you know what I mean.

[Shai Almog]

If you use the GUI builder navigating between forms destroys the previous form. Forms are always created on demand.
When you add a Tab a button is created, you can bind an action listener to it. You can also use a selection listener on the tab and pop a dialog.

[Th3B1gBull]

Thanks. Any way I am not using the Gui Builder. And clicking on the more tab would always change to that container + i can still swipe into it...

[Shai Almog]

Swiping is problematic, you will have to disable it.
If you override the selection listener then show a blocking dialog it won't have time to show the blank tab. Then if the use cancels the dialog you can just restore the tab selection to the previous tab.

[Th3B1gBull]

Thank you, slowly im findig a solution. I would not like to abdicate the swiping.

But how can i chane tab via code?
SetSelectedIndex seems not to work.

[Shai Almog]

setSelectedIndex should work. Its possible that you hit an edge case where it doesn't. Possibly related to showing a dialog?

[Th3B1gBull]

I just tried it on a edge ( The more Tab ) but thats where I need it. No I just tried this, without any dialog.

[Shai Almog]

We use the method all the time. Its possible that a different tab is selected after due to navigation or other code.

[Th3B1gBull]

What I did is to add the method in the SelectionChangedListener and set the tab index, retrieving the index from the tab that navigated to the more tab using the oldindex value.... where am I wrong?

[Shai Almog]

Recursion is my guess. Place a breakpoint on your method and see what happened.

[Th3B1gBull]

Well, I tried everything and I cannot understand why this isn't working.

Here the code:

 

private  SelectionListener tabsSelectionListener = new SelectionListener(){
    public void selectionChanged(int oldSelected, int newSelected) {
    main.setTitle(tabs.getTabTitle(newSelected));
   
    enum_tabs e;
    e = enum_tabs.values()[newSelected];
    switch (e) {
 case Stories:{
 }
 break;
 case AroundMe:{
 
 }
 break;
 case People:{
 
 }
 break;
 case More:{
 tabs.setSelectedIndex(oldSelected);
 }
 break;
 default: {
 
 }
 break;
 }
    };

[Shai Almog]

If oldSelected != more would be a good start.
You might need to wrap this in a callSerially to flush an EDT cycle.

[Th3B1gBull]

Added, but ofcourse doesn't change anything. 

This method is so weired, tried different sort of calls but it's seems just to be useless nothing happens.....

Would you mind giving me a starting point for the "wrap this in a callSerially to flush an EDT cycle" ?

Thanks

[Shai Almog]

Just wrap the code in the body with

Display.getInstance().callSerially(new Runnable() {
   public void run() {
        ... your code here
   }
});

Normally this is used to send data back to the EDT but in this case it can be useful to deffer a call to the next EDT cycle and let this event chain complete.

[Th3B1gBull]

Hello, I'm still not getting the result I want..... it just jumps into the More tab, I tried everything....

Any other ideaa ?

[Shai Almog]

As a last ditch hack use getTabsContainer() then get the last component from within using getComponentAt(3) and remove it.
Add your own Tab button by just creating a Button and invoking setUIID("Tab") set the text/icon and bind your own action listener.
Haven't tried it but it might work... Unfortunately I can't guarantee it will continue working forever.

[Th3B1gBull]

Thank you for this, not good if it suddenlty doesnt work any more...
Maybe this helps, I found out that when I hardcore for example setSelectedIndex(0) it actualy changes the titel of the tab, but not its content.

And also if i use setSelectedIndex(oldselected-1) it changes the titel, i only can't switch to the tab where I came from. 

[Th3B1gBull]

so the question is how to repaint the tab, and why the tab from where I came from is the only one which can't be changed

[Th3B1gBull]

setSelectedIndex works everywhere but not in the SelectionListener ..... so creepy -.-

[Shai Almog]

There are lots of dependencies. The hack I mentioned before should work for the forseeable future unless we change something inherent in the Tabs component.
Regardless due to the way Codename One is built (static linking) once your app is in production this won't break.