Wenn der Nutzer die App einschaltet, gelangt er zuerst auf den Verbindungsscreen. Dieser ist wie eine Art "Login"-Fenster und soll verhindern, dass der Nutzer auf den Steuerungsscreen gelangt und Tasten betätigt ohne dass eine Bluetooth-Verbindung besteht. Demnach hat der Nutzer auf dem Verbindungsscreen lediglich die Möglichkeit, ein gekoppeltes Bluetooth-Gerät zum verbinden auszuwählen. Anschließend soll bei einer erfolgreichen Verbindung der Verbindungsscreen verschwinden und der Steuerungsscreen erscheinen. War der Verbindungsversuch erfolglos, so bleibt der Nutzer auf dem Verbindungsscreen und es wird eine Fehlermeldung angezeigt. Wie bei allen anderen Screens starten wir damit, das Design zu entwickeln.

Um der App ein ordentliches Design zu verleihen, verwenden wir zur Strukturierung die Blöcke in der Rubrik "Anordnung" unter "Palette" auf der linken Seite der Browseranwendung. Mit diesen hast du die Möglichkeit Elemente horizontal oder vertikal links, rechts oder mittig anzuordnen und in ihrer Größe zu begrenzen. Die Grundstruktur des Verbindungsscreens bauen wir aus einer "vertikalenAusrichtung" und einer darin enthaltenen "HorizontalenAusrichtung". Nachdem du diese beiden Elemente per Drag and Drop auf das Smartphone gezogen hast, müsste dieses wie folgt aussehen:

Smartphone mit einer vertikalen Ausrichtung und einer darin enthaltenen horizontalen Ausrichtung.

Abbildung: Verbindungsscreen mit lediglich zwei Blöcken
Quelle: MIT App Inventor


Lasse dich dabei nicht von der grauen Hintergrundfarbe der Anordnungen irritieren. Diese wird beim darstellen der App nicht sichtbar sein. Um sicherzugehen kannst du aber über die Einstellungen die Hintergrundfarbe auf beispielsweise weiß ändern. Die "vertikaleAusrichtung" soll am Ende den Verbindungsscreen darstellen. Daher muss diese auch zu jeder Zeit den gesamten Bildschirm füllen. Um dies umzusetzen klickst du den Block an und wählst in den Eigenschaften für die Höhe und die Breite die Auswahlmöglichkeit "Fuelle alles..." aus. Das gleiche machst du dann für die Breite der in der "vertikalenAusrichtung" enthaltenen "horizontalenAusrichtung". Danach müsste das Smartphone folgendermaßen aussehen:

Verbindungsscreen mit gefüllten Ausrichtungen

Abbildung: Verbindungsscreen mit zwei in Größe und Farbe angepassten Blöcken
Quelle: MIT App Inventor


Nun fügen wir aus der "Palette" unter der Rubrik "Benutzerschnittstelle" zwei "Bezeichnungen" untereinander und über der "horizontalenAnordnung" ein. Unter den "Eigenschaften" können wir dann für die obere der beiden Beschriftungen die Einstellung "Fettschrift" anklicken, die Schriftgröße 20 eintragen und als Text "T1-RGB Tuning" ergänzen. Schon haben wir den Titel der App angelegt. Für das Beschriftungselement darunter haben wir als einzige Einstellungsänderung eine Erhöhung der Schriftgröße auf 16 vorgenommen. Dieses Beschriftungselement kannst du verwenden, um deinen Namen als Autor der App einzutragen. Nun hast du sicherlich festgestellt, dass alle Elemente in der "vertikalenAnordnung" in der oberen linken Ecke verweilen. Um dies zu ändern musst du erneut in die Einstellung der "vertikalenAnordnung" gehen und sowohl die "AusrichtungHorizontal" als auch die "AusrichtungVertikal" auf "Mitte" einstellen. Anschließend sollte der Verbindungsscreen folgendermaßen aussehen:

Verbindungsscreen mit Labels

Abbildung: Verbindungsscreen mit zwei Blöcken und Beschriftungen
Quelle: MIT App Inventor


Nun fehlt eigentlich nur noch der Verbinden-Button. Diesen fügen wir aus der Rubrik "Benutzerschnittstelle" aus der "Palette" als "ListenAuswahl" unter den zwei Beschriftungselementen ein. Auch wenn das Element "Taste" existiert, mussten wir hier die "ListenAuswahl" wählen, damit nach dessen Betätigung eine Liste der Bluetooth-Geräte angezeigt werden kann. Dennoch werden wir dieses Element weiterhin als "Verbinden"-Button bezeichnen. Um den "Verbinden"-Button etwas in die App-Atmosphäre zu integrieren, legen wir in dessen Einstellungen eine Schriftgröße von 18, die Schriftfarbe Weiß und die Form "abgerundet" fest. Außerdem wurde "Fettschrift" angewählt, der Text der Taste auf "Verbinden" geändert und die Hintergrundfarbe auf die nutzerspezifische Farbe "#748fccff" gesetzt. Wenn du dich noch erinnerst wird dir auffallen, dass das die hexadezimale Farbcodierung ist, welche wir beim Kennenlernen des RGB-Farbraums behandelt haben. Die letzten beiden "ff" haben dabei für die Farbe keinerlei Bedeutung. Diese werden von dem MIT App Inventor automatisch hinzugefügt. Nun wird dir aufgefallen sein, dass die Taste noch relativ klein ist. Um dies zu ändern, solltest du die Größe der Taste in den "Eigenschaften" variieren. Dieses mal wählen wir aber die Prozentuale Einstellung. Grund dafür ist, dass die App dann auch auf Geräten mit verschiedensten Bildschirmgrößen vernünftig dargestellt werden kann. Bei einer Größenangabe in Pixeln wäre dies nicht möglich. Wir haben der "Verbinden"-Taste eine Breite von 80 % und eine Höhe von 10 % zugewiesen. Der Verbindungsscreen sollte nun so aussehen:

Verbindungsscreen mit "Verbinden"-Taste

Abbildung: Verbindungsscreen mit zwei Blöcken, Beschriftungen und einem "Verbinden"-Button
Quelle: MIT App Inventor


Final fügen wir noch einige Abstandshalter ein und verschönern den Verbindungsscreen mit unseren Logos, damit dieser nicht so leer aussieht. Abstandshalter als solche gibt es im MIT App Inventor leider nicht. Daher verwenden wir Beschriftungselemente ohne Inhalt und weisen diesen eine prozentuale Breite und/oder Höhe zu, je nachdem in welche Richtung wir einen Abstand erzeugen wollen. Für den Verbindungsscreen benötigen wir vier Abstandshalter. Einen über dem Titel, dem wir die Höhe 10 % und eine automatische Breite zugewiesen haben, einen unter dem Autornamen, der eine Höhe von 15 % und ebenfalls eine automatische Breite besitzt, einen unter dem "Verbinden"-Button mit einer Höhe von 15 % und einer automatischen Breite sowie einen zwischen den zwei Logos, die in die "horizontaleAnordnung" eingefügt werden. Dieser letzte Abstandshalter erhält eine automatische Höhe und eine breite von 8 %. Abschließend fügen wir das Logo der Volkswagen AG links und das Logo der BBS2 Wolfsburg rechts von dem letzten Abstandshalter in die "horizontaleAnordnung" ein. Alternativ kannst du statt der zwei Logos auch nur ein Bild einfügen und den letzten Abstandshalter einfach löschen. Dann wäre die "horizontaleAnordnung" allerdings auch sinnfrei. Um Bilder einzufügen müssen wir das Element "Bild" aus der Rubrik "Benutzerschnittstelle" in der "Palette" einfügen. In den Einstellungen haben wir dann die Möglichkeit ein Bild auszuwählen und diesem ebenfalls eine Höhe und eine Breite zuzuweisen. Für das Volkswagen Logo haben wir für beide Werte 20 % gewählt. Bei dem BBS2 Logo beträgt die Höhe 30 % und die Breite 50 %. Nun müssen nur noch die Eigenschaften "AusrichtungHorizontal" und "AusrichtungVertikal" bei der "horizontalenAnordnung" auf "Mitte" eingestellt und abschließend die Höhe der "horizontalenAnordnung" auf 30 % verändert werden, damit das BBS2 Logo noch vollständig angezeigt wird. Als letztes kannst du noch durch einen Klick auf "Screen1" in den "Komponenten" die Option "Title visible" abwählen. Auf diese weise verschwindet die unattraktive graue Leiste mit der Aufschrift "Screen1" im oberen Teil des Smartphone-Bildschirms. Versuche nicht "Screen1" umzubenennen... auch wenn es der MIT App Inventor ermöglicht weitere Screens hinzuzufügen, ist Screen1 eine Art "Master-Screen" und kann daher nicht umbenannt werden. Außerdem müssen wir aus dem Reiter "Verbindung" aus der "Palette" final noch den "BluetoothClient" einfügen, um eine Bluetooth-Schnittstelle einrichten zu können. Anschließend sollte das Smartphone folgendermaßen aussehen:

Fertiger Verbindungsscreen

Abbildung: Fertiger Verbindungsscreen mit einem "BluetoothClient"
Quelle: MIT App Inventor


Wenn du die App nun über einen der vorgestellten Wege auf deinem Smartphone öffnest, sieht der fertiggestellte Verbindungsscreen folgendermaßen aus:

Screenshot des Verbindungsscreens auf dem Smartphone

Abbildung: Screenshot des erstellten Verbindungsscreens
Quelle: BBS2 Wolfsburg


Bevor wir nun zum Steuerungsscreen übergehen, solltest du, um dir später das Programmieren zu erleichtern, alle Elemente in den "Komponenten" so benennen, dass du beim Programmieren genau weißt, welche Komponente welchen Namen trägt. Dies gilt auch für alle weiteren grafischen Oberflächen, die du erstellst und für alle weiteren Komponenten, die du einfügst. Wir haben die Komponenten folgendermaßen benannt:

Namensgebund der Komponenten der App

Abbildung: "Komponenten" des Verbindungsscreens
Quelle: MIT App Inventor

Last modified: Tuesday, 23 January 2024, 3:08 PM