When building applications you generally need to navigate between screens. You can achieve this via the navigation nodes.
We have a short example that shows a simple Master / Detail navigation pattern, based on the national park app from the For Each guide. We suggest that you review the For Each guide before continuing with this example. You can import the example below into Noodl by clicking the import button.
Using the Navigation node is pretty straight forward. Look at the Main component in the example project. Here the navigation is peformed when one of the items in the list is clicked.
When the Click signal is sent from one of the items in the For Each the Navigation node will navigate to its specified target page. The target page is specified in the properties of the node. You simply pick the target page from the drop down, we will show you later how to add new pages to the navigation.
When the navigation is performed a new copy of the target component is created and inserted on top of the screen that is currently on showing (on top). Navigation is managed in a Navigation Stack, where each time you navigate a new component is pushed on top of the stack.
When this happens you can also define a navigation transition. There are a few built in transitions that you can choose from and customize.
Try playing around with the different transitions and parameters. You can create lots of different effects using the built in transitions. Later we will also look at creating your own custom transitions.
Here is an example of the above customized transition:
Have a look at the reference documentation for the Navigate node for more details on the different transitions.
Another important aspect of navigation is passing parameters to the target screen. In this case we want to pass the Id of the Object whose data we want to display in the target screen. All Component Inputs of the target page component is made available as inputs on the Navigate node, so you can provide data to the page at the time of navigation.
In this example the Id is passed to the target screen (the Details component). The Id is used to access the Object containing the data we want to show. That's all we need to navigate from one screen to another.
The Details screen uses the Navigate Back node to return to the screen that started the navigation. This essentially pops the stack, i.e. removes the current top component, to reveal the one underneath.
The same transition used when navigating to the target screen is used to go back. All transitions have forward and back animations.
If you inspect the App compnent, which is also the root component of the application, you will see another core navigation node, the Navigation Stack node. This node represents the actual surface where navigation occurs, you have have many different navigation stacks.
After you create and place the Navigation Stack where you want it (it will consume the entire space of its parent) you need to specify a Name for the stack. This Name is used in Navigate nodes to refer to which stack should be used for navigation.
You also need to specify a Start Page. This is the page that is shown in the navigation stack when it is first created, before any navigation is performed.
You can manage the pages of the navigation stack via the properties. Here you can create new pages, remove and rename pages. You must provide a visual component for each page.
