In den letzten Tagen erreicht mich immer wieder von Anfängern die Frage, wie man ein AppFenster geöffnet bekommt. Dazu habe ich heute für euch ein paar kleine Scriptbeispiele gepostet, die euch helfen sollen die ganze Thematik zu verstehen.

Was ist ein AppContent?

Als AppContent bezeichnet man den Inhalt, den eine User App darstellen soll. Oft ist auch von HTML UI sprich dem HTML UserInterface die Rede. Es gibt grundlegend zwei verschiedene Arten von AppContent. Den overlayContent und den popupContent. Wie die Namen schon verraten, ist der overlayContent oben rechts in der Channelecke dargestellt und ist nicht frei positionierbar und der popupContent landet in einem neu generierten Popup, welches sich beliebig auf eurem Bildschirm positionieren lässt.

Wann macht es Sinn einen AppContent zu öffnen?

Es gibt verschiedene Zeitpunkte, an denen es sinnvoll sein kann den AppContent zu öffnen. Das ist aber davon abhängig, was eure App machen soll. Wenn es wichtig ist, dass eure App bereits nach dem Eintritt in den Channel sichtbar ist, sollte man den AppContent bei onUserJoined() laden.

Wenn die User App erst geöffnet werden soll, wenn ein Knuddel eingezahlt wurde, dann wäre onKnuddelReceived() eine Methode, die ihr ins Auge nehmen solltet.

Neben den zwei gängigen Methoden, gibt es dann noch Möglichkeiten die ebenfalls häufig in der Praxis verwendet werden. Zum einen wäre da erwähnenswert den AppContent mit Hilfe eines chatCommands zu öffnen. Sprich, der User gibt einen Befehl ein und anschließend öffnet sich die User App. Die Alternative wird immer dann genutzt, wenn z.B. eine User App schon bei onUserJoined()geöffnet sein muss, die App aber während des Besuchs neu gestartet wird. Hierfür kommt die Methode onAppStart() ins Spiel.

Wie sieht das Konstrukt für das öffnen eines AppContents aus?

In meinem Beispiel gehe ich von einem sehr simplen Konstrukt aus. Dies soll euch helfen, den notwendigen Aufbau der Methode zu verstehen. Um einen AppContent zu öffnen, sind lediglich 5 Zeilen Code notwendig, die ich für euch Schritt-für-Schritt erkläre.

Zuerst, müssen wir dem Script mitteilen, welche HTML-Datei wir geöffnet haben möchten. Optional können wir auch mit übergeben, welche Daten verarbeitet werden sollen. Diese Daten müssen als Objekt übergeben werden, sind aber optional und nicht zwangsläufig erforderlich.

var htmlFile = new HTMLFile('home.html', {});

Als nächstes definieren wir, welche Art von AppContent wir geöffnet haben möchten. Das erste Beispiel zeigt, wie ein Overlay geöffnet wird. Im zweiten Beispielcode definieren wir ein Popup. Als Parameter erwartet die Methode neben dem eben erstellten htmlFile auch Werte über die Breite und Höhe des zu öffnenden AppContent. Hierbei gilt es zu beachten, dass die Größe nicht 1000 Pixel überschreiten darf.

Overlay-Beispiel:

appView = AppContent.overlayContent(htmlFile, 430, 530);

Popup-Beispiel:

appView = AppContent.popupContent(htmlFile, 430, 430);

Nachdem wir diese zwei Schritte hinter uns gebracht haben, geht es darum den AppContent auch anzuzeigen. Hierfür kommt die Funktion canSendAppContent() ins Spiel. Diese Funktion prüft, ob wir dem User überhaupt einen AppContent zur Verfügung stellen können. Sprich, ob dieser User überhaupt die Bedingungen erfüllt, damit ein AppContent angezeigt werden kann. Ein möglicher Grund, warum ein AppContent nicht geöffnet werden kann wäre z.B. eine veraltete Android-Version, die diese Methoden noch nicht unterstützt. Wenn diese Prüfung true zurück gibt, kann das Senden des AppContent beginnen.

if(user.canSendAppContent(appView)===true){

Mit der Methode sendAppContent() wird schlußendlich der AppContent gesendet. Das bedeutet, dass der übergebene User im Anschluß den AppContent geöffnet bzw. angezeigt bekommt.

user.sendAppContent(appView);

Zum Schluß noch alle geschweiften Klammern schließen – und Fertig ist die Laube.

}

Im Gesamten sieht euer Scriptcode nun wie folgt aus

var htmlFile = new HTMLFile('home.html', {});
appView= AppContent.overlayContent(htmlFile, 430, 430);
if(user.canSendAppContent(appView)===true){
user.sendAppContent(appView);
}

Im nächsten Blogbeitrag dieser Serie kümmern wir uns dann um die Logische Einbindung der oben genannten Anwendungsmöglichkeiten (onUserJoined, onAppStart sowie per chatCommand). Anregungen und Wünsche zum Blogbeitrag sind wie immer in den Kommentaren erwünscht.