Single-Page-Application mit jQuery-Mobile

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Single-Page-Application mit jQuery-Mobile

      In diesem Tutorial dreht sich alles um jQuery-Mobile und eine Single-Page-Application. SPA heißt nichts anderes, als das wir eben nicht wie üblicherweise für jede Seite ein .[lexicon]html[/lexicon] Dokument haben, sondern unsere gesamte Seite in einer einzigen .[lexicon]html[/lexicon] Datei steht - in der index.html.

      Wir erstellen also eine neue App mit [lexicon]Cordova[/lexicon] und gehen dazu wie folgt vor:
      1. [lexicon]Terminal[/lexicon] / [lexicon]Konsole[/lexicon] öffnen und "cd ~/desktop" eingeben
      2. cordova create singlePageApp com.example.com singlePageApp
      3. cd singlePageApp
      4. cordova platform add ios oder/und cordova platform add android
      5. cordova build
      Wir öffnen unser Projekt in Xcode bzw. in Eclipse und räumen zunächst wie immer die index.html auf, damit sie danach ungefähr so aussieht:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="utf-8" />
      5. <meta name="format-detection" content="telephone=no" />
      6. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
      7. <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
      8. <script type="text/javascript" src="cordova.js"></script>
      9. <title>Hello World</title>
      10. </head>
      11. <body>
      12. </body>
      13. </html>
      Alles anzeigen


      Als nächstes laden wir uns jQuery und jQuery-Mobile herunter. Den Download findet ihr hier:
      • jQuery-Download (Darauf achten, dass ihr die uncompressed Version herunterladet. Ist einfacher, hier nachträglich noch Dinge zu bearbeiten als in der compressed Version.)
      • jQuery-Mobile Download (Darauf achten, dass ihr die uncompressed Version herunterladet. Ist einfacher, hier nachträglich noch Dinge zu bearbeiten als in der compressed Version.)
      Fehlt noch die .css Datei von jQuery-Mobile, welche wir ebenfalls herunterladen und in unseren Header einbinden:
      • Quellcode

        1. <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />

      Wer sich mit der ganzen Materie etwas mehr beschäftigt hat und auskennt, der kann sich auch einen Custom-Download zusammenklicken und zwar hier: jQuery-Mobile Custom Download.

      Wir binden nun die beiden .js Dateien wie folgt ein:

      Quellcode

      1. <script src="js/jquery-1.11.1.js"></script>
      2. <script src="js/jquery.mobile-1.4.5.js"></script>


      Als nächstes erstellen wir uns eine Seite in unserem Code die wie folgt aussieht:

      Quellcode

      1. <div data-role="page" id="start">
      2. <div data-role="header">
      3. <h1>Seite 1</h1>
      4. </div>
      5. <div data-role="main" class="ui-content">
      6. <p>Dies ist meine erste Seite</p>
      7. </div>
      8. <div data-role="footer">
      9. <h1><a href="#seite1">Footer Text</a></h1>
      10. </div>
      11. </div>
      Alles anzeigen


      und eine weitere, direkt da drunter die wie folgt aussieht:

      Quellcode

      1. <div data-role="page" id="seite1">
      2. <div data-role="header">
      3. <h1>Seite 2</h1>
      4. </div>
      5. <div data-role="main" class="ui-content">
      6. <p>Zweite Seite</p>
      7. </div>
      8. <div data-role="footer">
      9. <h1><a href="#start">Footer Text</a></h1>
      10. </div>
      11. </div>
      Alles anzeigen


      Und im Groben und Ganzen ist es das dann auch schon gewesen. Wie das Ganze dann aussehen sollte, seht ihr auf den angehängten Bildern. Ich werde das Tutorial in den nächsten Tagen um weitere Informationen ergänzen.
    • Naja, nicht direkt um eine jQuery-Mobile Application, sondern um die Verwendung von JQM in Apps. JqueryMobile ist ein klasse Framework für die Appentwicklung. Es empfiehlt sich meiner Meinung nach aber ein Custom-Download von der jQM Seite ohne das Styling. Denn das macht in meinen Augen vieles kaputt. Da setze ich lieber auf CSS und Grafiken und bastel mir etwas hübsches, als auf das JQM Styling zu setzen.

      Ich werde schauen, wie ich es die Tage schaffe. Aber keine Sorge: Es kommt! :)
    • Da ich [lexicon]Cordova[/lexicon] wohl direkt Anfang Januar benötigen werde für ein größeres Projekt, dachte ich mir mal ich lese mich nochmal ein in das Thema...

      Tammo schrieb:

      [lexicon]cordova[/lexicon] platform add ios oder/und [lexicon]cordova[/lexicon] platform add android


      Den Satz könntest du noch erweitern um "[lexicon]cordova[/lexicon] platform add wp8" für Windows z.B.. (Android, iOS und Windows sind doch die Größten?)

      Tammo schrieb:

      Darauf achten, dass ihr die uncompressed Version herunterladet. Ist einfacher, hier nachträglich noch Dinge zu bearbeiten als in der compressed Version.


      Hab das mal dick unterstrichen, was ich anmerken möchte.
      Man sollte dort NIE etwas ändern, da bei einem Update alles weg ist!
      In dem Fall sollte man eine [lexicon]Erweiterung[/lexicon]/[lexicon]Plugin[/lexicon] für jQuery entwickeln.


      Sonst ist diese kurze Anleitung recht nett.
      Ich meine wer mit [lexicon]Cordova[/lexicon] arbeiten möchte muss eh Javascript und [lexicon]HTML[/lexicon] verstehen und deshalb denke ich, die Schritte oben sind gut erklärt.
      Danke!
    • Das hab ich mir einfach mal eben angeschaut. Schön, dass Du gleich ein ZIP-File angehängt hast.

      Also generell geht es hier ja um eine Single-Page-Application. Dafür benötigst Du (wenn Du Dir sehr viel Arbeit sparen möchtest) ein Framework, welches SPAs unterstützt. Wir haben hierbei explizit auf jQuery-Mobile gesetzt. jQuery-Mobile ist abhängig von jQuery welches deshalb ebenfalls mit eingebunden werden muss. Du hast diese zwar heruntergeladen, allerdings fehlt die Referenz im

      Quellcode

      1. <head></head>
      Bereich.

      Öffne mal Deine index.html und ersetze den gesamten Inhalt mit:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> -->
      5. <!-- <meta name="format-detection" content="telephone=no">
      6. <meta name="msapplication-tap-highlight" content="no"> -->
      7. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
      8. <link rel="stylesheet" type="text/css" href="css/index.css">
      9. <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
      10. <script src="js/jquery-2.1.4.js"></script>
      11. <script src="js/jquery.mobile-1.4.5.js"></script>
      12. <script type="text/javascript" src="cordova.js"></script>
      13. <title>Hello World</title>
      14. </head>
      15. <body>
      16. <div data-role="page" id="start">
      17. <div data-role="header">
      18. <h1>Seite 1</h1>
      19. </div>
      20. <div data-role="main" class="ui-content">
      21. <p>Dies ist meine erste Seite</p>
      22. </div>
      23. <div data-role="footer">
      24. <h1><a href="#seite1">Footer Text</a></h1>
      25. </div>
      26. </div>
      27. <div data-role="page" id="seite1">
      28. <div data-role="header">
      29. <h1>Seite 2</h1>
      30. </div>
      31. <div data-role="main" class="ui-content">
      32. <p>Zweite Seite</p>
      33. </div>
      34. <div data-role="footer">
      35. <h1><a href="#start">Footer Text</a></h1>
      36. </div>
      37. </div>
      38. </body>
      39. </html>
      Alles anzeigen


      Dann funktioniert alles ;)