If you are a student stuck on this assignment, take a step back and draw your webpage on a piece of paper. Draw boxes around the elements. Each box you draw is a div . If you can visualize the boxes on paper, the code becomes much easier to write.
Explanation:
// Create a button and add it to the sub-view var button = new Button(100, 100, 100, 50, 'Click me!'); subView.add(button); 2.3.9 nested views codehs
Nested views can be used in a variety of scenarios, such as:
: You forgot to give your outermost container flex: 1 . Without this, the container collapses to a height of 0 pixels. If you are a student stuck on this
Why does CodeHS emphasize this in section 2.3.9? Because nested views are everywhere:
styles = StyleSheet.create({ container: flex: , backgroundColor: // Change to the color required by the assignment alignItems: // Centers the child view horizontally justifyContent: // Centers the child view vertically , nestedView: { width: , height: , backgroundColor: // Change to the color required by the assignment Use code with caution. Copied to clipboard Key Concepts to Remember: : The parent view uses justifyContent alignItems to control the position of the nested view. Hierarchical Structure : The inner If you can visualize the boxes on paper,
var rect2 = new Rectangle(50, 50); rect2.setPosition(70, 0); innerGroup.add(rect2);
Think of nested views like boxes within boxes. If you move the outer box, all the smaller boxes inside move with it. This is essential for keeping your app layout intact across different screen sizes. 🛠️ Core Code Structure
// Add the main view to the screen addView(mainView);
: While testing, assign vibrant background colors (like red, blue, green) to your nested views. This lets you visually confirm that your layout proportions are correct before submitting.
