Creating a basic app

Introduction

mobile android

Overview

In this example, we will be building a minimal app, by doing four things in Appspotr 3:

  1. create three views,

  2. add a dataset,

  3. connect everthing as patches,

  4. test the finished app.

Views

Views make up the user interface for your app. You can think of views as pages or screens.

Views are configured to contain a number of components (buttons, lists, sliders, texts, images and so on), which gives the app user things to see and intreract with.

All created views can used as patches.

Types of view

There are two basic types of view:

View

A self-contained view allowing for information display or user interaction.

List View

A view to display information from a dataset.
In this example, we will create three different views, which we then can use as patches.

Datasets

A dataset provides the app with data to use for various purposes. Typically it is a table with fields in rows and columns containing different values.

You can create datasets through the Appspotr CMS, and you can use your Appspotr app to add a new item into a dataset, update a dataset item or remove a dataset item.

In this example, we will create a very simple dataset consisting of a number of data items each with a name and description.

Patches

Patches are building blocks that connect together in Patchwork, so that you can visually create the app’s work flow.

Each patch in Appspotr’s CMS has a specific function making it easy to decide which patch to use for a particular task.

There are three types of patches:

Type Function Used for

Navigation

App menus.

Menus and submenus

Views

"Pages" displayed to the app user.

View patches have to be created before they can be used.

Logic

Processing used by the app to achieve various functions.

Login, update lists, handle variables, perform calculations and manipulate data and storage, and more.
In this example, we will only be working with view patches.

Start

mobile android

Begin creating the app

  • Start in the Apps view.

    1. Use the Create App button:

      1. Name the app

      2. Put it in your organization

      3. Create the app

App Editor

Keep your preview open in a separate window so you can see the changes you make along the way.

  1. Open the Preview window and keep it on the side

Views

  • Go to Design > Views

  • You are now in the View Builder.

View 1

layer group

welcome_view

We want to create a view with an image, a button and a text display.

  1. Add a New view:

    1. Type: View

    2. Name: Welcome

Image

  1. Click the Add Component tab

  2. Find the Media group

  3. Click Image

An empty image container is added at the top of the canvas.

  1. Click the image on the canvas

  2. Open the Component Properties tab

  3. Click Default Image

  4. Upload an image from your computer

Any image in .png, or .jpg/.jpeg will do for this example.

Text Display

  1. Click the Add Component tab

  2. Find the Text Display group

  3. Click Text

A new text component is added to the canvas, right below the image.

  1. Click the text display on the canvas, and open the Component Properties tab

  2. Open the Component Properties tab and add some text, for instance This is the welcome view

Button

  1. Open the Add Component tab

  2. Find the Buttons group

  3. Click Touchable Text

A new component is added to the canvas, right below the text display.

  1. Click the button on the canvas, and Open the Component Properties tab

  2. Under Data properties, change the text of the button to Thank you!

  3. Find Styling and check the Override box

This disables the Styles setting for the view, and allows you to change how things look manually.

  1. Add a background color to it, so it stands out from the the rest of the canvas. Find Background Color and select a color with the color picker

  2. Find Text Align and set that to Center

  3. Find Font Size and set that to a higher value, like 24

You now have three components in your view Welcome.

Interactivity

Make the Button Work

  • The welcome_view button needs an event to work

    1. Go to the welcome_view and select the View Properties tab

    2. Find Outputs and click New Output

    3. Name the output buttonClick and select type Event

    4. Click Add

    5. Select the button component on the canvas

    6. Select the Component Properties tab

    7. Find On Press

    8. Select buttonClick in the drop down list

The button will now trigger an output event that can be connected to other things.

View 2

layer group

second_view

  • This view contains a list with data from chores

  • Go to Views

again and click New to create the second view for this example. Name the view second_view, this time select type List and click Create.

Check Free Positioning under View Layout Mode in the View Properties tab to enable resizing of the components and to move them around the canvas.

Text Display

  1. Click the Add Component tab.

  2. Find the Text Display group.

  3. Click Text, and a new component is added to the canvas.

That’s it for now. This view will later be connected to a list an populated with data.

View 3

layer group

description_view

The dataset chores contains 2 columns with data. So far we’ve only displayed 1 column, the name. Let’s display the description in a separate view.

Go to Views again and click New to create the third view for this example. Name the view description_view, this time select type View and click Create.

In the Views Properties tab, set View Layout Mode to Free Positioning so we can place components where we want them.

Rich Text Display

  • The Rich Text Display displays formatted text

  1. Click the Add Component tab.

  2. Find the Text Display group.

  3. Click Rich Text, and a new component is added to the canvas.

  4. Move it to the middle of the canvas and resize it to your liking

Input

  • The Text Input lets the user input text.

    1. Under the View Properties tab, scroll down to Inputs and click New Input.

    2. Give the input the same name as the dataset column it should display,in this case description.

    3. Select type Text and click Add.

    4. Select the rich text display on the canvas, and open the Component Properties tab.

    5. Under Data, write ${description} in the field Text. This instructs the rich text display to get it’s content from the input called description.

Back-navigation

The last thing we will do is to add events so when we click the description in the Rich Text component, we navigate back to the second_view or the welcome_view.

Go to Views again and select description_view.

Normal click

  1. Select the View Properties tab.

  2. Find Outputs and click New Output.

  3. Name the output richTextClick and select type Event.

  4. Click Add.

  5. Select the rich text component on the canvas.

  6. Select the Component Properties tab.

  7. Find On Press and select richTextClick in the drop down list.

Long click

  1. Select the View Properties tab.

  2. Find Outputs and click New Output.

  3. Name the output richTextLongClick and select type Event.

  4. Click Add.

  5. Now, select the rich text component on the canvas.

  6. Select the Component Properties tab.

  7. Find On Long Press and select richTextLongClick in the drop down list.

Dataset

database

Add Data To Your App

Go to Data > Datasets.

There are several options available when creating a dataset. In this case we will create a basic dataset manually, which will contain a list of household chores for our housekeeping app.

Create a dataset and structure

First we create the dataset.

  1. Click Create in the top right corner

  2. Click Create Dataset Manually

  3. Give the dataset the name chores

We are going to need two columns of data:

  1. Chore name

  2. Details about the chore

Now we create the data structure.

  1. Enter a name in the Column Name field (e.g. task)

  2. Select Text in the type drop down list

  3. Click Add Column

  4. Write Column Name field (e.g. description)

  5. Select Text in the type drop down list

These options aren’t used:
a. Create a List View (we already created the view)
b. List State (not using the state in this case)

  1. Click Add Dataset to save save the structure and data

The structure is now done.

Create dataset content

Time to add data to the dataset

  1. Click Add Item in the top right corner

  2. Enter Laundry in the task field

  3. Enter Sunday is always laundry day in the description field

  4. Click Save

Repeat the steps 1-4 to add more tasks and descriptions to the dataset, for instance:

Task Description

Garbage

Take out the garbage

Dishes

Do the dishes after dinner

Vacuum

Don’t forget the storage room

Connect the Dataset With a View

Go to Views

  1. Select second_view

  2. Open View Properties

  3. Find to Inputs

  4. Click New Input

  5. Select the dataset column name to display in the input

  6. Select type Text

  7. Click Add

  8. Select the text display on the canvas

  9. Open the Component Properties tab

  10. Find the Data section

  11. Enter ${task} in the field Text

This instructs the text display to get it’s content from the input called task.

We now have created an input from where text from the dataset will be displayed in the text display component.

Patchwork

chart network

Connecting things

  • Go to the Patchwork view

View 1

  1. Add the view welcome_view

  2. Connect the menu patch to the welcome_view

Output goes to input

View 2

We want a click on the button to open the second_view to display the list of chores.

  1. Add the view second_view

Earlier we created an output on the welcome_view patch, called buttonClick.

  1. Connect the buttonClick output to view input for second_view

  2. Open the the patch second_view

  3. Find the Type

  4. Select List in the dropdown

  5. Select the List Source chores

View 3

We want the data from the column description to be be passed from second_view to description_view when we select an item in the list.

  1. Add the view second_view

  2. Open the description_view patch

  3. Connect the onItemSelect output to the description_view view

  4. Select the connection between the patches.

  5. Find the Properties Mapper and

    1. Select second_view / description from the dropdown

Testing

mobile android

Trying things out

  • Go to the Preview

Button click

  • Click the button in view

A click on the button should open the second_view to display the list of chores.

Selection in list

  • Try to select an item in the list in second_view

If we select an item in the list, the view description_view should open.

Click and long click

  • Try clicking the Rich Text component:

    1. normal click

    2. long-click and hold

There should be a difference in where you end up.