feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Describe Qt Quick Designer Form Editor and Text Editor tabs

Browse Source 
Users can now use the code editor within the Qt Quick Designer.

Change-Id: I2ad30bafc4b61ce9c1115c9a8b1c019d2b21151e
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2017-02-03 15:43:05 +01:00
parent 541dd8643d
commit 8f53c02296
9 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
doc/src/howto/creator-keyboard-shortcuts.qdoc
View File

@@ -549,7 +549,8 @@
\li Open the QML file that defines the selected component \li Open the QML file that defines the selected component
\li F2 \li F2
\row \row
\li Move between code editor and visual editor \li Move between \uicontrol {Text Editor} and
\uicontrol {Form Editor}
\li F4 \li F4
\row \row
\li Toggle left sidebar \li Toggle left sidebar

5
doc/src/overview/creator-design-overview.qdoc
View File

@@ -47,8 +47,9 @@
\li \l{Developing Qt Quick Applications} \li \l{Developing Qt Quick Applications}
You can use wizards to create Qt Quick projects that contain You can use wizards to create Qt Quick projects that contain
boiler-plate code. You can use the code editor (Edit mode) or the boiler-plate code. You can use \QMLD to develop Qt Quick
visual editor (Design mode) to develop Qt Quick applications. applications in the \uicontrol Design mode.
\li \l{Developing Widget Based Applications} \li \l{Developing Widget Based Applications}
Widgets and forms created with \QD are integrated seamlessly with Widgets and forms created with \QD are integrated seamlessly with

13
doc/src/qtquick/creator-mobile-app-tutorial.qdoc
View File

@@ -121,7 +121,8 @@
\list 1 \list 1
\li Select \uicontrol Edit to open Page1Form.ui.qml in the code editor. \li Select \uicontrol {Text Editor} to open Page1Form.ui.qml in the
text editor tab.
\li Right-click \uicontrol Image and select \uicontrol Refactoring > \li Right-click \uicontrol Image and select \uicontrol Refactoring >
\uicontrol {Move Component into Separate File}. \uicontrol {Move Component into Separate File}.
@@ -142,7 +143,7 @@
Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file. Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
The UI is now ready and you can switch to editing the Page1.qml and The UI is now ready and you can switch to editing the Page1.qml and
Bubble.qml files in the \uicontrol Edit mode, as described in the Bubble.qml files in the \uicontrol {Text Editor}, as described in the
following section. following section.
\section1 Moving the Bubble \section1 Moving the Bubble
@@ -153,15 +154,15 @@
UI Form, so you also need to remove the corresponding code from Page1.qml UI Form, so you also need to remove the corresponding code from Page1.qml
(or the application cannot be built). (or the application cannot be built).
In the code editor, edit Bubble.qml to add properties that we will use to In the \uicontrol {Text Editor}, edit Bubble.qml to add properties that we
position the image: use to will position the image:
\quotefromfile accelbubble/Bubble.qml \quotefromfile accelbubble/Bubble.qml
\skipto Image \skipto Image
\printuntil } \printuntil }
In the code editor, edit main.qml to specify the application title, as In the \uicontrol {Text Editor}, edit main.qml to specify the application
illustrated by the following code snippet: title, as illustrated by the following code snippet:
\quotefromfile accelbubble/main.qml \quotefromfile accelbubble/main.qml
\skipto ApplicationWindow \skipto ApplicationWindow

7
doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc
View File

@@ -34,6 +34,7 @@
\endlist \endlist
\QC generates a UI file, \e MainForm.ui.qml, that you can modify in the \QC generates a UI file, \e Page1Form.ui.qml, that you can modify in the
\uicontrol Design mode and a QML file, \e main.qml, that you can modify in \QMLD \uicontrol {Form Editor} and two QML files, \e Page1.qml and
the \uicontrol Edit mode to add the application logic. \e main.qml, that you can modify in the \uicontrol {Text Editor} to add the
application logic.

5
doc/src/qtquick/qtquick-app-development.qdoc
View File

@@ -52,8 +52,9 @@
\li \l {Using Qt Quick Designer} \li \l {Using Qt Quick Designer}
You can use the code editor (Edit mode) or the visual editor (Design You can use the \uicontrol {Form Editor} or the
mode) to develop Qt Quick applications. \uicontrol {Text Editor} of \QMLD in the \uicontrol Design mode to
develop Qt Quick applications.
\li \l {Editing PathView Properties} \li \l {Editing PathView Properties}

9
doc/src/qtquick/qtquick-buttons.qdoc
View File

@@ -49,7 +49,8 @@
\note Types are listed in the \uicontrol Library only if the \note Types are listed in the \uicontrol Library only if the
filename begins with a capital letter. filename begins with a capital letter.
\li Click \uicontrol {Design} to edit the file in the visual editor. \li Click \uicontrol {Design} to edit the file in the
\uicontrol {Form Editor}.
\li In the \uicontrol Navigator, select \uicontrol Item and set the \li In the \uicontrol Navigator, select \uicontrol Item and set the
width (\uicontrol W) and height (\uicontrol H) of the button in the width (\uicontrol W) and height (\uicontrol H) of the button in the
@@ -153,7 +154,8 @@
\note Types are listed in the \uicontrol Library only if the \note Types are listed in the \uicontrol Library only if the
filename begins with a capital letter. filename begins with a capital letter.
\li Click \uicontrol {Design} to edit the file in the visual editor. \li Click \uicontrol {Design} to edit the file in the
\uicontrol {Form Editor}.
\li In the \uicontrol Navigator, select \uicontrol Item and set the \li In the \uicontrol Navigator, select \uicontrol Item and set the
width (\uicontrol W) and height (\uicontrol H) of the button in the width (\uicontrol W) and height (\uicontrol H) of the button in the
@@ -263,7 +265,8 @@
\image qmldesigner-borderimage-connections.png "Item connections" \image qmldesigner-borderimage-connections.png "Item connections"
\li In the code editor, specify the \c clicked signal for the Item: \li In the \uicontrol {Text Editor}, specify the \c clicked signal for
the Item:
\qml \qml
Item { Item {

3
doc/src/qtquick/qtquick-components.qdoc
View File

@@ -115,7 +115,8 @@
\li Click \uicontrol Design to open the .qml file in \QMLD. \li Click \uicontrol Design to open the .qml file in \QMLD.
\li Drag and drop a QML type from the \uicontrol Library to the editor. \li Drag and drop a QML type from the \uicontrol Library to the
\uicontrol Navigator or \uicontrol {Form Editor}.
\li Edit its properties in the \uicontrol Properties pane. \li Edit its properties in the \uicontrol Properties pane.

24
doc/src/qtquick/qtquick-screens.qdoc
View File

@@ -62,7 +62,8 @@
\list 1 \list 1
\li Drag and drop components from the \uicontrol Library to the editor. \li Drag and drop components from the \uicontrol Library to the
\uicontrol Navigator or \uicontrol {Form Editor}.
\li Select components in the \uicontrol Navigator to edit their \li Select components in the \uicontrol Navigator to edit their
properties in the \uicontrol Properties pane. properties in the \uicontrol Properties pane.
@@ -92,8 +93,9 @@
\l{PathView}{Path View}, the ListModel and the delegate component that \l{PathView}{Path View}, the ListModel and the delegate component that
creates an instance for each item in the model are added automatically. creates an instance for each item in the model are added automatically.
You can edit item properties in the \uicontrol Properties pane or You can edit item properties in the \uicontrol Properties pane or
in the code editor. You can also replace the default model and in the \uicontrol {Text Editor}. You can also replace the default model and
delegate with other, more complex models and delegates in the code editor. delegate with other, more complex models and delegates in the
\uicontrol {Text Editor}.
\section1 Positioning Items on Screens \section1 Positioning Items on Screens
@@ -171,7 +173,7 @@
\image qmldesigner-anchor-buttons.png "Anchor buttons" \image qmldesigner-anchor-buttons.png "Anchor buttons"
Specifying the baseline anchor in \QMLD is not supported. You can specify it Specifying the baseline anchor in \QMLD is not supported. You can specify it
using the code editor. in the \uicontrol {Text Editor}.
For performance reasons, you can only anchor an item to its siblings and For performance reasons, you can only anchor an item to its siblings and
direct parent. By default, an item is anchored to its parent when you direct parent. By default, an item is anchored to its parent when you
@@ -302,13 +304,13 @@
example, you can use states to create two screens. example, you can use states to create two screens.
To add states, click the empty slot in the \uicontrol States pane. Then modify the To add states, click the empty slot in the \uicontrol States pane. Then modify the
new state in the visual editor. new state in the \uicontrol {Form Editor}.
\image qmldesigner-states.png "States pane" \image qmldesigner-states.png "States pane"
The properties that you change in a state are highlighted with blue color. The properties that you change in a state are highlighted with blue color.
In the code editor, you can see the changes recorded as changes to the base In the \uicontrol {Text Editor}, you can see the changes recorded as changes
state. to the base state.
To keep the QML code clean, you should create a base state that contains all To keep the QML code clean, you should create a base state that contains all
the types you will need in the application. You can then create states, the types you will need in the application. You can then create states,
@@ -355,8 +357,8 @@
or opacity of the items in the screen. or opacity of the items in the screen.
\li To determine which view opens when the application starts, use the \li To determine which view opens when the application starts, use the
code editor to set the state of the root item of the .qml file, as \uicontrol {Text Editor} to set the state of the root item of the
specified by the following code snippet: .qml file, as specified by the following code snippet:
\qml \qml
Item { Item {
@@ -378,8 +380,8 @@
the same time. Or use the \c SequentialAnimation type to run them one the same time. Or use the \c SequentialAnimation type to run them one
after another. after another.
You can use the code editor to specify transitions. For more information, You can use the \uicontrol {Text Editor} to specify transitions. For more
see \l{Transition}. information, see \l{Transition}.
\section1 Adding User Interaction Methods \section1 Adding User Interaction Methods

5
doc/src/qtquick/qtquick-ui-forms.qdoc
View File

@@ -71,8 +71,9 @@
\section1 Using Qt Quick UI Forms \section1 Using Qt Quick UI Forms
You can edit the forms in the \uicontrol Design mode. Items that are supposed to You can edit the forms in the \uicontrol {Form Editor} and
be used in QML code have to be exported as properties: \uicontrol {Text Editor} tabs in the \uicontrol Design mode. Items that are
supposed to be used in QML code have to be exported as properties:
\code \code
Item { Item {