function start(){ var main = new Tab(); // Parent container var profileCard = new Rectangle(200, 250); profileCard.setPosition(100, 100); profileCard.setColor("#f0f0f0"); profileCard.setBorderWidth(2);
Now go ahead, nest those views, and watch your UI come to life! Need more help? Check your CodeHS discussion forum or review the "Graphics and Events" section of your textbook. Happy coding! 2.3.9 nested views codehs
// Parent View: The profile card container var profileCard = new Rectangle(200, 250); profileCard.setPosition(100, 100); // Position on the main screen profileCard.setColor("lightgray"); profileCard.setBorderWidth(2); profileCard.setBorderColor("black"); This is where nesting becomes critical. Notice how the coordinates of the child views are relative to profileCard (assuming the library supports relative positioning with add ). If the library requires absolute coordinates, you must offset them. function start(){ var main = new Tab(); //
In this article, we will break down exactly what nested views are, why CodeHS requires you to learn them, and how to solve the problem efficiently. What Are Nested Views? In the context of the CodeHS Graphics library (often based on Tab or View classes), a nested view refers to a user interface element (a "View") that contains other views inside it. Happy coding
// Child: Button var btn = new Rectangle(100, 35); btn.setPosition(50, 180); btn.setColor("#0084ff"); var btnLabel = new Text("Connect"); btnLabel.setPosition(100, 202); btnLabel.setColor("white"); btnLabel.setTextAlign("center");
main.add(profileCard); Combine all the steps: