Layout Basics - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

Overview

      How an FML Widget lays-out and interacts with other widgets within a <TEMPLATE/> is the fundamental aspect to understand in order to quickly and effectively build UI that is both responsive and flexible. Widgets by nature are written as they are displayed due to the syntax of the FML language. It should be simple and straight forward for an FML developer to garner the structure and responsiveness of a page by glancing at the <TEMPLATE/>. Although Widgets will all have their own unique characteristics and attributes to customize layout, most Widgets will behave in one of the following ways:

  • The widget will expand to share available space in all directions such as <BOX/> or <TABLE/>.
  • The widget will contract to the size of its child or children in all directions such as <BOX/> with the expand="false" attribute.
  • The widget will expand to share its available space in only one, its main-axis, direction, and shrink to its child in the other, cross-axis, direction such as <ROW/> or <COLUMN/>.
  • The widget will expand or contract as one of the above, but is limited to a minimum or maxiumum size such as <BUTTON/>.
  • The widget has a pre determined fixed size such as <INPUT/> and <ICON/>.

      As you can see, the layout rules are highly dependent on where the Widget exists within the TEMPLATE's Widget tree, with the exception of widgets that are given a hard size. Although these are the basic layout behaviors for all widgets, they can be interchanged and overridden based on attributes that the developer specifies, as well as blended by using attributes such as minwidth and maxwidth on widgets that either expand or contract. Sizes are given in a dimension of logical pixels. When giving a widget a specific size, if within another fixed size widget you must take into account that some widgets take up more size than specified such as BUTTON due to its drop shadow and hover affect area. This will lead to a 200lpx width button overflowing a 200lpx width box.

      All basic layouts are made up of 5 widgets wrapped in a TEMPLATE: BOX, STACK, ROW, COLUMN, and SCROLL. Although widgets like BOX can lay their children out in the form of a ROW, COLUMN, or STACK, and therefore inherit their possible children and attributes, it is important to use the simplest widget that fits the use case whenever possible. For instance, if the developer desires a layout showing multiple widgets aligned horizontally, with no background features, one would use a ROW rather than an empty BOX with the attribute layout="row". If additionally, a user requires either aesthetic elements to be around the children, such as a border, or requires the layout of those children to change between a row or column based on the device platform, a user would instead choose a BOX. Although the performance values of these two cases are nearly indistinguishable, it is important to follow this guideline for readability of TEMPLATEs and to avoid over cluttering with unnecessary attributes.



Flexible Layouts

      One of the major focus points of FML is to provide flexible layout options for all platforms. The way this is done is ultimately up to the developer, as they will have to choose if there are major differences between a mobile and web view, or if they would like to use Widgets such as TABLE that are better suited for large screens. In all, there are 4 major ways we can do this:

  1. Create a separate template based on the SYSTEM platform. This is for when the differences between one view and another differ greatly in order to reduce clutter.

  2. Create separate views within the template based on the SYSTEM platform or screen sizes. This is for when the differences between parts of a TEMPLATE differ greatly, but the majority of the TEMPLATE remains the same. These views can be created using the visible attributes on outer layout Widgets, or with a widget like INCLUDE.

  3. Size major elements based on SYSTEM screen width and height, or use % height which will size a widget to a % of its parent's size within the same TEMPLATE. This is great for very responsive sizing where elements are required to be a certain ratio within the tree.

  4. Use flexible attributes and widgets such as flex, layout, expand, wrap, minheight, maxheight and align. These can be combined with any of the above strategies to create responsive layouts that meet all use cases, or used independently to create highly responsive layouts. Remember, these attributes can all be changed dynamically in response to the SYSTEM platform or SYSTEM screenwidths.

As you can see, layout in FML is expandable, customizable, and ultimately cross-platform-minded by default.



Alignment Attributes

Name Type Req Default Description
halign string start Horizontal axis alignment of children
valign string start Vertical axis alignment of children
expand bool false Sets the main axis to expand to parent. *If you know the size of the main axis it is recommended to use width/height
width double null Sets a width and expands axis to it. *Recommended for use in Row
height double null Sets a height and expands axis to it. *Recommended for use in Column.

Vertical & Horizontal Alignment (default to 'start')

'center': Puts as much space as possible on the outer sides forcing all children to the center of the axis

'start': Puts as much space after the children squishing them to the start of the axis

'end': Puts as much space before the children squishing them to the end of the axis

'spacebetween' or 'between': Determines a space to put between each child that is the same.

'spaceevenly' or 'evenly': Determines a space to put at the start, end and between each child that is the same.

'spacearound' or 'around': A hybrid approach adding a bit of space on each end of the axis with the rest evenly spaced between children.

Alignment Examples

Row layout halign alignment:

<FML>
    <BOX layout="column">
        <ROW halign="start">   
            <BTN type="elevated" radius="0" onclick="" color="redaccent"><TXT>S</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="redaccent"><TXT>T</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="redaccent"><TXT>A</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="redaccent"><TXT>R</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="redaccent"><TXT>T</TXT></BTN>                     
        </ROW>
        <ROW halign="end">     
            <BTN type="elevated" radius="0" onclick="" color="purpleaccent"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="purpleaccent"><TXT>N</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="purpleaccent"><TXT>D</TXT></BTN>                                         
        </ROW>
        <ROW halign="center">  
            <BTN type="elevated" radius="0" onclick="" color="lightblue"><TXT>C</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="lightblue"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="lightblue"><TXT>N</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="lightblue"><TXT>T</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="lightblue"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="lightblue"><TXT>R</TXT></BTN>           
        </ROW>
        <ROW halign="between"> 
            <BTN type="elevated" radius="0" onclick="" color="green"><TXT>B</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="green"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="green"><TXT>T</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="green"><TXT>W</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="green"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="green"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="green"><TXT>N</TXT></BTN> 
        </ROW>
        <ROW halign="around">  
            <BTN type="elevated" radius="0" onclick="" color="amber"><TXT>A</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="amber"><TXT>R</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="amber"><TXT>O</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="amber"><TXT>U</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="amber"><TXT>N</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="amber"><TXT>D</TXT></BTN>           
        </ROW>
        <ROW halign="evenly">  
            <BTN type="elevated" radius="0" onclick="" color="deeporange"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="deeporange"><TXT>V</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="deeporange"><TXT>E</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="deeporange"><TXT>N</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="deeporange"><TXT>L</TXT></BTN>
            <BTN type="elevated" radius="0" onclick="" color="deeporange"><TXT>Y</TXT></BTN>           
        </ROW>
    </BOX>
</FML>

halign

logo See it in Action

Column layout valign alignment:

<FML>
    <BOX layout="row">
        <COL valign="start">   
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="redaccent"><TXT>S</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="redaccent"><TXT>T</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="redaccent"><TXT>A</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="redaccent"><TXT>R</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="redaccent"><TXT>T</TXT></BTN>                     
        </COL>
        <COL valign="end">     
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="purpleaccent"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="purpleaccent"><TXT>N</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="purpleaccent"><TXT>D</TXT></BTN>                                         
        </COL>
        <COL valign="center">  
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="lightblue"><TXT>C</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="lightblue"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="lightblue"><TXT>N</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="lightblue"><TXT>T</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="lightblue"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="lightblue"><TXT>R</TXT></BTN>           
        </COL>
        <COL valign="between"> 
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="green"><TXT>B</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="green"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="green"><TXT>T</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="green"><TXT>W</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="green"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="green"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="green"><TXT>N</TXT></BTN> 
        </COL>
        <COL valign="around">  
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="amber"><TXT>A</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="amber"><TXT>R</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="amber"><TXT>O</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="amber"><TXT>U</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="amber"><TXT>N</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="amber"><TXT>D</TXT></BTN>           
        </COL>
        <COL valign="evenly">  
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="deeporange"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="deeporange"><TXT>V</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="deeporange"><TXT>E</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="deeporange"><TXT>N</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="deeporange"><TXT>L</TXT></BTN>
            <BTN height="100" width="100" type="elevated" radius="0" onclick="" color="deeporange"><TXT>Y</TXT></BTN>           
        </COL>
    </BOX>
</FML>

valign

Framework Markup Language is an open source programming language created by AppDaddy Software Solutions Inc. FML and is licensed under a fair source license agreement and is maintained by a community of developers.

⚠️ **GitHub.com Fallback** ⚠️