Navigation

Ashera supports navigation between fragments. NavController class is provided in javascript which is proxy of NavController class in android and NavController functionality is simulated in other platforms. nav_graph.xml is used for declaring fragments and connecting the fragment to the layout. nav_graph.xml gives a visual flow of your application. Please note that there can be only one nav_graph.xml in Ashera.

Navigate to Fragment

The first step in navigation is to create an entry in nav_graph.xml. An example of the same is given below:

<fragment
	android:id="@+id/login"
	android:name="com.ashera.core.GenericFragment"
	android:label="Login"
	tools:layout="@layout/login"></fragment>

To create a navigation to login.xml, you need to declare fragment of type com.ashera.core.GenericFragment. The fragment with id @+id/login is mapped to ui with layout @layout/login.

When a fragment is created in nav_graph.xml, an encoded entry is generated in NavGraph.ts. The above fragment is encoded into a string with # separator and this string needs to passed to NavController method when we want to navigate to login.xml

export const login:string = 'fragment#login#layout/login.xml';

import { login } from './R/NavGraph';
export default class Index extends Fragment {
	@InjectController({})
    navController!: NavController;
	...
	async gotoLogin() {
		this.navController.navigateTo(login).executeCommand();
	}
}

Example of navigation to login.xml is shown below:

Navigate to Dialog

The first step in navigation is to create an entry in nav_graph.xml. An example of the same is given below:

<dialog
        android:id="@+id/dialog"
        android:name="com.ashera.core.MyDialog"
        style="@style/MyDialogStyleCloseOnTouchOutside"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:label="Dialog"
        tools:layout="@layout/dialog"></dialog>

To create a navigation to dialog.xml, you need to declare dialog of type com.ashera.core.MyDialog. The dialog with id @+id/dialog is mapped to ui with layout @layout/dialog.

When a dialog is created in nav_graph.xml, an encoded entry is generated in NavGraph.ts. The above dialog is encoded into a string with # separator and this string needs to passed to NavController method when we want to navigate to dialog.xml

export const dialog:string = 'dialog#dialog#layout/dialog.xml#match_parent#wrap_content#@style/MyDialogStyle';

import { dialog } from './R/NavGraph';
export default class Index extends Fragment {
	@InjectController({})
    navController!: NavController;
	...
	async openDialog() {
        this.navController.navigateTo(dialog).executeCommand();
    }
}

Example of dialog is shown below:

NavController

NavController is proxy to android NavController. In android, it calls methods on android native NavController. Let us look at some of the important methods on NavController.

Name	Description
navigateTo(actionId:string, ...scopedObjects:ScopedObject[])	Navigate to page with actionId (a constant defined in NavGraph.ts) with initial model objects passed into scopedObjects params.
popBackStack()	Remove the top view from stack. Equivalent of hitting back button.
popBackStackTo(destinationId: string, inclusive: boolean)	Pop all screens until the destinationId<Id of fragment defined in xml> based on inclusive flag.
navigateWithPopBackStackTo(actionId:string, destinationId: string, inclusive: boolean, ...scopedObjects:ScopedObject[])	Navigate to page with actionId (a constant defined in NavGraph.ts) and pop all screens until the destinationId<Id of fragment defined in xml> based on inclusive flag.
navigateAsTop(actionId:string, ...scopedObjects:ScopedObject[])	Remove all screens in stack and make this the top most screen.
closeDialog()	Use this method to close dialogs instead of popBackStack().

Example of navigation is shown below:

Child Fragment

Ashera supports child fragments. You can embed fragment of type "androidx.navigation.fragment.NavHostFragment" and associate it with navigation graph xml to achieve navigation for portion of a screen. This is very useful in scenarios where the app has a fixed bottom tab bar and each of the menu in the tab bar is associated with a different flow.

Example of child navigation is shown below:

Ashera also supports fragment of type "com.ashera.core.GenericFragment". The layout attribute can be specified to display the xml and replace method on the fragment can be used to replace the current layout being displayed.

Example of simple fragment embedding is shown below:

Data Binding

Animation