Changing systemButton on click event

I'm looking at the following code from kitchen sink

//
//  Toolbar 2
//
var change = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.PLAY,
});
 
var test = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.PAUSE,
});
 
change.addEventListener('click', function()
{
    toolbar2.borderTop = false;
    toolbar2.borderBottom = false;
    toolbar2.translucent = true;
    toolbar2.barColor = '#000';
    toolbar2.width = 300;
 
    change.width = "160";
    change.title = "HOW DO I SWITCH TO A PAUSE BUTTON?";
});

How do you change the button on the click event? I'd like it switching from a play to pause button. Is it even possible?

I know this is kind of an old thread, but anyway..

You could do the following:

var playButton = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.PLAY
});
 
var pauseButton = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.PAUSE
});
 
playButton.addEventListener('click', function()
{
    if (!sound.isPlaying())
    {
        sound.play();
        win.setToolbar(
            [flexSpace,pauseButton,flexSpace],
            {translucent:true}
        );
    }
});
 
pauseButton.addEventListener('click', function()
{
    if (sound.isPlaying())
    {
        sound.pause();
        win.setToolbar(
            [flexSpace,playButton,flexSpace],
            {translucent:true}
        );
    }
});

That will repaint the toolbar in this case with the according button. Hope this helps

Ok, i have same problem.

I use this solution but add also progress bar into toolbar and when change from play to stop (example) the progress bar disappears for a few milliseconds...

from win2.setToolbar([flexSpace,play,pb,flexSpace],{translucent:true}); to win2.setToolbar([flexSpace,stop,pb,flexSpace],{translucent:true});

Thanks all!