Doc: use \uicontrol command instead of \gui macro

Change-Id: Idc898b6ac70b6d3186d353086b5f3e45830d1f83
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
This commit is contained in:
Leena Miettinen
2014-12-11 15:43:19 +01:00
committed by Leena Miettinen
parent c9696aa6f4
commit e1fbeedcd4
97 changed files with 1955 additions and 1876 deletions

View File

@@ -47,31 +47,31 @@
\list 1
\li Select \gui{File > New File or Project > Application >
\li Select \uicontrol{File > New File or Project > Application >
Qt Quick Application > Choose}.
\li In the \gui{Name} field, type \b {Transitions}.
\li In the \uicontrol{Name} field, type \b {Transitions}.
\li In the \gui {Create in} field, enter the path for the project files.
For example, \c {C:\Qt\examples}, and then click \gui{Next} (on
Windows and Linux) or \gui Continue (on OS X).
\li In the \uicontrol {Create in} field, enter the path for the project files.
For example, \c {C:\Qt\examples}, and then click \uicontrol{Next} (on
Windows and Linux) or \uicontrol Continue (on OS X).
\li In the \gui {Qt Quick component set} field, select
\gui {Qt Quick 2.1}.
\li In the \uicontrol {Qt Quick component set} field, select
\uicontrol {Qt Quick 2.1}.
\li Select \l{glossary-buildandrun-kit}{kits} for running and building your project,
and then click \gui{Next}.
and then click \uicontrol{Next}.
\note Kits are listed if they have been specified in \gui Tools >
\gui Options > \gui {Build & Run} > \gui Kits (on Windows and Linux)
or in \gui {Qt Creator} > \gui Preferences \gui {Build & Run} >
\gui Kits (on OS X).
\note Kits are listed if they have been specified in \uicontrol Tools >
\uicontrol Options > \uicontrol {Build & Run} > \uicontrol Kits (on Windows and Linux)
or in \uicontrol {Qt Creator} > \uicontrol Preferences \uicontrol {Build & Run} >
\uicontrol Kits (on OS X).
\li Select \gui Next in the following dialogs to use the default
\li Select \uicontrol Next in the following dialogs to use the default
settings.
\li Review the project settings, and click \gui{Finish} (on Windows and
Linux) or \gui Done (on OS X) to create the project.
\li Review the project settings, and click \uicontrol{Finish} (on Windows and
Linux) or \uicontrol Done (on OS X) to create the project.
\li Press \key {Ctrl+R} (or \key {Cmd+R}) to run the application.
@@ -92,28 +92,28 @@
directory in the Qt installation directory. For example:
\c {C:\Qt\Qt5.3.0\5.3.0\msvc2010\examples\declarative\animation\states}. The
image appears
in \gui Resources. You can also use any other image or a QML
in \uicontrol Resources. You can also use any other image or a QML
type, instead.
\list 1
\li In the \gui Projects view, double-click the main.qml file
\li In the \uicontrol Projects view, double-click the main.qml file
to open it in the code editor.
\li Click \gui Design to open the file in \QMLD.
\li Click \uicontrol Design to open the file in \QMLD.
\image qmldesigner-tutorial-desing-mode.png "Transitions project in Design Mode"
\li In the \gui Navigator, select \gui Text and press \key Delete to
\li In the \uicontrol Navigator, select \uicontrol Text and press \key Delete to
delete it.
\li Select \gui Window to edit its properties.
\li Select \uicontrol Window to edit its properties.
\image qmldesigner-tutorial-page.png "Page properties"
\list a
\li In the \gui Id field, enter \e page, to be able to reference the
\li In the \uicontrol Id field, enter \e page, to be able to reference the
window from other places.
\li In the code editor, set the window background color to #343434:
@@ -126,77 +126,77 @@
\endlist
\li In \gui Library > \gui Resources, select states.png and
\li In \uicontrol Library > \uicontrol Resources, select states.png and
drag and drop it to the canvas.
\image qmldesigner-tutorial-user-icon.png "Image properties"
\list a
\li In the \gui Id field, enter \e icon.
\li In the \uicontrol Id field, enter \e icon.
\li In the \gui Position field, set \gui X to 10 and \gui Y to 20.
\li In the \uicontrol Position field, set \uicontrol X to 10 and \uicontrol Y to 20.
\endlist
\li Double-click the resource file, qml.qrc, in the \gui Projects view
\li Double-click the resource file, qml.qrc, in the \uicontrol Projects view
to add states.png to the resource file for deployment.
\li Click \gui Add and select states.png.
\li Click \uicontrol Add and select states.png.
\li In the \gui Design mode, \gui Library view, \gui {QML Types} tab,
select \gui Rectangle,
\li In the \uicontrol Design mode, \uicontrol Library view, \uicontrol {QML Types} tab,
select \uicontrol Rectangle,
drag and drop it to the canvas, and edit its properties.
\image qmldesigner-tutorial-topleftrect.png "Rectangle properties"
\list a
\li In the \gui Id field, enter \e topLeftRect.
\li In the \uicontrol Id field, enter \e topLeftRect.
\li In the \gui Size field, set \gui W and \gui H to 64, for the
\li In the \uicontrol Size field, set \uicontrol W and \uicontrol H to 64, for the
rectangle size to match the image size.
\li In the \gui Color field, click the
\li In the \uicontrol Color field, click the
\inlineimage qmldesigner-transparent-button.png
(\gui Transparent) button to make the rectangle transparent.
(\uicontrol Transparent) button to make the rectangle transparent.
\li In the \gui Border field, set the border color to #808080.
\li In the \uicontrol Border field, set the border color to #808080.
\li In the \gui Rectangle group, \gui Border field, set the border
\li In the \uicontrol Rectangle group, \uicontrol Border field, set the border
width to 1.
\note If the \gui Border field does not appear after you set the
\note If the \uicontrol Border field does not appear after you set the
border color, try setting the border color to solid by clicking
the
\inlineimage qmldesigner-solid-color-button.png
(\gui {Solid Color}) button.
(\uicontrol {Solid Color}) button.
\li In the \gui Radius field, select 6 to create rounded corners for
\li In the \uicontrol Radius field, select 6 to create rounded corners for
the rectangle.
\li Click \gui {Layout}, and then click the top and left anchor
\li Click \uicontrol {Layout}, and then click the top and left anchor
buttons to anchor the rectangle to the top left corner of the
page.
\image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
\li In the \gui Margin field, select 20 for the top anchor and 10
\li In the \uicontrol Margin field, select 20 for the top anchor and 10
for the left anchor.
\endlist
\li In the \gui Navigator, drag and drop the \gui {Mouse Area}
\li In the \uicontrol Navigator, drag and drop the \uicontrol {Mouse Area}
from \e page to \e topLeftRect to make it apply only to the
rectangle and not to the whole page.
\li Edit the \gui {Mouse Area} properties:
\li Edit the \uicontrol {Mouse Area} properties:
\list a
\li Click \gui {Layout}, and then click the
\li Click \uicontrol {Layout}, and then click the
\inlineimage qmldesigner-anchor-fill-screen.png
(\gui {Fill to Parent}) button to anchor the mouse area to the
(\uicontrol {Fill to Parent}) button to anchor the mouse area to the
rectangle.
\li In the code editor, edit the pointer to the clicked expression
@@ -222,7 +222,7 @@
\printuntil }
\printuntil }
\li In the \gui Navigator, copy topLeftRect (by pressing
\li In the \uicontrol Navigator, copy topLeftRect (by pressing
\key {Ctrl+C}) and paste it to the canvas twice (by pressing
\key {Ctrl+V}). \QC renames the new instances of the type
topLeftRect1 and topLeftRect2.
@@ -231,13 +231,13 @@
\list a
\li In the \gui Id field, enter \e middleRightRect.
\li In the \uicontrol Id field, enter \e middleRightRect.
\li In \gui {Layout}, select the vertical center anchor button and
\li In \uicontrol {Layout}, select the vertical center anchor button and
then the right anchor button to
anchor the rectangle to the middle right margin of the screen.
\li In the \gui Margin field, select 10 for the right anchor and 0
\li In the \uicontrol Margin field, select 10 for the right anchor and 0
for the vertical center anchor.
\li In the code editor, add a pointer to a clicked expression to the
@@ -254,12 +254,12 @@
\list a
\li In the \gui Id field, enter \e bottomLeftRect.
\li In the \uicontrol Id field, enter \e bottomLeftRect.
\li In \gui {Layout}, select the bottom and left anchor buttons to
\li In \uicontrol {Layout}, select the bottom and left anchor buttons to
anchor the rectangle to the bottom left margin of the screen.
\li In the \gui Margin field, select 20 for the bottom anchor and 10
\li In the \uicontrol Margin field, select 20 for the bottom anchor and 10
for the left anchor.
\li In the code editor, add a pointer to a clicked expression to the
@@ -342,15 +342,15 @@
\list a
\li Click \gui NumberAnimation in the code editor to display the
\li Click \uicontrol NumberAnimation in the code editor to display the
\inlineimage qml-toolbar-indicator.png
icon, and then click the icon to open the toolbar:
\image qmldesigner-tutorial-quick-toolbar.png "Qt Quick toolbar for animation"
\li In the \gui Easing field, select \gui Bounce.
\li In the \uicontrol Easing field, select \uicontrol Bounce.
\li In the \gui Subtype field, select \gui Out.
\li In the \uicontrol Subtype field, select \uicontrol Out.
\endlist