Johannes Behrndt
2. Juli 2013

Erster Einstieg in jQuery Mobile – das erste Hello World

Fotolia_115308495_XL_mismo

Dieser Beitrag soll einen kurzen Einblick in jQuery Mobile bieten. Es wird eine mobile Webseite mit einem einfachen Hello World entstehen.

Die Entwicklungsumgebung

Für die ersten Übungen reicht ein einfacher Texteditor wie z.B. Notepd++.
Da es sich um Webapps handelt, lassen sie sich ohne Probleme im eigenen Webbrowser öffnen.
Zum Debuggen des Javascript Codes ist es von Vorteil die Entwicklertools ihres Browers zu installieren.
Google Chrome hat diese von Haus aus integriert. Sie können sich die Entwicklertools über Shift+Strg I aufrufen.

E-Book App-Entwicklung

E-Book: App-Entwicklung

In diesem E-Book erhalten Sie eine Übersicht über die Entwicklung von Enterprise-Apps mit SAPUI5 und OData.

Die Komponenten

Für den Einstieg in jQuery Mobile ist es erst einmal wichtig die verschiedenen Bestandteile einer mobilen App zu kennen.
Die meisten Mobilen Webseiten arbeiten mit drei Komponenten: dem Header, dem Content und dem Footer.

jQuery Mobile

Im Header findet sich z.B. die Überschrift. Aber auch die Navigationselemente können darin angezeigt werden.

Einstieg in jQuery Mobile – das erste Hello World

Zum Einstieg wollen wir nun die obligatorische Hello World App zusammen erstellen.
Erstellen sie eine neue Datei namens helloWorld.html und öffnen sie die Datei in einem beliebigen Texteditor.
Da es sich bei der App um eine HTML 5 App handelt, setzten wir den DOCTYPE mit dem Befehl <!DOCTYPE html> auf HTML.

Bei der Arbeit mit dem jQuery Mobile Framework, muss als Erstes das jQuery und das jQuery Mobile Framework mitsamt seinem CSS  eingebunden werden. Hierzu erstellen sie ein <head> Bereich direkt hinter dem DOCTYPE.

  <head>

    <title>Workshop Bestandtteile einer jQuery Mobile Seite</title>

                <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css” />

                <script src=”http://code.jquery.com/jquery-1.5.2.min.js”></script>

                <script src=”http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js”></script>

  </head>

Nachdem sie den head eingefügt haben, fügen sie noch den anderen Code gemäß des Screenshots ein.

jQuery Mobile

Speichern und testen sie ihre App, indem sie die html Datei in ihrem Webbrowser aufrufen.

Sie haben nun ihre erste jQuery Mobile Webseite gebaut. jQuery kümmert sich über Stylesheet komplett um die Darstellungsoptionen.

Im Quellcode in Zeile 11, 14 und 17 sehen sie die Anweisung für unsere drei bekannten Komponenten.

Da jQuery in der Lage ist mehrere HTML Seiten in einem einzelnen Dokument zu halten, ist es notwendig um die eigentliche HTML Seite einen section block zu definieren  (Zeile 10-20).

In unserm Contentbereich haben wir unsere einfache Ausgabe <p>Hello World</p> hinzugefügt.

Damit ist unsere erste App fertig. Noch ist sie nicht wirklich spektakulär, aber zeigt schon gut den einfachen Aufbau einer App mittels jQuery Mobile.

Johannes Behrndt

Johannes Behrndt

Seit über 10 Jahren berate ich große und mittelständische Unternehmen rund um mobile Lösungen, insbesondere im SAP-Umfeld. Ich habe den Überblick über die relevanten SAP-Prozesse und kenne die neuesten Technologien für mobile Lösungen.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren

Im ersten Blogeintrag zu jQueryMobile haben wir bereits eine erste App erstellt. Nun wollen wir uns mit der Navigation innerhalb der App beschäftigen.

weiterlesen

Bei der Application Class handelt es sich um eine ABAP Objects Klasse, welche die Logik der Applikation implementiert. Diese wird in den Application Settings des Neptune Application Designers festgelegt und […]

weiterlesen

Was verbinden Sie eigentlich mit der digitalen Transformation? Diese neue Ära ist das Steckenpferd der SAP. Der Marktführer für Unternehmenssoftware bietet eine breite Palette an Technologien für mobile Apps. 

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Kontaktieren Sie uns!
Sophie Weber
Sophie Weber Kundenservice