Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Marco Bubke
flatpak-qt-creator
Commits
05c24045
Commit
05c24045
authored
Oct 25, 2010
by
Leena Miettinen
Browse files
Doc - Qt Quick Designer UI in more detail
Reviewed-by: Carsten Owerfeldt
parent
1a8e48e1
Changes
6
Hide whitespace changes
Inline
Side-by-side
doc/images/qmldesigner-anchor-buttons.png
0 → 100644
View file @
05c24045
1.56 KB
doc/images/qmldesigner-element-properties.png
0 → 100644
View file @
05c24045
78.1 KB
doc/images/qmldesigner-qml-components.png
0 → 100644
View file @
05c24045
33.5 KB
doc/images/qmldesigner-set-expression.png
0 → 100644
View file @
05c24045
4.54 KB
doc/images/qmldesigner-visual-editor.png
View replaced file @
1a8e48e1
View file @
05c24045
109 KB
|
W:
|
H:
109 KB
|
W:
|
H:
2-up
Swipe
Onion skin
doc/qtcreator.qdoc
View file @
05c24045
...
...
@@ -1025,28 +1025,23 @@
editor
.
Then
select
the
\
gui
{
Design
}
mode
to
edit
the
file
in
the
visual
editor
.
To
enable
or
disable
the
\
QMLD
visual
editor
,
select
\
gui
{
Help
>
About
Plugins
...
>
Qt
Quick
>
QmlDesigner
}.
You
must
restart
Qt
Creator
to
enable
or
disable
the
visual
editor
.
\
image
qmldesigner
-
visual
-
editor
.
png
"Visual editor"
Use
the
visual
editor
panes
to
manage
your
project
:
\
list
\
o
\
gui
{
Navigator
}
pane
displays
the
items
in
the
editor
.
You
can
show
and
hide
items
to
focus
on
specific
parts
of
the
application
.
\
o
\
gui
{
Navigator
}
pane
displays
the
QML
elements
in
the
current
QML
file
.
You
can
show
and
hide
items
to
focus
on
specific
parts
of
the
application
.
To
view
lists
of
files
or
projects
,
instead
,
select
\
gui
{
File
System
},
\
gui
{
Open
Documents
},
or
\
gui
Projects
in
the
menu
.
\
o
\
gui
{
Library
}
pane
displays
lists
of
predefined
\
gui
{
Items
}
and
imported
\
gui
{
Resources
}
that
you
can
use
to
design
applications
.
The
images
and
other
files
that
you
copy
to
the
project
folder
appear
in
the
\
gui
{
Resources
}
pane
.
\
o
\
gui
{
Library
}
pane
displays
the
building
blocks
that
you
can
use
to
design
applications
:
predefined
QML
elements
,
your
own
QML
components
,
and
other
resources
.
\
o
\
gui
{
Properties
}
pane
display
s
the
properties
of
the
selected
compon
ent
.
You
can
also
change
the
properties
in
the
code
editor
.
\
o
\
gui
{
Properties
}
pane
organize
s
the
properties
of
the
selected
QML
elem
ent
or
QML
component
.
You
can
also
change
the
properties
in
the
code
editor
.
\
o
\
gui
{
State
}
pane
displays
the
different
states
of
the
component
.
To
add
states
,
click
the
empty
slot
.
Then
modify
the
new
state
in
the
editor
.
...
...
@@ -1055,6 +1050,59 @@
\
endlist
\
section1
Element
Library
The
\
gui
{
Library
}
pane
contains
two
tabs
:
\
gui
{
Items
}
and
\
gui
{
Resources
}.
The
\
gui
Items
pane
displays
the
QML
elements
grouped
by
type
:
your
own
QML
components
,
basic
elements
,
interaction
elements
,
views
,
and
widgets
.
\
image
qmldesigner
-
qml
-
components
.
png
"QML Components pane"
The
\
gui
{
Resources
}
pane
displays
the
images
and
other
files
that
you
copy
to
the
project
folder
.
\
section1
Specifying
Element
Properties
The
\
gui
Properties
pane
displays
all
the
properties
of
the
selected
QML
element
.
The
properties
are
grouped
by
type
.
The
top
part
of
the
pane
displays
properties
that
are
common
to
all
elements
,
such
as
element
type
,
position
,
size
,
and
visibility
.
The
bottom
part
of
the
pane
displays
properties
that
are
specific
to
each
element
type
.
For
example
,
the
following
image
displays
the
properties
you
can
set
for
\
gui
Rectangle
and
\
gui
Text
elements
.
\
image
qmldesigner
-
element
-
properties
.
png
For
more
information
on
the
properties
available
for
an
element
,
press
\
key
{
F1
}.
\
section2
Setting
Expressions
You
can
set
Java
Script
expressions
as
values
of
some
properties
.
Click
the
circle
icon
next
to
a
property
to
open
a
context
menu
,
and
select
\
gui
{
Set
Expression
}.
\
image
qmldesigner
-
set
-
expression
.
png
"Element properties context menu"
For
more
information
on
the
Java
Script
environment
provided
by
QML
,
see
\
l
{
http
://
doc
.
qt
.
nokia
.
com
/
4.7
-
snapshot
/
qdeclarativejavascript
.
html
}{
Integrating
JavaScript
}.
\
section2
Setting
Anchors
and
Margins
The
\
gui
Layout
pane
allows
you
to
set
anchors
and
margins
for
elements
.
To
set
the
anchors
of
an
item
,
click
the
anchor
buttons
.
You
can
combine
the
top
/
bottom
and
left
/
right
anchors
to
anchor
objects
in
the
corners
of
the
parent
element
.
\
inlineimage
qmldesigner
-
anchor
-
buttons
.
png
"Anchor buttons"
\
section2
Building
Transformations
on
Items
The
\
gui
Advanced
pane
allows
you
configure
advanced
transformations
,
such
as
rotation
,
scale
,
and
translation
.
You
can
assign
any
number
of
transformations
to
an
item
.
Each
transformation
is
applied
in
order
,
one
at
a
time
.
For
more
information
on
Transform
elements
,
see
\
l
{
http
://
doc
.
qt
.
nokia
.
com
/
4.7
/
qml
-
transform
.
html
}{
QML
Transform
Element
}.
*/
...
...
@@ -6285,10 +6333,6 @@
\
endlist
To
enable
or
disable
the
\
QMLD
visual
editor
,
select
\
gui
{
Help
>
About
Plugins
...
>
Qt
Quick
>
QmlDesigner
}.
You
must
restart
Qt
Creator
to
enable
or
disable
the
visual
editor
.
*/
...
...
@@ -6540,6 +6584,9 @@
\
o
Select
\
gui
{
File
>
New
File
or
Project
>
Files
and
Classes
>
QML
>
Choose
...}
to
create
a
new
.
qml
file
.
\
note
Components
are
listed
in
the
\
gui
{
QML
Components
}
section
of
the
\
gui
Library
pane
only
if
the
filename
begins
with
a
capital
letter
.
\
o
Click
\
gui
Design
to
open
the
.
qml
file
in
\
QMLD
.
\
o
Drag
and
drop
an
item
from
the
\
gui
Library
pane
to
the
editor
.
...
...
@@ -6590,8 +6637,8 @@
\
list
a
\
o
In
the
\
gui
Size
field
,
set
the
width
(\
gui
W
)
of
the
button
to
60
and
the
height
of
the
button
(\
gui
H
)
to
20
.
\
o
In
the
\
gui
Size
field
,
set
the
width
(\
gui
W
)
and
height
(\
gui
H
)
of
the
button
.
\
o
In
the
\
gui
Color
field
,
select
the
button
color
.
...
...
@@ -6708,8 +6755,6 @@
\
o
Drag
and
drop
a
\
gui
MouseArea
to
the
screen
.
\
o
Click
\
gui
Design
to
return
to
the
visual
editor
.
\
o
In
the
\
gui
Navigator
pane
,
select
\
gui
border_image1
to
specify
settings
for
it
in
the
\
gui
Properties
pane
:
...
...
@@ -6811,17 +6856,15 @@
Typically
,
the
main
qml
file
in
a
Qt
Quick
project
specifies
the
main
window
of
an
application
.
The
QML
files
in
the
project
folder
are
displayed
in
\
gui
{
QML
Components
}
in
the
\
gui
Library
pane
.
\
section1
Adding
Components
to
Screens
\
list
1
\
o
Select
\
gui
{
File
>
New
File
or
Project
>
Qt
Quick
Project
>
Qt
Quick
UI
}
or
\
gui
{
Qt
Quick
Application
}
to
create
a
Qt
Quick
project
.
\
o
Drag
and
drop
components
from
the
\
gui
Library
pane
to
the
editor
.
The
QML
files
in
the
project
folder
are
displayed
in
\
gui
{
QML
Elements
}.
\
o
Select
components
in
the
\
gui
Navigator
pane
to
edit
their
properties
in
the
\
gui
Properties
pane
.
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment