Share
Möchten Sie lernen, wie Sie PhoneGap verwenden können, wissen jedoch nicht, wo Sie anfangen sollen? Begleiten Sie uns bei der Zusammenstellung von "Sculder", nicht nur eine Hommage an eine exzellente Science-Fiction-Fernsehserie, sondern auch eine vollwertige native mobile Anwendung für den Gläubigen an Sie!
In den letzten beiden Teilen haben wir Phonegap installiert, eine Welt für den guten Ruf geschaffen und dann einen Blick auf die Funktionalität von Phonegap geworfen. In den nächsten beiden Teilen werden wir unsere App erstellen und uns einige der Herausforderungen ansehen, die sich dabei ergeben können.
Bevor wir uns mit Code beschäftigen, müssen wir ein wenig planen. Auf diese Weise wissen wir genau, was wir mit der App erreichen möchten, und können eine gute Vorstellung von der Benutzererfahrung haben. Wenn Sie den Code gleich sofort treffen (etwas, was ich immer wieder mache), können Sie einige großartige Arbeit leisten, aber auch nur ein bisschen Planung im Voraus kann einen langen Weg gehen. Wenn Sie die Szenarien in Ihrem Kopf durchdenken, können Sie Probleme frühzeitig lösen.
Zunächst müssen wir wissen, welche Kernfunktionen der Anwendung sein werden, wie auf sie zugegriffen wird und wie sie verwendet werden. Die App, die wir erstellen werden, verfügt über die folgenden Funktionen:
Wenn Sie für Ihre Projekte Wireframes erstellen möchten, sind sie immer gut dafür, dass Sie wissen, was Ihre Anwendung tun soll, und auch ungefähr so, wie sie aussehen soll. Wenn die Anwendung umfangreich sein wird und über viele Funktionen verfügt, würde ich einige Wireframes ausführen, aber in diesem Fall denke ich, dass die Anwendung klein ist, und wir können die ziemlich grundlegende Funktionalität beim Erstellen der App herausfinden.
Wenn Sie Wireframes erstellen möchten, gibt es einige gute Tools, die Ihnen dabei helfen.
Spottdrossel ist ein Online-Tool, mit dem Sie die Wireframes im Browser erstellen können. Sie können es hier ausprobieren
Balsamiq ist eine Adobe Air-Anwendung mit einer Fülle von Vorlagen und Elementen. Es hat einen skizzenhaften Stil, ähnlich wie Mockingbird. Sie können es hier herunterladen.
Omnigraffle ist eine Mac-only-Anwendung, die Sie hier kostenlos für 14 Tage testen können. Omnigraffle ist mein persönlicher Favorit und Graffletopia enthält viele Vorlagen, die Sie verwenden können.
Look and Feel ist ein wichtiger Aspekt jeder Anwendung. Wenn es um mobile Anwendungen geht, ist dies ein Bereich, in dem sich viele oft irren (meistens aus Unverständnis). Ich bin kein Designer, und ich gebe nicht vor, einer zu sein. Wenn ich also keinen Designer zur Hand habe, entwerfe ich normalerweise nur im Browser, während ich codiere (oder auf dem Gerät in) dieser Fall).
Wenn Sie sicherstellen möchten, dass Ihre App gut aussieht und sich gut anfühlt (und Sie nicht einer sind), mieten Sie eine! Wie ein Entwickler kosten gute Designer Geld. Auch wenn Sie nicht nach etwas suchen möchten, das Sie möglicherweise selbst tun können, ist es am besten, jemanden zu haben, der Design versteht und dies für Sie erledigt. Ihre App wird dafür hundertmal besser sein!
Auf Mobiletuts + gab es einige großartige Design-Tutorials, die Ihnen ein umfassendes Verständnis dafür vermitteln, was erforderlich ist, wenn Sie sich mit Design für Mobilgeräte beschäftigen.
Eine der wichtigsten Überlegungen für Ihr Design ist die Anzahl der verwendeten Bilder. Wenn Sie für Ihr Design PSD-Dateien aufteilen und viele Bilder verwenden müssen - etwas stimmt nicht -, möchten wir so viel wie möglich mit CSS tun. Da wir für ziemlich moderne Browser bauen, können wir die Leistungsfähigkeit vieler nutzen neuere CSS3-Techniken für die gewünschte Ausgabe. Wenn Sie viele Bilder verwenden, wirkt sich dies auf die Leistung der Anwendung aus. Wenn wir Images verwenden müssen, was wahrscheinlich ist, sollten wir ein Sprite (eine Image-Datei, die alle unsere Bilder enthält) erstellen, um HTTP-Anforderungen zu speichern. Es ist auch möglich, Bilder auf dem Gerät zu cachen oder lokalen Speicher zu verwenden.
Jetzt ist es an der Zeit, HTML, CSS und Javascript für unsere Anwendung zu programmieren.
Wir werden mit ein paar einfachen HTML-Codes beginnen.
Sculder
CSS-Unterstützung für Handys ist gut, aber nicht großartig. Während viele gängige Stile unterstützt werden, gibt es auch einige "gotcha's". Caniuse.com ist eine meiner bevorzugten Ressourcen für die Überprüfung des Supports. Während die Website nicht jeden Browser für Mobilgeräte enthält, ist dies eine nützliche Referenz.
Erstellen Sie ein neues leeres Stylesheet und fügen Sie es in den Kopf Ihrer HTML-Datei ein. Richten Sie, wie Sie es vielleicht bereits mit Ihren Desktop-Browser-Apps tun, einige grundlegende Reset-Stile ein.
html, body margin: 0; Polsterung: 0; Grenze: 0; body font-family: Arial, serifenlos; Zeilenhöhe: 1,5; Schriftgröße: 16px; Hintergrund: #fff; Polsterung: 5px; Farbe: # 000; Zeilenumbruch: Break-Word; -webkit-Textgröße anpassen: keine; h1, h2, h3, h4, h5, h6 font-weight: normal; p img float: left; Marge: 0 10px 5px 0; Polsterung: 0; img border: 0; Max-Breite: 100%;
Als Nächstes werden wir einige grundlegende HTML-Elemente hinzufügen - eine Kopfzeile und einige Registerkarten.
Sculder
Zuerst werde ich dem Hintergrund eine Farbe geben und dann die Kopf- und Fußzeile gestalten. Ich werde sie auf eine ziemlich durchschnittliche Art und Weise auslegen, sie am oberen und unteren Rand des Bildschirms befestigen und iScroll verwenden, um den Mangel an Unterstützung zu überwinden Position: feststehend in den meisten Geräten.
/ * Hauptstile * / body background: # 222; header top: 0; links: 0; Höhe: 45px; footer bottom: 0; links: 0; Höhe: 48px; Hintergrundfarbe: # c27b00; Border-Top: 1px fest #eee; Kopfzeile, Fußzeile Hintergrundfarbe: # deb500; Polsterung: 0; Position: absolut; z-Index: 2; Schriftgröße: 20px; Breite: 100%; Text ausrichten: Mitte; Farbe: # f3f3f3; Schriftdicke: fett; Text-Schatten: 0 -1px 0 rgba (0,0,0,0,5); Zeilenhöhe: 45px; h1 Marge: 0; Text-Transformation: Großbuchstaben; #wrapper position: absolut; z-Index: 1; oben: 45px; unten: 48px; links: 0; Breite: 100%; Überlauf: Auto; # main-content position: absolut; z-Index: 1; Breite: 100%; Polsterung: 0;
Als nächstes werden wir iScroll 4 von hier herunterladen und die iscroll-lite.js Datei. Dies gibt uns die grundlegende Funktionalität, die wir benötigen. Wir machen auch eine app.js Datei, um alle unsere JavaScript-Funktionen zu handhaben. Binden Sie diese Dateien in den Kopf Ihres ein index.html.
In unserer Javascript-Datei müssen wir iscroll starten.
Accentsconagua
var theScroll; function scroll () theScroll = neuer iScroll ('Wrapper'); document.addEventListener ('DOMContentLoaded', scroll, false); Jetzt fügen wir unsere Tab-Leiste in unsere Fußzeile ein.
Wir werden unsere Tab-Leiste so gestalten, dass jedes Element ein Drittel des verfügbaren Platzes belegt.
# Tab-Leiste Marge: 0; Polsterung: 0; # tab-bar li display: inline; Schwimmer: links; Breite: 33,333%; # Tab-Leiste a color: #cdcdcd; Bildschirmsperre; Schriftdicke: fett; Überlauf versteckt; Position: relativ; Text ausrichten: Mitte; Textdekoration: keine; -webkit-touch-callout: keine;
All dies ist ein ziemlich durchschnittliches CSS, das Sie möglicherweise auf einer Webseite verwenden. Das Einzige, das Ihnen vielleicht das eine oder andere ist, ist das -Webkit-Touch-Callout: keine. Mit dieser Regel wird die Standardaktion angehalten, wenn ein Benutzer eine Verknüpfung hält.
Das ist alles, was wir mit der Tab-Leiste machen werden, aber Sie möchten vielleicht Symbole hinzufügen, ähnlich wie die meisten Apps. Denken Sie daran, dass Sie Sprites für Ihre Bilder verwenden, um die Leistung auf ein Minimum zu reduzieren.
Jetzt, da wir das Grundgerüst unserer Anwendung bereit haben, können wir durch unsere App blättern. Dafür gibt es eine Reihe guter Möglichkeiten. Zum einen müssen Sie alles im Voraus laden und dann die Seiten ausblenden, die wir zunächst nicht anzeigen möchten. Anschließend können Sie mit einem Klick auf einen Link einen neuen Container mit CSS anzeigen. Eine andere Option ist, Ajax zu verwenden, eine Ajax-Anfrage für eine HTML-Datei zu erstellen und diese dann in die Ansicht zu schieben. Da dies eine relativ kleine Anwendung ist, ist es nicht schaden, alles im Voraus zu laden und CSS für den Großteil der Seitenverarbeitung zu verwenden, ähnlich wie bei jQuery Mobile.
Zuerst werden wir einige Seiten in unserem Hauptcontainer einrichten.
Dann stellen Sie sicher, dass die Links href entspricht diesen.
Jetzt blenden wir alle Seiten aus und zeigen die Seite einfach mit an aktuell Klasse.
#pages> div display: none; #pages> div.current display: block;
Als Nächstes müssen wir uns mit JavaScript beschäftigen. Ich werde weitermachen und jQuery für den Rest des Projekts verwenden (nicht jQuery mobile). Wenn Sie möchten, können Sie den iScroll-Init jQuerifizieren (oder nicht). Stellen Sie sicher, dass Sie die minimierte Version von jQuery auch in Ihrem JS-Verzeichnis ablegen.
Zuerst werde ich einen Klick an die Anker in der Tab-Leiste binden, da wir jQuery 1.7 verwenden, können wir das neue verwenden .auf() Funktion. Wir werden dann die Standardaktion eines Links verhindern, die speichern href des angeklickten Links in a Nächste Seite Variable, entfernen Sie die aktuell Klasse von der aktuellen Seite und fügen Sie schließlich die Klasse zur angeklickten Seite hinzu.
$ ('# tab-bar a'). on ('click', Funktion (e) e.preventDefault (); var nextPage = $ (e.target.hash); $ ("# pages .current"). removeClass ("current"); nextPage.addClass ("current");); Sie haben nun einige grundlegende Seitenwechsel als Inhalt divs wird nun ausgeblendet und angezeigt, wenn auf die Links geklickt wird.
Dies ist und wird absolut in Ordnung sein, aber um das Paging etwas hinzuzufügen, werden wir etwas CSS verwenden und den Übergang zwischen den Seiten mit einem einfachen Ein- und Ausblenden etwas angenehmer gestalten.
Zuerst müssen wir sicherstellen, dass unsere Seiten so positioniert sind, dass wir eine Kontrolle über ihre Anzeige haben. Fügen Sie das folgende CSS hinzu.
#pages position: relativ; / * Diesen Stil aktualisieren * / #pages> div display: none; Position: absolut; oben: 0; links: 0; Breite: 100%;
Jetzt werden wir eine CSS-Animation verwenden, um den Seitenübergang zu animieren. Zuerst beginnen wir mit einigen generischen Einstellungen für die Animationsfunktion und das Timing.
.in, .out -Webkit-Animation-Timing-Funktion: Leichtes Ein- und Aussteigen; -Webkit-Animationsdauer: 400ms;
Wir legen die Keyframes für die Animation der Keyframes fest.
@ -webkit-Keyframes-Einblendung von Deckkraft: 0; bis Deckkraft: 1;
Zuletzt setzen wir den Z-Index, um sicherzustellen, dass die gerade eingeblendete Seite oben ist.
.fade.in -webkit-animation-name: einblenden; z-Index: 5; .fade.out z-index: 0;
Jetzt müssen wir noch etwas JavaScript hinzufügen, um die CSS-Klassen beim Klicken hinzuzufügen und zu entfernen. Zuerst benötigen wir eine Funktion, die einen Parameter übernimmt. Dies ist die Seite, zu der navigiert werden soll. Dann werden die erforderlichen Klassen hinzugefügt, um die neue Seite einzublenden und eine Funktion zu binden webkitAnimationEnd, Dadurch werden die erforderlichen Klassen entfernt. Die Funktion sieht so aus.
Funktionsseite (toPage) var toPage = $ (toPage), fromPage = $ ("# pages.current"); toPage.addClass ("current fade in"). one ("webkitAnimationEnd", function () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("Ausblenden"); Wenn Sie die jQuery-Methode noch nie gesehen haben .ein() Bevor Sie sich die Dokumentation ansehen, können Sie sie nur binden und dann lösen.
Wenn Sie jetzt auf Ihrem Gerät testen, werden Sie feststellen, dass der Link auf die aktuelle Seite ausgeblendet wird. Wir müssen eine ob Anweisung, bevor wir unsere Seitenfunktion ausführen, um sicherzustellen, dass wir uns nicht bereits auf der aktuellen Seite befinden. Wenn dies der Fall ist, können wir die Funktion einfach wieder verlassen.
Funktionsseite (toPage) var toPage = $ (toPage), fromPage = $ ("# pages.current"); if (toPage.hasClass ("current") || toPage === fromPage) return; ; toPage.addClass ("current fade in"). one ("webkitAnimationEnd", function () fromPage.removeClass ("current fade out"); toPage.removeClass ("fade in")); fromPage.addClass ("Ausblenden"); Jetzt können Sie etwas Text in jeden Seitencontainer ablegen und auf einem Gerät testen.
Wir haben jetzt mit dem Aufbau einer Webanwendung begonnen und unser Layout und Paging funktionieren. Im nächsten Teil beginnen wir mit dem Aufbau unserer Seiten, dem Debugging auf dem Handy und der Integration von Phonegap.
