cde/cde/doc/C/guides/builderGuide/ch03.sgm

<!-- $XConsortium: ch03.sgm /main/6 1996/09/08 19:48:08 rws $ -->
<!-- (c) Copyright 1995 Digital Equipment Corporation. -->
<!-- (c) Copyright 1995 Hewlett-Packard Company. -->
<!-- (c) Copyright 1995 International Business Machines Corp. -->
<!-- (c) Copyright 1995 Sun Microsystems, Inc. -->
<!-- (c) Copyright 1995 Novell, Inc. -->
<!-- (c) Copyright 1995 FUJITSU LIMITED. -->
<!-- (c) Copyright 1995 Hitachi. -->
<Chapter Id="ABUG.layo.div.1">
<Title Id="ABUG.layo.mkr.1">Laying Out a User Interface</Title>
<Para>The basic App Builder process for laying out an interface is to drag objects
from the App Builder primary window and drop them on the workspace or on
other App Builder objects.</Para>
<Para>See
<!--Original XRef content: 'Appendix&numsp;A, &xd2;App Builder Windows and Dialog Boxes'--><XRef Role="AppendixNumAndTitle" Linkend="ABUG.apRPE.mkr.1"> for a full
description of the primary window and its elements, and for a description of
the Module Browser.</Para>
<InformalTable Id="ABUG.layo.itbl.1" Frame="All">
<TGroup Cols="1">
<ColSpec Colname="1" Colwidth="4.0 in">
<TBody>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'Dragging and Dropping Palette Objects22'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.2"></Para></Entry>
</Row>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'To Create a Main Window, Custom Dialog, or File Selection Dialog22'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.3"></Para></Entry>
</Row>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'To Create a Window with a Spanning Control Pane22'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.4"></Para></Entry>
</Row>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'Selecting Interface Objects24'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.5"></Para></Entry>
</Row>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'Editing Objects in the Interface or in the Browser26'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.7"></Para></Entry>
</Row>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'To Cut or Copy Objects26'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.8"></Para></Entry>
</Row>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'To Paste Objects27'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.9"></Para></Entry>
</Row>
<Row Rowsep="1">
<Entry><Para><!--Original XRef content: 'Aligning and Distributing Objects in an Interface28'--><XRef Role="JumpText" Linkend="ABUG.layo.mkr.10"></Para></Entry>
</Row>
</TBody>
</TGroup>
</InformalTable>
<Sect1 Id="ABUG.layo.div.2">
<Title Id="ABUG.layo.mkr.2">Dragging and Dropping Palette Objects</Title>
<Para>The rules for dropping palette objects are simple; they are enforced by error
messages when they are violated.</Para>
<ItemizedList Remap="Bullet1">
<ListItem>
<Para>Windows (main window, custom dialog, file selection dialog) are dropped
on the workspace.</Para>
</ListItem>
<ListItem>
<Para>Panes (control, draw area, text, and term) are dropped on windows or on
other panes.</Para>
</ListItem>
<ListItem>
<Para>Controls (buttons, boxes, choice objects, and others) are dropped on a
control pane. The menu bar, which is on the Controls palette, is not strictly a
control; it is dropped on a main window only.</Para>
</ListItem>
</ItemizedList>
<Sect2 Id="ABUG.layo.div.3" Role="Procedure">
<Title Id="ABUG.layo.mkr.3">To Create a Main Window, Custom Dialog, or File Selection Dialog</Title>
<OrderedList>
<ListItem>
<Para>Drag a main window, custom dialog, or a file selection dialog box from the
Windows palette and drop it on the workspace.<IndexTerm>
<Primary>creating</Primary>
<Secondary>main window</Secondary>
</IndexTerm><IndexTerm>
<Primary>windows</Primary>
<Secondary>creating main</Secondary>
</IndexTerm><IndexTerm>
<Primary>main window</Primary>
<Secondary>creating</Secondary>
</IndexTerm><IndexTerm>
<Primary>custom dialog</Primary>
<Secondary>creating</Secondary>
</IndexTerm><IndexTerm>
<Primary>creating</Primary>
<Secondary>custom dialog</Secondary>
</IndexTerm>
</Para>
<Para>If you haven't previously named the module, the Module Name dialog box
will be displayed. Move the cursor to the Module Name dialog box, type a
name, and click Apply.</Para>
<Para>The module name will be displayed in the status area at the bottom of the
window.</Para>
</ListItem>
<ListItem>
<Para>Edit the properties of the window object, if necessary.</Para>
<Para>This can be done now or later. See
<!--Original XRef content: '&xd2;To Edit Properties of an Object&xd3; on
page&numsp;32'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.edprp.mkr.3"> for general instructions. See
<!--Original XRef content: '&xd2;Example: Editing Main Window
Properties&xd3; on page&numsp;35'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.edprp.mkr.6"> for specific instructions for a main window or a
primary main window.</Para>
</ListItem>
</OrderedList>
</Sect2>
<Sect2 Id="ABUG.layo.div.4" Role="Procedure">
<Title Id="ABUG.layo.mkr.4">To Create a Window with a Spanning Control Pane<IndexTerm><Primary>spanning control pane</Primary><Secondary>description of</Secondary></IndexTerm><IndexTerm><Primary>windows</Primary><Secondary>spanning control pane</Secondary></IndexTerm></Title>
<Para>Often you will want a control pane to fill the entire blank pane area of a main
window or custom dialog. You can then drop controls or other panes on the
control pane to create a complex window such as the App Builder primary
window. Do the following once you have dropped a main window or custom
dialog on the workspace.</Para>
<OrderedList>
<ListItem>
<Para>Drag a control pane from the Panes palette and drop it on the top-left corner<IndexTerm>
<Primary>creating</Primary>
<Secondary>spanning control pane</Secondary>
</IndexTerm><IndexTerm>
<Primary>spanning control pane</Primary>
<Secondary>creating</Secondary>
</IndexTerm>
of the main window or custom dialog.</Para>
<Graphic Entityref="ABUG.layo.fig.1" Id="ABUG.layo.igrph.1"></Graphic>
</ListItem>
<ListItem>
<Para>Drag the bottom-right corner of the control pane (an arrow pointing
towards a corner will be displayed) beyond the bottom-right corner of the
window and release mouse button 1.</Para>
<Graphic Entityref="ABUG.layo.fig.2" Id="ABUG.layo.igrph.2"></Graphic>
<Para>The control pane will be attached to the four sides of the window. If you
resize the window, the control pane will be resized with it.</Para>
<Para>See
<!--Original XRef content: '&xd2;To Attach Objects in an Interface&xd3; on page&numsp;99'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.group.mkr.9"> for details about
attachments.</Para></ListItem>
</OrderedList>
</Sect2>
</Sect1>
<Sect1 Id="ABUG.layo.div.5">
<Title Id="ABUG.layo.mkr.5">Selecting Interface Objects</Title>
<Para>For many actions, including editing, moving, aligning, and grouping, you need
to select one or more objects in an interface. You can only multiply-select
<Emphasis>siblings</Emphasis>&mdash;objects that are children of the same parent. (All windows in a project
are siblings, for instance, as are panes in a window and control objects in a
single control pane. Panes that are dropped on a control pane and created as
children of the control pane function like control objects in the control pane.)</Para>
<Para>You can select objects in the interface or in the Module Browser. See
<!--Original XRef content: '&xd2;Module
Browser&xd3; on page&numsp;128'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.apWDB.mkr.8"> for a description of the Browser. See
<!--Original XRef content: '&xd2;Editing Objects in
the Interface or in the Browser&xd3; on page&numsp;26'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.layo.mkr.7"> for information about cutting,
copying, and pasting interface objects.</Para>
<Para>Only control objects can be grouped or aligned (using the Align and Distribute
functions).</Para>
<Sect2 Id="ABUG.layo.div.6" Role="Procedure">
<Title>To Select Window or Pane Objects in the Interface or the Browser</Title>
<Para>Selecting an object in the Module Browser also selects it in the interface, and
vice versa.<IndexTerm>
<Primary>selecting</Primary>
<Secondary>single object</Secondary>
</IndexTerm>
</Para>
<ItemizedList Remap="Bullet1">
<ListItem>
<Para>Select a single window (main window, custom dialog, or file selection dialog
box) by clicking mouse button 1 on the object in the Browser or in the
interface (click in the status area at the bottom of the window object).</Para>
</ListItem>
<ListItem>
<Para>Select an additional window by clicking mouse button 2 on the window in
the browser or in the interface.</Para>
</ListItem>
<ListItem>
<Para>Select a single pane by clicking mouse button 1 on the pane in the Browser
or in the interface.</Para>
</ListItem>
<ListItem>
<Para>Select additional panes in the same window by clicking mouse button 2 on
the pane in the Browser or in the interface.</Para>
</ListItem>
</ItemizedList>
</Sect2>
<Sect2 Id="ABUG.layo.div.7" Role="Procedure">
<Title Id="ABUG.layo.mkr.6">To Select Control Objects in the Interface or the Browser<IndexTerm><Primary>objects</Primary><Secondary>selecting</Secondary></IndexTerm><IndexTerm><Primary>control objects</Primary><Secondary>selecting</Secondary></IndexTerm><IndexTerm><Primary>selecting</Primary><Secondary>objects</Secondary></IndexTerm></Title>
<Para>Selecting an object in the Module Browser also selects it in the interface, and
vice versa.<IndexTerm>
<Primary>selecting</Primary>
<Secondary>single object</Secondary>
</IndexTerm>
</Para>
<ItemizedList Remap="Bullet1">
<ListItem>
<Para>Select one object by clicking it in the interface or in the Module Browser.</Para>
</ListItem>
<ListItem>
<Para>Select a number of adjacent objects by positioning the mouse cursor above
and to the left of the objects, pressing mouse button 1, and dragging the<IndexTerm>
<Primary>multiple-select</Primary>
</IndexTerm><IndexTerm>
<Primary>selecting</Primary>
<Secondary>multiple objects</Secondary>
</IndexTerm>
mouse to encompass other objects down and to the right of the first object.<Literal><IndexTerm>
<Primary>drag-select</Primary>
</IndexTerm></Literal></Para>
</ListItem>
<ListItem>
<Para>Add or subtract an object to the current selection by clicking mouse button 2
on the object.</Para>
<Para>If an object is selected, clicking mouse button 2 on it deselects it.</Para>
</ListItem>
<ListItem>
<Para>To add a number of adjacent objects to those that are selected, position the
mouse cursor above and to the left of the objects to be added, press mouse
button 2, and drag the mouse to encompass other objects down and to the
right of the first object.<IndexTerm>
<Primary>objects</Primary>
<Secondary>adding to selection</Secondary>
</IndexTerm>
</Para>
</ListItem>
<ListItem>
<Para>To deselect all but one object, click mouse button 1 on an object.<IndexTerm>
<Primary>objects</Primary>
<Secondary>deselecting</Secondary>
</IndexTerm><IndexTerm>
<Primary>deselecting objects</Primary>
</IndexTerm>
</Para>
<Para>Only that object will be selected.</Para>
</ListItem>
</ItemizedList>
<Note>
<Para>When you have selected a number of objects in the interface, all the
objects will move if you press mouse button 1 on one of the objects and move
the mouse. A rectangular border will be drawn around the objects as you move
the mouse.</Para>
</Note>
</Sect2>
</Sect1>
<Sect1 Id="ABUG.layo.div.8">
<Title Id="ABUG.layo.mkr.7">Editing Objects in the Interface or in the Browser<IndexTerm><Primary>objects</Primary><Secondary>editing</Secondary></IndexTerm><IndexTerm><Primary>editing</Primary><Secondary>interface objects</Secondary></IndexTerm><IndexTerm><Primary>browser</Primary><Secondary>editing objects</Secondary></IndexTerm><IndexTerm><Primary>module browser</Primary><Secondary>editing objects</Secondary></IndexTerm><IndexTerm><Primary>editing</Primary><Secondary>browser</Secondary></IndexTerm><IndexTerm><Primary>editing</Primary><Secondary>interface</Secondary></IndexTerm></Title>
<Para>Once you have created an interface by dragging and dropping objects on the
workspace or on other App Builder objects, you may want to edit the interface
in various ways. You can cut, copy, paste, and delete objects, and you can undo
the last editing function performed&mdash;and you can perform these functions in
the interface or in the Module Browser, or between the interface and the
Browser. See
<!--Original XRef content: '&xd2;Module Browser&xd3; on page&numsp;128'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.apWDB.mkr.8"> for a description of the Browser.</Para>
<Para>You can copy or cut any object you can select&mdash;from a single control to a
complex window with multiple panes and many controls&mdash;and you can paste
that object in any open module.</Para>
<Note>
<Para>Objects selected in the interface are also selected in the Browser, and
vice versa. See
<!--Original XRef content: '&xd2;To Select Control Objects in the Interface or the Browser&xd3; on
page&numsp;24'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.layo.mkr.6"> for instructions for selecting objects. When you edit objects in the
Module Browser, be sure to check to see what is happening in the
interface&mdash;especially if you are cutting and pasting.</Para>
</Note>
<Sect2 Id="ABUG.layo.div.9" Role="Procedure">
<Title Id="ABUG.layo.mkr.8">To Cut or Copy Objects<IndexTerm><Primary>cutting objects</Primary></IndexTerm><IndexTerm><Primary>copying objects</Primary></IndexTerm><IndexTerm><Primary>objects</Primary><Secondary>cut or copy</Secondary></IndexTerm></Title>
<OrderedList>
<ListItem>
<Para>Select the objects you want to edit in the interface or the Browser.</Para>
</ListItem>
<ListItem>
<Para>Choose Cut or Copy from an Edit or pop-up menu.</Para>
<Para>Choose Cut or Copy from the Edit menu in the App Builder primary
window, from the Edit menu in the Module Browser, or from the pop-up
menu in either the primary window or the Browser (displayed by pressing
mouse button 3 in the interface or the Browser).</Para>
<Para>The chosen function (cut or copy) will be performed. If you choose Cut, the
selected objects will be deleted from the interface and placed in the App
Builder edit buffer. If you choose Copy, the selected objects will be placed in
the edit buffer.</Para>
</ListItem>
</OrderedList>
<Para>Choose Undo before performing any other function to cancel the cut or copy
operation.</Para>
</Sect2>
<Sect2 Id="ABUG.layo.div.10" Role="Procedure">
<Title Id="ABUG.layo.mkr.9">To Paste Objects<IndexTerm><Primary>objects</Primary><Secondary>paste</Secondary></IndexTerm><IndexTerm><Primary>pasting objects</Primary></IndexTerm></Title>
<Para>Once you have placed objects in the edit buffer by cutting or copying, you can
paste the objects in the interface with the Paste function.</Para>
<OrderedList>
<ListItem>
<Para>Select the paste location.</Para>
<Para><StructName Role="typedef">Window</StructName>: Windows can be pasted if any App Builder object is selected.
<Emphasis>Pane</Emphasis>: Panes can be pasted if an App Builder window or control pane is
selected.
<Emphasis>Control</Emphasis>: Controls can be pasted if an App Builder control pane or control
object is selected. If a control object is selected, the controls will be pasted in
the parent control pane.</Para>
</ListItem>
<ListItem>
<Para>Choose Paste from the Edit menu in the App Builder primary window, from
the Edit menu in the Module Browser, or from the pop-up menu in either
the primary window or the Browser (displayed by pressing mouse button 3
in the interface or the Browser).</Para>
<Para>The objects will be added to the current module and will be displayed
appropriately in the interface.</Para>
</ListItem>
</OrderedList>
<Note>
<Para>Pasted objects may obscure other objects; you may have to do some
moving and aligning after the paste. See
<!--Original XRef content: '&xd2;Aligning and Distributing Objects in
an Interface&xd3; on page&numsp;28'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.layo.mkr.10"> for instructions.</Para>
</Note>
<Para>Choose Undo before performing any other function to cancel the paste
operation.</Para>
</Sect2>
<Sect2 Id="ABUG.layo.div.11" Role="Procedure">
<Title>To Delete Objects<IndexTerm><Primary>objects</Primary><Secondary>deleting</Secondary></IndexTerm><IndexTerm><Primary>deleting objects</Primary></IndexTerm></Title>
<OrderedList>
<ListItem>
<Para>Select the objects you want to delete in the interface or the Browser.</Para>
</ListItem>
<ListItem>
<Para>Choose Delete from the Edit menu in the App Builder primary window,
from the Edit menu in the Module Browser, or from the pop-up menu in
either the primary window or the Browser (displayed by pressing mouse
button 3 in the interface or the Browser).</Para>
<Para>The objects will be deleted from the interface.</Para>
</ListItem>
</OrderedList>
<Para>Choose Undo before performing any other function to cancel the delete
operation.</Para>
</Sect2>
</Sect1>
<Sect1 Id="ABUG.layo.div.12">
<Title Id="ABUG.layo.mkr.10">Aligning and Distributing Objects in an Interface</Title>
<Para>This section describes &ldquo;static&rdquo; alignment and distribution of objects: the objects
are aligned or distributed one time only. See
<!--Original XRef content: 'Chapter&numsp;7, &xd2;Grouping and
Attaching Objects'--><XRef Role="ChapNumAndTitle" Linkend="ABUG.group.mkr.1">, for instructions to find out how to group and attach objects
for &ldquo;dynamic&rdquo; alignment.</Para>
<Sect2 Id="ABUG.layo.div.13" Role="Procedure">
<Title Id="ABUG.layo.mkr.11">To Align Control Objects in an Interface<IndexTerm><Primary>objects</Primary><Secondary>aligning</Secondary></IndexTerm><IndexTerm><Primary>aligning objects</Primary></IndexTerm></Title>
<OrderedList>
<ListItem>
<Para>Select two or more objects.</Para>
<Para>See
<!--Original XRef content: '&xd2;To Select Control Objects in the Interface or the Browser&xd3; on page&numsp;24'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.layo.mkr.6">
for instructions.</Para>
</ListItem>
<ListItem>
<Para>Choose Align from the Layout menu of the primary window or the interface
pop-up menu (displayed by pressing mouse button 3) and select one of the
alignment icons from the submenu.</Para>
<Para>The selected objects will be aligned according to the alignment choice.
Choices are described below. Vertical alignment icons are on the left and are
described first.<IndexTerm>
<Primary>alignment choices</Primary>
</IndexTerm>
</Para>
</ListItem>
</OrderedList>
<Sidebar>
<Para><Graphic Entityref="ABUG.layo.fig.3" Id="ABUG.layo.igrph.3"></Graphic></Para>
</Sidebar>
<ItemizedList Remap="Bullet1">
<ListItem>
<Para>Left-edge: Aligns selected objects vertically along their left edges.</Para>
</ListItem>
<ListItem>
<Para>Vertical-center: Aligns selected objects vertically on their horizontal centers.</Para>
</ListItem>
<ListItem>
<Para>Right-edge: Aligns selected objects vertically along their right edges.</Para>
</ListItem>
<ListItem>
<Para>Colon: Aligns selected objects vertically along their colons or labels.</Para>
</ListItem>
<ListItem>
<Para>Top-edge: Aligns selected objects horizontally along their top edges.</Para>
</ListItem>
<ListItem>
<Para>Horizontal-center: Aligns selected objects horizontally on their vertical
centers.</Para>
</ListItem>
<ListItem>
<Para>Bottom-edge: Aligns selected objects horizontally along their bottom edges.</Para>
</ListItem>
<ListItem>
<Para>Grid: Does no alignment at this time.</Para>
</ListItem>
</ItemizedList>
<Note>
<Para>If you select objects that are arranged horizontally and choose a vertical
alignment (or vice versa), the objects will end up on top of one another. You
can unstack the objects by choosing Distribute from the pop-up menu
immediately after the align function (the objects will still be selected). See
<!--Original XRef content: '&xd2;To
Distribute Control Objects Evenly&xd3; on page&numsp;29'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.layo.mkr.12"> for instructions.</Para>
</Note>
</Sect2>
<Sect2 Id="ABUG.layo.div.14" Role="Procedure">
<Title Id="ABUG.layo.mkr.12">To Distribute Control Objects Evenly<IndexTerm><Primary>objects</Primary><Secondary>distributing evenly</Secondary></IndexTerm><IndexTerm><Primary>distributing objects evenly</Primary></IndexTerm></Title>
<OrderedList>
<ListItem>
<Para>Select one or more objects.</Para>
<Para>See
<!--Original XRef content: '&xd2;To Select Control Objects in the Interface or the Browser&xd3; on page&numsp;24'--><XRef Role="SecTitleAndPageNum" Linkend="ABUG.layo.mkr.6">
for instructions. Select one object to center it between the edges of its parent.</Para>
</ListItem>
<ListItem>
<Para>Choose Distribute from the Layout menu of the primary window or the
interface pop-up menu (displayed by pressing mouse button 3) and select
one of the distribute icons from the submenu.</Para>
<Para>The selected objects will be distributed or centered according to your choice.</Para>
<Para>Objects will be spaced 10 pixels apart horizontally or vertically if you
choose one of the distribute choices. If you choose one of the centering
choices, the object or objects will be centered within the boundaries of the
parent control pane.</Para>
</ListItem>
</OrderedList>
<Sidebar>
<Para><Graphic Entityref="ABUG.layo.fig.4" Id="ABUG.layo.igrph.4"></Graphic></Para>
</Sidebar>
<ItemizedList Remap="Bullet1">
<ListItem>
<Para>Horizontal-space: Distributes selected objects horizontally 10 pixels apart.
The left-most object is the anchored object, which does not move.</Para>
</ListItem>
<ListItem>
<Para>Vertical-space: Distributes selected objects vertically 10 pixels apart. The
top-most object is the anchored object, which does not move.</Para>
</ListItem>
<ListItem>
<Para>Horizontal-center: Centers selected objects horizontally between the left and
right edges of the parent object, maintaining the distance between selected
objects.</Para>
</ListItem>
<ListItem>
<Para>Vertical-center: Centers selected objects vertically between the top and
bottom edges of the parent object, maintaining the distance between
selected objects.</Para>
</ListItem>
</ItemizedList>
</Sect2>
</Sect1>
</Chapter>
<!--fickle 1.14 mif-to-docbook 1.7 01/02/96 10:11:44-->