Skip to main content

App Structure

app-structure

An Applicaster App is built from a number of core building blocks.

Theme​

The Theme is a plugin that contains some principal information about the app layout

  • App background color
  • Status bar background color
  • Status bar theme
  • Screen padding top
  • Screen padding bottom
  • Screen padding left
  • Screen padding right
  • Component margin top
  • Component margin bottom
  • Component padding top
  • Component padding bottom
  • Component padding left
  • Component padding right
  • Component gutter vertical
  • Component gutter horizontal

Default values that can be adjusted per app ensure an app will appear sensible when it is first built.

theme

Screens​

All Zapp apps are built form screens. Using Zapp Studio you can configure and design what screens your app will have in its layout. You can build both dynamic and static screens for you app. A dynamic screen is a basically a template screen you set once and can hold different content according to a given context (e.g. a series screen that repeats its design and structure, but displays a different content according to the show context).

Components​

Screen contain components. A component is a structure to hold pieces of content in themed way such as episodes, movies of a certain genre, promoted content such as "recently added" or "latest podcasts" The possibilities are endless.

Components can be:

Horizontal Lists​

horizontal-lists

Rails (Vertical Lists)​

rails

Grids​

grids

Heroes​

A hero component is actually a Horizontal List with an item limit set to 1

heros

info

Components can have headers that describe the content of the component.

Components can also be structured into groups of any number of components and the content distributed across them Using the Group Component e.g.

A header for a title A Hero to promote a Show A Horizontal List of Seasons Selecting a Season opens another screen for episodes of that season

Cell Style​

Components contain cells. In Applicaster language these are called Power Cells because they are so flexible. There are 3 types of power cell depending principally where the text and image sit in relation to each other and a 4th Power Cell for headers.

power cells

Any Power Cell can be used in any component. Power cells are hugely flexible in terms of

  • Image aspect ratio and size
  • Lines of text
  • Font types, size, weight, color
  • Background color
  • Focus states
  • Overlays, badges, runtime indications
  • Corner rounding
  • Spacing between cells
  • Scrolling behavior on mobile (snap, float)

Below are some screen shots of how power cells have been styled.

power cell example 1 power cell example 2 power cell example 3 power cell example 4 power cell example 5 power cell example 6

An app has a navigation method. A designer and app builder can choose from

Side Menu​

A list of screens is presented in an animated and scrollable side menu launched from the burger icon.

Side menu

Top tabs​

Related content such as a program guide or seasons of a show are distributed across the tabs.

Top tabs

Bottom Tabs​

An alternative to the side menu for core app navigation. Screens may animate whilst tabs stay constant at the bottom or a new screen view may completely replace the tabs with new content.

Bottom Tabs