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.

Clicking Add App will open a list of template to start your app from

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.

Click on the add button (”+”) to add content to your app

Then click on the Page button.

The add view lets you select what to add. Click the ”Page” option.

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.

The *Select page type* dialog. Lets you select the base page appearance.

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”.

Your newly created page. A bit empty but otherwise good looking.

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.

Tab 2 page is also empty. But perfect for adding a starting point of our upcoming page change.

Again, click the add button (”+”) to add content. Then click ”Row” to add a new row. After that you’ll see this view:

After clicking ”Row” in the ”Add” view, you’ll see this.

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.

The editor is now in *Edit* mode. Some more buttons appeared and the view to the right changed.

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.

The row behavior page controls what happens when we click the row.

To add an action to be performed (when the row is tapped), click the ”+ Add” button in the ”Edit row behavior” view.

A long list of actions that can be performed.

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 adding the row behavior and going back from Edit mode

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?