designer-manual-3.html

来自「QT 下载资料仅供参考」· HTML 代码 · 共 337 行 · 第 1/4 页

<blockquote><p align="center"><em>Properties for the Bold Action</em></p></blockquote>
</ol><p>Note that at this point the only way to invoke this action is to use the keyboard accelerator (<b>Ctrl+B</b>), because we have not yet associated the action with a menu item or with a toolbar button.</p>
<!-- index Adding!Actions and Action Groups --><p>We need to add two more actions, italic and underline. For each one right click the <em>Action Editor</em> and click New Action. Then repeat the steps listed above to change each action's properties:</p>
<ul><li><p>For the italic action change its <em>name</em> to 'italicAction' and ensure its <em>toggleAction</em> property is True. The <em>iconSet</em> is in the textedit directory and is called <tt>textitalic.xpm</tt>; add its pixmap in the same way that we added the bold pixmap. (For example, click the ellipsis (<b>...</b>), click <b>Add</b>, navigate to the textedit directory and click the <tt>textitalic.xpm</tt> pixmap and then click <b>Open</b>. Then click the textitalic icon in the pixmap collection and click <b>OK</b>). Change the action's <em>text</em> to 'italic', its <em>menuText</em> to '&amp;Italic' and its <em>accel</em> to 'CTRL+I'.</p>
<li><p>For the underline action change its <em>name</em> to 'underlineAction' and set its <em>toggleAction</em> property to True. The <em>iconSet</em> is in the same directory and is called <tt>textunder.xpm</tt>; add it in the same way as the previous pixmaps. Change its <em>text</em> to 'underline', its <em>menuText</em> to '&amp;Underline' and its <em>accel</em> to 'CTRL+U'.</p>
</ul><h5><a name="1-2-2"></a>Creating Action Groups</h5>
<!-- index Actions and Action Groups!Adding Action Groups --><!-- index Adding!Actions and Action Groups --><p>It is perfectly possible to have bold, italic and underline all active at once. But for alignment, i.e. left align, right align and centered, it only makes sense for one of them to be active at any one time. Because we need the alignment actions to operate in sync with one another we must create an Action Group which will automatically manage the behaviour of the actions it contains in the way we require.</p>
<!-- index Actions and Action Groups!Exclusive Actions --><!-- index Exclusive Actions, Actions and Action Groups --><p>Right click the <em>Action Editor</em> then left click New Action Group. Change the action group's <em>name</em> in the Property Editor to 'alignActionGroup', and change its <em>text</em> to 'align'. The '<em>exclusive</em>' property's default is True. This ensures that only one action within the action group can be 'on' at any one time which is the behaviour we require.</p>
<p>We create the actions within the action group in almost the same way as before. The only difference is that we must right click the alignActionGroup (rather than an Action) and then left click New Action to create a new action <em>within</em> the action group. We will create three new actions within the alignActionGroup:</p>
<ol type=1><li><!-- index Adding!Pixmaps --><!-- index Pixmaps!Adding --><p>Create a new action within the alignActionGroup action group. Change the <em>name</em> of this action to 'leftAlignAction' and ensure its <em>toggleAction</em> property is True. Use the <em>iconSet</em> in the textedit directory called <tt>textleft.xpm</tt>, adding the pixmap to the pixmap collection in the same way as we added the textbold pixmap earlier. Change its <em>text</em> to 'left', its menuText to '&amp;Left' and its <em>accel</em> to 'CTRL+L'.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-actiongroup.png" width="200" height="236">
</p>
<blockquote><p align="center"><em>Creating an Action group</em></p></blockquote>
<li><p>Create another new action within alignActionGroup. Change this action's <em>name</em> to 'rightAlignAction' and set its <em>toggleAction</em> property to True. Set its <em>iconSet</em> to <tt>textright.xpm</tt> using the pixmap collection as before. Change its <em>text</em> to 'right', its menuText to '&amp;Right' and its <em>accel</em> to 'CTRL+R'.</p>
<li><p>Create a third action within alignActionGroup. Change its <em>name</em> to 'centerAlignAction' and make its <em>toggleAction</em> property True. Change its <em>iconSet</em> to <tt>textcenter.xpm</tt>. Change its <em>text</em> to 'center' and its <em>menuText</em> to '&amp;Center'. We won't set an accelerator for this action.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-alignactiongroup.png" width="200" height="236">
</p>
<blockquote><p align="center"><em>Align Action Group</em></p></blockquote>
</ol><p>Note that the <em>toolTip</em> and <em>statusTip</em> properties were inherited from the action group; you may wish to change these to be specific to the actions concerned.</p>
<h5><a name="1-2-3"></a>Deleting Actions and Action Groups</h5>
<!-- index Actions and Action Groups!Deleting --><!-- index Deleting!Actions and Action Groups --><p>We have some actions that we don't intend providing for this first release, for example, the editFindAction and the filePrintAction. Click editFindAction and then click the <b>Delete Action</b> toolbar button. Delete the filePrintAction in the same way. Action Groups (including any actions they contain) can also be deleted with the <b>Delete Action</b> toolbar button.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-deleteaction.png" width="200" height="236">
</p>
<blockquote><p align="center"><em>Deleting editFindAction</em></p></blockquote>
<h4><a name="1-3"></a>Creating and Populating a Toolbar</h4>
<!-- index Creating Toolbars --><!-- index Adding!Toolbars --><!-- index Toolbars, Creating --><p>All the actions we require are now in place and we are ready to create a new toolbar and add some of our actions to it. Right click on the right hand side of the toolbar area, or on the form, then left click Add Toolbar. The new toolbar is empty and is visible only by its <em>toolbar handle</em>. (Toolbar handle's are usually represented as a gray area containing either two thick vertical lines or with many small pits).</p>
<p align="center"><img align="middle" src="qd-chapmainwin-toolbarhandle.png" width="90" height="30">
</p>
<blockquote><p align="center"><em>Toolbar Handle</em></p></blockquote>
<!-- index Actions and Action Groups!Adding to a Toolbar --><!-- index Separator!Toolbar button --><!-- index Adding!Actions and Action Groups to a Toolbar --><!-- index Adding!Toolbar Separators --><p>We'll add the new actions we've just created. Drag the alignActionGroup, (not any action it contains), to the new toolbar and drop it on the toolbar handle to the right of the vertical lines. The three alignment actions will be added to the toolbar.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-toolbarhandle2.png" width="290" height="37">
</p>
<blockquote><p align="center"><em>Dragging the Action Group to the Toolbar</em></p></blockquote>
<p align="center"><img align="middle" src="qd-chapmainwin-toolbaractiongroup1.png" width="353" height="30">
</p>
<blockquote><p align="center"><em>Populating the Toolbar with an Action Group</em></p></blockquote>
<p>The bold, italic and underline actions do not belong to an action group, and must be dragged to the toolbar individually. Drag the bold action to the toolbar: when the mouse is over the toolbar a thick red line will appear indicating the position at which the toolbar button will be inserted; drop the bold action on the toolbar. Drag the italic and underline actions to the toolbar and drop them next to the bold button. Separate the alignment toolbar buttons from the font related buttons by right clicking the centered toolbar button and clicking Insert Separator.</p>
<!-- index Separator!Toolbar button --><!-- index Deleting!Toolbar Separators --><!-- index Deleting!Toolbars --><p>Toolbar buttons and separators (usually represented as indented vertical gray lines), can be dragged and dropped into new positions in the toolbar at any time. Separators can be inserted by right clicking a toolbar button and clicking Insert Separator. Toolbar buttons and separators can be deleted by right clicking them and clicking Delete Item. Toolbars can be deleted by right clicking their toolbar handle and clicking Delete Toolbar.</p>
<!-- index Previewing!Toolbars --><p>If you preview the application you'll find that both the original and new toolbar can be dragged to different docking points or dragged out of the application as independent tool windows.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-previewing.png" width="448" height="29">
</p>
<blockquote><p align="center"><em>Toolbar with all the Actions Added</em></p></blockquote>
<h5><a name="1-3-1"></a>Adding Widgets to the Toolbar</h5>
<!-- index Toolbars!Adding Widgets --><!-- index Widgets!Adding to Toolbars --><!-- index Adding!Widgets --><p>We want our users to be able to choose the font and font size from the toolbar. To achieve this we'll create a font combobox and a font size spinbox and place them in the formatting toolbar we created in the previous section.</p>
<!-- index Widgets!ComboBox --><!-- index Widgets!SpinBox --><!-- index Separator!Toolbar button --><p>Click <em>Qt Designer</em>'s <b>ComboBox</b> toolbar button and click the last (right-most) toolbar button in the application's new toolbar. Change the combobox's name to 'fontComboBox'. Click the <b>SpinBox</b> toolbar button and click the combobox we've just added to insert the spinbox next to it. Change the spinbox's <em>minValue</em> property to 6, its <em>value</em> property to 10 and its <em>suffix</em> to a space followed by 'pt'. Insert a separator to the left of the combobox.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-addwidg.png" width="622" height="35">
</p>
<blockquote><p align="center"><em>Adding Widgets to the Toolbar</em></p></blockquote>
<p>Although you can put any widget into a toolbar we recommend that widgets which can be associated with an action should <em>not</em> be added to the toolbar directly. For these widgets, i.e. menu items, toolbar buttons and lists of items, you should create an action (drop down action for a list of items), associate the action with the widget, and add the action to the toolbar. Widgets that can sensibly be inserted directly into a toolbar are <em>ComboBox</em>es, <em>SpinBox</em>es and <em>Line Edit</em>s.</p>
<h4><a name="1-4"></a>Creating Menus</h4>
<!-- index Creating Menus --><!-- index Menus!Adding --><!-- index Adding!Menus --><p>We'll now add the actions we added to the new toolbar to a new menu and modify the existing menus slightly.</p>
<!-- index Menus!Adding Menu Items --><!-- index Adding!Menu Items --><p>Right click our application's menu bar and click Add Menu Item. A new menu item called 'Menu' will appear. Right click this menu item and click Rename Item. Change its name to 'F&amp;ormat'.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-namemenu.png" width="403" height="147">
</p>
<blockquote><p align="center"><em>Format Menu</em></p></blockquote>
<p>Click the menu item and a red bar will appear beneath it -- this is the empty menu. Drag the alignActionGroup from the Action Editor to the Format menu item and drop the action group on the menu. (The menu's red bar will appear and a thick red line will be drawn where the new menu items will appear -- drop when the red line is in the position you require.) Now if you click the Format menu item the three alignment actions will be displayed. Just like the toolbar we must add the bold, italic and underline actions individually. Drag the bold action to the Format menu and move the mouse so that the red line is positioned at the bottom of the menu, then drop the action. Repeat this process for the italic and underline actions.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-dragtomenu.png" width="182" height="62">
</p>
<blockquote><p align="center"><em>Draggin the Action Group to the Menu Bar</em></p></blockquote>
<p align="center"><img align="middle" src="qd-chapmainwin-dropinmenu1.png" width="450" height="169">
</p>
<blockquote><p align="center"><em>Dragging and Dropping Align Action Group to the Format Menu</em></p></blockquote>
<!-- index Creating Menus --><!-- index Menus!Adding --><!-- index Separator!Menu item --><!-- index Menus!Adding Menu Separators --><!-- index Adding!Menu Separators --><!-- index Menus!Deleting --><!-- index Deleting!Menus --><!-- index Deleting!Menu Items --><!-- index Deleting!Menu Separators --><p>We'll now deal with the separators in the menus. Firstly we'll add a separator in the Format menu and then we'll remove some redundant separators from the other menus. Click the Format menu and right click the bold item towards the top of the highlighted area; click Insert Separator. Note that you could also right click the center align item towards the bottom of the highlighted area to insert the separator between the align actions and the font actions. ###Click the File menu and right click one of the separators above the Exit action; click Delete Item. Click the Edit menu, right click the separator at the very bottom of the menu and click Delete Item. Delete Item can be used to delete separators, menu items and menus.###</p>
<!-- index Menus!Moving --><p>Click the Format menu and drag it to the left of the Help menu, then drop the Format menu. (A thick red bar will appear to indicate the insertion postion.) Both menus and menu items may be dragged and dropped to different positions in the same way.</p>
<!-- index Previewing!Menus --><p>Preview the application and try clicking the alignment and font style toolbar buttons and menu items. Qt will automatically keep the state of the menu items and the toolbar buttons synchronized.</p>
<h4><a name="1-5"></a>Adding and Connecting the Main Widget</h4>
<!-- index Main Widget --><!-- index Adding!Main Widgets --><!-- index Widgets!Adding a Main Widget --><!-- index Main Window!Adding a Main Widget --><!-- index Signals and Slots --><p>Our application is a rich text editor, but so far there has been nowhere for the user to edit text. We'll add a <b>QTextEdit</b> widget and use Qt's signals and slots mechanism to minimize the code we have to write to make it functional.</p>
<p>Click <em>Qt Designer</em>'s Richtext Editor (<b>Text Edit</b>) toolbar button and click in the center of the form. Click the form, then click the <b>Lay Out Horizontally</b> toolbar button. We're now ready to make the connections we need; but first we will do some renaming to make things easier to understand. Click on the <em>Text Edit</em> widget and change its <em>name</em> property to 'textEdit'. Change the <em>textFormat</em> property to 'RichText'. Change the <em>name</em> of the form to 'EditorForm' and its caption to 'Rich Edit'.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-addtextedit.png" width="617" height="362">
</p>
<blockquote><p align="center"><em>Adding Rich Text Edit Widget</em></p></blockquote>
<!-- index Clipboard --><!-- index Cut and Paste (in Applications) --><p>The <b>QTextEdit</b> widget contains built-in functionality for cut and paste and various other editing functions. By connecting the appropriate signals to our textEdit we can take advantage of this functionality without the need to write any code.</p>
<h5><a name="1-5-1"></a>Connecting Actions to Change Font Attributes</h5>
<!-- index Signals and Slots!Connecting Actions --><p>Click the underlineAction in the <em>Action Editor</em>, then click the Connect button in the Action Editor toolbar. The <em>Edit Connections</em> dialog will appear. Click the<!-- index toggled() --> <tt>toggled()</tt> signal. Since we wish to connect this signal to the text edit widget, drop down the Slots combobox and click textEdit. The text edit's slots that can respond to a toggled signal will appear in the right hand list box. Click the<!-- index  --> setUnderline() <tt>setUnderline()</tt> slot, then click <b>OK</b>.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-connaction.png" width="617" height="363">
</p>
<blockquote><p align="center"><em>Connecting the Underline Action</em></p></blockquote>
<p>Connect up the bold and italic actions in the same way. (For example, click the bold action and click Connect. Click the<!-- index toggled() --> <tt>toggled()</tt> signal, change the Slots combobox item to textEdit and click the<!-- index setBold() \SignalOrSlot setBold() slot. --> Click <b>OK</b>.) If you preview the form you'll find that you can enter text and that choosing bold, italic or underline will work.</p>
<h5><a name="1-5-2"></a>Connecting Actions to Implement Cut, Copy, Paste, Undo and Redo</h5>
<!-- index Clipboard --><!-- index Cut and Paste (in Applications) --><!-- index Signals and Slots!Connecting for Cut --><!-- index Signals and Slots!Connecting for Copy --><!-- index Signals and Slots!Connecting for Paste --><!-- index Signals and Slots!Connecting for Undo --><!-- index Signals and Slots!Connecting for Redo --><!-- index Previewing!Signals and Slots --><!-- index Signals and Slots!Previewing --><p>The cut, copy, paste, undo and redo actions are connected in the same way as the font attributes. For example, click the editPasteAction action and click Connect. Click the<!-- index activated() \SignalOrSlot --> activated() signal, change the Slots combobox item to textEdit and click the<!-- index paste() \SignalOrSlot paste() slot. Click \OK to save --> the connection. Connect the cut, copy, undo and redo actions in the same way. (For example, click the editCopyAction action, click Connect, click the<!-- index activated() \SignalOrSlot activated() --> signal, change the Slots combobox item to textEdit, click the<!-- index  --> copy() <tt>copy()</tt> slot then click <b>OK</b>.) Then the cut, copy, paste, undo and redo actions will all work in preview mode.</p>
<h5><a name="1-5-3"></a>Connecting for Text Alignment</h5>
<!-- index Signals and Slots!Connecting for Text Alignment --><!-- index Text Alignment --><p>We need to create a slot to receive signals from alignment actions and set the textEdit widget's alignment state accordingly. One approach would be to connect each individual alignment action to our slot, but because the align actions are in a group we will connect the alignActionGroup to our slot and determine which alignment the user chose from the <b>QAction</b> pointer that is passed.</p>
<p>Create a new slot with the signature <tt>changeAlignment(QAction *align)</tt>. (Click <b>Edit|Slots</b>, click <b>New Slot</b>, enter the slot's signature and click <b>OK</b>.) Click alignActionGroup in the <em>Action Editor</em>, then click <b>Connect</b>. Connect the<!-- index selected(QAction*) \SignalOrSlot --> selected(QAction*) signal to our change alignment slot, then click <b>OK</b>.</p>
<p align="center"><img align="middle" src="qd-chapmainwin-connalign1.png" width="661" height="362">
</p>