replace VerticalAquaRadioButtonGroup and VerticalCheckBoxGroup with layout managers

[pixelzoom]

Add layout managers, either in scenery, sun or scenery-phet, to make these groups go away.

Or clean up these groups, and generalize to one 'vertical group' that is independent of component type. There is duplicate code here.

[pixelzoom]

I have to say... This got even worse after it was instrumented for PhET-iO.

For example, in VerticalCheckBoxGroup, the tandem for each check box is set like this:

65  tandem: options.tandem.createTandem( items[ i ].tandemName || 'checkBox' )

If I had used this in BLL, the tandemName for each item is the same as the solution name. So there would be no "CheckBox" in any of the tandem id for the check boxes. Whereas if I had created individual CheckBox instances, I would have given them tandem ids that have a "CheckBox" suffix (e.g. "showLinesCheckBox").

There's a similar problem in tandem ids for the AquaRadioButtons created by VerticalAquaRadioButtonGroup.

@samreid Do you agree that this is a little messed up?

[samreid]

We struggled with the same problem in ComboBox and settled on a similar strategy:

itemNodeTandem = options.tandem.createTandem( itemNodeOptions.tandemName || 'comboBoxItemNode' );

Forces and Motion: Basics uses VerticalCheckBoxGroup like so:

    this.verticalCheckBoxGroup = new VerticalCheckBoxGroup( [
      {
        content: new Text( sumOfForcesString, _.extend( { tandem: tandem.createTandem( 'showSumOfForcesTextNode' ) }, fontOptions ) ),
        property: model.showSumOfForcesProperty,
        tandemName: 'showSumOfForcesCheckBox'
      },
      {
        content: new Text( valuesString, _.extend( { tandem: tandem.createTandem( 'showValuesTextNode' ) }, fontOptions ) ),
        property: model.showValuesProperty,
        tandemName: 'showValuesCheckBox'
      },
      {
        content: showSpeedContent,
        property: model.showSpeedProperty,
        tandemName: 'showSpeedCheckBox'
      }
    ], {
      tandem: tandem.createTandem( 'verticalCheckBoxGroup' )
    } );

If I had used this in BLL, the tandemName for each item is the same as the solution name.

Perhaps we should document (and possibly have assertions?) that the item tandems should end in "CheckBox" for VCBG and "RadioButton" for VARBG?

[pixelzoom]

In ComboBox, it's the item tandem ids that are automatically created. So we end up with ids like solutionCheckBox.drinkMix, which seems perfectly reasonable.

[samreid]

Why would it be reasonable to have solutionComboBox.drinkMix but not solutionRadioButtonPanel.drinkMix?

[pixelzoom]

It should be solutionRadioButtonPanel.drinkMixRadioButton.

[samreid]

I'm confused, we should chat!

[pixelzoom]

If you created your own CheckBox inside of a Panel, the id for the Panel would presumably be something like 'forcesControlPanel', and the CheckBox would be 'forcesControlPanel.showAppliedForceCheckBox', not 'forcesControlPanel.showAppliedForce'.

[samreid]

As pointed out in #30 (comment) the tandems end in showSpeedCheckBox not showSpeed. That is as-desired, right? So what is the problem?

[pixelzoom]

OK, I see... The client is responsible for the "*CheckBox" name.

[pixelzoom]

This doesn't appear to be a problem anymore, now that VBox is used. Closing.