78. Mit Javascript eigene Apps für Ihr Smartphone  schreiben am Beispiel eines Haushaltsstellenfinders


Inhaltsangabe
Einleitung
Javascript zum Aufrufen einer Haushaltsstelle vom offenen Bundeshaushalt
Funktionsweise des Javascripts
Quellcode
Erklärung
Durch I-Frame Suchfeld beibehalten
Fazit


Einleitung

Der Sternenhimmelstuermer besitzt ein Phone 7 und da ist der Marketplace in Bezug auf nützliche Applikationen naturgemäß in der Anfangsphase ziemlich mau. Also extra eine neue Programmiersprache lernen? Nein, ein paar Zeilen Javascript reichen aus.

In einer Webbasierten Welt gibt es tausende von Spielen oder nützlichen Anwendungen, die auf html und Javascript basieren. Um so erstaunlicher ist es, dass sämtliche großen Anbieter von Android über I-Phone hauptsächlich  auf C++ basierte Applikationen setzen, während die Verwendung von Javascript auf dem Handy eher stiefmütterlich behandelt wird - ein gravierender Fehler!

Die Microsoft Corporation setzte z. B. bei den allseits beliebten Gadgets auf dem Desktop auf Javascript - mit dem Erfolg, dass tausende Gadgets von ambitionierten Usern bestehen. Dieses Konzept wurde lobenswert ansatzweise  auf das Phone 7  übertragen, so dass die Microsoft Corperation in dieser Disziplin eher zweigleisig fährt und das Phone 7 ein ziemlich positives "Alleinstellungsmerkmal" besitzt - das Anpinnen von Webseiten auf der Startseite in Phone 7 als gleichberechtigte Kachel. Der integrierte Browser vom Phone 7 startet sämtliche Javascripts zufriedenstellend und so ist  ein schneller Zugang zu "JavascriptonlineApps" möglich.

Wenn die Microsoft Cooperation noch eine Möglichkeit zum Speichern der Internetseiten auf dem Handy und einen limitierten Befehlssatz zur Steuerung von Funktionen des Phone 7  und Javascript-Bibliotheken zur Verfügung stellen würde, so wäre das Phone 7 wirklich einzigartig und nicht nur einige läppische tausend Anwendungen, sondern eine Million Anwendungen wären realistisch.

Wie dem auch sei, der Weg ist nach wie vor offen und ermöglicht zumindest beim Phone 7 adäquate Anwendungen in einem individuellen Design. Es ist nämlich möglich, beliebige Webseiten aus dem Internetexplorer auf der Eingangsseite anzupinnen. Die Kachel bietet ein Miniaturabbild der Webseite. Beim Anklicken öffnet sich die Webseite - in diesem Fall ein kleines Javascript vom Sternenhimmelstuermer, mit dem man durch Eingabe der Haushaltsstellennummer auf die passende Seite Offener Bundeshaushalt weitergeleitet wird und so sehen kann, wo so das Geld der Steuerzahler verbraten wird.


Javascript zum Aufrufen einer Haushaltsstelle vom offenen Bundeshaushalt

Hier erstmal das eingebettete Javascript und hinterher die Erklärung:

Bitte geben Sie ohne Trennzeichen die Haushaltsstelle so weit bekannt ein (Einzelplan: mit zwei Stellen; Einzelplan und Kapitelnummer: 4 Stellen; Einzelplan, Haushaltsstelle und Titelnummer mit 9 Stellen und Bindestrich mit folgenden drei Nummern):

Geben Sie als Nichtprofi von Haushaltsnummern zur Probe die 3006 ein. Die Nummer setzt sich aus der 30 - Der Identnummer für den Einzelplan des Bundesministeriums für Bildung und Forschung und der 06, die für die Abteilung Information und Kommunikation steht, zusammen. Danach bestätigen Sie mit Haushaltsstellensuche.

Dieses ist natürlich mit der Einzelplannummer allein oder wie oben Einzelplan und Kapitelnummer oder der vollständigen Nummer möglich...

Falls Sie Interesse an mehr Informationen über den Haushaltsplan haben, so lesen Sie sich diese Abhandlung im Rechtskanal dieser Homepage durch.


Funktionsweise des Javascripts

Die Seite vom offenen Bundeshaushalt ist sehr userfreundlich gestaltet. Nicht nur die grafische Darstellung, sondern auch die einzelnen Webseiten mit der jeweiligen Web-Adresse der passenden Haushaltsstelle sind ein liebevolles Detail, dass vielen Usern entgeht. So heißt die o. a. Probeseite, die Sie mit 3006 aufrufen, dementsprechend auch http://bund.offenerhaushalt.de/3006.html.

Daran dockt der Sternenhimmelstuermer an, indem er durch eine Eingabe eines Users die Webadresse die jeweilige Nummer  einfach ergänzt und per Javascript die neue Seite aufrufen lässt.

Schauen Sie sich doch einmal den Quellcode an:



Quellcode 

<div><script type='text/javascript'> <!--
function titelfinder( ) {
location.href="http://bund.offenerhaushalt.de/" + document.nummer.haushaltsstellennummer.value + ".html";
}
//-->
</script>
<form name="nummer" action="javascript:titelfinder();">
Bitte geben Sie ohne Trennzeichen die Haushaltsstelle so weit bekannt ein (Einzelplan: mit zwei Stellen; Einzelplan und
Kapitelnummer: 4 Stellen; Einzelplan, Haushaltsstelle und Titelnummer mit 9 Stellen und Bindestrich mit folgenden drei Nummern):
<input type="text" name="haushaltsstellennummer" size="15">
<input type="button" value="Haushaltsstellensuche" onclick="titelfinder()" name="button">
</form>
</div>

Und nun eine kleine Erklärung:

Das vollständige Javascript  steht im Body der HTML-Seite - eine Variante, die übersichtlicher ist!
Mit den beiden <div> </div> wird ein begrenzter Bereich erzeugt.

Das Javascript an sich beträgt gerade mal sechs kurze Zeilen - mehr kriegt der Sternenhimmelstuermer auch nicht auf die Reihe -:)
Der Einleitungssatz und die Endzeile <script> bis </script> sind ziemlich obligatorisch.
function titelfinder() - Der Titel der function  ....() ist so ziemlich egal, muss aber dann auch so weiter verwendet werden.

location.href ist die Einleitungsformel für den zu erstellenden Link - der ist gleich (=) der zusammengesetzten Teile "erster Teil der Internetadresse einschließlich dem Slash" . Das ganze wird dann addiert (+) mit dem erstellten document - Unterabteilung nummer (Das ist der Form-Name) - Unterabteilung haushaltsstellennummer (Das ist der Name des Eingabefeldes mit unserer 3006..) - Unterabteilung value (Das ist die 3006..oder eben jede andere beliebige Eingabenummer). Das Ganze wird nach Javascriptkonvention mit Punkten abgetrennt...

Am Ende wird ".html" hinzugefügt. Der erste und letzte Teil dieser Zeile sind feste Bestandteile, die immer in Anführungszeichen stehen müssen, während der Mittelteil  der durch Punkte gegliederte Pfad zur Eingabe (input) des HTML-Dokumentes ist - einer Variablen. Dieses wird eben nicht in Anführungszeichen gesetzt. Javascriptkundige mögen mir meine unkonventionelle Ausdrucksart verzeihen, aber die Hauptsache ist doch, die funktionsweise irgendwie für normalsterbliche verständlich zu beschreiben...

<form name="nummer" action="javascript:titelfinder();"> ist die für die Adressierung (siehe oben document.nummer) und die Aktion wichtig, die nach der Bestätigung der Eingabe passiert. Nämlich der Start des Javascripts, sobald im Input-Feld ein Value (Wert: z. B. 3006 eingetragen wurde.

Danach wird der Erklärungstext  eingegeben. Alles in einer Form (mit Namen "nummer"). Der Vorteil dieser Methode ist, dass Sie Schrift und Eingabefeld in einer Reihe haben - das wirkt optisch harmonisch..

<input type="text" name="haushaltsstellennummer" size="15"> ist die Definition der Eingabezeile mit einer größe von 15, Die haushaltsstellennummer ist unser Value (Wert), die ein "Textwert" ist.
 
<input type="button" value="Haushaltsstellensuche" onclick="titelfinder()" name="button">ist schließlich die Definition des Eingabe-Buttons. Haushaltsstellensuche ist der Aufdruck des Buttons. Bei einem Anklicken (onclick) startet unser Javascript titelfinder().

Bei den ganzen Aktionen ist immer Groß und Kleinschreibung zu beachten Haushaltsstellensuche ist etwas ganz anderes als Haushaltsstellensuche...

Durch I-Frame Suchfeld beibehalten

Der Sternenimmelstuermer wurde gefragt, ob es möglich ist, auch das Suchfeld nicht zu verlieren, da automatisch die neue Seite gegen die alte Seite ausgetauscht wird.

Zur Lösung greift der Sternenhimmelstuermer auf einen Kniff zurück der bei vielen Gadgets praktiziert wird: mit einem I-Frame.

Das Problem ist, das es nicht wirklich möglich ist, die herkömmliche Adressierung mit _blank zur realisieren, also muss hier ein parent herhalten. Zur Erklärung erst einmal der modifizierte Code:

<html>
                                     <head>
                                      <meta name="generator" content="HTML Studio">
                                      <title> </title>
                                     </head>
                                     <body>

<div><script type='text/javascript'> <!--
function titelfinder( ) {
parent["tippseite_in_a_box"].location.href="http://bund.offenerhaushalt.de/" + document.nummer.haushaltsstellennummer.value + ".html";
}
//-->
</script>
<form name="nummer" action="javascript:titelfinder();">
Bitte geben Sie ohne Trennzeichen die Haushaltsstelle so weit bekannt ein (Einzelplan: mit zwei Stellen; Einzelplan und
Kapitelnummer: 4 Stellen; Einzelplan, Haushaltsstelle und Titelnummer mit 9 Stellen und Bindestrich mit folgenden drei Nummern):
<input type="text" name="haushaltsstellennummer" size="15">
<input type="button" value="Haushaltsstellensuche" onclick="titelfinder()" name="button"><br><br><br><br><div><center> <iframe src="http://www.sternenhimmelstuermer.eu/pctipps/app.html" name="tippseite_in_a_box" height="1200" scrolling="auto" width="1200"></iframe><div><center><br><a target="tageskarte_in_a_box" </center></div><br>
<div>
</form>
</div>
<br />
                                     </body>
                                    </html>

Vieles kommt Ihnen bekannt vor, einiges ist neu. Kopieren Sie sich einfach die Textdatei in ein Textdokument und benennen die Dateiendung in htm oder html um.
 
parent["tippseite_in_a_box"].

Im Javascript schaffen wir eine eine eindeutige Anzeigedistanz, die adressierbar ist. Ob Sie die nun tippseite_in_a_box oder wie auch immer nennen ist Egal. Der Rest der Zeile bleibt wie zuvor. Eckige Klammer, Anführungszeichen und Punkt sollten auch so verwendet werden - es funktioniert.

<div><center> <iframe src="http://www.sternenhimmelstuermer.eu/pctipps/app.html" name="tippseite_in_a_box" height="1200" scrolling="auto" width="1200"></iframe><div><center><br><a target="tageskarte_in_a_box" </center></div>

Einen Iframe legt der Sternenhimmelstuermer immer in einem <div> Bereich an. Geschmackssache!
Die erste Seite im Iframe (http://www.sternenhimmelstuermer.eu/pctipps/app.html) muss festgelegt werden. Hier können Sie, auch wenn Sie keine Hompepage besitzen, jede beliebige Webseite einsetzen. Gerne auch die von der Sternenhimmelstuermerhomepage - ist gut für die Seitenstatistik-:)

Denken Sie daran, dass das nicht alle so relaxed wie der Sternenhimmelstuermer sehen und die Seite klein sein sollte, um die Downloadzeit zu reduzieren.

Der Sternenhimmelstuermer sortierte bewußt die Attribute ( name="tippseite_in_a_box" height="1200" scrolling="auto" width="1200">) des Iframes nicht. Die Reihenfolge sollte unerheblich sein...Lediglich der Name des Iframes sollte unmittelbar hinter der Adresse stehen. Dieses ist quasi die Kennungs-ID für den oben behandelten parent - Befehl    

 Danach wird die Höhe und Breite des Iframes in Pixeln festlegen. Das können Sie individuell regeln. Das Anzeigen der Srollleiste des Iframes wird zwar meistens auch ohne den automatischen Scrollbefehl durchgeführt - aber man kann ja nie wissen. Übrigens mit scrolling="no" werden Scrollbalken ausgeschlossen.

I-Frames von fremden Seiten ist in der Regel eine der Todsünden, aber da hier ein User bewußt die APP einsetzt, die er selbst geschrieben hat und somit auch weiß, wer Urheber ist und nicht anderen zugänglich macht, ist das eben nur eine Hilfe und nicht als verwerflich anzusehen!?

Ansonsten sollte selbstverständlich immer eine Anfrage vorausgehen und nicht fremder Code eingebunden werden...





Fazit

Der Sternenhimmelstuermer demonstrierte hier, wie Sie mit einigen Zeilen Javascript eine mehr oder weniger sinnvolle simple App programmieren können und durch einen Upload als Webmaster zur Verfügung stellen könnten. Der Wunsch des Sternenhimmelstuermers ist, dass alle Smartphones von Android bis Phone 7 im eigenen Interesse ihre App-Politik an Webstandards ausrichten - eben an Javascript, welches untrennbar mit dem WEB verbunden ist. Es ist wesentlich sinnvoller eine Sprache zu verwenden und die Möglichkeiten von Datenbanken, PHP und anderen Standards mit Javascript zu benutzen. Der Sternenhimmelstuermer weist in diesem Zusammenhang darauf hin, dass html 5, insbesondere Canvas (nichts anderes als Javascript) die Zukunft ist.

Der Rückfall in höhere Programmiersprache für Apps macht das WEB komplizierter, undurchsichtiger und schließt die nicht zu unterschätzenden Ressourcen der Kreativität der Javascriptfangemeinde aus. Wer hier schlau agiert, der könnte im Handymarkt leicht die Führungsposition übernehmen, aber davon sind die heutigen Apps noch meilenweit entfernt... 



Zur besseren Orientierung auf den über 911  (Din A 4) Tippseiten in Abhandlungen von drei Generationen Windows der Sternenenhimmelstuermerpage die individualisierte Suchmaschine von Google mit Suchergebnissen nur von dieser Homepage: Selbst der Sternenhimmelstuemer findet sich bei diesem umfassenden Content trotz präziser Sortierung der Abhandlungen nur mit Hilfe von Suchmaschinen zu recht...


Loading


Disclaimer: Sie geben bei der Suche Daten ein, deren Verwendung nach den Regeln von Google weiterverwendet werden können. Der Sternenhimmelstuermer hat darauf keinen Einfluss, aber kommt mit diesem Hinweis der Verpflichtung aus dem Datenschutz und Telekommunikationsgesetz nach,  auf diesen Umstand aufmerksam zu machen. Mit der Eingabe eines Suchwortes stimmen Sie dieser Verfahrensweise zu, der Sternenhimmelstuermer kann hierfür nicht haftbar gemacht werden. Der Sternenhimmelstuermer distanziert sich von den Werbeinhalten.


Beim Betätigen dieses Buttons geben Sie Daten an Google weiter über deren Verwendung der Webmaster keinen Einfluss hat. Nach dem Datenschutzgesetz und Telekommunik ist der Webmasterverpflichtet, Sie darauf aufmerksam zu machen - Der Sternenhimmelstuermer traut Google +