AppMachine Help Center

How can we help you?

Follow

AppMachine Layout Template

This page contains information about AppMachine Templates and the way they should and can be used.


About AppMachine Templates

AppMachine Templates will let you specify a layout in a XML like language. This layout will be translated into native elements on every supported platform.

Width Calculations

Every width you specify will be related to the width of the original iPhone coming at 320 pixels. These 320 pixels will be used as a reference point everywhere inside AppMachine. So when designing a layout you can take into account that the width of the screen will be 320 pixels and the height 480 pixels. We will translate the value to a relative value matching the device specific features.

> Sample

<container direction="vertical"> 

        <container direction="horizontal"> 

               <image height="52" width="52" margin="0" field="Thumb" />

               <container direction="vertical" vAlign="center" > 

                     <label field="name" margin="5"/>

                     <label field="DescriptionShort" maxlines="2" margin="0,5,5,5" />

                </container>

        </container>

</container>

Basic properties

Every single control that can be used in an AppMachine Item template supports the following basic properties. Besides these basic properties each control has it's own additional properties.

Property

Required

Supported values

Default value

Description

Width

Yes

  1. fill_parent
  2. wrap_content
  3. 100

fill_parent

Used to set the width of the control.

The third option will let you specify a pixel width.

Height

Yes

  1. fill_parent
  2. wrap_content
  3. 100

wrap_content

Used to set the height of the control

The third option will let you specify a pixel height for the control.

Flex

No

Integer value

1

When a control is wrapped inside multiple containers you can specify the flex to give each control a specific weight factor. This weight factor will be used to divide the available space.

Gravity

No

  • Left
  • Center
  • Right
  • Top
  • Bottom
  • TopLeft
  • TopCenter
  • TopRight
  • BottomLeft
  • BottomCenter
  • BottomRight

Left

Specifies the position of the control inside it's parent container when there is any remaining space.

Margin

No

Integer value

 

Specifies the margin that should be applied on the control. You can either specify a margin for all sides or specify a margin per side.

When specifying a margin per side it will be written as Top,Right,Bottom,Left

Min-width

No

Integer value

 

Specifies the minimum width of the control.

Min-height

No

Integer value

 

Specifies the minimum height of the control.

BackgroundColor

No

  • Hex value
  • Name of an AppMachine theme color

Transparent

Specifies the background color for the control.

For more information about AppMachine theme color keys please read this page.

Label

No

Text value  

Once specified, the label will be shown along the control declaring the label. Can be used to e.g. specify a label for a text field without having to add a label control manually.

Label-position

No

  • Top
  • Right
  • Bottom
  • Left
Top

Specifies the position of the label (if the label has a value and therefore is visible)

Label-bold

No

  • True
  • False
False

Indicates if the text inside the label should be rendered bold.

Controls

AppMachine Templates provide a wide range of controls you can use to build your custom screens and layouts.

Container

A container can be used to align controls either horizontal and vertical.

> Sample

1

2

3

<Container direction="vertical" width="fill_parent" height="wrap_content" margin="5" >

    <!-- The content of the container -->

</Container>

> Properties

The container control supports the following properties in extension to the basic properties.

Property

Required

Supported values

Default value

Description

Experimental

Direction

Yes

  • horizontal
  • vertical

vertical

The direction in which the controls should be stacked.

 

BorderSize

No

Number value

 

Not yet available

Yes

BorderColor

No

  • Hex color
  • Name of an AppMachine Theme color

 

Not yet available

Yes

 

FrameLayout

The frame layout can be used to stack controls on top of each other.

> Sample

1

2

3

<frameLayout width="fill_parent" height="wrap_content" margin="5" >

    <!-- The content of the container -->

</frameLayout >

> Properties

This control has no additional properties.

Label

The label control can be used to display simple - non formatted - text in the layout.

> Sample

1

<Label width="fill_parent" height="wrap_content" text="I can build my own native apps using AppMachine" />

> Properties

The label control supports the following properties in extension to the basic properties.

Property

Required

Supported values

Default value

Description

Field

No

 

 

The field that should be (data)bound to this control

Note: Only use field or text combining them won't work

Text

No

 

 

The static text that should be rendered in this label

Note: Only use field or value or text combining them won't work

TextColor

No

  • Hex color
  • Name of an AppMachine Theme color

Body

Specifies the color of the text.

LinkColor

No

  • Hex color
  • Name of an AppMachine Theme color

 

Specifies the color of hyperlinks detected inside the text.

HAlign

No

  • Left
  • Center
  • Right

Left

Specifies the alignment of the text inside this label

VAlign

No

  • Top
  • Center
  • Bottom

Center

Specifies the vertical alignment of the text inside this label

FontSize

No

Font size in pixels

 

Specifies the size of the text

Bold

No

  • True
  • False

False

Specifies whether or not the text inside this label should be rendered bold.

Italic

No

  • True
  • False

False

Specifies whether or not the text inside this label should be rendered italic.

MaxLines

No

  • A number value
  • Auto

 

The maximum number of lines that should be rendered.

Note: Specifying the maximum number of lines may improve performance of templates used in lists.

DetectLinks

No

  • True
  • False

False

Specifies whether or not links should be automatically detected inside the text.

Type

No

  • Currency
    Will format the text as a currency field
  • Distance
    Will format the text as a distance field
  • Duration
    Will format the text as a duration in hh:mm:ss 
  • DurationInMiliseconds
    Will format the text as a duration but will calculate the duration from milliseconds instead of seconds.
  • Date
    Text will be formatted according to the format property

 

Can be used to specify a formatting for this label. The specified formatting will be applied on the text inside this label.

Format

No

  • ShortDate
  • LongDate
  • ShortTime
  • LongTime
  • Since
  • Other date formatting string like "mmm YYYY"

 

When specifying a type you can use the format field to specify an additional subformat for the specifies type.

Button

The button control can be used to create an element that will let the user tap on and perform an action on the tap event.

> Sample

1

<Button name="btnSubmit" title="My button text" width="100" height="44" />

> Properties

The button control supports the following properties in extension to the basic properties.

Property

Required

Supported values

Default value

Description

 

Title

No

A text value 

 

The title that should be shown on the button.

 

Bold

No

  • True
  • False

False

Specifies whether or not the text inside this button should be rendered bold.

 

FontSize

No

A number value

 

Specifies the size of the font inside this button

 

Selected

No

  • True
  • False

False

Specifies the selected state of the button. When the state is set to true the button will be rendered in its' selected state.

 

BackgroundImage

No

URL

 

Specifies the URL to an image that should be used as the button background image.

 

BackgroundImagePressed

No

URL

 

Specifies the URL to an image that should be used as the button background image in the pressed state.

 

BackgroundImageSelected

No

URL

 

Specifies the URL to an image that should be used as the button background image in the selected state.

 

TextColor

No

  • Hex color
  • Name of an AppMachine Theme color

 

Specifies the color of the text rendered inside this button in its' normal state.

 

TextColorPressed

No

  • Hex color
  • Name of an AppMachine Theme color

 

Specifies the color of the text rendered inside this button in its' pressed state.

 

TextColorSelected

No

  • Hex color
  • Name of an AppMachine Theme color

 

Specifies the color of the text rendered inside this button in its' selected state.

 

Visible

No

A text value   

If the property has a value, the button will be visible or not.

Example: visible="AM:hasValue([{data:title}])"

If the property "title" has a value inside it, the button will be visible in the template.

 

Webview

NOTE: 

When using your own HTML inside a webview control you will need to encode the HTML. Once you've finished your HTML, please encode using this site:

http://www.opinionatedgeek.com/dotnet/tools/htmlencode/encode.aspx

Copy the encoded value and insert it as follows:

<webview value="PASTE THE ENCODED VALUE HERE" />

> Performance warning

You should never use this control inside a list.

Can be used to render RichText Formatted data as HTML. 

> Render warning

When using wrap_content for the height property the webview might not be sized correctly. Use a static size when possible and only when required use the wrap_content mode.

Due to rendering issues the wrap_content implementation might come up with a wrong estimated height.

> Sample

1

<Webview width="fill_parent" height="250" value="<p>Hello world!</p>" />

> Properties

The webview control supports the following properties in extension to the basic properties.

All the properties available on the label control are also applicable on the webview control.

Property

Required

Supported values

Default value

Description

Field

No

 

 

The field that should be (data)bound to this control

Note: Only use field or text combining them won't work

Text

No

 

 

The static text that should be rendered in this label

Note: Only use field or value or text combining them won't work

TextColor

No

  • Hex color
  • Name of an AppMachine Theme color

Body

Specifies the color of the text.

LinkColor

No

  • Hex color
  • Name of an AppMachine Theme color

 

Specifies the color of hyperlinks detected inside the text.

HAlign

No

  • Left
  • Center
  • Right

Left

Specifies the alignment of the text inside this label

VAlign

No

  • Top
  • Center
  • Bottom

Center

Specifies the vertical alignment of the text inside this label

FontSize

No

Font size in pixels

 

Specifies the size of the text

Bold

No

  • True
  • False

False

Specifies whether or not the text inside this label should be rendered bold.

Italic

No

  • True
  • False

False

Specifies whether or not the text inside this label should be rendered italic.

Image

The image control can be used to display images.

> Sample

1

<Image value="http://481xy61dp22v2uqbx85ez1twoe.wpengine.netdna-cdn.com/wp-content/themes/appmachinenew/2014/images/header/logo-dark.png" width="wrap_content" height="wrap_content" />

> Properties

The image control supports the following properties in extension to the basic properties.

Property

Required

Supported values

Default value

Description

Expirimental

Field

No

 

 

The field that should be (data)bound to this control

Note: Only use field or value combining them won't work

 

Value

No

URL

 

Specifies the URL of the image that should be shown.

 

DefaultValue

No

URL

 

Specifies the URL of the image that should be shown while the other image is being loaded or when the other image is not available.

 

Border

No

 Thickness in pixels

 

Specifies the width of the border in pixels

 

BorderColor

No

  • A hex value
  • Name of AppMachine theme color

 

Specifies the color of the border (if the border is visible)

 

VAlign

No

  • Top
  • Center
  • Botom

Top

Specifies the vertical position of the image inside the control where the image should be aligned when it exceeds the specified height of the control.

 

HAlign

No

  • Left
  • Center
  • Right

Center

Specifies the horizontal alignment of the image inside the control where the image should be aligned when it exceeds the specified width of the control.

 

ScaleType

No

  • ScaleAspectFit
  • ScaleAspectFill

ScaleAspectFit

Specifies the scaling that will be applied when rendering the image

 

Parralax

No

A number value

 

Specifies a percentage of the image that is visible, the remaining percentage will be used for a nice effect while scrolling through the list.

Yes

 

TextField

The TextField control can be used to allow users to enter some single line text.

> Usage

<TextField width="fill_parent" height="44" margin="5" Label="Your name" Placeholder="please enter your name..." />

> Properties

The text field control supports the following properties in extension to the basic properties.

Property

Required

Supported values

Default value

Description

Binding

Yes

 

 

The parameter of a post web service attached to this control. When the user enters some text the text will be automatically assigned to the parameter.

You can specify a binding using the format WebserviceName.ParameterName

Border

No

  • Thickness in pixels

2

The width of the border in pixels

BorderColor

No

  • Hex value
  • Name of AppMachine theme color
 

Will specify the color of the border (if the border is visible)

Placeholder

No

 

 

A watermark text that will be shown when the text field is empty.

IsRequired

No

  • True
  • False

False 

Indicates if the text field is required.

IsPassword

No

  • True
  • False

False

Indicates if the text field should behave like a password field.

ShowClearButton

No

  • True
  • False

False

Indicates if a clear button should be shown once the user starts to enter text.

VAlign

No

  • Top
  • Center
  • Bottom

Top

Specifies the vertical alignment of the text inside the text field

HAlign

No

  • Left
  • Center
  • Right

Left

Specifies the horizontal (text) alignment of the text inside the textfield

ImagePicker

The ImagePicker control can be used to allow users to select / upload images.

> Usage

<ImagePicker width="fill_parent" height="100" margin="5" Description="Please select an image." />

> Properties

The image picker control supports the following properties in extension to the basic properties.

Property

Required

Supported values

Default value

Description

Binding

Yes

 

 

The parameter of a post web service attached to this control. When the user selects an image the image will be automatically assigned to the parameter.

You can specify a binding using the format WebserviceName.ParameterName

Description

No

 

 

Will set the text that will be shown when the user will be prompted to chose the source of the image ('from library' or 'take a picture')

ImageWidth

No

 

 

Will specify the maximum width of the image being selected. When the image is wider it will be re seized to fit the maximum with specified.

Note: the resizing is taking the dimension of the image into account when resizing. So the actual width might be wider when the image exceeds the maximum height.

ImageHeight

No

 

 

Will specify the maximum height of the image being selected. When the image is taller it will be reseized to fit the maximum height specified.

Note: the resizing is taking the demension of the image into account when resizing. So the actual height might be larger when the image exceeds the maximum width.

MapView (beta)

The MapView control can be used to show a single location based on a latitude and longitude on a map. 

Note: The MapView control is currently only available for iOS and will be available soon for Android and Windows Phone.

> Usage

<MapView width="fill_parent" height="125" margin="5" lat="{data:latitude}" long="{data:longitude} />

> Properties

The MapView control supports the following properties in extension to the basic properties.

Property

Required

Supported values

Default value

Description

Lat

Yes

  • {data:FieldName}
  • Name of the field
  • A static value like 53.123456 

 

This will specify the latitude part of the coordinate visible in the map view.

Long

Yes

 

  • {data:FieldName}
  • Name of the field
  • A static value like 5.3456789 

 

This will specify the longitude part of the coordinate visible in the map view.

ZoomLevel

No

  •  A number value like 25

 

Will specify the range in kilometers that will be visible around the specified location.

ZoomEnabled

No

  • True
  • False

 True

Will specify if the user should be able to zoom in and out on the map view

Fixed

No

  • True
  • False

False

Will specify if the map view will be fixed so that the specified location will always be at the center of the map view and the user won't be able to pan around or zoom in/out.

ShowUserLocation

No

  • True
  • False

True

Will specify if the location of the user should also be shown on the map view.

 

Additional information

Besides the template controls there is also some additional but relevant information available regarding formatting and creating custom layouts.

Colors

AppMachine provides a really powerful styling framework that we are exposing to our users so they can include it in their templates. If you want to reference to any of the colors the users can specify inside their app here is a little list of the supported colors.

  • Body
  • Title
  • Support
  • BodyColor
  • TitleColor
  • SupportColor
  • InputTextColor
  • BackgroundColor
  • SeperatorColor
  • IconColor
  • IconSelectedColor
  • ButtonColor
  • ButtonSelectedColor
  • ButtonTextColor
  • ButtonTextSelectedColor
  • ListBackgroundEvenColor
  • ListBackgroundOddColor

Field Referencing

Most of the controls can be bound to a data item bij simply specifying the name of the referencing field in the field property.

When working with data you might want to include data from your excel document or web service in properties of an other building block. In general you can always access data from a parent data building block (like excel or web service) using {data:fieldname} where you should replace fieldname, with the name of the field.

Read more about this subject

Value / Title / Text

This property can be used to specify a semi static value for a control. You can combine these static values with references to dynamic values like this:

> Sample

1

<Label width="fill_parent" height="wrap_content" text="The name of this movie is {data:MovieName}" />

Was this article helpful?
4 out of 4 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    Peter Luit

    Zeer zinvolle aanvulling van mijn kennis en kunde. En ook heel duidelijk te benoemen commercieel voordeel om klanten te overtuigen van het nut van de pro versie, omdat daar werkelijk elk element bewerkt kan worden.