Customizer's Guide > Working with XUI (XML-based User Interface) Dialog Boxes > Specifying Dialog Box Layout > Morph Layout
  
Morph Layout
The Morph layout uses the <morph> element to create a dialog box that dynamically adjusts the layout of its contents. This makes the Morph layout very useful for displaying a dialog box with an varying set of controls based on context or containing a large number of controls.
Consider a dialog box with a Morph layout that initially displays its contents in the same manner as a Grid layout:
A dialog box with a Morph layout with a single column of label and related textbox controls.
As the dialog box is resized, the layout may change to include additional columns. For example:
A dialog box with a Morph layout with two columns of label and related textbox controls.
When the dialog box is resized so small that all of the elements can no longer be displayed, the layout changes to a tabbed box. For example:
A dialog box with a Morph layout with tabs, each with a single column of label and related textbox controls.
This Morph dialog box is described in XML as follows:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE window PUBLIC "-//Arbortext//DTD XUI XML 1.1//EN" "xui.dtd">
<window title="Modify Attribute">
<box orient="horizontal">
<box orient="vertical">
<grid morph="true">
<label label="boardno:"/>
<combobox dropdown="true">
<listitem label="usafseal"/>
</combobox>
<label label="graphsty:"/> <textbox/>
<label label="llcordra:"/> <textbox/>
<label label="rucordra:"/> <textbox/>
<label label="reprowid:"/> <textbox/>
<label label="reprode:p"/> <textbox/>
<label label="hscale:"/> <textbox/>
<label label="vscale:"> <textbox/>
<label label="scalefit:"/> <textbox/>
<label label="hplace:"/>
<combobox dropdown="true">
<listitem label="center"/>
<listitem label="left"/>
<listitem label="none"/>
<listitem label="right"/>
</combobox>
<label label="vplace:"/>
<combobox dropdown="true">
<listitem label="bottom"/>
<listitem label="middle"/>
<listitem label="none"/>
<listitem label="top"/>
</combobox>
<label label="coordst:"/> <textbox/>
<label label="coordend:"/> <textbox/>
<label label="rotation:"/> <textbox/>
<label label="security:"/>
<combobox dropdown="true">
<listitem label="c"/>
<listitem label="s"/>
<listitem label="u"/>
</combobox>
</grid>
<description label="Element: graphic"/>
</box>
<box orient="vertical">
<button label="OK"/>
<button label="Cancel"/>
<button label="Help"/>
<button label="Validate"/>
<button label="Reset"/>
<button label="Reset All"/>
<button label="Delete"/>
<button label="Delete All"/>
</box>
</box>
</window>
The PTC ArbortextEditorModify Attributes dialog box is an example of a Morph layout. While editing a document with PTC ArbortextEditor, choose Edit > Modify Attributes. The Modify Attributes dialog box displays all of the attributes for the current element. If you resize the dialog box, the layout changes to accommodate the controls.
Refer to <morph> Element for a detailed description of the <morph> element.