The Layout Editor of our Pro blocks can be very powerful. There are two ways of configuring the layout of the data.

• The first option is using the drag and drop functionality, which is straight forward with basic functionality.
• The second option is to use the “source” mode.

After entering the source mode, you can type your own XML to design any layout. In the source mode, you have many more features at hand than when you enter the 'front-end' mode where you drag-and-drop the controls on the view.

Pro’s:

• You have total freedom over the properties from controls, like margins and colors (you can add transparency like #80ffffff → 50% transparant white. See the complete Hex table at the end of this document.)
• “Stack” controls on top of each other with the <framelayout> control.
• Show controls based on conditions e.g. visible="AM:HasValue([{data:title}])
• “Sticky align” controls in containers with the “gravity” property
• Adding borders to controls.

Cons:

• You require experience with similar type languages.
• XML script can become cluttered.
• A simple typo could render your layout useless.
• You have to know all the properties of the controls

FAQ

1) How can I connect a value from my web service to control like a <label> or <webview>?

a:With the field property or value property

Example:

<label field="title" />

or

<webview value="{data:title}" />

2)  When do I use field or the value property?

    a:  field is used for connecting “field” from your Excel or Web Service.

  Value is used when you want to add text manually before or after the actual value that you wish to use. This is always written like

"{data:fieldFromExcelOrWebservice}"

Example: 

<webview value="The location for the event is {data:locationName}" />

3) How can I stack elements?

a: With the <framelayout> control. Everything inside of the container is being stacked on top of each other.

Example:

<container direction="vertical">
<framelayout width="200" margin="5">
<image value="https://unsplash.com/photos/shy0cEi7h1o/download" width="200" height="200" />
<label value="NICE PHOTO" textColor="title" fontsize="20" bold="true" gravity="center" textAlignment="center"/>
</framelayout>
</container>

4)  How can I place two or more items next to each other?

a: when you set the container‘s direction to horizontal.

Example:

<container direction="horizontal" margin="0 20 20 20">
<button name="callBtn" flex="1" margin="0 10 0 0" height="45" backgroundColor="support" backgroundimage="noImage" title="CALL" fontSize="18" bold="false"/>
<button name="mailBtn" flex="1" margin="0 0 0 10" height="45" backgroundColor="title" title="MAIL" backgroundimage="noImage" fontSize="18" bold="false"/>
</container>

*When you set the flex="1" property on a control the control will grow as wide as it can be. Should we remove the Mail button, the Call button will grow to be screen wide.

5) How can I create a 1px “divider“ line

Example:

<image value="" width="fill_parent" height="1" margin="10 0 10 0" backgroundColor="supportcolor"/>

6) How can I hide or show a control if the value is empty?

Example:

<label field="title" visible="AM:HasValue([{data:title}])" />

This will hide the label when the field “title” is empty.

7) Should I use a static value for the width, or do have to use a dynamic value?

a: Dynamic values are prefferable, because the control will scale correctly on any device. When you use a static width instead, you could run into scaling issues amongst different devices.

8) Can I use an URL where my image is located as an input value?

a: Yes, you can place a url like https://mysite.com/myimage.png in the value property.

9) What is the difference between value=”{data:channel.title}" and field=”title”

a: They both output the same value, but the difference with <value> is that you can add additional text before the dynamic value is being displayed. 

Example:

<value=”The name of my book is: "{data:channel.title}"/>

the value of {data:channel.title} = How to XML for AppMachine users

The ouput on your screen will be:

“The name of my book is: How to XML for AppMachine users”

10) Are there more AM functions avalable?

a: Yes, below you can find the table with the different functions available

1. Functions

2. Color transparency Hex # values for TextColor or BackgroundColor

Example:

How do i make a view with a label / gradient and a photo on top op each other like the sample below.

Stacking controls

We will use <framelayout> <gravity> and a static use of a image uploaded (the gradient )

<container direction="vertical">
<framelayout width="fill_parent" height="180">
<image defaultValue="19a0b20b-db88-4013-92e8-609ab1c94597" field="imageUrl" parallax="95" width="fill_parent" height="180" contentAlignment="ScaleAspectFill" margin="0" />
<image value="8b864801-2e9d-4bb7-9545-0a3704c2368b" contentAlignment="ScaleAspectFill" width="fill_parent" height="180" />
<container direction="vertical" gravity="bottom" margin="0">
<label field="name" fontsize="16" bold="true"  TextColor="#ffffff" margin="10" maxlines="2"/>
</container>
</framelayout>
<container>

Tip: Every control you will have to “open” and “close”

-  To “open” a control you use a bracket and the name of the control like: <container width="" height="" etc.>

-  You can "close" a control in two ways.

• Repeating the name and adding a "forward slash / " like </container> or
• Just a "forward slash" and a closing bracket like  />

3.Break down of the XML

1)  First we are building a container to "hold" our controls

<container direction="vertical">

2) Then we are adding the control

everything inside it will be “stacked” on top of each other. We want to create this situtation:

<framelayout>
	<-- Our controls-->
</framelayout>

• Image
• Gradient Overlay
• Label

3)  We are placing the <image> of the artist first inside the <framelayout> with a defaultValue property. This is the image that will show when the field property has no value. So, in other words, when there is no artist image available.

4)  Now we are placing the “black gradient“ overlay <image> so that our label always is readable, even on a white background. We are not using the field property here, but the value property because we are filling it manually with a GUID of the overlay image.

<image value="8b864801-2e9d-4bb7-9545-0a3704c2368b" />

This GUID represents the overlay image thatI have uploaded and with the element inspector of Google Chrome found the guid that I need. (right click on the icon in this case → inspect element)

The url will look something like this:

https://design.appmachine.com/api/AppImage/114x114/8b864801-2e9d-4bb7-9545-0a3704c2368b

Getting the GUID for our overlay image → url with a bunch of letters and numbers at the end.

5)  We are placing another <container>. This is not necessary because we only have one item inside, but I prefer to do this because when I want to add another label I can position the container instead of aligning all the items seperately.

The important property here is gravity. We use this because we now can position the container with the label inside it at the bottom or on the top or anywhere you want.

*Important note here is if the <container> has a height property of fill_parent the gravity property will not work, because the container that you want to position has the same height as the container that is surrounding it (the parent container).

6) We are placing a <label> with the name inside of that container. Nothing really special going on here. We are just adding some styling properties like fontsize/textcolor and margin and we tell the label that we allow a max of 2 lines.

7)  Closing tag of the </container>

8)  Closing tag of the </framelayout>

9)  Closing tag of the </container>

Congratulations you have created the above example all by yourself!