User manual

1
8
Das Fenster ist in mehrere Bereiche au
f
geteilt. Links sehen Sie
im Bereich
P
alette die Oberfl ächenelemente, die für Ihre A
pp
zur Verfügung stehen. Daneben sehen Sie in Vi
e
w
e
r
d
i
e
Obe
rfl
ä-
che der A
pp
. In
C
om
p
onents sehen Sie die in Ihrer A
pp
verwen
-
deten Kom
p
onenten und in
P
ro
p
erties die Eigenschaften der
aktuell selektierten Kom
p
onente.
Ziehen Sie nun eine Beschri
f
tun
g
in Form von einem Label in
das Fenster. Passen Sie die Beschri
f
tun
g
an, indem Sie Wi
dth
auf
Fill parent
set
z
e
n
u
n
d
t
TextAlignment
auf
t
ce
n
te
r:I. N
u
n i
st
die Beschriftun
g
horizontal zentriert. Als Nächstes ändern Sie die
Schrift
g
röße in F
o
n
tS
iz
e
30
und setzen den Text
(
Feld:
Te
x
t
)
au
f
Meine erste Ap
p
.
Nun so
ll
d
ie A
pp
noc
h
um eine Intera
k
tion erweitert wer
d
en.
Hier
f
ür
f
ügen Sie einen Button aus dem Fenster Com
p
onents
hinz
u
u
n
d
ä
n
de
rn
übe
r
P
ro
p
ert
i
es die Beschri
f
tung in T
ouc
h
m
e
. Darunter
f
ügen Sie ein Label mit der Beschri
f
tung
Status
:
n
ot
touc
h
ed
hinz
u
.
App-Oberfl äche mit den drei Komponenten
AI2 hat zwei Ansichten für eine App: die Ansicht zur Gestaltun
g
der Oberfl äche, den so
g
enannten Desi
-
g
ner (Reiter Designe
r
), und die Ansicht zur Pro
g
rammierun
g
in der Blocksprache (Reiter Bl
oc
k
s
)
. Diese
beiden Reiter sehen Sie im oberen Bereich der Entwicklun
g
sum
g
ebun
g
.
N
ac
h Kli
c
k
au
f B
locks
öffnet sich die Ansicht der Block-Pro
g
rammiersprache. Wählen Sie nun innerhalb
des Bereichs Block
s
die Kom
p
onente Button
1
aus, und schon sehen Sie die zur Verfü
g
un
g
stehenden
Erei
g
nisse, auf die Sie in der App rea
g
ieren können.
Wä
hl
en Sie nun
d
ie zwei B
l
öc
k
e
wh
en Button1.Touc
h
Dow
n
un
d
w
h
en Button1.Touc
h
U
p
aus. In
b
ei
d
en
Fä
ll
en so
ll
d
er In
h
a
l
t
d
es La
b
e
l
s La
b
e
l2
angepasst werden. Klicken Sie hier
f
ür au
f
La
b
e
l
2 un
d
wä
hl
en Sie
Ä
nderungen an einer Komponente nehmen Sie im Fenster
P
ropert
i
es vor. Die Ansic
h
t im
Viewer ändert sich dann so
f
ort
.
Übe
r
d
i
e
R
e
i
te
r
D
es
ig
ner
u
n
d
Bl
oc
k
s
gelangen Sie zu den beiden Ansichten der Entwicklungsumgebung.
15007-3 Conrad Adventskalender Internet of Things 2017_02.indd 1815007-3 Conrad Adventskalender Internet of Things 2017_02.indd 18 19.07.2017 14:15:0919.07.2017 14:15:09