diff options
Diffstat (limited to 'doc/src/development/designer-manual.qdoc')
| -rw-r--r-- | doc/src/development/designer-manual.qdoc | 258 |
1 files changed, 166 insertions, 92 deletions
diff --git a/doc/src/development/designer-manual.qdoc b/doc/src/development/designer-manual.qdoc index ff05228..bdadcf7 100644 --- a/doc/src/development/designer-manual.qdoc +++ b/doc/src/development/designer-manual.qdoc @@ -1520,26 +1520,34 @@ \target CreatingAMenu - \table - \row - \i \inlineimage designer-creating-menu1.png - \i \inlineimage designer-creating-menu2.png - \i \bold{Creating a Menu} - - Double-click the placeholder item to begin editing. The menu text, - displayed using a line edit, can be modified. - - \row - \i \inlineimage designer-creating-menu3.png - \i \inlineimage designer-creating-menu4.png - \i Insert the required text for the new menu. Inserting an - ampersand character (&) causes the letter following it to be - used as a mnemonic for the menu. - - Press \key Return or \key Enter to accept the new text, or press - \key Escape to reject it. You can undo the editing operation later if - required. - \endtable + \raw HTML + <div style="float: left; margin-right: 2em"> + \endraw + \inlineimage designer-creating-menu1.png + \inlineimage designer-creating-menu2.png + \br + \inlineimage designer-creating-menu3.png + \inlineimage designer-creating-menu4.png + \raw HTML + </div> + \endraw + + \section2 Creating a Menu + + Double-click the placeholder item to begin editing. The menu text, + displayed using a line edit, can be modified. + + Insert the required text for the new menu. Inserting an + ampersand character (&) causes the letter following it to be + used as a mnemonic for the menu. + + Press \key Return or \key Enter to accept the new text, or press + \key Escape to reject it. You can undo the editing operation later if + required. + + \raw HTML + <div style="clear: both" /> + \endraw Menus can also be rearranged in the menu bar simply by dragging and dropping them in the preferred location. A vertical red line indicates the @@ -1550,31 +1558,40 @@ navigating the menu structure in the usual way. \target CreatingAMenuEntry + \raw HTML + <div style="float: right; margin-left: 2em"> + \endraw + \inlineimage designer-creating-menu-entry1.png + \inlineimage designer-creating-menu-entry2.png + \br + \inlineimage designer-creating-menu-entry3.png + \inlineimage designer-creating-menu-entry4.png + \raw HTML + </div> + \endraw \table - \row - \i \inlineimage designer-creating-menu-entry1.png - \i \inlineimage designer-creating-menu-entry2.png - \i \bold{Creating a Menu Entry} - Double-click the \gui{new action} placeholder to begin editing, or - double-click \gui{new separator} to insert a new separator line after - the last entry in the menu. + \section2 Creating a Menu Entry - The menu entry's text is displayed using a line edit, and can be - modified. + Double-click the \gui{new action} placeholder to begin editing, or + double-click \gui{new separator} to insert a new separator line after + the last entry in the menu. - \row - \i \inlineimage designer-creating-menu-entry3.png - \i \inlineimage designer-creating-menu-entry4.png - \i Insert the required text for the new entry, optionally using - the ampersand character (&) to mark the letter to use as a - mnemonic for the entry. + The menu entry's text is displayed using a line edit, and can be + modified. - Press \key Return or \key Enter to accept the new text, or press - \key Escape to reject it. The action created for this menu entry will - be accessible via the \l{#TheActionEditor}{Action Editor}, and any - associated keyboard shortcut can be set there. - \endtable + Insert the required text for the new entry, optionally using + the ampersand character (&) to mark the letter to use as a + mnemonic for the entry. + + Press \key Return or \key Enter to accept the new text, or press + \key Escape to reject it. The action created for this menu entry will + be accessible via the \l{#TheActionEditor}{Action Editor}, and any + associated keyboard shortcut can be set there. + + \raw HTML + <div style="clear: both" /> + \endraw Just like with menus, entries can be moved around simply by dragging and dropping them in the preferred location. When an entry is dragged over a @@ -1582,53 +1599,92 @@ menu entries are based on actions, they can also be dropped onto toolbars, where they will be displayed as toolbar buttons. - \section1 Toolbars + \raw HTML + <div style="float: left; margin-right: 2em"> + \endraw + \inlineimage designer-creating-toolbar.png + \raw HTML + </div> + \endraw - ### SCREENSHOT + \section2 Creating and Removing a Toolbar - Toolbars ared added to a main window in a similar way to the menu bar: + Toolbars are added to a main window in a similar way to the menu bar: Select the \gui{Add Tool Bar} option from the form's context menu. Alternatively, if there is an existing toolbar in the main window, you can click the arrow on its right end to create a new toolbar. - Toolbar buttons are created using the action system to populate each - toolbar, rather than by using specific button widgets from the widget box. - Since actions can be represented by menu entries and toolbar buttons, they - can be moved between menus and toolbars. To share an action between a menu - and a toolbar, drag its icon from the \l{#TheActionEditor}{Action Editor} - to the toolbar rather than from the menu where its entry is located. + Toolbars are removed from the form via an entry in the toolbar's context + menu. + + \raw HTML + <div style="clear: both" /> + \endraw - New actions for menus and toolbars can be created in the - \l{#TheActionEditor}{Action Editor}. + \section2 Adding and Removing Toolbar Buttons + Toolbar buttons are created as actions in the + \l{#TheActionEditor}{Action Editor} and dragged onto the toolbar. + Since actions can be represented by menu entries and toolbar buttons, + they can be moved between menus and toolbars. + + \target AddingAnAction + \raw HTML + <div style="float: right; margin-left: 2em"> + \endraw + \inlineimage designer-adding-toolbar-action.png + \inlineimage designer-removing-toolbar-action.png + \raw HTML + </div> + \endraw + + To share an action between a menu and a toolbar, drag its icon from the + action editor to the toolbar rather than from the menu where its entry is + located. See \l{#Adding an Action}{Adding an Action} for more information + about this process. + + Toolbar buttons are removed via the toolbar's context menu. + + \raw HTML + <div style="clear: both" /> + \endraw \section1 Actions With the menu bar and the toolbars in place, it's time to populate them - with action: \QD provides an action editor to simplify the creation and - management of actions. - + with actions. New actions for both menus and toolbars are created in the + action editor window, simplifying the creation and management of actions. \target TheActionEditor - \table - \row - \i \inlineimage designer-action-editor.png - \i \bold{The Action Editor} + \raw HTML + <div style="float: left; margin-right: 2em"> + \endraw + \inlineimage designer-action-editor.png + \raw HTML + </div> + \endraw - Enable the action editor by opening the \gui Tools menu, and switching - on the \gui{Action Editor} option. + \section2 The Action Editor - The action editor allows you to create \gui New actions and \gui Delete - actions. It also provides a search function, \gui Filter, using the - action's text. + Enable the action editor by opening the \gui Tools menu, and switching + on the \gui{Action Editor} option. - \QD's action editor can be viewed in the classic \gui{Icon View} and - \gui{Detailed View}. The screenshot below shows the action editor in - \gui{Detailed View}. You can also copy and paste actions between menus, - toolbars and forms. - \endtable + The action editor allows you to create \gui New actions and \gui Delete + actions. It also provides a search function, \gui Filter, using the + action's text. + + \QD's action editor can be viewed in the classic \gui{Icon View} and + \gui{Detailed View}. The screenshot below shows the action editor in + \gui{Detailed View}. You can also copy and paste actions between menus, + toolbars and forms. + + \raw HTML + <div style="clear: both" /> + \endraw + + \section2 Creating an Action To create an action, use the action editor's \gui New button, which will then pop up an input dialog. Provide the new action with a \gui Text -- @@ -1641,23 +1697,33 @@ Once the action is created, it can be used wherever actions are applicable. + \raw HTML + <div style="clear: left" /> + \endraw \target AddingAnAction - \table - \row - \i \inlineimage designer-adding-menu-action.png - \i \inlineimage designer-adding-toolbar-action.png - \i \bold{Adding an Action} + \raw HTML + <div style="float: right; margin-left: 2em"> + \endraw + \inlineimage designer-adding-menu-action.png + \inlineimage designer-adding-toolbar-action.png + \raw HTML + </div> + \endraw - To add an action to a menu or a toolbar, simply press the left mouse - button over the action in the action editor, and drag it to the - preferred location. + \section2 Adding an Action - \QD provides highlighted guide lines that tell you where the action - will be added. Release the mouse button to add the action when you have - found the right spot. - \endtable + To add an action to a menu or a toolbar, simply press the left mouse + button over the action in the action editor, and drag it to the + preferred location. + + \QD provides highlighted guide lines that tell you where the action + will be added. Release the mouse button to add the action when you have + found the right spot. + \raw HTML + <div style="clear: right" /> + \endraw \section1 Dock Widgets @@ -1668,21 +1734,29 @@ and choose an appropriate value for its \gui{dockWidgetArea} property. \target AddingADockWidget - \table - \row - \i \inlineimage designer-adding-dockwidget.png - \i \bold{Adding a Dock Widget} - To add a dock widget, simply drag one from the \gui Containers section - of the widget box, and drop it onto the main form area. Just like other - widgets, its properties can be modified with the \gui{Property Editor}. + \raw HTML + <div style="float: left; margin-right: 2em"> + \endraw + \inlineimage designer-adding-dockwidget.png + \raw HTML + </div> + \endraw - Dock widgets can be optionally floated as indpendent tool windows. - Hence, it is useful to give them window titles by setting their - \gui{windowTitle} property. This also helps to identify them on the - form. + \section2 Adding a Dock Widget - \endtable + To add a dock widget, simply drag one from the \gui Containers section + of the widget box, and drop it onto the main form area. Just like other + widgets, its properties can be modified with the \gui{Property Editor}. + + Dock widgets can be optionally floated as indpendent tool windows. + Hence, it is useful to give them window titles by setting their + \gui{windowTitle} property. This also helps to identify them on the + form. + + \raw HTML + <div style="clear: both" /> + \endraw */ |