Access a parent class in an OOP correct way - actionscript-3

Question

I just started programming OOP and I'm running into a scope problem.
In the following project, I have a masterClass called App. The App-class has Screens:Screen-class and a Navigation-class as it's children. From the navigation class I want to control which screens will be displayed. I don't know how to do this...
Please check the code to fully understand my intentions
Your help is really appreciated, I'd love to really learn programming and not just a dirty solution :) but all suggestions are welcome!
// Main Class //
public class App extends Sprite
{
private var screens:Array;
private var screen1:Screen;
private var screen2:Screen;
private var screen3:Screen;
private var screen4:Screen;
public var currentScreen:String;
//
private var navigation:Navigation;
public function App()
{
init();
}
private function init():void {
buildScreens();
buildNavigation();
}
private function buildScreens():void {
screen1 = new Screen();
screen1.name = 'startScreen';
currentScreen = screen1.name;
addChild(screen1);
screen2 = new Screen();
screen2.name = 'irrelevantA';
screen3 = new Screen();
screen3.name = 'irrelevantB';
screen4 = new Screen();
screen4.name = 'irrelevantC';
screens = new Array(screen1, screen2, screen3, screen4);
}
private function buildNavigation():void {
navigation = new Navigation(screens);
}
}
// Screen Class //
public class Screen extends Sprite
{
public function Screen()
{
// creates a new screen
}
}
// Navigation Class //
public class Navigation extends Sprite
{
private var buttons:Array;
public function Navigation(screens:Array)
{
addButtons(screens);
}
private function addButtons(screens:Array):void {
buttons = new Array();
for each(var screen:Screen in screens) {
var button:Button = new Button();
button.link = screen.name;
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
buttons.push(button);
}
}
private function mouseDown(e:MouseEvent):void {
// THIS IS WHAT MY QUESTION IS ABOUT: How should I talk to the parent class in an OOP correct way?
// and how can I add and remove a screen in the App class from here?
// Here some of my tries
// I don't think using parent to get there is a good way because next time it might be; parent.parent.parent
trace(e.target.parent.parent.currentScreen);
this.parent.currentScreen;
stage.App.currentScreen;
App.currentScreen;
//---------------------------------
}
}
// Button Class //
public class Button extends Sprite
{
public var link:String;
public function Button()
{
// creates a new button
}
}

Answer 1

If you directly access parent classes from child objects, you create strong coupling - which is exactly what you don't want in a well-built system. It is best not to access the application object directly, but to use event listeners and custom events to promote changes from e.g. the navigation.
Here's an example. First, create a custom event:
public class MyCustomEvent extends Event {
public static const MENU_ITEM_SELECTED : String = "MENU_ITEM_SELECTED";
public var selectedItem:String;
}
Then, let the navigation dispatch it, when a button is clicked:
public class Navigation extends Sprite () {
// ...
private function onButtonClicked(ev:Event) : void {
ev.stopPropagation();
var custEvent:MyCustomEvent = new MyCustomEvent(MyCustomEvent.MENU_ITEM_SELECTED);
custEvent.selectedItem = ev.target.name;
this.dispatchEvent (custEvent);
}
// ...
}
Finally, let the application handle the custom event and bring up a different screen:
public class App {
// ...
public function createNavigation () : void {
navigation = new Navigation ();
navigation.addEventListener (MyCustomEvent.MENU_ITEM_SELECTED, onMenuItemSelected);
// ... more stuff happening
}
// ...
private function onMenuItemSelected (ev:MyCustomEvent) : void {
switchToScreen (ev.selectedItem);
}
private function switchToScreen (name:String) : void {
// choose screen by name, etc.
}
}
For all of this, neither the screen, nor the navigation have to know anything about any other objects involved, so you can easily replace each one without breaking the rest of the system.

Answer 2

You basically want to communicate downward (parent to child) by passing in references as arguments (as you're doing with the screens array) and upwards (child to parent) by calling public functions.
So, in your case something like this:
App class:
private function buildNavigation():void {
navigation = new Navigation(this, screens);
}
//etc
public function changeScreen(newScreen:int):void{
//Your logic for adding/removing screens goes here
}
Navigation class:
private var app:App
public function Navigation(app:App, screens:Array)
{
this.app = app
addButtons(screens);
}
private function addButtons(screens:Array):void {
buttons = new Array();
for each(var screen:Screen in screens) {
var button:Button = new Button();
button.link = screen.name;
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
buttons.push(button);
}
}
private function mouseDown(e:MouseEvent):void {
app.changeScreens(2);
}
}
Obviously, change the implementation to suit your needs (for example, now that you have a reference to the App class, consider if you need to pass in a separate reference to the screens array or not) - this is just an example of how you can communicate.