HTM-Dateien anzeigen unter Android

[Thorsten]

Hi

Nachdem mir bei meiner ersten Frage gleich so schnell geholfen werden konnte (Danke noch mal !), hier nun meine zweite:

Da ich mehrere HTM-Dateien anzeigen lassen möchte, die teilweise auch untereinander verlinkt sind, habe ich nun doch einen anderen Weg gewählt, nämlich die einzelnen HTM-Dateien in einem Extra-Ordner in meinem Livecode-Projekt-Verzeichnis zu speichern und sie von dort aus mit dem Widget Browser zu laden.
Das Daten-Verzeichnis rufe ich entsprechend dem Klang-Beispiel aus Hauke Fehrs tollem Livecode-Buch (ganz herzlichen Dank dafür !) im Stack wie folgt auf:

on openStack
   datenPfadSetzen
end openStack

on datenPfadSetzen
   if the environment is "mobile" then
      put specialFolderPath("engine") into programmPfad
   else
      put the filename of this stack into programmPfad
      set the itemDelimiter to "/"
      delete the last item of programmPfad
   end if
   put programmPfad&"/data/" into datenPfad
   if the platform is "MacOS" and the environment is "standalone application" then
      set the itemDelimiter to "/"
      put the filename of this stack into programmPfad
      put item 1 to -3 of programmPfad into datenPfad
      put "/Resources/_MacOS/data/" after datenPfad
   end if
end datenPfadSetzen

Und der Aufruf im Widget erfolgt dann mittels eines Eingabefeldes und eines Buttons mit dem folgenden Button-Script:

global datenPfad

on mouseUp
   put Field "Eingabe" into HtmDatei
   put "file:"&DatenPfad&HtmDatei&".htm" into HtmPfad
   // answer HtmPfad
   set the URL of widget "Browser" to HtmPfad
end mouseUp

Das funktioniert im Live-Modus in Livecode ganz prima und ich kann über die Links in den Dateien zu den entsprechenden anderen Dateien springen – sehr schön !

Ich habe dann eine APK-Datei für Android generiert und nachdem ich die Signing-
Option auf „Sign for devolpment“ gewechselt habe, hat auch das problemlos funktioniert 😉

Aber unter Android klappt nun der Aufruf der HTM-Dateien im Browser nicht mehr.
Stattdessen wird mir im Widget Browser immerhin folgende Fehlermeldung angezeigt:

„Die Webseite unter
file:///data/app/com.Firma.App-XEf4P98qaQ6GgbWZtfyPSA==/base.apk/data/test.htm
konnte nicht geladen werden, weil:
net::ERR_FILE_NOT_FOUND“

Ok, dass die so nicht gefunden werden kann, ist mir klar, was ich nicht verstehe:
Wieso wird diese kryptischer Engine-Pfad erzeugt ? Und was macht meine Identifier-Angabe da drin ??
Das Ende sieht aus meiner Sicht ganz passabel aus, aber der Anfang sollte nicht sein.

Für sachdienliche Hinweise bin ich sehr dankbar,

Thorsten

[Klaus Major]

Hi Thorsten,

dann schaun wir mal… 🙂

1. Ist im Stackskript auch datenPfad als GLOBAL deklariert?

2. Du machst es ETWAS kompliziert 😉
Du findest ALLES., was Du in den „Standalone Application Settings“ unter „Copy files“ hinzufügst hier -> specialfolderpath(„resources“)
Auf jeder Platform! In der IDE liefert er Dir den Ordner, in dem sich Dein Stack befindet, ist also universell nutzbar.

Ich nehme an, Du hast einen Ordner „data“ samt inhalt der Standalone hinzugefügt, richtig?
Falls ja, dann einfacher:

global datenPfad
on datenPfadSetzen
    put sepcialfolderpath("resources") & "/data/" into datenPfad
end datenPfadSetzen

Genau dafür haben wir diese specialfolderpath(…).
LC liefert uns damit immer den entsprechenden Ordner auf jeder Platform!

3.

on mouseUp
   put Field "Eingabe" into HtmDatei
   put "file:"&DatenPfad&HtmDatei&".htm" into HtmPfad
   ...
end mouseUp

Was enthält Feld „Eingabe“?
Den Name der HTML Datei ohne Suffix?
Falls ja, dann mach Folgendes:

global datenPfad

on mouseUp
   put Field "Eingabe" into HtmDatei
   ### Nicht mit Leerzeichen geizen, macht die Sache erheblich lesbarer!
   ## File benötigt auch die beiden Schrägstriche: wie HTTP
   put "file://" & DatenPfad & HtmDatei & ".htm" into HtmPfad
   ## Wichtig Leerzeichen ersetzen:
   replace " " with "%20" in HtmPfad
   // answer HtmPfad
   ##
   set the URL of widget "Browser" to HtmPfad
end mouseUp

Probier das mal aus.

Gruß

Klaus

[Klaus Major]

Ach so, noch was… 🙂

Du kannst mal Folgendes dem MOUSEUP hinzufügen, gibt eventuell Aufschluss auf mögliche Probleme:

...
  set the URL of widget "Browser" to HtmPfad
  if the result <> EMPTY then
     answer "Problem:" & CR & the result
  end if
end mouseUp

„the result“ ist immer LEER bei geglückten Operationen dieser Art, gibt aber einen eventuellen Hinweis, falls es irgendwie nicht klappt, wie „can’t open file“ oder so. Check das mal und gib Bescheid, ob und was Du im Dialog siehst.

[Thorsten]

Hi Klaus

Herzlichen Dank für Deine schnellen und ausführlichen Antworten !

> 1. Ist im Stackskript auch datenPfad als GLOBAL deklariert?

Ja 🙂 Wie geschrieben funktioniert es ja auch tadellos in LiveCode.

> 2. Du machst es ETWAS kompliziert ?

Naja, als blutiger Anfänger dachte ich, dass es vielleicht gar nicht so schlecht ist, sich an die Anleitung im Buch zu halten…

> Du findest ALLES., was Du in den „Standalone Application Settings“ unter „Copy files“ hinzufügst hier -> specialfolderpath(„resources“)
> Auf jeder Platform! In der IDE liefert er Dir den Ordner, in dem sich Dein Stack befindet, ist also universell nutzbar.

Ok, Danke für die Info, specialfolderpath(„resources“) wurde im Buch – soweit ich mich erinnere, nicht genannt.

> Ich nehme an, Du hast einen Ordner „data“ samt inhalt der Standalone hinzugefügt, richtig?

Ja, mit data/*

> Was enthält Feld „Eingabe“?
> Den Name der HTML Datei ohne Suffix?

Ja, genau

> ### Nicht mit Leerzeichen geizen, macht die Sache erheblich lesbarer!

Sehr gerne, auch hier habe ich mich erst einmal an die Vorgabe im Buch gehalten…

> ## File benötigt auch die beiden Schrägstriche: wie HTTP

Ich glaube nicht, in LiveCode funktioniert es ja auch ohne und im Buch wird es auch durchgängig ohne angegeben, die // nur bei http: und ftp:
(Da es immer noch nicht funktioniert, s.u., habe ich es probehalber mit eingebaut, aber das ändert auch nichts…, aber einigen wir uns darauf, dass file: mit oder ohne // geht…)

> ## Wichtig Leerzeichen ersetzen:
> replace “ “ with „%20“ in HtmPfad

Ja, das habe ich auch gelesen, da es in meinen HTM-Dateinamen keine Leerzeichen vorkommen, habe ich erst einmal darauf verzichtet…

> Probier das mal aus.

Leider klappt es immer noch nicht, wieder wegen kryptischer Pfadangabe.

> Du kannst mal Folgendes dem MOUSEUP hinzufügen, gibt eventuell Aufschluss auf mögliche Probleme:
> …
> „the result“ ist immer LEER bei geglückten Operationen dieser Art, gibt aber einen eventuellen Hinweis, falls es irgendwie nicht klappt, wie „can’t open file“ oder so. Check das mal und gib Bescheid, ob und was Du im Dialog siehst.

Die MessageBox wird nicht angezeigt, stattdessen bleibt es bei der Fehlermeldung im Widget Browser:
„Die Webseite unter
file:///data/app/com.Firma.App-XEf4P98qaQ6GgbWZtfyPSA==/base.apk/data/test.htm
konnte nicht geladen werden, weil:
net::ERR_FILE_NOT_FOUND“

(Die lange Nummer wechselt, aber der Rest bleibt gleich…)

Gibt es eigentlich noch eine andere Möglichkeit HTM-Text formatiert anzeigen zu lassen, ausser mit dem Widget Browser ?

So long,

Thorsten

[Klaus Major]

Hi Thorsten,

aus der Ferne muss ich natürlich etwas raten…
Hm, scheint also doch ein Pfadproblem zu sein, aber der Pfad ist definitiv korrekt!?

Ich besitze werder Handy noch Tablet o.ä. daher muss ich etwas im Trüben fischen.
Erstelle mal einen Button und probiere mal das hier auf dem Device aus:
…
put specialfolderpath(„resources“) & „/data“ into tFolder
answer files(tFolder)
…
Da sollte dann auch Deine HTM Datei auflisten.
Falls nicht, bitte berichten, was LC Dir dazu sagt.

Gruß

Klua

[Klaus Major]

Ach so, Du kannst auch ein Feld zur Darstellung von HTML benutzen, aber die Unterstützung ist leider sehr rudimentär, z.B. keine TABLES etc.
…
set the htmltext of fld „das Feld zur Anzeige von HTML“ to the text of fld „das Feld mit derm HTML Sourcetext“
…
Versuch macht kluch! 🙂

[Thorsten]

Hi Klaus

> Hm, scheint also doch ein Pfadproblem zu sein, aber der Pfad ist definitiv korrekt!?

Ich dachte zuerst auch, dass so ein kryptischer Pfad nicht stimmen kann, aber scheinbar doch.

> Ich besitze werder Handy noch Tablet o.ä. daher muss ich etwas im Trüben fischen.

???

> Erstelle mal einen Button und probiere mal das hier auf dem Device aus:
> …
> put specialfolderpath(„resources“) & „/data“ into tFolder
> answer files(tFolder)
> …
> Da sollte dann auch Deine HTM Datei auflisten.
> Falls nicht, bitte berichten, was LC Dir dazu sagt.

Da öffnet sich komischerweise ein Datei-Oeffnen-Dialog !?!
Das passiert in LiveCode, unter Android wird die Installation der App gar nicht erst zugelassen ?!?

> Ach so, Du kannst auch ein Feld zur Darstellung von HTML benutzen, aber die Unterstützung ist leider sehr rudimentär, z.B. keine TABLES etc.

Dann bringt mir das nichts, schade.
Hmmh, scheinbar bin ich der erste, der einfache, lokale HTM-Dateien in einer Android-App anzeigen lassen möchte ?!?

Ich habe jetzt mal verucht, das Problem einzugrenzen und dazu nur eine test.txt-Datei, die einen Satz beinhaltet, in mein Data-Verzeichnis gepackt.
Dann ein einfaches Feld und einen Button, der diese Datei in das Feld tut:
put url("file:" & specialFolderPath("resources") & "/data/test.txt") into field "Anzeige"
Das tut in LiveCode, also als APK konvertiert und auf meinem Handy installiert und siehe da, das funktioniert auch da ! 🙂
Der Pfad bleibt zwar kryptisch, scheint aber zu stimmen.
D.h. das Widget Browser scheint aus meiner Sicht ein Problem mit dieser Art von Pfad-Angabe zu haben.
Ich habe dazu noch folgendes getestet:
Aufruf von test.txt mit dem Widget Browser => klappt unter LiveCode, aber ebenfalls nicht unter Android…

Aus meiner Sicht wäre es noch einen Versuch mit relativen Pfad-Angaben wert, aber da weiß ich nicht, wie man das mit LiveCode realisiert…

Ein zweiter Versuch ist, das Ganze mit LiveCode 9 zu machen (ich nutze bislang 8, wegen der Kompatibilität zum Buch), in der Hoffnung, dass das Widget Browser verbessert wurde…

So long,

Thorsten

[Klaus Major]

Hallo Thorsten,

ich besitze weder Handy noch Tablet, ja, ich bin das, daher kann ich so etwas nicht selber ausprobieren, das meinte ich mit „im Trüben fischen“.

Wenn es mit specialfolderpath() nicht funktioniert, dann wird es auch mit einem relativen Pfad nciht funktionieren.

Da die Datei aber ja auch unter Android offensichtlich gefunden wird, lies sie doch mal in eine Variable ein und setze den HTMLTEXT des Widgets auf diese Variable. Könnte als Workaround erst mal funktionieren.

> put specialfolderpath(„resources“) & „/data“ into tFolder
> answer files(tFolder)
> …
Da öffnet sich komischerweise ein Datei-Oeffnen-Dialog !?!

Nein, das ist kein „Datei öffnen“ Dialog, bitte ganu hinsehen!
Das ist nur ein ANSWER Dialog mit einer Menge Zeilen, nämlich die Dateien in dem Ordner. Da kannst Du klicken, bis Du schwarz wirst, es öfnet sich nichts 😉

Gruß

Klaus

[Thorsten]

Hallo Klaus

> Wenn es mit specialfolderpath() nicht funktioniert, dann wird es auch mit einem relativen Pfad nciht funktionieren.

Ich habe mein Programm nun auf meinem „alten“ Handy installiert, auf dem ich Root-Zugriff habe.
Da konnte ich jetzt sehen, wo die Dateien eigentlich liegen.
Dein ursprünglicher Tipp mit specialfolderpath(„resources“) ist erst einmal richtig.
Damit kommt man zur base.apk:
data/app/com.Firma.App-X/base.apk
(X ist eine Nummer, auf meinem alten mit Android 5 die 1, auf meinem neuen Handy mit Android 8.1 lang und kryptisch und nach jeder Installation etwas anders…)
Der von mir beim Erzeugen mit angegebene Ordner data befindet sich interessanterweise in dem Unterordner assets !
Der vollständige Pfad bei Android lautet also:
data/app/com.Firma.App-X/base.apk/assets/data

So lautet mein Code dazu:

   put "file:" & specialFolderPath("resources") into SpecialPfad
   if the environment is "mobile" then
      put SpecialPfad & "/assets" into SpecialPfad
   end if
   if Eingabe <> empty then
      put SpecialPfad & "/data/" & Eingabe & ".htm" into EingabePfad
   else
      put SpecialPfad & "/data/" into EingabePfad
   end if

Aber leider funktioniert die HTM-Anzeige auch damit nicht 🙁
Eventuell könnte es daran liegen, dass base.apk auf im Explorer unter Android erst geöffnet werden muss, bis man die Unterordner einsehen kann.
Zum anderen irritieren mich die /// nach file, die in der Fehlermeldung vom Widget Browser angezeigt werden:
„Die Webseite unter
file:///data/app/com.Firma.App-1/base.apk/assets/data/test.htm konnte nicht geladen werden, weil:
nett::ERR_FILE_NOT_FOUND“
Die /// müssen vom Widget Browser ergänzt werden !?!

> Da die Datei aber ja auch unter Android offensichtlich gefunden wird, lies sie doch mal in eine Variable ein und setze den HTMLTEXT des Widgets auf diese Variable. Könnte als Workaround erst mal funktionieren.

Ok, werde ich versuchen.

>> put specialfolderpath(„resources“) & „/data“ into tFolder
>> answer files(tFolder)
>> …
>> Da öffnet sich komischerweise ein Datei-Oeffnen-Dialog !?!

> Nein, das ist kein „Datei öffnen“ Dialog, bitte ganu hinsehen!
> Das ist nur ein ANSWER Dialog mit einer Menge Zeilen, nämlich die Dateien in dem Ordner.
> Da kannst Du klicken, bis Du schwarz wirst, es öfnet sich nichts ?

Sorry, ich bin zwar ein Livecode-Anfänger, aber ich kann ein Oeffnen-Dialog von einem Message-Fenster unterscheiden. Ich habe mich ja auch sehr darüber gewundert !

So long,

Thorsten

[Thorsten]

So sieht es aus, wenn ich answer files(tFolder) auslöse:

https://www.dropbox.com/s/bnht5tflszbfb3x/Livecode.png?dl=0

Thorsten

[Thorsten]

Hi Klaus

> … und setze den HTMLTEXT des Widgets auf diese Variable.

Sorry, wie mache ich das ?

Danke, Thorsten

[Klaus Major]

Ah, verstehe, sorry, sieht hier genau so aus!
Hatte ich aber ganz anders gemeint, siehe unten 😀

Hier überschneiden sich offensichtlich zwei Sachen:
1. Der Datei-Oeffnen Dialog: answer file(s)…
2. Die FILES Funktion, die eigentlich den Inhalt des mitgelieferten Ordners liefern soll.

Und ganz offensichtlich gewinnt hier die Nummer 1! 😀

Ich hatte es so angedacht und mit obigem Verhalten überhaupt nicht gerechnet:

...
put specialfolderpath("resources") & "/data" into tFolder
put files(tFolder) into tFiles
answer tFiles
...

Diese Zeilen liefern Dir den Answer-Dialog mit allen Dateien, wie ich es ursprünglich gemeint hatte.

[Klaus Major]

Hi Klaus
> … und setze den HTMLTEXT des Widgets auf diese Variable.
Sorry, wie mache ich das ?

Da ist Dir bereits bekannt! 😎

1. Weiter oben holst Du Deine HTM Datei ja bereits in ein Feld.
Wie man das in eine Variable statt des Feldes packt sollte auch klar sein.
Schritt 2 geht aber sowohl mit einer Variablen als auch mit einem Feld!

2. Das hatten wir bereits:
https://www.livecode-blog.de/forums/topic/htm-dateien-anzeigen/
Capisce?

[Thorsten]

Hi Klaus

> Ah, verstehe, sorry, sieht hier genau so aus!

Ich war schon sehr am an mir zweifeln…

> Hier überschneiden sich offensichtlich zwei Sachen:
> 1. Der Datei-Oeffnen Dialog: answer file(s)…
> 2. Die FILES Funktion, die eigentlich den Inhalt des mitgelieferten Ordners liefern soll.
> Und ganz offensichtlich gewinnt hier die Nummer 1! ?

Danke für die Info !

> Diese Zeilen liefern Dir den Answer-Dialog mit allen Dateien, wie ich es ursprünglich gemeint hatte.
> put files(tFolder) into tFiles

Leider wird da bei mir ein Fehler angezeigt (Function bad form) near „)“, char 14…

So long,

Thorsten

[Thorsten]

Hallo Klaus

> Da ist Dir bereits bekannt! ?

Stimmt, danke für die Erinnerung !

Und Dein Workaround funktioniert 🙂

Aber leider nur leidlich.
Das Ergebnis sieht auf dem Handy (nicht in Livecode am PC !) so aus, wie in diesem Beispiel:

Zeichenkodierungen im Griff

Ich könnte den Text natürlich konvertieren, wie dort beschrieben, aber damit verliere ich alle Formatierungen und Links, wie dort auch gut zu sehen ist…
Die externen Links funktionieren natürlich mit dieser Methode nicht, aber immerhin die internen.

Es ist doch zum Mäusemelken…

Update: Wenn ich es mit Livecode 9.0.2 kompiliere, werden auch die Sonderzeichen korrekt angezeigt – Yuhu 🙂

You made my day, thx !!!

Gute Nacht,

Thorsten

[Klaus Major]

Was für ein Glück für die Mäuse! 😀
Freut mich, daß es nun klappt!

Und ja, Textcodierung ist wieder ein anderes Kapitel.
Wo kommen die HTM Dateien denn her? Selber erstellt?

> Diese Zeilen liefern Dir den Answer-Dialog mit allen Dateien, wie ich es ursprünglich gemeint hatte.
> put files(tFolder) into tFiles
Leider wird da bei mir ein Fehler angezeigt (Function bad form) near „)“, char 14…

Dieses neue Feature, „files()“ als Funktion zu nutzen, gibt es erst seit LC 8.1!
Vielleicht liegt/lag es daran? Wenn nciht, bitte mal das genaue Skript hier posten, danke.

[Klaus Major]

Neue Erkenntnis: Klammern helfen! 🙂
Das klappt wie erwartet:

...
answer (files(tFolder))
...

[Thorsten]

Hallo Klaus

> Wo kommen die HTM Dateien denn her? Selber erstellt?

Ja, mit folgendem Aufbau:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border=0><tr><td><font face=arial size=3>
<a name="top">
<b>ÜBERSCHRIFT 1</b><br>
<b>Überschrift</b><br>
<a href="#kapitel1">Kapitel 1</a>  
<a href="#kapitel2">Kapitel 2</a>  
etc.<br>
<br>
Text<br>
<br>
<a name="kapitel1"></a><a href="#top"><b>Kapitel 1</b></a><br>
Text<br>
<br>
<a name="kapitel2"></a><a href="#top"><b>Kapitel 2</b></a><br>
Text<br>
<br>
</font></td></tr></table>
</body>
</html>

> Dieses neue Feature, „files()“ als Funktion zu nutzen, gibt es erst seit LC 8.1!
> Vielleicht liegt/lag es daran?

Nein, als Livecode-Anfänger bin ich bei 8.1 eingestiegen und bin jetzt der Zeichenkodierung wegen rasant zu 9.0.2 aufgestiegen 😉

> Neue Erkenntnis: Klammern helfen! ?
> Das klappt wie erwartet:
> answer (files(tFolder))

Danke !

[Klaus Major]

Hm, das Brwoser Widget sollte aber so smart sein und die angegebene Textkodierung nutzen, also ISO-xxxxx in Deinem Fall. Zur Not mal auf UTF-8 „umschreiben“.

[Thorsten]

> Hm, das Brwoser Widget sollte aber so smart sein und die angegebene Textkodierung nutzen, also ISO-xxxxx in Deinem Fall. Zur Not mal auf UTF-8 „umschreiben“.

Ok, die Dateien (über 1200) habe ich aber schon und die Kodierung scheint mir auch nicht das Problem zu sein (zumindest mit LC 9.0.2).

[Klaus Major]

Ach so, sorry, habe wohl etwas den Überblick hier verloren… 🙂
Was ist denn (noch) das Problem?

[Thorsten]

> Was ist denn (noch) das Problem?

Das Problem ist, dass über diesen Workaround (der Inhalt einer HTM-Datei wird in ein Field geladen und darüber dem Widget Browser übergeben, der ihn anzeigt) die Verlinkungen der Dateien untereinander nicht mehr funktionieren.
Eine Überlegung von mir ist, die HTM-Dateien (am besten über die App) in ein externes Verzeichnis auf dem Handy zu exportieren und sie dann von dort aus anzuzeigen.
Das ist aber auch nicht optimal, wenn man z.B. lizenzpflichtige Dateien anzeigen lassen möchte…

Aber fürs Erste bin ich mit dem Workaround zufrieden, Danke noch mal !

Thorsten

[Autor]

Beiträge