TabbedComponent?


#1

Does it wok already? Should I try to use it since I need one…

If its not usable is there any estimate of when its completed?

thanks


#2

estimate of when it’s completed!? Ho ho ho

The old one works ok though - it’s used for the rack filters in tracktion.


#3

thanks I will try to use it then without the doc…

I guess I can go now to KVR and open a busy thread on the fact the V2 rack filters tabs GUI didn’t change 8)


#4

Starting to use the tabs I found the first problem. I want the tabs to be on top but the default width is very small so the full text does not show. So I called setTabOrientation but then it seems that the tabAreaSize sets the height of the tabs and not the width. The documentation says it does but I don’t understand how I can change the width to fit the text inside…In Tracktion the tabs are to the left so the width is set

// set the position and size of the tab area.
// If the tabs are on the left/right, tabAreaSize is the width of this area,
// otherwise it dictates the height of the bar at the top/bottom.
// The gaps are the number of pixels that will be left around the edges
// of the component for drawing a border.
void setTabOrientation (TabOrientation orientation,
                        int tabAreaSize,
                        int leftRightGap,
                        int topBottomGap);

#5

Ost,
If you care to post the code (or a minimal subset) I’ll be happy to take a look.


#6

Not much code so far, just tried to create a tabbed component as a content component of a dialog box. I think its a design issue not a bug. I put 200 as the tab size but I get tab with height 200 while I wanted width 200 so my text can fit in the tab…worst case I will just use left oriented tabs like in Tracktion racks…

//-----------------------------------------------------------------------------------------
PCContentComponent::PCContentComponent() : TabbedComponent( String::empty )
{
// add tabs
addTab( 0, new TabbedComponentBasicTab( “C Interface” ) );
addTab( 1, new TabbedComponentBasicTab( “effect Op Codes” ) );
addTab( 1, new TabbedComponentBasicTab( “audioMaster Op Codes” ) );
setTabOrientation (TabbedComponent::TabsAtTop, 200, 10, 10 );
}


#7

This should do the trick. Not sure if it’s the best way, but it works.

PCContentComponent() : TabbedComponent( String::empty )
{
// add tabs
TabbedComponentBasicTab *t;
t = new TabbedComponentBasicTab( “C Interface” );
t->setSize(200,t->getHeight());

addTab( 0, t);

addTab( 1, new TabbedComponentBasicTab( “effect Op Codes” ) );
addTab( 1, new TabbedComponentBasicTab( “audioMaster Op Codes” ) );
setTabOrientation(TabbedComponent::TabsAtTop, 50, 10, 10 );
}


#8

thanks, looks like a good idea. for now I changed my UI to work with tabs on the left but then I might want to control the exact size of those as well…


#9

So you create a class for this Component, add the tabs in the constructor and set the Size of it, the colours etc. I imagine you add to this class the destructor, the Paint method and the tabWasClicked (else my compilator shows me an error). My problem is I can’t see the tab component, in the place I add the components of the window, I have written this :

tabPrincipal = new TabbedComponentWindow();
addAndMakeVisible (tabPrincipal);

My class definition is :

TabbedComponentWindow::TabbedComponentWindow()
:TabbedComponent(String::empty)
{
// add tabs
addTab (0, new TabbedComponentBasicTab (T(“Principal”)) );
addTab (1, new TabbedComponentBasicTab (T(“Settings”)) );
setTabOrientation (TabbedComponent::TabsAtTop, 200, 10, 10 );
setColours (Colours::grey, Colours::black, Colours::grey, Colours::grey, Colours::grey);
}

TabbedComponentWindow::~TabbedComponentWindow()
{
}

void TabbedComponentWindow::paint (Graphics& g)
{
TabbedComponent::paint(g);
}

void TabbedComponentWindow::tabWasClicked (int newSelectedIndex,
bool clickedTabWasAlreadySelected, const ModifierKeys &currentModifiers)
{
}

What have I forgotten ? Thanks :wink:


#10

Here’s a full example. Hope it helps

[code]
class RTMContentComponent : public Component,SimpleListBoxModel
{
TextButton *Edit, *Move,Delete;
SimpleListBox
MyList;
String Tag;

public:

RTMContentComponent(const String& inTag) : Component( String::empty )

{

Tag = inTag;
Colour tempc = Colours::aquamarine;
Colour temp2 = Colours::azure;
addAndMakeVisible(Edit = new TextButton(T("Edit"), temp2, tempc, temp2, T("Edit")));
Edit->setSize(65, 25);

addAndMakeVisible(Delete = new TextButton(T("Delete"), temp2, tempc, temp2, T("Delete")));
Delete->setSize(65, 25);

addAndMakeVisible(Move = new TextButton(T("Move"), temp2, tempc, temp2, T("Move")));
Move->setSize(65, 25);

addAndMakeVisible(MyList = new SimpleListBox(Tag, this));
MyList->setSize(105, 105);

setSize(75, 155);

}

int getNumRows() {return 20; }
void paintListBoxItem(int rowNumber, Graphics &g, int width, int height, bool rowIsSelected)
{

	if(rowIsSelected)
		g.fillAll (Colours::aquamarine);

	g.drawText(Tag + " " + String(rowNumber), 
			   4, 0, width - 4, height, 
			   Justification::centredLeft, true);


}


void resized()

{
Edit->setTopLeftPosition(5, 5);
Delete->setTopLeftPosition(5, 30);
Move->setTopLeftPosition(5, 55);
MyList->setTopLeftPosition(75, 5);
}

~RTMContentComponent()
{

}

};

class RTMTab : public TabbedComponent
{

RTMContentComponent * arLabels[3];

public:
void tabWasClicked (int newSelectedIndex,
bool clickedTabWasAlreadySelected,
const ModifierKeys& currentModifiers)
{
if (clickedTabWasAlreadySelected)
return;
arLabels[newSelectedIndex]->setBounds(5,5,75,75);
setContentComponent(arLabels[newSelectedIndex]);
}
RTMTab() : TabbedComponent( String::empty )
{
// add tabs
int i;
TabbedComponentBasicTab *t;
String s = "tab ";

for (i = 0; i<3; i++)
{
	s.printf("tab %d",i );
	t = new TabbedComponentBasicTab(s);
	t->setSize(100,t->getHeight());
	addTab( i, t);
	s.printf("test %d",i );
	arLabels[i] = new RTMContentComponent(s);//("babel",s);
	
}

setTabOrientation(TabbedComponent::TabsAtTop, 30, 10, 10 );
setCurrentlySelectedTab (0);

}
~RTMTab()
{
}

};[/code][/code]


#11

thanks, the tabs (to the left) works now great and I am very happy with them, busy now with the rest of the project…


#12

this was in response to wolfen :slight_smile:


#13

Thank you very much !!! :wink: I will try with your code…


#14

It seems I have done everything I need in the declaration of the Tab class, but nothing is visible :cry: Maybe the problem is in the code of the window…

Here is my full code :

[code]#include “MainWindow.h”

const tchar* const menuButtonName = T(“Bouton d’exemple”);

//==============================================================================
// Classe des onglets
class TabbedComponentWindow : public TabbedComponent
{
TextButton* testButton;

public:

TabbedComponentWindow()
:TabbedComponent(String::empty)
{
testButton = new TextButton (menuButtonName,
Colours::black,
Colours::lightgrey,
Colours::darkgrey,
T(“click for a demo”));

  addAndMakeVisible (testButton);
  testButton->setBounds (10, 10, 200, 24);      
  testButton->setTriggeredOnMouseDown (true);
  
  // add tabs 
      
  TabbedComponentBasicTab *t; 
  t = new TabbedComponentBasicTab("Principal"); 
  t->setSize(200,t->getHeight()); 

  addTab (0, t); 
  addTab (1, new TabbedComponentBasicTab (T("Settings")) );        
  setColours (Colours::grey, Colours::black, Colours::grey, Colours::grey, Colours::grey);
  setVisible(true);
  setTabOrientation (TabbedComponent::TabsAtTop, 30, 10, 10 ); 
  setCurrentlySelectedTab(0);
  setContentComponent(testButton);

}

~TabbedComponentWindow()
{
}

void tabWasClicked (int newSelectedIndex,
bool clickedTabWasAlreadySelected, const ModifierKeys &currentModifiers)
{
setContentComponent(testButton);
}
};

//==============================================================================
class MainPanel : public Component,
public ActionListener

{
// On a besoin de boutons pour les menus avec des popups

Label* hello;

// Onglets
TabbedComponentWindow* tabPrincipal;

public:
//==============================================================================
MainPanel()
: Component(T(“MainPanel”))
{
setOpaque (true);
setVisible (true);

hello = new Label(String::empty, T("Salut tout le monde !"));
hello->setBounds(10,50,200,24);
addAndMakeVisible (hello);

tabPrincipal = new TabbedComponentWindow();   
addAndMakeVisible (tabPrincipal);

}

~MainPanel()
{
}

//==============================================================================
void paint (Graphics& g)
{
SolidColourBrush solidColourBrush (Colours::blanchedalmond);
g.setBrush (&solidColourBrush);
g.fillAll();

}

void mouseDown (const MouseEvent& e)
{
JUCEApplication::quit();
}

void actionListenerCallback (const String& source)
{ if (source == menuButtonName)
{ hello->setText(T(“C’est appuyé !”));
}
}

};

//==============================================================================
ApplicationMainWindow::ApplicationMainWindow()
: DialogWindow (T(“Groove Generator for Tracktion”), Colours::lavender, false)
{
setVisible (true);
setResizeable (true);
setContentComponent (new MainPanel(), false);
}

ApplicationMainWindow::~ApplicationMainWindow()
{
JUCEApplication::quit();
}

void ApplicationMainWindow::paint (Graphics& g)
{
// customize your title bar and frame appeareance here.
DialogWindow::paint(g);
} [/code]

Sorry for the height of my post :oops:


#15

And something else : when I replace setContentComponent (new MainPanel(), false); by setContentComponent (new TabbedComponentWindow(), false); in the last lines, I can see my TabbedComponent ! ! ! ! But I can’t see it else… (And I need MainPanel, because I want to put components in the tabs and also in the bottom of the page, common for all the tabs so…)

Is it possible to add a TabbedComponent in my MainPanel ? I don’t think so…


#16

Ok, you know, I can work without this answer, I will just have the tabs in the full window :wink:


#17

Sorry- I am occopied to my ears with other projects, let alone a day job :lol: . I’ll try to play with this on the weekend. Will let you know if I’m onto something


#18

Thanks, but i have given up :lol: But if u want to check the end of the the thread “Playing a Midi File”… :wink: I just need this and won’t need anymore to use Juce’s functions in my project, so I will be able to do a first version.


#19