Creating a basic app
Introduction
Overview
In this example, we will be building a minimal app, by doing four things in Appspotr 3:
-
create three views,
-
add a dataset,
-
connect everthing as patches,
-
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:
A self-contained view allowing for information display or user interaction. |
|
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
Begin creating the app
-
Start in the Apps view.
-
Use the Create App button:
-
Name the app
-
Put it in your organization
-
Create the app
-
-
View 1
welcome_view
We want to create a view with an image, a button and a text display.
-
Add a New view:
-
Type:
View
-
Name:
Welcome
-
Image
-
Click the Add Component tab
-
Find the Media group
-
Click Image
An empty image container is added at the top of the canvas.
-
Click the image on the canvas
-
Open the Component Properties tab
-
Click Default Image
-
Upload an image from your computer
Any image in .png
, or .jpg/.jpeg
will do for this example.
Text Display
-
Click the Add Component tab
-
Find the Text Display group
-
Click Text
A new text component is added to the canvas, right below the image.
-
Click the text display on the canvas, and open the Component Properties tab
-
Open the Component Properties tab and add some text, for instance
This is the welcome view
Button
-
Open the Add Component tab
-
Find the Buttons group
-
Click Touchable Text
A new component is added to the canvas, right below the text display.
-
Click the button on the canvas, and Open the Component Properties tab
-
Under Data properties, change the text of the button to
Thank you!
-
Find Styling and check the Override box
This disables the Styles setting for the view, and allows you to change how things look manually.
-
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
-
Find Text Align and set that to Center
-
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-
Go to the
welcome_view
and select the View Properties tab -
Find Outputs and click New Output
-
Name the output
buttonClick
and select type Event -
Click Add
-
Select the button component on the canvas
-
Select the Component Properties tab
-
Find On Press
-
Select
buttonClick
in the drop down list
-
The button will now trigger an output event that can be connected to other things.
View 2
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.
View 3
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
-
Click the Add Component tab.
-
Find the Text Display group.
-
Click Rich Text, and a new component is added to the canvas.
-
Move it to the middle of the canvas and resize it to your liking
Input
-
The Text Input lets the user input text.
-
Under the View Properties tab, scroll down to Inputs and click New Input.
-
Give the input the same name as the dataset column it should display,in this case
description
. -
Select type Text and click Add.
-
Select the rich text display on the canvas, and open the Component Properties tab.
-
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
.
Long click
-
Select the View Properties tab.
-
Find Outputs and click New Output.
-
Name the output
richTextLongClick
and select type Event. -
Click Add.
-
Now, select the rich text component on the canvas.
-
Select the Component Properties tab.
-
Find On Long Press and select
richTextLongClick
in the drop down list.
Dataset
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.
-
Click Create in the top right corner
-
Click Create Dataset Manually
-
Give the dataset the name
chores
We are going to need two columns of data:
-
Chore name
-
Details about the chore
Now we create the data structure.
-
Enter a name in the Column Name field (e.g.
task
) -
Select Text in the type drop down list
-
Click Add Column
-
Write Column Name field (e.g.
description
) -
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) |
-
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
-
Click Add Item in the top right corner
-
Enter
Laundry
in thetask
field -
Enter
Sunday is always laundry day
in thedescription
field -
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
-
Select
second_view
-
Open View Properties
-
Find to Inputs
-
Click New Input
-
Select the dataset column
name
to display in the input -
Select type Text
-
Click Add
-
Select the text display on the canvas
-
Open the Component Properties tab
-
Find the Data section
-
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
Connecting things
-
Go to the Patchwork view
View 2
We want a click on the button to open the second_view
to display the list of chores.
-
Add the view
second_view
Earlier we created an output on the welcome_view
patch, called buttonClick
.
-
Connect the
buttonClick
output to view input forsecond_view
-
Open the the patch
second_view
-
Find the Type
-
Select List in the dropdown
-
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.
-
Add the view
second_view
-
Open the
description_view
patch -
Connect the onItemSelect output to the
description_view
view -
Select the connection between the patches.
-
Find the Properties Mapper and
-
Select
second_view / description
from the dropdown
-