App Navigation & Design Flow

Going on with the application development; I am actually happy to experience the ease of creating applications by using Unity UI system. By using Unity’s integrated on-click Event functionalities, we can manipulate the window navigations without the need of any script in some cases.

Just to remind you abot the app that I am working on right now: it is an insurance app starts with the main menu screen. On the Main Menu, we have 2 options: Finding a case or Creating a new one. For more details, check my previous article by clicking here.

Both of them are parented in a holder object.

Once we click on the “Find Case #” button, we first want to enable the Search Panel. We can easily create some ready-to-choose functionality for the buttons — without a need of a script. For the applications that you are developing which include no information to be transferred to the next screen, it will be more efficient to use this simple method. However, in the Insurance App that we are developing, we will need to hold and transfer the Case information. Thus, most of the screen changes will be handled through scripting.

To add the functionality through inspector: Select the Button to manipulate it in the Inspector. Add an On click Event — drag and drop the game object that you want to be turned on once we click on the button — Select GameObject — Set Active and check the box.

So you got the point, it is really easy to create the basic navigations using Unity. Despite Unity provides us some easy layouts for handling easy events, we will need the fun part for more functionality in our app : coding :)

App Design Flow

The application requires input from the user in many windows and outputs the provided information. Thus, there are many objects to be manipulated. Certainly, it would have been so inefficient to manipulate all of these objects within a single UI Manager script. I am sure that you would not want to struggle with tens of variable in it.

On the other hand, if we are going to use a number of scripts, they will be sharing some degree of functionality. A script will be created for each panel and the components within the panels will be controlled via these scripts. To prevent excessive coding (typing the same code on several scripts), we can use either an abstract class or interface. In this case, we will be using an Interface.

I have created an interface namely “IPanel” with a method. All of the panel scripts will be implementing from this interface and will have to include the ProcessInfo method for this reason.

Secondly, the application is simply handling cases with a constructed way. As can be observed on the overview screen, each case contains a case number, name, date, location, location notes, photo and photo notes variables.

Since all of the cases will contain the same data, it is better to create a Case class. Using this class, we will be easily creating new objects of Case class.

Case Class

The application will also check if a case number is existing on the server using the case ID. So, we will actually use an array of Case class while creating a new case and searching a case within the database.

The application will start with the main menu screen which provides two selections: Find Case or Create a Case.

On the main menu, if we click on the “Create A Case” button, it will also call the CreateCase method in the UIManager.

Create a Case Button

Despite the window navigation with only using buttons can be completed easily, we will be using the UIManager script to enable the data transfer between different windows. As its a manager class, it is using Singleton design patern.

UIManager Script

As can be seen above, we are creating a new case without checking on the existing case for now — as we are not communicating with the AWS server just yet.

Rather than manipulating the screen switching from the inspector, Client Info Panel (the panel that becomes active once we click on the Create A Case Button) will also activate the next screen within the Script.

By updating the activeCase object in the UIManager, we are transferring the user data between different windows — which will be called one by one in the overview window.

Unity Developer