Setting Up the Back and Forward Buttons
This navigation strategy is very simple to setup in the Designer. You can start by creating your project using a blank template.In the
Forward and Back Buttons Example
- In the Project Browser, right click on the Main Windows folder and select create a new Main Window. You have the option of renaming your Main Window Enter a name for your window to whatever best describes your the window . In this example, it’s called (i.e., Main Window 1. You don’t need to have a header on each window, but for this example, a label was added for clarity and called Main Window 1. Repeat ). Add a label to the window for clarity (i.e., Main Window 1) so when you navigate through different windows, you know precisely what window you're viewing. Repeat this step to create Main Window 2 and Main Window 3.
- From the the Component Palette in Designer, select and drag a a Button component component to your Main Window 1. Label the button, Main Window 2. In the Property Editor,
- Next we'll add a right green arrow to your button component from the Image Path property. To get the arrow to move to the right side of the button, set the Button component. With the Button component selected, click the folder to the right of the Image Path property . This opens the Image Management Tool.
- Open the Built-in/icons/24/ folder and select a right green arrow. Close the Image Management Tool.
- Set the Horizontal Text Position property to to Left in the Property Editor.
- Now you need to tell the Main Window 2 button what to do when someone a user clicks on it. Right click on the the Main Window 2 button and select Scripting and the button, select Scripting. The component scripting dialogue box dialog box will open.
- Under the Event Handlers folder, open the the action folder folder and select select actionPerformed.
- Click the the Open / Swap and Swap and Swap radio buttons. The Swapping function is used to put buttons on windows for easily building simple scripts The Swapping function builds a simple script to go back and forth between different main windows. The Swap function ensures only one main window is will be open at a time.
- From the the Window dropdown box, select select Main Windows/Main Window 2.
- Click OK OK.
- Save and Publish Publish your project.
- Open your your Client. Click on the Main Window 2 button and Ignition swaps the Main Window 1 will be swapped out with Main Window 2.
Repeat Steps 2 and 3 to create Main Windows 2 and 3, respectively. Make sure for On Main Window 2 , make sure you have a button for both Main Windows Window 1 and Main Window 3. Your Set your window path for the Main Window 1 button is set to to Main Windows/Main Window 1 (refer to step 4). For the Main Window 3 button, set the window path to to Main Windows/Main Window 3.
In the following example, each button navigates you to the next main window. Click on the Main Window 1 button and Ignition navigates you to Main Window 1. It swaps out Main Window 2 with Main Window 1 so you always have one main window open. In this image, Main Window 2 is open. By clicking either button, it open the respective window. Click on the Main Window 1 button, and Main Window 2 swaps out and opens Main Window 1. Click on the Main Window 3 button , and Ignition swaps out Main Window 2 swaps out and opens with Main Window 3.
You'll notice that you always have one main window open.