Skip to main content

Creating a Navbar

A navbar can be a useful tool fpor navigation within your app. The layout of the navbar must be defined in the style file, which means that different layout for the navbar require different styles.

In this tutorial two navigation bar layouts are created. One that displays a logo and offers no functions, and one that takes the user back to the previous view.

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 a navbar for your app.

To display a navbar, the style file must first be edited to refer to the layout of the navbar and set its height.

/style/default.json
{
  "name": "default",
  "content": {
    "content": {
      "default": {
        "navbarLayout": {
          "default": "navbar"
        },
        "navbarHeights":{
          "default": "56pt"
        }
      }
    }
  }
}
  • Go to the default.jsonfile in the /style directory.
  • Add a navbarLayout field and set the default value to navbar.
  • Add a navbarHeights field and set the default value to 56pt or your prefered height.

The next step is to create the corresponding layout file for the navbar. It contains the content (i.e. layers and actions) of the navbar.

/layout/navbar.json
{
  "name": "navbar",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "navbarBackground"
      ]
    }
  ]
}
  • Create a new file navbar.json in the /layout directory.
  • Add a name field and set its value to navbar.
  • Add a layers array.
  • Add a color layer to the layers array. This will set the background color of the navbar.

The color layer can have the class fullSize, as it is restricted by the dimensions of the navbar.
The value for the color layer is specified in the navbarBackground class so it can also be used in other navbar layouts.

/layout/navbar.json
{
  "name": "navbar",
  "layers": [
    {
      "type": "color",
      ...
    },
    {
      "type": "image",
      "value": "asset://mos_logo_text.png",
      "scaleType": "scaleAspectFit",
      "constraints": [
        {
          "type": "pos",
          "anchor": "c",
          "x": "50%",
          "y": "50%"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "200pt"
        }
      ]
    }
  ]
}
  • Add an image layer to the layers array, e.g. to display a logo in the navbar.

You can add any number of layers to customize the navbar according to your preferences.

Screenshot of the navbar with a color and image layer.

Add any content you want to the default view.

/layout/startView.json
{
  "name": "startView",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "background"
      ]
    },
    {
      "type": "text",
      "name": "viewLabel",
      "value": "startView",
      "scaleType": "alignCenter",
      "classes": [
        "text"
      ],
      "constraints": [
        {
          "type": "pos",
          "anchor": "c",
          "x": "50%",
          "y": "50%"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "200pt"
        }
      ]
    }
  ]
}
  • Go to the startView.json file in the /layout directory.
  • Add a text layer to the layers array.
  • Set the value of the text layer to startView as an indicator of the current view.

Add a button to the layout to change the view later on.

/layout/startView.json
{
  "name": "startView",
  "layers": [
    {
      "type": "color",
      ...
    },
    {
      "type": "text",
      ...
    },
    {
      "type": "container",
      "name": "showViewButton",
      "classes": [
        "buttonContainer"
      ],
      "children": [
        {
          "type": "color",
          "value": "#34a7c9",
          "classes": [
            "fullSize"
          ]
        },
        {
          "type": "text",
          "value": "showView",
          "scaleType": "alignCenter",
          "classes": [
            "fullSize"
          ]
        }
      ]
    }
  ]
}
  • Add a container layer to the layers array to create a button.
  • Add a children array to the container layer.
  • Add a color and a text layer to the children array to build the button.
/layout/startView.json
{
  "name": "startView",
  "layers": [
    {
      "type": "color",
      ...
    },
    {
      "type": "text",
      "name": "viewLabel",
      ...
    },
    {
      "type": "container",
      "name": "showViewButton",
      "classes": [
        ...
      ],
      "children": [
        {
          "type": "color",
          ...
        },
        {
          "type": "text",
          ...
        }
      ],
      "actions": [
        {
          "type": "showView",
          "params": {
            "layout": "additionalView",
            "namedStyle": "style_navbarBack"
          }
        }
      ]
    }
  ]
}
  • Add an actions array to the container layer.
  • Add a showView action to the actions array
  • Add the params layout with the value additionalView and namedStyle with the value style_navbarBack to the showView action.
Screenshot of the startView with an added button.

Create another layout file for the additional view to which the showView action on the button refers.

/layout/additionalView.json
{
  "name": "additionalView",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "background"
      ]
    },
    {
      "type": "text",
      "name": "viewLabel",
      "value": "additionalView",
      "scaleType": "alignCenter",
      "classes": [
        "text"
      ],
      "constraints": [
        {
          "type": "pos",
          "anchor": "c",
          "x": "50%",
          "y": "50%"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "200pt"
        }
      ]
    }
  ]
}
  • Create a new file additionalView.json in the /layout directory.
  • Add a name field and set its value to additionalView.
  • Add a layers array.
  • Add a color layer to the layers array to set a background color.
  • Add a text layer to the layers array to display the current view as in the startView.json layout.
Screencapture of the startView with an added button and a showView action.

Create the style file, which is also referenced in the showView action on the button.

/style/style_navbarBack.json
{
  "name": "style_navbarBack",
  "content": {
    "content": {
      "default": {
        "navbarLayout": {
          "default": "navbarBack"
        },
        "navbarHeights": {
          "default": "56pt"
        }
      }
    }
  }
}
  • Create a new file style_navbarBack.json in the /style directory.

The structure of this file is the same as that of the default file in the /style directory with some values changed.

  • Add a name field and set its value to style_navbarBack.
  • Add a navbarLayout field and set the default value to navbarBack.
  • Add a navbarHeights field and set the default value to 56pt or your prefered height.

Create the new navbar layout referenced in the style just created that contains a backInHistory action for the anvigation.

/layout/navbarBack.json
{
  "name": "navbarBack",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "navbarBackground"
      ]
    }
  ]
}
  • Create a new file navbarBack.json in the /layout directory.
  • Add a name field and set its value to navbarBack.
  • Add a layers array.
  • Add a colorlayer to the layersarray to set a background color for the navbar.
/layout/navbarBack.json
{
  "name": "navbarBack",
  "layers": [
    {
      "type": "color",
      ...
    },
    {
      "type": "container",
      "constraints": [
        {
          "type": "pos",
          "anchor": "nw",
          "x": "3pt",
          "y": "3pt"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "100pt"
        }
      ],
      "children": [
        
      ]
    }
  ]
}
  • Add a container layer to the layers array.
  • Add a children array to the container layer.
/layout/navbarBack.json
{
  "name": "navbarBack",
  "layers": [
    {
      "type": "color",
      ...
    },
    {
      "type": "container",
      "constraints": [
        ...
      ],
      "children": [
        {
          "type": "text",
          "name": "back",
          "font": "FontAwesome",
          "value": "fa-chevron-left",
          "fontSize": "24pt",
          "scaleType": "alignLeft",
          "constraints": [
            {
              "type": "pos",
              "anchor": "nw",
              "x": "5pt",
              "y": 0
            },
            {
              "type": "size",
              "height": "50pt"
            }
          ]
        }
      ]
    }
  ]
}
  • Add a text layer to the children array.
  • Add a font field and set its value to FontAwesome.
  • Add a value field and set its value to fa-chevron-left.
  • Set the constraints to position the text layer on the left in the navbar.
/layout/navbarBack.json
{
  "name": "navbarBack",
  "layers": [
    {
      "type": "color",
      ...
    },
    {
      "type": "container",
      "constraints": [
        ...
      ],
      "children": [
        {
          "type": "text",
          ...
        },
        {
          "type": "text",
          "font": "Raleway-Regular",
          "value": "Back",
          "fontSize": "20pt",
          "scaleType": "alignLeft",
          "constraints": [
            {
              "type": "pos",
              "anchor": "nw",
              "relativeAnchor": "ne",
              "relativeTo": "back",
              "x": "10pt",
              "y": 0
            },
            {
              "type": "size",
              "height": "50pt"
            }
          ]
        }
      ]
    }
  ]
}
  • Add another textlayer to the children array.
  • Add a value field and set its value to Back.
  • Set the constraints to position the text layer to the right of the other text layer.
/layout/navbarBack.json
{
  "name": "navbarBack",
  "layers": [
    {
      "type": "color",
      ...
    },
    {
      "type": "container",
      "constraints": [
        ...
      ],
      "children": [
        ...
      ],
      "actions": [
        {
          "type": "backInHistory"
        }
      ]
    }
  ]
}
  • Add an actions array to the container layer.
  • Add a backInHistory action to the actions array.
Screencapture of the backInHistory action in the navbar on the additionalView.

A simple navbar has been created.

Copyable code​

/style/default.json
{
  "name": "default",
  "content": {
    "content": {
      "default": {
        "navbarLayout": {
          "default": "navbar"
        },
        "navbarHeights":{
          "default": "56pt"
        }
      }
    }
  }
}
/layout/navbar.json
{
  "name": "navbar",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "navbarBackground"
      ]
    },
    {
      "type": "image",
      "value": "asset://mos_logo_text.png",
      "scaleType": "scaleAspectFit",
      "constraints": [
        {
          "type": "pos",
          "anchor": "c",
          "x": "50%",
          "y": "50%"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "200pt"
        }
      ]
    }
  ]
}
/layout/startView.json
{
  "name": "startView",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "background"
      ]
    },
    {
      "type": "text",
      "name": "viewLabel",
      "value": "startView",
      "scaleType": "alignCenter",
      "classes": [
        "text"
      ],
      "constraints": [
        {
          "type": "pos",
          "anchor": "c",
          "x": "50%",
          "y": "50%"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "200pt"
        }
      ]
    },
    {
      "type": "container",
      "name": "showViewButton",
      "classes": [
        "buttonContainer"
      ],
      "children": [
        {
          "type": "color",
          "value": "#34a7c9",
          "classes": [
            "fullSize"
          ]
        },
        {
          "type": "text",
          "value": "showView",
          "scaleType": "alignCenter",
          "classes": [
            "fullSize"
          ]
        }
      ],
      "actions": [
        {
          "type": "showView",
          "params": {
            "layout": "additionalView",
            "namedStyle": "style_navbarBack"
          }
        }
      ]
    }
  ]
}
/layout/additionalView.json
{
  "name": "additionalView",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "background"
      ]
    },
    {
      "type": "text",
      "name": "viewLabel",
      "value": "additionalView",
      "scaleType": "alignCenter",
      "classes": [
        "text"
      ],
      "constraints": [
        {
          "type": "pos",
          "anchor": "c",
          "x": "50%",
          "y": "50%"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "200pt"
        }
      ]
    }
  ]
}
{
  "name": "additionalView",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "background"
      ]
    },
    {
      "type": "text",
      "name": "viewLabel",
      "value": "additionalView",
      "scaleType": "alignCenter",
      "classes": [
        "text"
      ],
      "constraints": [
        {
          "type": "pos",
          "anchor": "c",
          "x": "50%",
          "y": "50%"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "200pt"
        }
      ]
    }
  ]
}
/style/style_navbarBack.json
{
  "name": "style_navbarBack",
  "content": {
    "content": {
      "default": {
        "navbarLayout": {
          "default": "navbarBack"
        },
        "navbarHeights": {
          "default": "56pt"
        }
      }
    }
  }
}
/layout/navbarBack.json
{
  "name": "navbarBack",
  "layers": [
    {
      "type": "color",
      "name": "backgroundColor",
      "classes": [
        "fullSize",
        "navbarBackground"
      ]
    },
    {
      "type": "container",
      "constraints": [
        {
          "type": "pos",
          "anchor": "nw",
          "x": "3pt",
          "y": "3pt"
        },
        {
          "type": "size",
          "height": "50pt",
          "width": "100pt"
        }
      ],
      "children": [
        {
          "type": "text",
          "name": "back",
          "font": "FontAwesome",
          "value": "fa-chevron-left",
          "fontSize": "24pt",
          "scaleType": "alignLeft",
          "constraints": [
            {
              "type": "pos",
              "anchor": "nw",
              "x": "5pt",
              "y": 0
            },
            {
              "type": "size",
              "height": "50pt"
            }
          ]
        },
        {
          "type": "text",
          "font": "Raleway-Regular",
          "value": "Back",
          "fontSize": "20pt",
          "scaleType": "alignLeft",
          "constraints": [
            {
              "type": "pos",
              "anchor": "nw",
              "relativeAnchor": "ne",
              "relativeTo": "back",
              "x": "10pt",
              "y": 0
            },
            {
              "type": "size",
              "height": "50pt"
            }
          ]
        }
      ],
      "actions": [
        {
          "type": "backInHistory"
        }
      ]
    }
  ]
}
/layer_style/background.json
{
  "name": ".background",
  "content": {
    "value": "#121212"
  }
}
/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"
      }
    ]
  }
}
/layer_style/fullSize.json
{
  "name": ".fullSize",
  "content": {
    "constraints": [
      {
        "type": "pos",
        "x": "0",
        "y": "0"
      },
      {
        "type": "pos",
        "x": "0",
        "y": "0",
        "anchor": "se",
        "relativeAnchor": "se"
      }
    ]
  }
}
/layer_style/navbarBackground,json
{
  "name": ".navbarBackground",
  "content": {
    "value": "#34a7c9"
  }
}
/layer_style/test.json
{
  "name": "text",
  "content": {
    "fontSize": "20pt",
    "contentType": "plain",
    "fontColor": "#F3F3F3",
    "font": "Raleway-Regular"
  }
}