Skip to main content

Creating a Button

Buttons are an essential tool in layout design. They combine function with graphic elements. In addition, buttons are so well established that everyone recognizes them immediately.

Buttons in mos. are created by combining multiple layers and actions. The best practice for this is to use container layers. Within a container, buttons usually consist of a color and a text layer with one or more actions attached to the container. The color layer is generally used to highlight the button visually, while the text layer labels the button in question. Combining the color and text layer in a single container layer has the advantage of managing all constraints via the container and having a central layer to which actions can be attached. Buttons are usually styled using classes so that their appearance can be adjusted globally.

You can skip straight to the copyable code of this tutorial or follow the step by step instructions.

The following mos. components are used in this tutorial. If needed, you can refer to the corresponding wiki pages:

Step by step​

Following these instructions you will be able to create buttons for your app.

/layout/startView.json - container layer
{
  "type": "container",
  "name": "button"
}
  • Create a container layer.
/layer_style/buttonContainer.json
{
  "name": ".buttonContainer",
  "content": {
    "borderColor": "#f3f3f3",
    "borderWidth": "1pt",
    "borderRadius": "20pt",
    "constraints": [
      {
        "type": "pos",
        "anchor": "c",
        "x": "50%",
        "y": "40%"
      },
      {
        "type": "size",
        "width": "200pt",
        "height": "70pt"
      }
    ]
  }
}
  • Create a new file buttonContainer.json in the /layer_style directory.
  • Create the class buttonContainer.
  • Set the border and constraints in the content object according to how you want the button to look like.
/layout/startView.json - container layer
{
  "type": "container",
  "name": "button",
  "classes":[
    "buttonContainer"
  ]
}
  • Style the container layer using the buttonContainer class.
Screenshot of the styled container layer.

The button after setting a border and constraints for the container layer.

/layout/startView.json - container layer
{
  "type": "container",
  "name": "button",
  "classes":[
    "buttonContainer"
  ],
  "children": [
    
  ]
}
  • Add a children array to the container layer.
/layer_style/buttonColor.json
{
  "name": ".buttonColor",
  "content": {
    "value": "#34a7c9"
  }
}
  • Create a new file buttonColor.json in the /layer_style directory.
  • Create the class buttonColor.
  • Set the value in the content object to the hex color, that the button should have.
/layout/statView.json - container layer
{
  "type": "container",
  "name": "button",
  "classes":[
    "buttonContainer"
  ],
  "children": [
    {
      "type": "color",
      "classes": [
        "buttonColor",
        "fullSize"
      ]
    }
  ]
}
  • Add a color layer to the children array as an object.
  • Style the color layer using the buttonColor class.
  • Give the color layer the class fullSize, as the container defines the dimensions in which it is drawn.
Screenshot of the container with the added color layer.

The button after adding the color layer to the container layer.

/layer_style/buttonText.json
{
  "name": ".buttonText",
  "content": {
    "scaleType": "alignCenter"
  }
}
  • Create a new file buttonText.json in the /layer_style directory.
  • Create the class buttonText.
  • Set the scaleType to alignCenter in the content object, which centers the text both horizontally and vertically.
translations/default.json - default translations
{
  "name": "default",
  "content": {
    "buttonText": "Press me.",
    "messageTitle": "Congratulations!",
    "messageText": "Your button is working."
  }
}
  • Add three key:value pairs to the content object, which contain texts for later use.
/layout/startview.json - container layer
{
  "type": "container",
  "name": "button",
  "classes":[
    "buttonContainer"
  ],
  "children": [
    {
      "type": "color",
      "classes": [
        "buttonColor",
        "fullSize"
      ]
    },
    {
      "type": "text",
      "value": "$lang(buttonText)$",
      "classes": [
        "buttonText",
        "fullSize"
      ]
    }
  ]
}
  • Add a text layer to the children array as another object.
  • Set the value of the text layer to the text you want written on the button.
  • Give the text layer the class buttonText to have the text centered.
  • Give the text layer the class fullSize, as the container defines the dimensions in which it is drawn.
Screenshot of the container with the added text layer.

The button after adding the text layer to the container layer.

layout/startView.json - container layer
{
  "type": "container",
  "name": "button",
  "classes":[
    "buttonContainer"
  ],
  "children": [
    ...
  ],
  "actions": [
    {
      "type": "showMessage",
      "params": {
        "title": "$lang(messageTitle)$",
        "text": "$lang(messageText)$"
      }
    }
  ]
}
  • Add an actions array to the container layer.
  • Add the action that you want to be executed when tapping the button.
Screenshot of the executed action after tapping the button.

The button after the action has been added to the container layer.

A button has been created.

Copyable code​

layout/startView.json - container layer
{
  "type": "container",
  "name": "button",
  "classes":[
    "buttonContainer"
  ],
  "children": [
    {
      "type": "color",
      "classes": [
        "buttonColor",
        "fullSize"
      ]
    },
    {
      "type": "text",
      "value": "$lang(buttonText)$",
      "classes": [
        "buttonText",
        "fullSize"
      ]
    }
  ],
  "actions": [
    {
      "type": "showMessage",
      "params": {
        "title": "$lang(messageTitle)$",
        "text": "$lang(messageText)$"
      }
    }
  ]
}
/layer_style/buttonContainer.json - .buttonContainer class
{
  "name": ".buttonContainer",
  "content": {
    "borderColor": "#f3f3f3",
    "borderWidth": "1pt",
    "borderRadius": "20pt",
    "constraints": [
      {
        "type": "pos",
        "anchor": "c",
        "x": "50%",
        "y": "40%"
      },
      {
        "type": "size",
        "width": "200pt",
        "height": "70pt"
      }
    ]
  }
}
/layer_style/buttonColor.json - .buttonColor class
{
  "name": ".buttonColor",
  "content": {
    "value": "#34a7c9"
  }
}
/layer_style/buttonText.json - .buttonText class
{
  "name": ".buttonText",
  "content": {
    "scaleType": "alignCenter"
  }
}
translations/default.json - default translations
{
  "name": "default",
  "content": {
    "buttonText": "Press me.",
    "messageTitle": "Congratulations!",
    "messageText": "Your button is working."
  }
}