Working with pages when building your app

Introduction

A page is the basic building block of an app. When you build an app in Appery.io, you create pages that contain UI components, such as buttons, input and label areas, datepickers, links, radio and checkboxes, lists, images, video, audio, map and panel elements.

Each component as well as page itself has properties which may be changed if necessary.

Properties of the Page

When you open your startScreen page (or any other page), you will see the image of your device in the middle, the Components palette left to it and the Properties panel right to it.

g001

A page layout can be portrait or landscape. You may easily change the page layout by clicking the corresponding icon on the top menu. The icons appear as you open the page tab.

Sel0011

The Properties panel has the following elements:

  • Save As Screen Template button – the page may be saved as a template. Then on creating a new page, you will be asked to choose the template:
    Sel0014
  • Screen Type – on clicking the Change button a Choose Template dialog box opens where you can change the page template:
    Sel0015
  • Show Header check box – if checked, page header appears. Checked by default.
  • Show Footer check box – if checked, page footer appears. Checked by default.
  • Swatch drop-down list – changes the swatch of the page without changing other pages. To change the theme and a swatch of the whole project go to App settings. Read more about working with themes.
  • Name – the name of the page. By this name the page may be called. By default, the start page is called StartScreen, other pages are called Screen1, Screen2, etc.
  • Custom Size check box – if checked, the size of the page may be specified by you.
  • Dimension – width and height fields become editable when the Custom Size box is checked.
  • Predefined Screen Size drop-down list of the standard page sizes. Becomes disabled when the Custom Size box is checked.

The page consists of three parts: Header, Container and Footer.
Header and Footer may be shown or hidden. Container is the main part of the page where the components may be placed. The only component that may be placed only on the Header or Footer is NavBar (navigation bar). If both Header and Footer are hidden, the NavBar component will appear hidden too.

Page Header has some unique properties:

  • Back Button check box – if checked, a button appears in the header.
  • Back Button Text – becomes editable when Back Button is checked.

Screen Template

While building your Appery.io app you may need to have several similar pages. In this case you can create one screen template and use it for creating other pages’ UI.

Creating Screen Templates

To create a screen template make the following steps:

  1. Put all the components which should be the same on every page created from this template.
  2. Select the page name and in the Property panel click the Save As Screen Template button.
    g002
  3. Name the new template and save it in the Save As Template dialog box.
    g003
  4. The created screen template appears in the list of Templates on the Project view (left-hand side):
    g004
  5. In the Component palette a new component appears - Workarea. Drag and drop it into the page where you suppose to place the different components on different pages.
    g005
  6. Save the project.

When creating a new page or changing the Screen Type property, you can choose your new template as the page template.

If Workarea component is absent on the template, you will not be able to make a page of this type, because such template will be inactive until you add work area there.

Sel0017

Editing Screen Templates

To edit your Screen Template you can click it in the list of templates on the Project view and the screen template tab will open.

You can drag and drop components, edit properties, add services and events to the template like to common page. The only demand that defines the templates is Workarea. Every Screen Template needs to have at least one Workarea (it may have some)

g006

Note: Events and services added to the screen template you cannot edit on the page created from the template. So they will not appear on the Events or Data tabs of your page. But they will still work.

The components’ properties set on the screen template can be edited only if you export the properties. To do this make the following steps:

  1. Click the  template name
    g007
  2. On the Properties panel click the Export Properties button
    g008
  3. Add the property name and select the component and the attribute from the lists
    g009
    or click the Populate automatically button to have the list of standard properties for exporting
    g010
    You may add and remove properties from the list any time.
    After the properties are added they will appear in the screen Properties panel, if the template is chosen as the screen type or if the page is created based on this template. Thus you can customize any of the exported property for every use of the screen template.

When you edit your screen template all the pages based on it will change at once.

Using Screen Templates

When you create a new page, you will be asked to choose between the blank page template and the templates created by you.

g011

If you choose your template, the new page will have all the components your template includes. The workarea (area where you may add new components on the page) will be separated by rectangles:

g012

If you put no component to the workarea it will be hidden while testing and using your app:

g014 g015

When you select the page name, the custom properties defined for the screen template will appear in the  Properties panel.

g016

When you edit these properties they will be changed only for this page. You cannot edit any other property of the template components while building the UI.

Note: Events and services added to the screen template you also cannot edit on the page created from the template. So they will not appear on the Events or Data tabs of your page. But they will still work. You cannot add events to the components from the template as well.

If your page was created from the screen template, besides exported properties you can edit only the page name. Other properties are disabled:

g017

If you need to change them, you may open your screen template and edit the screen properties there, or you may click the Break Apart Screen Template button if you don’t want to edit the screen template.

g018

After you click the Break Apart Screen Template button you will find the following changes:

  • Workareas disappear from the mobile page, all the components from the workarea stay on the page;
  • Screen properties become editable;
  • Every component on the page has its properties editable.

Screen Type

If you have a page created from the blank page template, you can change its template by making the following:

  1. Select the page name.
  2. On the Properties panel find the Screen Type property and click the Change button.
    g019
  3. Choose the template
    g020

Note: When you change the screen type to Blank mobile screen, the components from your page will stay as they were. But if you change the screen type to any other template, all the components and events from your page will be replaced with the components that belong to the selected template.


Posted: September 05, 2013 Last modified: March 05, 2014