Hello,
I am trying to implement different (views)/ pages for each Text button,
in short is it possible to use text buttons more like tabs instead of ON/OFF functionality,
Implementing On-click that way could be an option, but need more help on it… if not text buttons,
Can anyone suggest how to achieve this?
TIA!
Like radio button?
https://docs.juce.com/master/tutorial_radio_buttons_checkboxes.html
@bayu No like tabbed component, meaning if you click on the button, it would show up some UI with different UI elements.
TabbedComponent?
https://docs.juce.com/master/classTabbedComponent.html
Alternatively you can create a PageManager which handles button clicks and keeps an OwnedArray of PageComponent(s).
Rail
Yeah I know what tabbed component is. You could look how to utilize juce::TabbedComponent on Widgets example project.
But since you’re questioning TextButton as a single “active” state to show a specific component that radioButtonGroup are for, to toggle any other button in the same group off when one of the the buttons is clicked.
Is there a way to load this demo for Radio buttons tutorial?
There is a link to load the project, but the .jucer only works for the first part of tutorial, the checkboxes !
to be more clear on what I am looking for,
for eg this plugin,
Here it has three (sub)sections in the middle, Sounds, ADSR & Stochastic.
And all these (sub)sections do have different UI elements, for eg. ADSR has A, D, S, R dials etc.
What could be the best approach to achieve this? I was trying to use text button and then implement make visible (sub) component, but it’s not that effective.
As @railjonrogut pointed out, the TabbedComponent is what you want. The JUCE widgets demo has an example of how it can be used. You don’t need radio or text buttons. Instad, you need to use a TabbedButtonBar
@rory using tabbed component didn’t solve the problem. You are right, I want the “tabs” functionality, but UI design is with the text buttons.
Using tabs, changes the UI looks.
is there any other way I can approach this? @railjonrogut @bayu @rory
Is it possible to use text button toggle state, and onClick() {addandMakevisible(myComponent);}
something like this?
TIA!
As I mentioned before you can do this using 3 classes: PageManager, PageComponent and TabComponent. Each page is derived from PageComponent and PageManager keeps an array of PageComponent. TabComponent keeps an array of the tab buttons. The PageManager is used to switch pages.
PageManager::PageManager (YourAudioProcessor* pProcessor) : m_pProcessor (pProcessor)
{
}
PageComponent* PageManager::getPage (int iIndex) noexcept
{
if (iIndex >= 0 && iIndex < m_PagesArray.size())
return m_PagesArray.getUnchecked (iIndex);
return nullptr;
}
PageComponent* PageManager::addPage (const String szTabName)
{
int iIndex = m_PagesArray.size();
return m_PagesArray.add (new PageComponent (m_pProcessor, szTabName, iIndex));
}
void PageManager::showPage (int iIndex)
{
m_iActivePage = iIndex;
int iCurrentIndex = 0;
for (auto* pPage : m_PagesArray)
{
if (iCurrentIndex != iIndex)
pPage->setVisible (false);
++iCurrentIndex;
}
PageComponent* pPage = getPage (m_iActivePage);
if (pPage != nullptr)
pPage->setVisible (true);
}
Rail
@railjonrogut Thanks Rail for quick response!
Just confirming once, It can be treated as PageManager → PluginEditor ,
PageComponent → myComponent,
TabComponent → Tabs, right?
Yes, in your Editor class have private members:
PageManager m_PageManager;
TabComponent m_TabComponent;
and your page classes which are derived from PageComponent:
FirstPage m_FirstPage;
SecondPage m_SecondPage;
ThirdPage m_ThirdPage;
FourthPage m_FourthPage;
In the Editor constructor:
addChildComponent( m_PageManager.addPage( "FIRST PAGE" ) );
addChildComponent( m_PageManager.addPage( "SECOND PAGE" ) );
addChildComponent( m_PageManager.addPage( "THIRD PAGE" ) );
addChildComponent( m_PageManager.addPage( "FOURTH PAGE" ) );
addChildComponent( m_TabComponent );
PageComponent* pPage = m_PageManager.getPage( 0 );
if ( pPage != nullptr )
pPage->setChildPage( &m_FirstPage, 0.0f, true );
:
m_TabComponent.addTab ("FIRST PAGE",
[this]()
{
m_PageManager.showPage( 0 );
m_TabComponent.setActiveTab( 0 );
m_Processor.setLastActivePage( 0 );
m_Processor.setActiveTab( 0 );
},
m_pSharedImagesPtr->getPageTabImage( 0, 0 ), m_pSharedImagesPtr->getPageTabImage( 0, 1 ),
m_pSharedImagesPtr->getPageTabImage( 0, 2 ), m_pSharedImagesPtr->getPageTabImage( 0, 3 ) );
:
m_TabComponent.setVisible( true );
Rail
@railjonrogut Is there any tutorial/example/opensource available that uses this PageManager concept?
It’s little confusing, on how to use it.
I’m dealing with something like this , first, second and third Button, on click, toggles between first, second and Third view (or pages as you say)
A bit late to the party, but if you need a TabbedComponent that looks like TextButtons, then the normal way would be to create a LookAndFeel to customize the drawing of the TabbedBarButtons.
You find the drawing code in TabbedButtonBar: LookAndFeel. And for you it is particularly easy if you just copy the TextButton drawing functions over to the TabbedButtonBar LookAndFeelMethods.
I would do this the exact same way @daniel outlined. It’s basically a copy and paste operation.
@daniel Thanks for the great suggestion. It is easy way to implement it.
But one doubt, replacing TabbedButtonBar: LookAndFeel with TextButton lookAndFeel methods, how to get the tab shape as button, is it even possible?
to only adjust the size of tab and not the whole tab page?
Just try it. 
You will soon see what you need to play with to make it work.
I have also implemented the TabbedComponent and TabbedButtonBar for my app which has many pages, and made them look like buttons using the LookAndFeel methods, it’s entirely doable.
if you basically copy the contents or portions of LookAndFeel_V4::drawButtonBackground and paste them into YourLookAndFeel::drawTabButton, you can get a button shape with rounded corners if that’s what you want.
Thanks @stephenk for confirming that getting exact button shape is possible!
