Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 15): JSON-Inhalte laden (1)

Web-Apps erstellen (Teil 15): JSON-Inhalte laden (1)

Bevor es mit der Beschreibung der notwendigen Funktionen losgeht, ein Blick darauf, worum es jetzt eigentlich geht. Es wird in diesem Tutorial eine allgemeine Tutorialseite erstellt. Auf dieser Seite sind kurze Informationen zu den Tutorials enthalten, die angeboten werden.

Bilder



 
Klickt ein Anwender einen der vorhandenen Beschreibungstexte an, wird er zu einer Detailseite umgeleitet, auf der ausführliche Informationen zum betreffenden Tutorial stehen.

Bilder



Eine solche Anwendung wird nun Schritt für Schritt aufgebaut.


Die Übersichtsseite erstellen

Los geht es an dieser Stelle mit der allgemeinen Übersichtsseite. Darauf sind sämtliche Tutorials zu sehen, die angeboten werden. Zunächst die Syntax dieser Datei in voller Pracht, bevor anschließend auf die einzelnen Syntaxbereiche eingegangen wird.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type"content="text/html; charset=utf-8" /> 
<title>psd-tutorials.de</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="tutorials">
  <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" > <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Dieser Text wird nicht angezeigt</a>
    <h1>Unsere Tutorials</h1>
  </div>
  <div data-role="content">
    <ul id="liste" data-role="listview">
    </ul>
  </div>
  <div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="b">
    <div data-role="navbar" data-theme="b">
      <ul>
        <li><a href="about.html" data-icon="info">Über uns</a></li>
        <li><a href="kontakt.html" data-icon="grid">Kontakt</a></li>
        <li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li>
        <li><a href="impressum.html" data-icon="gear">Impressum</a></li>
        <li><a href="#infos" data-icon="gear">Themen</a></li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
$('#tutorials').on("pageshow", function() {
    $('#liste').empty();
    $.getJSON('tutorials.json', function(data) {
       $.each(data.tutorials, function(i,item){
           $('<li><a href="tutorials_detail.html" data-transition="slide" onClick="javascript:sessionStorage.tutorials=\''+item.name+'\';"><img src="images/'+item.bild+'" /><h3>' + item.name + '</h3>' + '<p>' + item.inhalt + '</p></a></li>').appendTo('#liste');
           });
           $('#liste').listview('refresh');
       });
});
</script>
</div>
</body>
</html>

 
Los geht es mit der allgemeinen Seiten-ID.
<div data-role="page" id="tutorials">

Direkt dahinter wird der Kopfbereich definiert.
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" > <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext">Dieser Text wird nicht angezeigt</a>
    <h1>Unsere Workshops</h1>
  </div>

Dieser Kopfbereich sorgt in der aktuellen Form für die Anzeige einer Home-Schaltfläche und einer entsprechenden Überschrift.

Bilder



Jetzt muss der Platz geschaffen werden, an dem die eigentlichen Tutorials zu sehen sind. Das wird später innerhalb eines ul-Elements geschehen.
<ul id="liste" data-role="listview">

</ul>

 
Die Liste selbst ist im aktuellen Zustand noch leer. Tatsächlich wird sie später durch die in einer JSON-Datei hinterlegten Informationen mit Inhalten gefüllt.

Bilder



Werden die Inhalte aus der JSON-Datei ausgelesen, sieht die Liste im Endeffekt folgendermaßen aus:
<ul id="liste" data-role="listview">
<li><a href="tutorials1.html">Contao (Teil 1): Das ist Contao</a></li>
<li><a href="tutorials2.html">Contao (Teil 2): Die lokale Installation</a></li>
<li><a href="tutorials3.html">Contao (Teil 3): Das erste Mal im Backend</a></li>
<li><a href="tutorials4.html">Contao (Teil 4): Die wichtigsten Grundeinstellungen vornehmen</a></li>
</ul>

Damit es dazu kommt, muss die JSON-Datei natürlich zunächst angelegt und dann auch entsprechend ausgelesen werden.


 

Die JSON-Datei

Ihr werdet in diesem Tutorial möglicherweise eure erste eigene JSON-Datei anlegen. Da empfiehlt es sich natürlich, zunächst einmal einen kurzen Blick darauf zu werfen, was dieses JSON eigentlich genau ist. Beim JavaScript Object Notation, kurz JSON, handelt es sich um ein spezielles Datenformat.

Bilder



Eine solche Datei könnt ihr in jedem beliebigen Texteditor anlegen. Hier mal ein Beispiel dafür, wie eine JSON-Datei üblicherweise aussieht:
{
  "tutorials": [
  {
   "name": "Contao (Teil 1): Das ist Contao",
      "bild": "tutorials1.gif",
      "inhalt": "TYPO3, Joomla!, WordPress & Co sind Beispiele für wirklich gelungene Content-Management-Systeme auf Open-Source-Basis.",         
      "details": "In den letzten Jahren macht jedoch noch ein anderes CMS mehr und mehr auf sich aufmerksam: Contao. Und eben jenes Contao steht im Mittelpunkt dieser Tutorial-Reihe. In diesem ersten Teil wird zunächst ein Blick darauf geworfen, was es eigentlich mit Contao auf sich hat, welche Eigenschaften das System aufweist und natürlich erfahrt ihr, was euch in dieser Reihe erwartet."
  },
  {
   "name": "Contao (Teil 2): Die lokale Installation",
      "bild": "tutorials2.gif",
      "inhalt": "Ihr seid überzeugt von Contao? Dann kann es jetzt mit der Installation losgehen. ",
      "details": "Beschrieben wird das anhand einer Installation auf dem lokalen Rechner. Vorteil dieser Variante: Man kann Contao ungestört testen. Dieses Tutorial zeigt, welche Installationsvoraussetzungen erfüllt sein müssen, woher ihr die aktuellste Contao-Version bekommt und natürlich, wie sich Contao installieren lässt."   
  },
  {
      "name": "Contao (Teil 3): Das erste Mal im Backend",
      "bild": "tutorials3.gif",
      "inhalt": "Die Installation habt ihr erfolgreich hinter euch gebracht.",                  
      "details": "Jetzt geht es also das erste Mal in den Administrationsbereich, also ins Backend der Seite. In diesem Tutorial lernt ihr die verschiedenen Bereiche des Backends kennen und seht, wie man grundsätzlich in und mit Contao arbeitet."
  },
  {
       "name": "Contao (Teil 4): Die wichtigsten Grundeinstellungen vornehmen",
       "bild": "tutorials4.gif",
       "inhalt": "Bevor die eigentlichen Inhalte im Backend angelegt werden, sollte man Contao bzw. die Webseite konfigurieren.",               
       "details": "Denn nur dann, wenn das tatsächlich im Vorfeld gemacht wird, kann man die Seite später ruhigen Gewissens online stellen. Daher wird in diesem Tutorial die Grundkonfiguration der Seite vorgenommen. Ziel ist es dabei nicht, alle Funktionen einzeln vorzustellen. Vielmehr liefert diese Beschreibung euch einen raschen Überblick darüber, was relevant ist."          
  }
 ]
}

Kurz zur Syntax. Zu jedem Tutorial gibt es die folgenden Informationen:

• Name
• Bild
• Inhalt
• Details

Jedes Tutorial ist dabei in geschweifte Klammern eingeschlossen. Bei den einzelnen Punkten handelt es sich jeweils um Schlüssel-Werte-Paare.
"name": "Contao (Teil 1): Das ist Contao",

Am Anfang jeder Definition steht der Schlüssel. Hinter diesem folgen Anführungszeichen. Daran schließt sich der entsprechende Wert an. Schlüssel und Wert sind jeweils in Anführungszeichen zu setzen. Umschlossen werden sämtliche Tutorial-Einträge von einem allgemeinen tutorials-Eintrag.
{
  "tutorials": [
 …
 ]
}

Ich gehe in der folgenden Beschreibung davon aus, dass eine solche JSON-Datei im selben Verzeichnis wie die eigentlichen App-Dateien liegt.

Und genau das bildet auch die Basis für die weiteren Arbeiten an der App. Denn diese Datei ist es letztendlich, die ihr in die Tutorialseite einbindet. JSON-Dateien erinnern übrigens in ihrer Art durchaus an XML-Anwendungen. Auch wenn sich beide Sprachen unterscheiden, sind sie doch in gewisser Art und Weise miteinander vergleichbar. Ausführliche Informationen zu JSON gibt es beispielsweise unter http://www.json.org/json-de.html.


Die JSON-Datei einlesen

Die JSON-Datei selbst ist natürlich nur dann wirklich etwas wert, wenn deren Inhalte auch genutzt werden können. Dazu muss man die Datei einlesen. Das geschieht in der App an zwei Stellen:

• der allgemeinen Tutorialseite, auf der Kurzinformationen stehen
• einer Seite, auf der die Detailinformationen zu den Tutorials angezeigt werden.

Wie sich die JSON-Datei auslesen lässt, wird dann im nächsten Tutorial gezeigt.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 14:58

Herzlichen Dank für das Video

Portrait von MicroSmurf
  • 07.08.2014 - 16:50

Sehr interessant wie immer. Vielen Dank.

Portrait von Steve007
  • 23.07.2014 - 18:46

Vielen Dank für Deine interessante Tutorial - Reihe.

Portrait von BOPsWelt
  • 20.07.2014 - 16:25

Danke für das Tutorial.

Portrait von Kundentest
  • 20.07.2014 - 10:43

Herzlichen Dank für Tutorial.

Portrait von Caesarion2004
  • 20.07.2014 - 10:42

Vielen Dank für das sehr gute Texttutorial und die DAtei. Sehr informativ.

Portrait von johanna52
  • 20.07.2014 - 10:38

möchte mich hier auch mal für diese ausführliche Tut-Reihe bedanken, wirklich sehr gut und ausführlich.

Portrait von Uwe367
  • 20.07.2014 - 10:01

Super geschrieben. So versteht´s auch der Anfänger :)
Vielen Dank.

Portrait von Kundentest
  • 14.06.2014 - 18:14

Herzlichen Dank für das Video.

Portrait von renate_C
  • 13.06.2014 - 01:00

Besten Dank für das gute Tutorial der Reihe. Verständlich und informativ.

Portrait von Caesarion2004
  • 13.06.2014 - 00:56

Vielen Dank für das weitere, sehr interessante und informative Tutorial.

Portrait von MicroSmurf
  • 12.06.2014 - 22:01

Vielen Dank für den weiteren Teil.

Portrait von johen
  • 12.06.2014 - 19:59

Vielen Dank für das Tutorial.

x
×
×