Create a Hello World! App
In this article, you create a simple app in AppStudio and then run the app in a simulator.
You perform the following tasks to create the app:
- Add a home screen to the app.
- Add a view to the app.
You should have already created an empty Hello World app in the article Start AppStudio. If you have not created the Hello World app, use the instructions in that article to do so now.
Add a Home screen to the app
The home screen is the first screen that the user sees after logging in to the app. In this exercise, you create the Home screen for the app. By itself, a screen does not define any visual display. To define the visual display, create a view and assign it to the screen. In the next exercise, you add a view to the screen.
To add a screen to the app:
- If the Hello World app is not open in AppStudio, open it by using the command File > Load Application.
- In the AppStudio toolbar, select the Screen Workflows icon, and the choose Default. The Screen Workflows screen appears in the Workspace.
- Right click anywhere in the Workflow work area, and choose Add Screen.
- Set the screen field values as follows:
- Name: Home
- Type: Form
- Entity: Dashboard
Parent Entity: (none) This field is grayed out and cannot be edited.
Dashboard is an empty entity created for you automatically in AppStudio.
- Click Create Screen. The Home screen appears in Screen Workflows.
- Click the Home screen icon once. The Home screen properties panel appears.
- In the Basic Properties section, set the Display Name to Home.
- In the Display Properties section, check the box for Startup Screen.
- In the Behavior section, set Data Behavior to
Note: Unlike most screens, the Home screen typically does not read any data from a data source. Setting Data Behavior to
No Dataalso improves app startup time.
- Save the app.
- Double-click the Home screen icon. The Home screen display appears. Note how you have no views assigned.
Add a View to the Home screen
Views determine what appears to the user. You use a view to lay out user-interface controls, such as text, check box, and list controls. You can also associate a data entity with a control. For example, you can associate the first name data entity with a Text Field control to display that information in the view.
To add a view to the Home screen:
- In the Home screen, select the Create View button.
- Set the View Name to Home and leave the Type as Form.
- Click Create. An empty view appears in the View Builder screen in the Workspace.
- Click the Toolbox icon in the lower left-corner of AppStudio.
- Click the Controls icon.
- Drag an Empty Space control into the left pane of the view. The Empty Space control keeps the next control from being flush to the top of the view.
- Drag a Button control into the left pane of the view, under the Empty Space control.
- For the Button control, set the Label property to “Hello World!”.
- Set the Screen Alignment of the Button control to Centered.
- Save your app. The View Builder appears as below:
Where to next
Now that you have created your basic Hello World! app, you are ready to run the app in a simulator. Proceed to the next article in this series, Run an App in a Simulator, for more information.