<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>

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

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

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

Label-bold

No

• True
• False

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

1

2

3

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

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

</Container>

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

1

2

3

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

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

</frameLayout >

1

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

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.

1

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

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

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.

1

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

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.

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" />

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 width="fill_parent" height="44" margin="5" Label="Your name" Placeholder="please enter your name..." />

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 width="fill_parent" height="100" margin="5" Description="Please select an image." />

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 width="fill_parent" height="125" margin="5" lat="{data:latitude}" long="{data:longitude} />

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.

1

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