MATLAB®

Adding Components to the GUI

Other topics that may be of interest:

• Aligning Components

• Setting Tab Order

Available Components

The component palette at the left side of the Layout Editor contains the components that you can add to your GUI. You can display it with or without names.

When you first open the Layout Editor, the component palette contains only icons. To display the names of the GUI components, select Preferences from the File menu, check the box next to Show names in component palette, and click OK.

See Creating Menus for information about adding menus to a GUI.

Note   This section provides information about using components to lay out a GUI. For information about programming these components see Programming a GUIDE GUI.

Back to Top

Adding Components to the GUIDE Layout Area

This topic tells you how to place components in the GUIDE layout area and give each component a unique identifier.

Note   See Creating Menus for information about adding menus to a GUI. See Creating Toolbars for information about working with the toolbar.

1. Place components in the layout area according to your design.

   • Drag a component from the palette and drop it in the layout area.

   • Click a component in the palette and move the cursor over the layout area. The cursor changes to a cross. Click again to add the component in its default size, or click and drag to size the component as you add it.

   The components listed in the following table need additional considerations.

   If You Are Adding...	Then...
   Panels or button groups	See Adding a Component to a Panel or Button Group.
   ActiveX controls	See Adding ActiveX® Controls.

   See Grid and Rulers for information about using the grid.

2. Assign a unique identifier to each component. Do this by setting the value of the component Tag properties. SeeAssigning an Identifier to Each Component for more information.

3. Specify the look and feel of each component by setting the appropriate properties. The following topics contain specific information.

   • Defining User Interface Controls

   • Defining Panels and Button Groups

   • Defining Axes

   • Defining Tables

   • Adding ActiveX^® Controls

This is an example of a GUI in the Layout Editor. Components in the Layout Editor are not active. Saving and Running a GUIDE GUI describes how to generate a functioning GUI.

Using Coordinates to Place Components

The status bar at the bottom of the GUIDE Layout Editor displays:

• Current Point — The current location of the mouse relative to the lower left corner of the grid area in the Layout Editor.

• Position — The Position property of the selected component, a 4-element vector: [distance from left, distance from bottom, width, height], where distances are relative to the parent figure, panel, or button group. All values are given in pixels. Rulers also display pixels.

If you select a single component and move it, the first two elements of the position vector (distance from left, distance from bottom) are updated as you move the component. If you resize the component, the last two elements of the position vector (width, height) are updated as you change the size. The first two elements may also change if you resize the component such that the position of its lower left corner changes. If no components are selected, the position vector is that of the figure.

For more information, see Using Coordinate Readouts.

Adding a Component to a Panel or Button Group

To add a component to a panel or button group, select the component in the component palette then move the cursor over the desired panel or button group. The position of the cursor determines the component's parent.

GUIDE highlights the potential parent as shown in the following figure. The highlight indicates that if you drop the component or click the cursor, the component will be a child of the highlighted panel, button group, or figure.

Note   If the component is not entirely contained in the panel or button group, it appears to be clipped in the Layout Editor. When you run the GUI, the entire component is displayed and straddles the panel or button group border. The component is nevertheless a child of the panel and behaves accordingly. You can use the Object Browser to determine the child objects of a panel or button group. Viewing the Object Hierarchy tells you how.

Note   Assign a unique identifier to each component in your panel or button group by setting the value of its Tag property. See Assigning an Identifier to Each Component for more information.

Assigning an Identifier to Each Component

Use the Tag property to assign each component a unique meaningful string identifier.

When you place a component in the layout area, GUIDE assigns a default value to the Tag property. Before saving the GUI, replace this value with a string that reflects the role of the component in the GUI.

The string value you assign Tag is used in the M-file code to identify the component and must be unique in the GUI. To set Tag:

1. Select Property Inspector from the View menu or click the Property Inspector button .

2. In the layout area, select the component for which you want to set Tag.

3. In the Property Inspector, select Tag and then replace the value with the string you want to use as the identifier. In the following figure, Tag is set to mybutton.

   

Back to Top

Defining User Interface Controls

User interface controls include push buttons, toggle buttons, sliders, radio buttons, edit text controls, static text controls, pop-up menus, check boxes, and list boxes.

To define user interface controls, you must set certain properties. To do this:

1. Use the Property Inspector to modify the appropriate properties. Open the Property Inspector by selecting Property Inspector from the View menu or by clicking the Property Inspector button .

2. In the layout area, select the component you are defining.

Subsequent topics describe commonly used properties of user interface controls and offer a simple example for each kind of control:

• Commonly Used Properties

• Push Button

• Slider

• Radio Button

• Check Box

• Edit Text

• Static Text

• Pop-Up Menu

• List Box

• Toggle Button

Note   See Available Components for descriptions of these components. See Examples: Programming GUIDE GUI Components for basic examples of programming these components.

Commonly Used Properties

The most commonly used properties needed to describe a user interface control are shown in the following table. Instructions for a particular control may also list properties that are specific to that control.

For a complete list of properties and for more information about the properties listed in the table, see Uicontrol Properties in the MATLAB documentation. Properties needed to control GUI behavior are discussed in Programming a GUIDE GUI

Push Button

To create a push button with label Button 1, as shown in this figure:

• Specify the push button label by setting the String property to the desired label, in this case, Button 1.

  

  To display the & character in a label, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

  The push button accommodates only a single line of text. If you specify more than one line, only the first line is shown. If you create a push button that is too narrow to accommodate the specified String, MATLAB software truncates the string with an ellipsis.

  

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

• To add an image to a push button, assign the button's CData property an m-by-n-by-3 array of RGB values that defines a truecolor image. You must do this programmatically in the opening function of the GUI M-file. For example, the array img defines a 16-by-64-by-3 truecolor image using random values between 0 and 1 (generated by rand).

  img = rand(16,64,3);
  set(handles.pushbutton1,'CData',img);
  

  where pushbutton1 is the push button's Tag property.

  

  Note   Create your own icon with the icon editor described in Icon Editor. See ind2rgb for information on converting a matrix X and corresponding colormap, i.e., an (X, MAP) image, to RGB (truecolor) format.

Slider

To create a slider as shown in this figure:

• Specify the range of the slider by setting its Min property to the minimum value of the slider and its Max property to the maximum value. The Min property must be less than Max.

• Specify the value indicated by the slider when it is created by setting the Value property to the appropriate number. This number must be less than or equal to Max and greater than or equal to Min. If you specify Value outside the specified range, the slider is not displayed.

• Control the amount the slider Value changes when a user clicks the arrow button to produce a minimum step or the slider trough to produce a maximum step by setting the SliderStep property. Specify SliderStep as a two-element vector, [min_step,max_step], where each value is in the range [0, 1] to indicate a percentage of the range.

  

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

  Note   On Mac® platforms, the height of a horizontal slider is constrained. If the height you set in the position vector exceeds this constraint, the displayed height of the slider is the maximum allowed. The height element of the position vector is not changed.

  Note   The slider component provides no text description or data entry capability. Use a Static Text component to label the slider. Use an Edit Text component to enable a user to provide a value for the slider.

Radio Button

To create a radio button with label Indent nested functions, as shown in this figure:

• Specify the radio button label by setting the String property to the desired label, in this case, Indent nested functions.

  

  To display the & character in a label, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

  The radio button accommodates only a single line of text. If you specify more than one line, only the first line is shown. If you create a radio button that is too narrow to accommodate the specified String, MATLAB software truncates the string with an ellipsis.

  

• Create the radio button with the button selected by setting its Value property to the value of its Max property (default is 1). Set Value to Min (default is 0) to leave the radio button unselected. Correspondingly, when the user selects the radio button, the software sets Value to Max, and to Min when the user deselects it.

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

• To add an image to a radio button, assign the button's CData property an m-by-n-by-3 array of RGB values that defines a truecolor image. You must do this programmatically in the opening function of the GUI M-file. For example, the array img defines a 16-by-24-by-3 truecolor image using random values between 0 and 1 (generated by rand).

  img = rand(16,24,3);
  set(handles.radiobutton1,'CData',img);
  

  Note   To manage exclusive selection of radio buttons and toggle buttons, put them in a button group. See Button Group for more information.

Check Box

To create a check box with label Display file extension that is initially checked, as shown in this figure:

• Specify the check box label by setting the String property to the desired label, in this case, Display file extension.

  

  To display the & character in a label, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

  The check box accommodates only a single line of text. If you specify a component width that is too small to accommodate the specified String, MATLAB software truncates the string with an ellipsis.

  

• Create the check box with the box checked by setting the Value property to the value of the Max property (default is 1). Set Value to Min (default is 0) to leave the box unchecked. Correspondingly, when the user clicks the check box, the software sets Value to Max when the user checks the box and to Min when the user unchecks it.

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

Edit Text

To create an edit text component that displays the initial text Enter your name here, as shown in this figure:

• Specify the text to be displayed when the edit text component is created by setting the String property to the desired string, in this case, Enter your name here.

  

  To display the & character in a label, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

• To enable multiple-line input, specify the Max and Min properties so that their difference is greater than 1. For example, Max = 2, Min = 0. Max default is 1, Min default is 0. MATLAB software wraps the string and adds a scroll bar if necessary.

  

  If Max-Min is less than or equal to 1, the edit text component admits only a single line of input. If you specify a component width that is too small to accommodate the specified string, MATLAB software displays only part of the string. The user can use the arrow keys to move the cursor over the entire string.

  

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

Static Text

To create a static text component with text Select a data set, as shown in this figure:

• Specify the text that appears in the component by setting the component String property to the desired text, in this case Select a data set.

  

  To display the & character in a list item, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

  If your component is not wide enough to accommodate the specified String, MATLAB software wraps the string.

  

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

Pop-Up Menu

To create a pop-up menu (also known as a drop-down menu or combo box) with items one, two, three, and four, as shown in this figure:

• Specify the pop-up menu items to be displayed by setting the String property to the desired items. Click the

  

  button to the right of the property name to open the Property Inspector editor.

  

  To display the & character in a menu item, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

  If the width of the component is too small to accommodate one or more of the specified strings, MATLAB software truncates those strings with an ellipsis.

• To select an item when the component is created, set Value to a scalar that indicates the index of the selected list item, where 1 corresponds to the first item in the list. If you set Value to 2, the menu looks like this when it is created:

  

• If you want to set the position and size of the component to exact values, then modify its Position property. See Locating and Moving Components and Resizing Components for details. The height of a pop-up menu is determined by the font size. The height you set in the position vector is ignored.

  Note   The pop-up menu does not provide for a label. Use a Static Text component to label the pop-up menu.

List Box

To create a list box with items one, two, three, and four, as shown in this figure:

• Specify the list of items to be displayed by setting the String property to the desired list. Use the Property Inspector editor to enter the list. You can open the editor by clicking the button to the right of the property name.

  

  To display the & character in a label, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

  If the width of the component is too small to accommodate one or more of the specified strings, MATLAB software truncates those strings with an ellipsis.

• Specify selection by using the Value property together with the Max and Min properties.

  • To select a single item when the component is created, set Value to a scalar that indicates the index of the selected list item, where 1 corresponds to the first item in the list.

  • To select more than one item when the component is created, set Value to a vector of indices of the selected items. Value = [1,3] results in the following selection.

    

    To enable selection of more than one item, you must specify the Max and Min properties so that their difference is greater than 1. For example, Max = 2, Min = 0. Max default is 1, Min default is 0.

  • If you want no initial selection, set the Max and Min properties to enable multiple selection, i.e., Max - Min > 1, and then set the Value property to an empty matrix [].

• If the list box is not large enough to display all list entries, you can set the ListBoxTop property to the index of the item you want to appear at the top when the component is created.

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

  Note   The list box does not provide for a label. Use a Static Text component to label the list box.

Toggle Button

To create a toggle button with label Left/Right Tile, as shown in this figure:

• Specify the toggle button label by setting its String property to the desired label, in this case, Left/Right Tile.

  

  To display the & character in a label, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

  The toggle button accommodates only a single line of text. If you specify more than one line, only the first line is shown. If you create a toggle button that is too narrow to accommodate the specified String, MATLAB software truncates the string with an ellipsis.

  

• Create the toggle button with the button selected (depressed) by setting its Value property to the value of its Max property (default is 1). Set Value to Min (default is 0) to leave the toggle button unselected (raised). Correspondingly, when the user selects the toggle button, MATLAB software sets Value to Max, and to Min when the user deselects it. The following figure shows the toggle button in the depressed position.

  

• If you want to set the position or size of the component to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

• To add an image to a toggle button, assign the button's CData property an m-by-n-by-3 array of RGB values that defines a truecolor image. You must do this programmatically in the opening function of the GUI M-file. For example, the array img defines a 16-by-64-by-3 truecolor image using random values between 0 and 1 (generated by rand).

  img = rand(16,64,3);
  set(handles.togglebutton1,'CData',img);
  

  where togglebutton1 is the toggle button's Tag property.

  

  Note   To manage exclusive selection of radio buttons and toggle buttons, put them in a button group. See Button Group for more information.

Back to Top

Defining Panels and Button Groups

Panels and button groups are containers that arrange GUI components into groups. If you move the panel or button group, its children move with it and maintain their positions relative to the panel or button group.

To define panels and button groups, you must set certain properties. To do this:

1. Use the Property Inspector to modify the appropriate properties. Open the Property Inspector by selecting Property Inspector from the View menu or by clicking the Property Inspector button .

2. In the layout area, select the component you are defining.

   Note   See Available Components for descriptions of these components. See Examples: Programming GUIDE GUI Components for basic examples of programming these components.

Subsequent topics describe commonly used properties of panels and button groups and offer a simple example for each component.

• Commonly Used Properties

• Panel

• Button Group

Commonly Used Properties

The most commonly used properties needed to describe a panel or button group are shown in the following table:

For a complete list of properties and for more information about the properties listed in the table, see the Uipanel Properties and Uibuttongroup Properties in the MATLAB reference documentation. Properties needed to control GUI behavior are discussed in theProgramming a GUIDE GUI.

Panel

To create a panel with title My Panel as shown in the following figure:

• Specify the panel title by setting the Title property to the desired string, in this case My Panel.

  

  To display the & character in the title, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

• Specify the location of the panel title by selecting one of the available TitlePosition property values from the pop-up menu, in this case lefttop. You can position the title at the left, middle, or right of the top or bottom of the panel.

  

• If you want to set the position or size of the panel to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

  Note   For information about adding components to a panel, see Adding a Component to a Panel or Button Group.

Button Group

To create a button group with title My Button Group as shown in the following figure:

• Specify the button group title by setting the Title property to the desired string, in this case My Button Group.

  

  To display the & character in the title, use two & characters in the string. The words remove, default, and factory (case sensitive) are reserved. To use one of these as a label, prepend a backslash (\) to the string. For example, \remove yields remove.

• Specify the location of the button group title by selecting one of the available TitlePosition property values from the pop-up menu, in this case lefttop. You can position the title at the left, middle, or right of the top or bottom of the button group.

  

• If you want to set the position or size of the button group to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

  Note   For information about adding components to a button group, see Adding a Component to a Panel or Button Group.

Back to Top

Defining Axes

Axes enable your GUI to display graphics such as graphs and images using commands such as: plot, surf, line, bar, polar, pie, contour, and mesh.

To define an axes, you must set certain properties. To do this:

1. Use the Property Inspector to modify the appropriate properties. Open the Property Inspector by selecting Property Inspector from the View menu or by clicking the Property Inspector button .

2. In the layout area, select the component you are defining.

   Note   SeeAvailable Components for a description of this component.

Subsequent topics describe commonly used properties of axes and offer a simple example.

• Commonly Used Properties

• Axes

Commonly Used Properties

The most commonly used properties needed to describe an axes are shown in the following table:

For a complete list of properties and for more information about the properties listed in the table, see Axes Properties in the MATLAB documentation. Properties needed to control GUI behavior are discussed in Programming a GUIDE GUI.

See commands such as the following for more information on axes objects: plot, surf, line, bar, polar, pie, contour and mesh. See Functions — By Category in the MATLAB Function Reference documentation for a complete list.

Axes

To create an axes as shown in the following figure:

• Allow for tick marks to be placed outside the box that appears in the Layout Editor. The axes above looks like this in the layout editor; placement allows space at the left and bottom of the axes for tick marks. Functions that draw in the axes update the tick marks appropriately.

  

• Use the title, xlabel, ylabel, zlabel, and text functions in the GUI M-file to label an axes component. For example,

  xlh = (axes_handle,'Years')
  

  labels the X-axis as Years. The handle of the X-axis label is xlh. See Callback Syntax and Arguments for information about determining the axes handle.

  The words remove, default, and factory (case sensitive) are reserved. To use one of these in component text, prepend a backslash (\) to the string. For example, \remove yields remove.

• If you want to set the position or size of the axes to an exact value, then modify its Position property. See Locating and Moving Components and Resizing Components for details.

Back to Top

Defining Tables

Tables enable you to display data in a two dimensional table. You can use the Property Inspector to get and set the object property values.

Commonly Used Properties

The most commonly used properties of a table component are listed in the table below. These are grouped in the order they appear in the Table Property Editor. Please refer to uitable command documentation for detail of all the table properties:

Tables

To create a GUI with a table in GUIDE as shown, do the following:

Drag the table icon on to the Layout Editor and right click in the table. Select Table Property Editor form the pop-up menu.

Set Column Properties.   The Table Property Editor, opens with Column panel on top. Click Insert to add two more columns.

Select Show names entered below as the column headers and set the ColumnName by entering Rate, Amount, Available, and Fixed/Adj in Name group. for the Available and Fixed/Adj columns set the ColumnEditable property to on. Lastly set the ColumnFormat for the four columns

For the Rate column, select Numeric. For the Amount Column select Custom and in the Custom Format Editor, choose Bank.

Leave the Available column at the default value. This allows MATLAB to chose based on the value of the Data property of the table. For the Fixed/Adj column select Choice List to create a pop-up menu. In the Choice List Editor, click Insert to add a second choice and type Fixed and Adjustable as the 2 choices.

Set Row Properties.   In the Row tab, leave the default RowName, Show numbered row headers.

Set Data Properties.   Specify the value of the Data you want in the table. You need create Data in the MATLAB command window before you specify it in GUIDE. For this example, type:

dat =  {6.125, 456.3457, true,  'Fixed';...
6.75,  510.2342, false, 'Adjustable';...
7,     658.2,    false, 'Fixed';};

In the Table Property Editor, select the data that you defined and select Change data value to the selected workspace variable below.

Set Color Properties.   Specify the BackgroundColor and RowStriping for your table in the Color tab.

You can change other uitable properties to the table via the Property Inspector.

Back to Top

Adding ActiveX^® Controls

When you drag an ActiveX component from the component palette into the layout area, GUIDE opens a dialog box, similar to the following, that lists the registered ActiveX controls on your system.

Note   If MATLAB software is not installed locally on your computer — for example, if you are running the software over a network — you might not find the ActiveX control described in this example. To register the control, see Registering Controls and Servers in the MATLAB External Interfaces documentation.

1. Select the desired ActiveX control. The right panel shows a preview of the selected control.

2. Click Create. The control appears as a small box in the Layout Editor.

3. Resize the control to approximately the size of the square shown in the preview pane. You can do this by clicking and dragging a corner of the control, as shown in the following figure.

   

See ActiveX^® Control for information about programming a sample ActiveX control and an example.

Back to Top

Working with Components in the Layout Area

This topic provides basic information about selecting, copying, pasting, and deleting components in the layout area.

• Selecting Components

• Copying, Cutting, and Clearing Components

• Pasting and Duplicating Components

• Front-to-Back Positioning

Other topics that may be of interest are

• Locating and Moving Components

• Resizing Components

• Aligning Components

• Setting Tab Order

Selecting Components

You can select components in the layout area in the following ways:

• Click a single component to select it.

• Press Ctrl+A to select all child objects of the figure. This does not select components that are child objects of panels or button groups.

• Click and drag the cursor to create a rectangle that encloses the components you want to select. If the rectangle encloses a panel or button group, only the panel or button group is selected, not its children. If the rectangle encloses part of a panel or button group, only the components within the rectangle that are child objects of the panel or button group are selected.

• Select multiple components using the Shift and Ctrl keys.

In some cases, a component may lie outside its parent's boundary. Such a component is not visible in the Layout Editor but can be selected by dragging a rectangle that encloses it or by selecting it in the Object Browser. Such a component is visible in the active GUI.

See Viewing the Object Hierarchy for information about the Object Browser.

Note   You can select multiple components only if they have the same parent. To determine the child objects of a figure, panel, or button group, use the Object Browser.

Copying, Cutting, and Clearing Components

Use standard menu and pop-up menu commands, toolbar icons, keyboard keys, and shortcut keys to copy, cut, and clear components.

Copying.   Copying places a copy of the selected components on the clipboard. A copy of a panel or button group includes its children.

Cutting.   Cutting places a copy of the selected components on the clipboard and deletes them from the layout area. If you cut a panel or button group, you also cut its children.

Clearing.   Clearing deletes the selected components from the layout area. It does not place a copy of the components on the clipboard. If you clear a panel or button group, you also clear its children.

Pasting and Duplicating Components

Pasting.   Use standard menu and pop-up menu commands, toolbar icons, and shortcut keys to paste components. GUIDE pastes the contents of the clipboard to the location of the last mouse click. It positions the upper-left corner of the contents at the mouse click.

Consecutive pastes place each copy to the lower right of the last one.

Duplicating.   Select one or more components that you want to duplicate, then do one of the following:

• Copy and paste the selected components as described above.

• Select Duplicate from the Edit menu or the pop-up menu. Duplicate places the copy to the lower right of the original.

• Right-click and drag the component to the desired location. The position of the cursor when you drop the components determines the parent of all the selected components. Look for the highlight as described in Adding a Component to a Panel or Button Group.

Front-to-Back Positioning

MATLAB figures maintain separate stacks that control the front-to-back positioning for different kinds of components:

• User interface controls such as buttons, sliders, and pop-up menus

• Panels, button groups, and axes

• ActiveX controls

You can control the front-to-back positioning of components that overlap only if those components are in the same stack. For overlapping components that are in different stacks:

• User interface controls always appear on top of panels, button groups, axes that they overlap. ActiveX controls appear on top of everything they overlap.

• Panels, button groups, and axes always appear on top of ActiveX controls.

The Layout Editor provides four operations that enable you to control front-to-back positioning. All are available from the Layout menu, which is shown in the following figure.

• Bring to Front — Move the selected object(s) in front of nonselected objects (available from the right-click context menu, the Layout menu, or the Ctrl+F shortcut).

• Send to Back — Move the selected object(s) behind nonselected objects (available from the right-click context menu, the Layout menu, or the Ctrl+B shortcut).

• Bring Forward — Move the selected object(s) forward by one level, i.e., in front of the object directly forward of it, but not in front of all objects that overlay it (available from the Layout menu).

• Send Backward — Move the selected object(s) back by one level, i.e., behind the object directly in back of it, but not behind all objects that are behind it (available from the Layout menu).

Note   Changing front-to-back positioning of components also changes their tab order. See Setting Tab Order for more information.

Back to Top

Locating and Moving Components

You can locate or move components in one of the following ways:

• Using Coordinate Readouts

• Dragging Components

• Using Arrow Keys to Move Components

• Setting the Component's Position Property

Another topic that may be of interest is

• Aligning Components

Using Coordinate Readouts

Coordinate readouts indicate where a component is placed and where the mouse pointer is located. Use these readouts to position and align components manually. The coordinate readout in the lower right corner of the Layout Editor shows the position of a selected component or components as [xleft ybottom width height]. These values are displayed in units of pixels, regardless of the coordinate units you select for components.

If you drag or resize the component, the readout updates accordingly. The readout to the left of the component position readout displays the current mouse position, also in pixels. The following readout example shows a selected component that has a position of [35, 30, 180, 180], a 180-by-180 pixel object with a lower left corner at x=35 and y=30, and locates the mouse position at [200, 30].

When you select multiple objects, the Position readout displays numbers for x, y, width and height only if the objects have the same respective values; in all other cases it displays 'MULTI'. For example, if you select two checkboxes, one with Position [250, 140, 76, 20] pixels and the other with position [250, 190, 68, 20] pixels, the Position readout indicates [250, MULTI, MULTI, 20].

Dragging Components

Select one or more components that you want to move, then drag them to the desired position and drop them. You can move components from the figure into a panel or button group. You can move components from a panel or button group into the figure or into another panel or button group.

The position of the cursor when you drop the components also determines the parent of all the selected components. Look for the highlight as described in Adding a Component to a Panel or Button Group.

In some cases, one or more of the selected components may lie outside its parent's boundary. Such a component is not visible in the Layout Editor but can be selected by dragging a rectangle that encloses it or by selecting it in the Object Browser. Such a component is visible in the active GUI.

See Viewing the Object Hierarchy for information about the Object Browser.

Note   To select multiple components, they must have the same parent. That is, they must be contained in the same figure, panel, or button group.

Using Arrow Keys to Move Components

Select one or more components that you want to move, then press and hold the arrow keys until the components have moved to the desired position. Note that the components remain children of the figure, panel, or button group from which you move them, even if they move outside its boundaries.

Setting the Component's Position Property

Select one or more components that you want to move. Then open the Property Inspector from the View menu or by clicking the Property Inspector button .

1. In the Property Inspector, scroll to the Units property and note whether the current setting is characters or normalized. Click the button next to Units and then change the setting to inches from the pop-up menu.

   

2. Click the + sign next to Position. The Property Inspector displays the elements of the Position property.

   

3. If you have selected

   • Only one component, type the x and y coordinates of the point where you want the lower-left corner of the component to appear.

   • More than one component, type either the x or the y coordinate to align the components along that dimension.

4. Reset the Units property to its previous setting, either characters or normalized.

Note   Setting the Units property to characters (nonresizable GUIs) or normalized (resizable GUIs) gives the GUI a more consistent appearance across platforms. See Cross-Platform Compatible Units for more information.

Back to Top

Resizing Components

You can resize components in one of the following ways:

• Dragging a Corner of the Component

• Setting the Component's Position Property

Dragging a Corner of the Component

Select the component you want to resize. Click one of the corner handles and drag it until the component is the desired size.

Setting the Component's Position Property

Select one or more components that you want to resize. Then open the Property Inspector from the View menu or by clicking the Property Inspector button .

1. In the Property Inspector, scroll to the Units property and note whether the current setting is characters or normalized. Click the button next to Units and then change the setting to inches from the pop-up menu.

   

2. Click the + sign next to Position. The Property Inspector displays the elements of the Position property.

   

3. Type the width and height you want the components to be.

4. Reset the Units property to its previous setting, either characters or normalized.

Note   To select multiple components, they must have the same parent. That is, they must be contained in the same figure, panel, or button group. See Selecting Components for more information. Setting the Units property to characters (nonresizable GUIs) or normalized (resizable GUIs) gives the GUI a more consistent appearance across platforms. See Cross-Platform Compatible Units for more information.

Back to Top

Setting the GUI Size

Aligning Components