Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 07): iWebKit für den speziellen iOS-Look (3)

Web-Apps erstellen (Teil 07): iWebKit für den speziellen iOS-Look (3)

Eine Web-App besteht natürlich aus deutlich mehr als aus Navigationselementen. Was normalerweise bei keiner App fehlen darf, sind beispielsweise Formulare. Und auch hier greift euch iWebKit wieder helfend unter die Arme. Um die Formulare geht es im ersten Teil dieses Video-Trainings. Anschließend werden dann noch einige spezielle Listenvarianten vorgestellt, die man immer mal wieder in seiner App gebrauchen kann.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Natürlich wollt ihr euren App-Benutzern die Möglichkeit bieten, mit euch ganz bequem Kontakt aufzunehmen. Das geht am einfachsten über ein Formular. Und auch auf diesen Einsatzzweck ist iWebKit bestens vorbereitet. Ich werde euch an dieser Stelle die Formularelemente vorstellen, die iWebKit von Hause aus mitbringt. In diesem Zusammenhang darf aber ein Hinweis nicht fehlen: Selbstverständlich könnt ihr auch eigene Formularelemente definieren, schließlich handelt es sich ja im Endeffekt lediglich um HTML-Seiten.

Zunächst einmal könnt ihr einfache, einzeilige Textfelder definieren. Das geschieht über type="text" des input-Elements. Über das placeholder-Attribut könnt ihr zudem einen vordefinierten Text angeben, der verschwindet, wenn man in das Feld klickt.

Bilder



 
Ebenso einfach lassen sich dann übrigens auch Passwortfelder definieren. Verwendet wird in diesem Fall type="text".

Eine entsprechende Anwendung, bestehend aus Text- und Passwortfeld, könnte folgendermaßen aussehen:
<ul class="pageitem">
<li class="bigfield"><input placeholder="Benutzername" type="text" /></li>
<li class="bigfield">
<input placeholder="Passwort" type="password" /></li>
</ul>

Auch hier begegnen uns übrigens wieder die Listendefinitionen mit der pageitem-Klasse.

Ein weiteres Element, das man in Formularen immer mal wieder benötigt, sind Checkboxen.
<ul class="pageitem">
  <li class="checkbox"><span class="name">Newsletter</span>
  <input name="newsletter" type="checkbox" /> </li>
  <li class="checkbox"><span class="check"><span class="name">Rückruf</span><input name="rueckruf" type="checkbox" />
  </span></li>
</ul>

 
Die Definition entspricht dabei dem, was ihr von herkömmlichen HTML-Webseiten gewohnt seid.

Bilder



 
Ähnlich verhält es sich auch bei Radiobuttons.

Bilder



Diese lassen sich in iWebKit ebenso einfach definieren. Damit von einer Gruppe Radiobuttons tatsächlich jeweils nur eines ausgewählt werden kann, muss allen Buttons derselbe name-Wert zugewiesen werden.
<ul class="pageitem">
    <li class="radiobutton"><span class="name">Joomla!</span>
      <input name="cms" type="radio" value="joomla" />
    </li>
    <li class="radiobutton"><span class="name">TYPO3</span>
      <input name="cms" type="radio" value="typo3" />
    </li>
    <li class="radiobutton"><span class="name">WordPress</span>
      <input name="cms" type="radio" value="wordpress" />
    </li>
  </ul>

 
Ebenfalls definieren lassen sich mehrzeilige Eingabefelder.

Bilder



Verwendet wird dafür das textarea-Element.
<ul class="pageitem">
 <li class="textbox"><span class="header">Text einfügen</span><textarea name="nachricht" rows="4"></textarea></li>
</ul>

 
Und zu guter Letzt könnt ihr auch noch Auswahllisten definieren.

Bilder



 
Diese spielen bei Web-Apps eine besondere Rolle, da man darüber äußerst platzsparend Auswahlmöglichkeiten präsentieren kann. Definiert werden Auswahllisten so, wie ihr das aus HTML kennt.
<ul class="pageitem">
    <li class="select">
      <select name="cms">
        <option value="1">CMS</option>
        <option value="2">Contao</option>
        <option value="3">Joomla!</option>
        <option value="4">TYPO3</option>
        <option value="4">Drupal</option>
        <option value="4">WordPress</option>
      </select>
      <span class="arrow"></span> </li>
    <li class="select">
      <select name="sprache">
        <option value="1">HTML</option>
        <option value="2">CSS</option>
        <option value="3">JavaScript</option>
      </select>
      <span class="arrow"></span> </li>
  </ul>

Damit die Formularinhalte dann auch tatsächlich verschickt werden können, müsst ihr selbstverständlich noch einen Submit-Button definieren.
<li class="button">
<input name="senden" type="submit" value="Senden" /></li>

Und mehr ist tatsächlich nicht nötig, um mit iWebKit Formulare zu erstellen.


 

Ausgefeilte Listen einsetzen

Ihr wisst längst um die Bedeutung von Listen in Web-Apps und auch in iWebKit. Das Besondere an iWebKit ist nun allerdings, dass euch hier ganz unterschiedliche Arten an Listen mitgegeben werden, die ihr ganz einfach in eurer App verwenden könnt.

Da wäre zunächst die Variante mit den Sternen.

Bilder



Das ist natürlich ideal, um Bewertungen visuell ansprechend darzustellen. Und in der Tat lässt sich das in iWebKit denkbar einfach umsetzen. Entscheidend sind dabei nämlich lediglich die Klassen, die man einem leeren span-Element zuweist.

Die Bewertungsskala reicht von einem bis zu fünf Sternen. Um die Sterne entsprechend abzugeben, könnt ihr die Klassen stars1, stars2 usw. verwenden. Wollt ihr also eine Bewertung mit vier Sternen vergeben, sähe das folgendermaßen aus:
<span class="stars4"></span>

 
Auf diese Weise könnt ihr also euer ganz persönliches Bewertungssystem aufbauen.
<li class="store">
   <a class="noeffect" href="http://itunes.apple.com/us/app/id347706408?mt=8">
   <span class="image" style="background-image: url('http://a1.phobos.apple.com/us/r1000/011/Purple/25/16/47/mzl.nzqzbqjg.100x100-75.jpg')">
   </span><span class="comment">Games</span><span class="name">Spore 
   Creatures</span><span class="stars4"></span><span class="starcomment">160 
   Ratings</span><span class="arrow"></span><span class="price">$6.99</span></a></li>
<li>

Ähnlich einfach lässt sich auch die bekannte iTunes-Listenansicht definieren. Entscheidend sind dabei dann zwei Dinge:

• die Ziffern am Anfang
• die Laufzeit

Beides lässt sich mit iWebKit abbilden.

Bilder



 
Eine entsprechende Anwendung könnt ihr folgendermaßen umsetzen:
<ul>
 <li>
  <a class="noeffect" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?i=80469507&amp;id=275834665">
  <span class="number">1</span><span class="name">Apple Announces iPad</span><span class="time">(1:33:03)</span><span class="arrow"></span></a></li>
  <li>
  <a class="noeffect" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?i=59936574&amp;id=275834665">
  <span class="number">2</span><span class="name">Apple Special Event,
  September 2009</span> <span class="time">(1:14:19)</span><span class="arrow"></span></a></li>
 …
 </ul>


Die Funktionen des Smartphones nutzen

Mit iWebKit besteht auch die Möglichkeit, einige Funktionen der Smartphones zu nutzen. So könnt ihr beispielsweise die E-Mail- und die Telefonfunktionen verwenden.

Zunächst ein Beispiel für den Zugriff auf die E-Mail-Funktion.
<a class="noeffect" href="mailto:kontakt@psd-tutorials.de?cc=kontakt@medienwerke.de &amp;subject=Neue Tutorials bei PSD-Tutorials.de&amp;body=Aktuell findest Du wieder zahlreiche Tutorials bei uns.">
<img alt="mail" src="thumbs/mail.png" /><span class="name">Mail</span><span class="arrow"></span></a>

Prinzipiell definiert man hier einfach einen normalen mailto-Link. Als Parameter können die Empfänger, ein Betreff und sogar der Inhalt angegeben werden. Wenn ihr das Ganze noch mit einem hübschen E-Mail-Icon ausstatten wollt, könnt ihr die Grafik mail.png aus dem thumbs-Verzeichnis des Frameworks verwenden.

Ähnlich einfach gestaltet sich der Zugriff auf die Telefonfunktion. Klickt bzw. tippt ein Anwender auf einen so definierten Hyperlink, wird automatisch das Telefon geöffnet. Damit das funktioniert, weist ihr dem href-Attribut als Wert tel:, gefolgt von der entsprechenden Telefonnummer, zu.
<a class="noeffect" href="tel:408-555-5555">
<img alt="telephone" src="thumbs/telephone.png" /><span class="name">Jetzt anrufen</span><span class="arrow"></span></a>

Ihr könnt dann übrigens auch die SMS-Funktion aufrufen. Allerdings muss hier dann als Verweisziel sms:, gefolgt von der Telefonnummer, notiert werden.
<a class="noeffect" href="sms:12125551212">
<img alt="sms" src="thumbs/messages.png" /><span class="name">SMS</span><span class="comment">Nur am iPhone</span><span class="arrow"></span></a>

Wird das dann angetippt/angeklickt, öffnet sich das entsprechende Nachrichtenfenster. Das soll es an dieser Stellt mit iWebkit gewesen sein. Ihr habt die Grundfunktionalität kennengelernt und könnt darauf aufbauend eure ganz persönliche App realisieren. War es das denn dann auch mit dieser Reihe? Mitnichten! In den nächsten Tutorials wird deutlich tiefer in die App-Entwicklung eingestiegen, da geht es dann nämlich mit jQuery mobile weiter. Und dieses Framework bietet euch noch mal deutlich mehr Möglichkeiten.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Blade020
  • 16.10.2016 - 15:15

Herzlichen Dank für das Video.

Portrait von _soli_patient_
Portrait von MicroSmurf
  • 16.06.2014 - 11:39

Danke. Interessant wie immer.

Portrait von Steve007
  • 15.06.2014 - 21:13

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Caesarion2004
  • 15.06.2014 - 18:02

Vielen Dank für das gute Tutorial und die Dateien. Sehr hilfreich.

Portrait von Domingo
  • 15.06.2014 - 16:47

Danke für diesen tollen Beitrag.

Portrait von teste123
  • 15.06.2014 - 16:28

Vielen Dank für den nächsten Teil, klasse! :)
MfG

Portrait von patti-hd
  • 15.06.2014 - 16:00

Sehr schön erklärt. Vielen Dank auch dafür!

Portrait von johen
  • 15.06.2014 - 15:34

...schönes Tutorial vielen dank. ;-)

Portrait von Kundentest
  • 15.06.2014 - 15:17

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 15.06.2014 - 15:02

Vielen Dank für den nächsten Teil, klasse! :)

Portrait von Kundentest
  • 14.06.2014 - 17:50

Herzlichen Dank für das Video.

Portrait von Caesarion2004
  • 18.05.2014 - 11:04

Vielen Dank für das informative Tutorial und die Materialien.

x
×
×