<FML>
<!-- top drawer -->
<DRAWER id="topd" side="top" size="200" handle="true" color="#f1E393A0,#DFE8F5" start="bottom" end="top" center="true">
<BUTTON onclick="topd.close();"><TEXT value="TOP DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</DRAWER>
<!-- bottom drawer -->
<DRAWER id="bottomd" side="bottom" size="300" handle="true" color="#f1E393A0,#DFE8F5" start="top" end="bottom" center="true">
<BUTTON onclick="bottomd.close();"><TEXT value="BOTTOM DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</DRAWER>
<!-- left drawer -->
<DRAWER id="leftd" side="left" size="200" handle="true" color="#f111998e,#38ef7d" start="right" end="left" center="true">
<BUTTON onclick="leftd.close();"><TEXT value="LEFT DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</DRAWER>
<!-- right drawer -->
<DRAWER id="rightd" side="right" size="300" handle="true" color="#f111998e,#38ef7d" start="left" end="right" center="true">
<BUTTON onclick="rightd.close();"><TEXT value="RIGHT DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</DRAWER>
<!-- Buttons -->
<BOX center="true" layout="column">
<BUTTON onclick="topd.open()">
<ICON icon="keyboard_double_arrow_down"/>
</BUTTON>
<ROW expand="false">
<BUTTON onclick="leftd.open()">
<ICON icon="keyboard_double_arrow_right" />
</BUTTON>
<BUTTON onclick="rightd.open()">
<ICON icon="keyboard_double_arrow_left" />
</BUTTON>
</ROW>
<BUTTON onclick="bottomd.open()">
<ICON icon="keyboard_double_arrow_up" />
</BUTTON>
</BOX>
</FML>
