HTML-Inhalte können auf drei verschiedene Arten eingebunden werden:

  • HTML Online einbinden (Webview)
    Direkte Integration einer Webseite, z.B. der Webseite https://www.sprylab.com. Diese Art der Einbindung funktioniert nicht, wenn das Tablet oder Smartpone keinen Internetzugang hat.
  • HTML Offline einbinden
    Integration eines HTML-Archivs, welches alle Daten enthält, die zur Darstellung notwendig sind. Werbung, Diagramme oder auch HTML-Animationen werden oftmals auf diese Weise eingebunden.
  • Einbindung von HTML über Shared Assets
    Wenn Sie ein HTML-Asset an mehreren Stellen verwenden wollen, wie z.B. eine Notizfunktion, welche auf jeder Seite eingebunden wird, empfiehlt sich die Nutzung der Shared Assets Funktion. Dadurch sind die HTML-Daten im Projekt nur einmal vorhanden und vergrößern das Projekt nicht unnötig.
  • HTTP(s) Links können an verschiedenen Stellen in Purple DS genutzt werden, sowohl auf Seiten, die Webviews einbinden, als auch als Event für Buttons o.ä. Zudem können mit Hilfe von Action URLs Links im externen Browser geöffnet werden, um damit einen voll funktionsfähigen Browser inkl. Lesezeichen, Teilen, Leselisten, Verlauf etc zur Verfügung zu haben.



Assets, die HTML Links nutzen
mögliche Ziele für Links
URL

WEBVIEWS

  • INLINE = Links öffnet in der selben Webview, die den Link enthält. Damit ist die Größe des Fensters (=Webview) fest eingestellt. Innerhalb der Webview können Sie Inhalte scrollen.
    Das ist besonders für responsiven Inhalte geeignet. Zudem werden keine anderen Inhalte einer Seite durch eine Webview überdeckt.
Einfach a href="" ohne target oder data-targetAttribute.
Bsp.: <a href=“http://www.sprylab.com>
  • IN-APP BROWSER = Es wird ein Browser innerhalb der App geöffnet. Der Browser hat einen Basis-Steuerung mit Vor, Zurück und Seite erneut Laden, Fenster schließen.


target="_blank" Attribut
Bsp.: <a href=“http://www.sprylab.com”target=“_blank”>
  • EXTERNER SYSTEM BROWSER = Es wird ein auf dem mobilen Gerät installierter Browser außerhalb der App geöffnet, z.B. Safari oder Chrome.
    Damit stehen alle Features eines Browser wie Lesezeichen, Teilen, Leselisten, Verlauf etc zur Verfügung.
target="_blank"und data-target="external" Attribut
Bsp.: <a href=“http://www.sprylab.com”target=“_blank” data-target=“external”>
PURPLE ELEMENTE
  • INLINE ist nicht möglich, da ein Purple Element wie bspw. ein Button oder Link kein Fenster hat, das den Link-Inhalt anzeigen könnte.
./.
  • IN-APP BROWSER = Es wird ein Browser innerhalb der App geöffnet. Der Browser hat einen Basis-Steuerung mit Vor, Zurück und Seite erneut Laden, Fenster schließen.
target="_blank" Attribut
Bsp.: http://www.sprylab.comtarget=_blank
Das Attribut ist im Composer nicht nötig. Es wird ein Link für den Event "Open Web URL" eingetragen und mit einem Haken bei "Open as overlay" wird dieser im InApp Browser geöffnet.
  • EXTERNER SYSTEM BROWSER = Es wird ein auf dem mobilen Gerät installierter Browser außerhalb der App geöffnet, z.B. Safari oder Chrome.
    Damit stehen alle Features eines Browser wie Lesezeichen, Teilen, Leselisten, Verlauf etc. zur Verfügung.
purple://app/open/external/url/URLEncodedURL
Bsp.: purple://app/open/external/url/
https%3A%2F%2Fsprylab.com

HINWEIS: Die Ziel URL muss zunächst URL encodiert werden, z.B. unter https://www.url-encode-decode.com/.
Auf iOS wird sich damit der System (Standard) Browser öffnen, z.B. Safari.
Unter Android wird eine Instanz des Systembrowsers (z.B. Chrome) innerhalb der App geöffnet. Dieser Browser enthält alle Browser Features wie Lesezeichen, Teilen, Leselisten, Verlauf etc. und kann über das erweiterte Menü (3 Punkte) die Inhalte in einem externen Fenster des Browsers öffnen.