Tutorial 1 – Getting started
Hi and welcome to this first post helping you getting started with Appmost!
This post will go through the following topics:
- Creating a new app from a template
- Opening an existing app
- Creating a new page in your app
- Opening that same page from another page
Creating a new app
The first thing you want to do when starting Appmost for the first time is to create a new app. Apps are stored as a file locally on your computer. It has the .appmost file format. To create a new app just click ”New App” from the Home view. Or click ”File > New App…” from the macOS menu. Or via shortcut cmd + N.
Here select an appropriate template. The first one ”Empty app with tabbar” is good if you want to start from an (quite) empty start.
After this select a location where you want to save your new app.
Closing an app
If you want to close an open app, click File > Close App or shortcut cmd + W
Opening an app
Opening an app is very easy. Click File > Open app… from the menu or shortcut cmd + O. Then just locate and select your existing app to open.
Creating a new page in your app
When you have created your first app you may want to extend your app with new pages. A page represents a full screen view that the user can navigate to and from. To add a new page, got to the Run App view and click the ”+” button.
Then click on the Page button.
Note: You can (later) also try to add a Bottom tab. This creates a new page that sits in the bottom tab bar.
After this you get options on what type of page you want to add. Normal is the default option and is the most commonly used type. This page type consists of a list of ”rows” that you can modify. Click the Create button in the top right corner.
Next you need to enter an identifier for your page. This is a text string that can be used to reference your page. Some examples are: settingsPage, login, submitPage, contact.
We enter ”testPage” this time. Remember this for upcoming steps.
You should now see your newly created page. It’s quite empty and has a title of ”New Page”.
Congratulations, you have added your first app content! Was that so hard? Time for a break perhaps 😀
Note: Appmost auto-saves your changes, so no need to worry about saving. You can always undone and redo if you change things by accident.
In the last step of this intro tutorial, we’ll learn how to open this page from another page. A bit more complex, but not that hard.
Opening a page from another page
The most common task in an app is navigation. You navigate from one page to another very often. To do this we need an origin. Somewhere where a click or event will start the navigation. Let’s go back to a previous page. Let’s go to the page ”tab2”. You’ll find it in the Pages view to the right. Click on it to navigate directly to it.
Again, click the add button (”+”) to add content. Then click ”Row” to add a new row. After that you’ll see this view:
Here you can select the row appearance from a large library of predesigned row views. In this first tutorial we’ll go easy. Just click on the first row with the ”Left text” and ”Optional right text” as content. This will add a new row with that ”style”.
From here on we need to enter the ”Edit mode”. Until now we have only navigated the app or added content. Now we need to edit that content. Click the Edit button in red. This will change the appearance of the whole editor.
In edit more, if you click an element in the previewer, you’ll select that element to change its properties. Click our newly created row. This will show its properties to the right.
We wont change the appearance in this part of the tutorial. We just want to navigate to our newly created page. To change behaviors, click the ”Row behavior” button in the bottom right of the editor.
To add an action to be performed (when the row is tapped), click the ”+ Add” button in the ”Edit row behavior” view.
Here you’ll see a long list. Don’t worry, we are only interested in on of them. The Open page action. Click Open page in the list and then Save in the top right corner.
Next up the editor automatically jumps to the ”Select page to open” view. Here you select which page to open. Select our newly created page ”testPage”.
Note: As you can see there is an option to create a new page from within this view. Next time we can try to use this one to make things a bit more efficient. But not this time. Let’s keeps things basic.
Click Save to save that target. Now we’re done. We’ve have created a page. Then a row. Then made that row open our page. If you are done editing the row and it’s appearance quit Edit mode by clicking the red Done button.
After going back to the mode in which we run the app we can see that a small detail has changed. A small arrow (”>”) has appeared after the row. This indicated that the row is tappable and leads to a new page. If you try to click the row (not in Edit mode) it will navigate with a smooth animation to our new page. Success!
That’s that! We’ll get into more advanced features in upcoming tutorials.
Advanced things to try for your self:
- How do you change the texts in the row?
- What is the difference in behavior between Modal and Push when opening a page?
- How do I add a page in the tab bar?