BOX - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<BOX/> : ViewableWidget
In addition to being the base class for several other widgets, like <ROW/> and <COLUMN/>, the <BOX/> widget can be used independentaly to lay out it children.
By default, <BOX/> lays out its children vertically, aligned top-left, and expands in both the vertical and horizontal axis to fill its parent.
By default, the <BOX/> widget expands in both the vertical and horizontal directions to fill its parent container. If expand is set to "false" the widget will shrink to fit it largest child.
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| layout | string | column | Default layout of box children. |
|
| expand | bool | true | If the widget expands to fill its parent, or shrinks to fit its children. By default, <BOX/> expands both horizontally and vertically to fill the available space. If either of the available vertical or horizontal space is infinite, typically when wrapped in a <SCROLLER/>, the <BOX/> will shrink rather than expand in that axis. |
|
| wrap | bool | false | If wrap="true", children are allowed to wrap (take additional lines) when the primary axis is smaller than that required | |
| color | color | transparent | The primary color of the box background. Can be specified as a comma separated list (color, color2, color3 and color4) for gradients. | |
| color2 | color | The 2nd color of the gradient | ||
| color3 | color | The 3rd color of the gradient | ||
| color4 | color | The 4th color of the gradient | ||
| gradientstart | string | top | Start position of the gradient. |
|
| gradientend | string | bottom | End position of the gradient. |
|
| border | string | none | Specifies borders on the box. Values include "none", "all", "top", "bottom", "left", "right" "vertical", and "horizontal". If any of the border attributes are specified and border is undefined, it is automaticcaly defaulted to all
|
|
| bordercolor | string | The color of the box border, takes hex, RGB, and color names. Can be a single value or a comma seperated list | ||
| borderwidth | double | 1 | The width of the widgets borders | |
| borderradius | double | The radius of the border corners, set to greater of width/height to create a full circle. Can be a single value or a comma seperated list of up to 4 values (Top Right, Bottom Right, Bottom Left, Top Left) | ||
| borderlabel | string | Simple inline border label | ||
| borderlabelcolor | color | The border label color | ||
| borderlabelfont | font | The border label font (case sensitive) | ||
| borderlabelsize | double | The border label font size | ||
| elevation | string | Default layout inside the box. Valid options include row, column and stack | ||
| shadowcolor | string | The color of the widgets shadow, takes hex, RGB, and color name | ||
| shadowx | string | The shadow x offset | ||
| shadowy | string | The shadow y offset | ||
| blur | double | Blurs the contents of the box. Typical blur value is 5.0 but can be smaller or larger. | ||
| datasource | string | The id of a valid data source. Used for dynamic <BOX/> creation. For each row in the data source, a <BOX/> is created using this box as a prototype. Each <BOX/> created has a unique scope. |
<FML center="true">
<BOX color="red" margin="50" bordercolor="yellow" radius="10"/>
</FML>
<FML align="center">
<BOX color="lightblueaccent" width="50%" height="50%" center="true" radius="10" elevated="1">
<TEXT bold="true" style="h3" color="blue" value="<BOX />"/>
</BOX>
</FML><FML>
<!-- Try resizing the display by dragging the splitter handle left/right or by resizing your browser -->
<ROW layout="row" wrap="true" width="100%" maxwidth="900" color="transparent">
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 1</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 2</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 3</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 4</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 5</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 6</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 7</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
<BOX width="145" height="48" bordercolor="amber" center="true" layout="row" padding="10" margin="2">
<TEXT>Hey Hi Hello 8</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
</ROW>
</FML>BOX content can be dynamically created using a prototype. BOX's (rows, columns, stacks) can define a single child (in this example <COLUMN/> has a single <BOX/> child) and a data tag pointing to the datasource (data="db1"). For each row in the datasource db1, a corresponding <BOX/> and all of its child widgets will be created. Data can be bound using the {data.<fieldname>} syntax.
<FML title="BOX (example4)" linkable="true" layout="stack" center="true">
<TESTDATA id="db1" rows="25" delay="1"/>
<!-- Column with Prototype Widget - Driven by Data -->
<SCROLLER expand="false">
<COLUMN data="db1" expand="false" width="145">
<BOX width="145" height="100" bordercolor="amber" layout="column" padding="10" margin="10" borderlabel="{data.first} {data.last}">
<TEXT>First: {data.first}</TEXT>
<TEXT>Last: {data.last}</TEXT>
<ICON value="waving_hand" color="orange"/>
</BOX>
</COLUMN>
</SCROLLER>
<BUSY visible="{db1.busy}"/>
</FML><FML title="BOX (example1)" linkable="true" center="true" keywords="blur box border">
<BOX color="#FFCC3E" margin="50" bordercolor="#FC2D25" radius="0" borderwidth="25" center="true" blur="10">
<IMAGE url="https://pad.fml.dev/images/pdf.svg" width="200"/>
</BOX>
</FML>