The following tutorial will take you through creating a very basic app using MobileNation. Importantly, you’ll learn how to create screens, insert buttons onto the phone stage and then link buttons to screens so that you can move from one screen to another, and then back.
Step 1
Create a new project and build the first screen.
Click on the ‘From Scratch’ link on the right hand side.
Within the Inspector window, enter ‘Home Screen’ for the Name of the default screen.
Click on the Label widget, hold down with your mouse button, and then drag the widget to the phone stage. Drop the new Label widget onto the phone stage as shown above.
Enter ‘This is the first screen’ into the Text field as highlighted above. The text you enter will appear in realtime on the phone stage as shown above.
Click on the Button widget, hold down with your mouse button, and then drag the widget to the phone stage. Drop the new Button widget onto the phone stage as shown above.
Enter ‘Next’ into the Text field as highlighted above. The text you enter will appear as the button label as shown above.
Step 2
Create a new screen within your project.
In the lower left of the screen, click on the + icon to create a new screen within your MobileNation project. The ‘New View’ screen will be added within the left hand window as shown above.
Within the Inspector window, enter ‘Screen Two’ for the Name of the second screen. The screen item within the left hand window will update in realtime.
Click on the Label widget, hold down with your mouse button, and then drag the widget to the phone stage. Drop the new Label widget onto the phone stage as shown above.
Enter ‘This is the second screen’ into the Text field as highlighted above. The text you enter will appear in realtime on the phone stage as shown above.
Click on the Button widget, hold down with your mouse button, and then drag the widget to the phone stage. Drop the new Button widget onto the phone stage as shown above.
Enter ‘Back’ into the Text field as highlighted above. The text you enter will appear as the button label as shown above.
Step 3
Now you’re going to ‘wire’ your two screens together.
Within the Inspector window, expand Actions and then click, hold and drag on the Loaded icon as highlighted on the right above. Drag the ‘wire’ over to the left hand window, and drop it over the ‘Screen Two’ anchor as highlighted on the left.
When you drop the ‘wire’ onto the ‘Screen Two’ anchor a popup menu will be displayed. Select the ‘Load View’ option. This action will load the ‘Screen Two’ when a user taps the ‘Next’ button.
Click on ‘Screen Two’ on the left hand side.
Click on the ‘Back’ button, expand Actions, and then click, hold and drag on the Loaded icon as highlighted on the right above. Drag the ‘wire’ over to the left hand window, and drop it over the ‘Home Screen’ anchor as highlighted on the left.
When you drop the ‘wire’ onto the ‘Home Screen’ anchor a popup menu will be displayed. Select the ‘Load View’ option. This action will load the ‘Home Screen’ when a user taps the ‘Back’ button.
Click on the ‘Next’ button. From the ‘value’ dropdown menu within the Inspector window, select the ‘Slide left’ option from the dropdown menu.
Click on the ‘Screen Two’ screen within the left hand window. Click on the ‘Back’ button on the phone screen. From the ‘value’ dropdown menu within the Inspector window, select the ‘Slide right’ option from the dropdown menu.
You new app is complete.
Click on the ‘Preview’ button in the top right. The ‘Preparing Preview’ will begin generating the new app preview.
The unique QR code for the new app will be generated.
Take a phone of the QR code on your phone to view the new app on your iPhone or Android device.