User manual

1
8
The window is broken up into several areas. On the le
f
t, you
can see the interface elements available for the A
pp
in the area
P
a
ll
et
. Next to it, you can see the interface of your App in the
Viewer . Com
p
onents
s
hows the components used in your App
and Pro
p
ertie
s
the properties of the currently selected compo
-
nent
.
Now draw text in the
f
orm o
f
a label into the window. Ad
j
ust
the label b
y
settin
g
W
i
dt
h
to
Fill parent
a
n
d
t
TextAlignment
to
t
ce
n
te
r:
I
.
Now the label is centred horizontall
y
. Next, chan
g
e the
f
o
n
t
s
iz
e
to
F
o
n
tS
iz
e
30
and chan
g
e the text (fi eld:
Te
x
t
)
to M
y
fi rst Ap
p
.
Now t
h
e App is to
b
e expan
d
e
d
b
y an interaction. For t
h
is, enter
butto
n
s
fr
o
m
t
h
e
win
do
w
C
om
p
onent
s
an
d
c
h
ange t
h
e
l
a
b
e
l
to
T
ouc
h m
e
vi
a
t
h
e
P
ro
p
ert
i
e
s
. Below this, insert a label with the
te
x
t
Status
: n
ot
touc
h
ed
.
App-interface with the three components
AI2 has two views for an App: the view for desi
g
n of the interface, called the Desi
g
ner (tab
D
esigne
r
)
,
and the view for pro
g
rammin
g
in block lan
g
ua
g
e (tab Bl
oc
k
s
). These two tables are displa
y
ed in the
u
pp
er area of the develo
p
ment environment.
Clickin
g
Bl
oc
k
s
will open the view o
f
the block pro
g
rammin
g
lan
g
ua
g
e. Now select the component B
ut-
to
n
1
wi
t
hin
t
h
e
Bl
oc
k
s
area; you will see the available results to which you can react in the App
.
Now se
l
ect t
h
e two
bl
oc
k
s w
h
en Button1.Touc
h
Dow
n
an
d
w
h
en Button1.Touc
h
Up
.
In
b
ot
h
cases, t
h
e
content o
f
the label Label
2
is to be adjusted. For this, click Label
2
and select the element set Label2.
You can c
h
ange components in t
h
e win
d
ow
P
ropert
i
es. T
h
e
d
isp
l
ay in t
h
e Viewer wi
ll
c
h
ange
at once t
h
en.
Use
t
h
e
tabs
D
es
ig
ner
a
n
d
B
l
oc
k
s
to get to the two views of the development environment
.
15007-3 Conrad Adventskalender Internet of Things 2017_en.indd 1815007-3 Conrad Adventskalender Internet of Things 2017_en.indd 18 13.08.2017 17:03:0713.08.2017 17:03:07