5.7 Working with ScreenView to put all the components together

After all your components are built, we then proceed to the NewtonRaphsonScreenView.js file. This part of the development isn’t very convoluted and so it doesn’t require an in-depth explanation. The general idea is that we are importing all of the components that are going to be displayed on the screen.

Components Shown

We are making a new object (or an instance) of each component and using the this.addChild() method to add each component to the screen. Later I manually changed some of the layout to display everything accordingly.

5.7.1 Code

/**
 * All the components come together in a certain order to dispay them onto the screen.
 * @author Mayank Pandey
 */
import ScreenView from '../../../../joist/js/ScreenView.js';
import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
import newtonRaphson from '../../newtonRaphson.js';
import newtonRaphsonStrings from '../../newtonRaphsonStrings.js';
import NewtonRaphsonConstants from '../NewtonRaphsonConstants.js';
import MyLineControlPanel from './MyLineControlPanel.js';
import Results from './Results.js';
import GraphLinePlot from './GraphLinePlot.js';

class NewtonRaphsonScreenView extends ScreenView {

/**
* @param {NewtonRaphsonModel} model
*/
constructor( model ) {

 super();

 // Options for the two panels
 const panelOptions = {
   resize: false,
   cornerRadius: NewtonRaphsonConstants.CONTROL_PANEL_CORNER_RADIUS,
   fill: NewtonRaphsonConstants.CONTROL_PANEL_BACKGROUND_COLOR,
   align: 'left',
   xMargin: 10,
   yMargin: 10
 };

 // Create the "My Line" Control Panel (located to the left of the graph)
 const controlPanel = new MyLineControlPanel( model.graph, panelOptions );

 // Create the lineplot object.
 const lineplot = new GraphLinePlot( model.graph );

 // Create the Results panel.
 const results = new Results( model.graph, panelOptions );

 // Create the 'Reset All' Button, which resets the model and all view elements
 const resetAllButton = new ResetAllButton( {
   listener: () => {
     model.reset();
     results.reset();
   },
   right: this.layoutBounds.minX + 10,
   bottom: this.layoutBounds.maxY - 10
 } );

 // Add nodes to the scene graph. Order is irrelevant for the following nodes
 this.addChild( results );
 this.addChild( resetAllButton );
 this.addChild( controlPanel );
 this.addChild( lineplot );

 // Layout all the other nodes
 {
   controlPanel.left = 5;
   controlPanel.centerY = this.layoutBounds.centerY - 30;
   results.right = this.layoutBounds.maxX - 5;
   results.top = controlPanel.top;
   resetAllButton.left = controlPanel.left;
   resetAllButton.top = controlPanel.bottom + 20;
   lineplot.left = controlPanel.right + 20;
   lineplot.centerY = controlPanel.centerY;
 }
}


}

newtonRaphson.register( 'NewtonRaphsonScreenView', NewtonRaphsonScreenView );
export default NewtonRaphsonScreenView;