forked from qt-creator/qt-creator
Doc: use \uicontrol command instead of \gui macro
Change-Id: Idc898b6ac70b6d3186d353086b5f3e45830d1f83 Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
This commit is contained in:
committed by
Leena Miettinen
parent
c9696aa6f4
commit
e1fbeedcd4
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user