The previous recipe enabled us to show one level of a data tree; this recipe is going to allow us to navigate from one level to another, thus enabling us to explore the entire tree.
Open the files downloaded from the Packt Publishing website for Chapter 8 | Recipe 4 to follow along.
The following are the required steps to allow the user to navigate through the relational network:
- Create the
PlusButtonclass to allow the user to navigate down the tree. - Create the
MinusButtonclass to allow the user to navigate up the tree. - Add
RelationalNetworkEventto indicate to the relational network that the user wants to navigate. - In
NodeVisual, add thePlusButtonclass if the node is a child. - In
NodeVisual, add theMinusButtonclass if the node is the center node. - In
RelationalNetwork.as, add a listener to the center node for theRelationalNetworkEvent.NAVIGATE_TO_PARENTevent. - Still in
RelationalNetwork.as, add a listener to each child for theRelationalNetworkEvent.NAVIGATE_TO_CHILDRENevent. - In
RelationalNetwork.as, create the listener function for the previous events. In that function remove everything from the stage and recreate the network using the node that was clicked on as the center node. If the center node was clicked use its parent.
What we need to do here is first create the buttons (steps 1 and 2) so that the user can click on them to indicate that he wants to navigate up or down the relational network. We drew simple buttons using the Flash drawing API: a plus for the children and a minus for the center node. We located those buttons just below the label in the center of the node. The placement might not be the optimal one, but in this context, where there are not too many options, it works well (if you wanted to add more interaction possibilities, it might get crowded).
When one of these buttons get clicked, the NodeVisual class catches it and dispatches either a NAVIGATE_TO_PARENT or NAVIGATE_TO_CHILDREN event. The RelationalNetwork class then catches it. If the node that sent the event is the center node, then it recreates the network from its parent. If the node that sent the event is a child, then it recreates the network from the child node.
The code for recreating the network is found in the _onNavigateToChildren and _onNavigateToParent functions and is basically the same that can be found in the constructor of the RelationalNetwork class.
By tiding up the code a bit, you could make this recipe better.
If you look at the code from the constructor and the functions _onNavigateToChildren and _onNavigateToParent, you will see a lot of the same code being repeated. This is not a sign of a good code (it was done like this so that we could upgrade the code for later recipes) and could be consolidated in just one function. Doing this would make the code easier to maintain.